ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery の 4 つのセレクターの使用法と例
jQuery の 4 つのセレクターの使用法と例
- 巴扎黑オリジナル
- 2017-06-20 16:31:311136ブラウズ
この記事は、jQuery の 4 つのセレクターの使用方法と例をまとめたもので、皆さんが jQuery を学ぶのに役立つことを願っています。
jQuery 要素セレクター
jQuery は CSS セレクターを使用して HTML 要素を選択します。
$("p") は e388a4556c0f65e1904146cc1a846bee 要素を選択します。
$("p.intro") は、class="intro" を持つすべての e388a4556c0f65e1904146cc1a846bee 要素を選択します。
$("p#demo") は、id="demo" を持つすべての e388a4556c0f65e1904146cc1a846bee 要素を選択します。
サンプルコード:
jqueryパート
$(document).ready(function(){//页面加载完成后执行
tagName();
// idName();
// className();
});
function tagName(){
$('p').addClass('heighlight');
}
function idName(){
$('#p').addClass('heighlight2');
}
function className(){
$('p.pClass').addClass('heighlight2');
}htmlパート
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/select.js" ></script>
<link rel="stylesheet" href="css/select.css" />
</head>
<body>
<p id="p">
<p>this is my name!!</p>
<p class="pClass">class is import!</p>
<a href="#">you cai!!</a>
</p>
</body>
</html>cssパート
.heighlight {
background-color: blue;
}
.heighlight2 {
background-color: red;
}
.alt{
background-color:#ccc;
}jQuery 属性セレクター
クエリは XPath 式を使用して要素を選択します指定された属性。
$("[href]") href 属性を持つすべての要素を選択します。
$("[href='#']") href 値が「#」に等しいすべての要素を選択します。
$("[href!='#']") href 値が「#」に等しくないすべての要素を選択します。
$("[href$='.jpg']") href 値が「.jpg」で終わるすべての要素を選択します。
jquery部分、その他の部分は上記と同様です。
jquerycssselector
.AddClass（）または.css（）
| セレクター | インスタンス | Select | |
|---|---|---|---|
| * | $("*") | すべての要素 | |
| #id | $("#lastname") | id=要素「姓」の | |
| .class | $(".intro") | class="intro"を持つすべての要素 | |
| element | $("p") | すべての4b432b2ea446c8cabdc7cf73a0c10ced要素 | |
| $("tr:odd") | すべての奇数a34de1251f0d9fe1e645927f19a896e8 | ||
| :eq(index) | $("ul li:eq(3)") | リストの 4 番目の要素 (インデックスは 0 から始まります) | |
| : gt(no) | $("ul li:gt(3)") | インデックスが 3 より大きい要素をリストする | |
| :lt(no) | $("ul li:lt ( 3)") | インデックスが 3 未満の要素をリストします | |
| :not(selector) | $("input:not(:empty)") | 空ではないすべての入力要素 | |
| :header | $( ":header")すべてのヘッダー要素 4a249f0d628e2318394fd9b75b4636b1 - 4e9ee319e0fa4abc21ff286eeb145ecc | ||
| すべてのアニメーション要素 | |||
| :contains(text) | $(":contains('W3School')") | 指定された文字列のすべての要素が含まれます | |
| :empty | $( ":empty") | 子 (要素) ノードのないすべての要素 | |
| :hidden | $("p:hidden") | すべての非表示の 1a4f898c17f53213e17474f68f4cd70e 要素 | |
| :text | $(":text") | すべてのタイプ= text" の d5fd7aea971a85678ba271703566ebfd 要素 | |
| :password | $(":password") | すべての type="password" d5fd7aea971a85678ba271703566ebfd 要素 | |
| :radio | $(":radio") | type="radio" のすべての d5fd7aea971a85678ba271703566ebfd 要素 | |
| :checkbox | $(":checkbox") | すべての type="checkbox" d5fd7aea971a85678ba271703566ebfd | |
| :submit | $(":submit") | type="submit" のすべての 要素 | |
| :reset | $(":reset" ) | type="reset" のすべての d5fd7aea971a85678ba271703566ebfd 要素 | |
| :button | $(":button") | type="button" のすべての d5fd7aea971a85678ba271703566ebfd 要素 | |
| :image | $(":image") | すべて type="image" d5fd7aea971a85678ba271703566ebfd 要素 | |
| :file | $(":file") | type="file" のすべての d5fd7aea971a85678ba271703566ebfd | |
| :enabled | $(":enabled") | すべてのアクティブ化された入力要素 | |
| :disabled | $(":disabled") | すべての無効化された入力要素 | |
| :selected | $( ":selected") | 選択されたすべての入力要素 | |
| :checked | $(":checked") | 選択されたすべての入力要素 |
以上がjQuery の 4 つのセレクターの使用法と例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。