function f1(){
// $("sel1 sel2")
$("#bread .milk").css("color","red");
// $("sel1 > sel2")
$("#bread > .milk").css('color','red');
//
$("#bread + .milk").css("color",'red');
// prev
//$("prev ~ sibling")
$("#bread ~ .milk").css("color","red");
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2> </h2>
<div id="bread">
<input type="text" value="hello" class="milk">
<span class="milk">world</span>
<div>
<span class="milk">pear</span>
</div>
</div>
<p class="milk">this is p tag</p>
<span class="milk">desk</span>
<div id="apple"><span class="milk"> span</span></div>
<input type="button" value=" " onclick="f1()" />
</body>
3.基本フィルタBasic Filters
名前
説明
例を挙げる
:first
見つかった最初の要素と一致
テーブルの最初の行を検索:$(「tr:first」)
:last
見つかった最後の要素に一致
テーブルの最後の行を検索:$(「tr:last」)
:not(selector)
指定したセレクタに一致するすべての要素を除去
選択されていないすべてのinput要素を検索:$(「input:not(:checked))
:even
すべてのインデックス値が偶数の要素を一致させ、0からカウントします.
テーブルの1、3、5を検索...行:$(「tr:even」)
:odd
すべてのインデックス値が奇数の要素を一致させ、0からカウントします.
テーブルの2、4、6行を検索:$(「tr:odd」)
:eq(index)
指定したインデックス値に一致する要素注意:index 0からカウント
2行目を検索:$(「tr:eq(1))
:gt(index)
指定したインデックス値より大きいすべての要素を一致させる注意:index 0からカウント
インデックス値が1と2、つまり0より大きい:$(「tr:gt(0))の2番目の3行を検索します.
:lt(index)
選択結果セットインデックスがN未満のelements注意:index 0からカウント
インデックス値が0と1、すなわち2より小さい:$(「tr:lt(2))の2番目の行を検索します.
:header
すべてのh 1,h 2,h 3クラスのヘッダーラベルを選択する.
ページ内のすべてのタイトルに背景色:$(":header").css("background", "#EEE");
:animated
アニメーション効果を実行しているすべての要素を一致させます.
アニメーション効果を実行しない要素に対してのみ、1つのアニメーション効果が実行されます:$("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20"}, 1000); });
function f1(){
$("li").css("color","red"); // li
//
$("li:first").css("color","red"); // li
$("li:last").css("color","red"); // li
$("li:odd").css("color","red"); // li， 0
$("li:even").css("color","red"); // li， 0
$("li:eq(6)").css("color","red"); // eq (equal)
//
$("li:gt(3)").css("color","red"); //gt : greate than(greate wall)
$("li:lt(4)").css("color","red"); //lt : less than
// 【 】
$("li:odd") // li li 0
$("li:gt(0):odd").css("color","red") // ，( [ ])
//li:gt(0) 0 ， odd
$("li:gt(2):even").css("color","red"); //” “
$("li:gt(3):eq(2)").css("color","red"); //" "
$("li:not(#ke)").css("color","red"); //not
$("li:not(#ke,#yu)").css("color","red"); //not
//$("*:header").css("color","red");// h1 h2 h3 h4 h5 h6
//$("h2")// h2
$(".apple:header").css("color","red");// h2
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2> </h2>
<h2 class="apple"> </h2>
<ul class="apple">
<li> </li>
<li> </li>
<li> </li>
<li id="ke"> </li>
<li> </li>
<li id="yu"> </li>
<li> </li>
<li> </li>
</ul>
<input type="button" value=" " onclick="f1()" />
</body>
4.コンテンツフィルタContent Filters
名前
説明
例を挙げる
:contains(text)
指定したテキストを含む要素の一致
「John」を含むdiv要素をすべて検索:$(「div:contains('John'))
:empty
サブエレメントまたはテキストを含まないすべての空のエレメントを一致させます.
サブエレメントまたはテキストを含まないすべての空のエレメントを検索:$(「td:empty」)
:has(selector)
セレクタで一致する要素を含む要素を一致させる
p要素を含むすべてのdiv要素にtextクラス:$(「div:has(p))を追加します.addClass("test");
:parent
サブエレメントまたはテキストを含むエレメントの一致
サブエレメントまたはテキストを含むすべてのtdエレメントを検索:$(「td:parent」)
例:
4.1 :contains(text)
使い方:$("div:contains(’John’)")
指定したテキストを含む要素の一致
this is computer
I amJohn
4.2 :empty
使用法:$("div:empty")
サブエレメントまたはテキストを含まないすべての空のエレメントを一致させます.
I am John
bread
4.3 :has(selector)
使い方:$("div:has(.milk)")
セレクタで一致する要素を含む要素を一致させる
4.4 :parent
使い方:$("p:parent")
サブエレメントまたはテキストを含むエレメントを一致させます(エレメントには子孫が必要です).
hello
5.可視性フィルタVisibility Filters
名前
説明
例を挙げる
:hidden
すべての非表示要素を一致する注意:1.3.2バージョンでは、hiddenは自身または親がドキュメントにスペースを占有しない要素を一致します.CSS visibilityプロパティを使用して表示するが占有されないようにするとhiddenは入力.
非表示のtr要素をすべて検索:$(「tr:hidden」)
:visible
すべての表示要素に一致
すべての表示されるtr要素を検索:$(「tr:visible」)
要素は非表示です:display:none;非表示(物理空間を占有しない)非表示ドメインvisibility:hidden非表示(物理空間を占有する):hiddenが非表示要素(display input type=hidden)を取得するには、2つの場合に役立ちます:visibleが可視要素を取得する概要
1.基本選択(id class tagラベルsel 1,sel 2,sel 3連合*)
2. 階層セレクタ
3. 単純フィルタセレクタ(:first:last:eq(下付き):gt():lt():odd:even)
4. コンテンツフィルタセレクタ(:contains:has:empty:parent)
5. 可視フィルタセレクタ(:hidden:visible)