jquery cssのセレクタの取得
9196 ワード
書き始める前に要素とノードの違いを復習します.
要素はW 3 C文書オブジェクトモデル(DOM)の中で最も広く使われているノードの一つである.
要素には、関連付けられたプロパティがあります.
XmlElementクラスには、その「プロパティ」(GetAttribute,SetAttribute,RemoveAttribute,GetAttributeNodeなど)にアクセスする方法がたくさんあります.
「Attributes」プロパティを使用して、「名前」または「シーケンス番号」アクセスをサポートする「XMLプロパティセット」を返すこともできます.
では、XmlElementクラスの解釈から、XmlNodeとXmlElementクラスの違いを簡単に知ることができます.
XmlElementクラスは「属性」のみを持つノードであり、XmlNodeは「属性」だけでなく「サブノード」も持つノードである.
したがって、ノード内のinnerTextまたはinnerXmlを取得または設定する必要がある場合は、XmlNodeを使用する必要があります.ノード自体のプロパティ(パラメータ)を取得または設定する必要がある場合は、XmlElementを使用する必要があります.もちろん、XmlNodeを変換することもできます.
以上、http://www.cnblogs.com/lin614/archive/2008/03/18/1111535.html参照
これから本題に入ります
javascriptでは、idのセレクタの方が取りやすいほか、あまり取りにくいですが、jqueryはこのブロックよりずっと優れていて、多くの取得方法を提供しています.主に
1.基本セレクタ(主にタグセレクタ、idセレクタ、クラスセレクタ、汎用セレクタ、グループセレクタを含む)$(＃divId)取得IDがdivIdの要素
$(「a」)すべての取得$阶层套餐机(主要是萨布埃伦金属套餐机、子孙埃伦金属套餐机、近邻同世代埃伦金属套餐机、相邻同世代埃伦金属套餐机)2.1萨布埃伦金属套餐机>=====================================================萨布埃伦金属的选择<ul class="topnav"> <li>Item 1</li> <li>Item 2 <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul> </li> <li>Item 3</li> </ul> <script> $("ul.topnav > li").css("border", "3px double red");</script> 这是在官方科片上,可以参考以下使用方法的.2.2子孙塞雷克塔直接表示只有儿子,包括孙子在内的特别节目.子孫要素の選択<form> <div>Form is surrounded by the green outline</div> <label>Child:</label> <input name="name" /> <fieldset> <label>Grandchild:</label> <input name="newsletter" /> </fieldset> </form> Sibling to form: <input name="none" /> <script> $("form input").css("border", "2px dotted blue");</script>2.3同世代要素Serector的全部条件相一致的是,主要选择1个要素后的平行要素===================================================================================================form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> <script>$("label + input").css("color", "blue").val("Labeled!")</script> 2.4相邻的同世代电脑Serector===================================================================================================== <span id="prev">span#prev</span> <div>div sibling</div> <div>div sibling <div id="small">div niece</div></div> <span>span sibling (not div)</span> <div>div sibling</div> <script>$("#prev ~ div").css("border", "3px groove blue");</script>3,手机主要选择手机,必须注意时间的$(":input")引用符中的コロン也必须注意到的.4,基本手机主要举出名字说明例: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); });
5、コンテンツフィルタ(メインノードのサブノードはテキストノード)
名前
説明
例を挙げる
:contains(text)
指定したテキストを含む要素の一致
「John」を含むdiv要素をすべて検索:$(「div:contains('John'))
:empty
サブエレメントまたはテキストを含まないすべての空のエレメントを一致させます.
サブエレメントまたはテキストを含まないすべての空のエレメントを検索:$(「td:empty」)
:has(selector)
セレクタで一致する要素を含む要素を一致させる
p要素を含むすべてのdiv要素にtextクラス:$(「div:has(p))を追加します.addClass("test");
:parent
サブエレメントまたはテキストを含むエレメントの一致
サブエレメントまたはテキストを含むすべてのtdエレメントを検索:$(「td:parent」)
6、可視性フィルタVisibility Filters
:hidden
:visible
具体例はリンク7、属性フィルタAttribute Filtersをクリックしてください
名前
説明
例を挙げる
[attribute]
指定した属性を含む要素の一致
id属性を含むdiv要素をすべて検索:$(「div[id]」)
[attribute=value]
指定した属性に一致するのは、特定の値の要素です.
すべてのname属性を検索するのはnewsletterのinput要素:$(「input[name='newsletter'」).attr("checked", true);
[attribute!=value]
指定した属性に一致するのは、特定の値を含まない要素です.
すべてのnameプロパティがnewsletterのinput要素ではないことを検索します:$(「input[name!='newsletter'」).attr("checked", true);
[attribute^=value]
指定した属性に一致するのは、いくつかの値から始まる要素です.
$("input[name^='news']")
[attribute$=value]
指定した属性に一致するのは、いくつかの値で終わる要素です.
すべてのnameが'letter'で終わるinput要素を検索します:$(「input[name$='letter'」)
[attribute*=value]
指定した属性に一致するのは、いくつかの値を含む要素です.
すべてのnameに'man'を含むinput要素を検索:$(「input[name*='man'」)
[attributeFilter1][attributeFilter2][attributeFilterN]
複合プロパティセレクタは、複数の条件を同時に満たす必要がある場合に使用します.
idを含むすべての属性が見つかり、そのname属性はmanで終わります:$(「input[id][name$='man'」)
8.サブエレメントフィルタChild Filters
名前
説明
例を挙げる
:nth-child(index/even/odd/equation)
親エレメントの下にあるN番目のサブエレメントまたはパリティエレメント':eq(index)'に一致するのは、1つのエレメントのみです.これは、親エレメントごとに子エレメントが一致します.:nth-childは1から始まり、eq()は0から計算されます!使用可能:nth-child(even):nth-child(odd):nth-child(3 n):nth-child(2):nth-child(3 n+1):nth-child(3 n+2)
各ulで2番目のli:$(「ul li:nth-child(2))を検索します.
:first-child
最初のサブエレメント':first'は1つのエレメントのみに一致し、このセレクタは親エレメントごとに1つのサブエレメントに一致します.
各ulで最初のli:$(「ul li:first-child」)を検索します.
:last-child
最後のサブエレメント':last'は1つのエレメントにのみ一致し、このセレクタは親エレメントごとに1つのサブエレメントに一致します.
各ulで最後のli:$(「ul li:last-child」)を検索します.
:only-child
ある要素が親要素の中で唯一の子要素である場合、親要素に他の要素が含まれている場合、一致しません.
ulで唯一のサブエレメントであるli:$(「ul li:only-child」)を検索します.
一部は張子秋のブログを参考に
表の中のは公式のリンクをクリックして見てください.もっと理解しやすいです.
要素はW 3 C文書オブジェクトモデル(DOM)の中で最も広く使われているノードの一つである.
要素には、関連付けられたプロパティがあります.
XmlElementクラスには、その「プロパティ」(GetAttribute,SetAttribute,RemoveAttribute,GetAttributeNodeなど)にアクセスする方法がたくさんあります.
「Attributes」プロパティを使用して、「名前」または「シーケンス番号」アクセスをサポートする「XMLプロパティセット」を返すこともできます.
では、XmlElementクラスの解釈から、XmlNodeとXmlElementクラスの違いを簡単に知ることができます.
XmlElementクラスは「属性」のみを持つノードであり、XmlNodeは「属性」だけでなく「サブノード」も持つノードである.
したがって、ノード内のinnerTextまたはinnerXmlを取得または設定する必要がある場合は、XmlNodeを使用する必要があります.ノード自体のプロパティ(パラメータ)を取得または設定する必要がある場合は、XmlElementを使用する必要があります.もちろん、XmlNodeを変換することもできます.
以上、http://www.cnblogs.com/lin614/archive/2008/03/18/1111535.html参照
これから本題に入ります
javascriptでは、idのセレクタの方が取りやすいほか、あまり取りにくいですが、jqueryはこのブロックよりずっと優れていて、多くの取得方法を提供しています.主に
1.基本セレクタ(主にタグセレクタ、idセレクタ、クラスセレクタ、汎用セレクタ、グループセレクタを含む)$(＃divId)取得IDがdivIdの要素
$(「a」)すべての取得$阶层套餐机(主要是萨布埃伦金属套餐机、子孙埃伦金属套餐机、近邻同世代埃伦金属套餐机、相邻同世代埃伦金属套餐机)2.1萨布埃伦金属套餐机>=====================================================萨布埃伦金属的选择<ul class="topnav"> <li>Item 1</li> <li>Item 2 <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul> </li> <li>Item 3</li> </ul> <script> $("ul.topnav > li").css("border", "3px double red");</script> 这是在官方科片上,可以参考以下使用方法的.2.2子孙塞雷克塔直接表示只有儿子,包括孙子在内的特别节目.子孫要素の選択<form> <div>Form is surrounded by the green outline</div> <label>Child:</label> <input name="name" /> <fieldset> <label>Grandchild:</label> <input name="newsletter" /> </fieldset> </form> Sibling to form: <input name="none" /> <script> $("form input").css("border", "2px dotted blue");</script>2.3同世代要素Serector的全部条件相一致的是,主要选择1个要素后的平行要素===================================================================================================form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> <script>$("label + input").css("color", "blue").val("Labeled!")</script> 2.4相邻的同世代电脑Serector===================================================================================================== <span id="prev">span#prev</span> <div>div sibling</div> <div>div sibling <div id="small">div niece</div></div> <span>span sibling (not div)</span> <div>div sibling</div> <script>$("#prev ~ div").css("border", "3px groove blue");</script>3,手机主要选择手机,必须注意时间的$(":input")引用符中的コロン也必须注意到的.4,基本手机主要举出名字说明例: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); });
5、コンテンツフィルタ(メインノードのサブノードはテキストノード)
名前
説明
例を挙げる
:contains(text)
指定したテキストを含む要素の一致
「John」を含むdiv要素をすべて検索:$(「div:contains('John'))
:empty
サブエレメントまたはテキストを含まないすべての空のエレメントを一致させます.
サブエレメントまたはテキストを含まないすべての空のエレメントを検索:$(「td:empty」)
:has(selector)
セレクタで一致する要素を含む要素を一致させる
p要素を含むすべてのdiv要素にtextクラス:$(「div:has(p))を追加します.addClass("test");
:parent
サブエレメントまたはテキストを含むエレメントの一致
サブエレメントまたはテキストを含むすべてのtdエレメントを検索:$(「td:parent」)
6、可視性フィルタVisibility Filters
:hidden
:visible
具体例はリンク7、属性フィルタAttribute Filtersをクリックしてください
名前
説明
例を挙げる
[attribute]
指定した属性を含む要素の一致
id属性を含むdiv要素をすべて検索:$(「div[id]」)
[attribute=value]
指定した属性に一致するのは、特定の値の要素です.
すべてのname属性を検索するのはnewsletterのinput要素:$(「input[name='newsletter'」).attr("checked", true);
[attribute!=value]
指定した属性に一致するのは、特定の値を含まない要素です.
すべてのnameプロパティがnewsletterのinput要素ではないことを検索します:$(「input[name!='newsletter'」).attr("checked", true);
[attribute^=value]
指定した属性に一致するのは、いくつかの値から始まる要素です.
$("input[name^='news']")
[attribute$=value]
指定した属性に一致するのは、いくつかの値で終わる要素です.
すべてのnameが'letter'で終わるinput要素を検索します:$(「input[name$='letter'」)
[attribute*=value]
指定した属性に一致するのは、いくつかの値を含む要素です.
すべてのnameに'man'を含むinput要素を検索:$(「input[name*='man'」)
[attributeFilter1][attributeFilter2][attributeFilterN]
複合プロパティセレクタは、複数の条件を同時に満たす必要がある場合に使用します.
idを含むすべての属性が見つかり、そのname属性はmanで終わります:$(「input[id][name$='man'」)
8.サブエレメントフィルタChild Filters
名前
説明
例を挙げる
:nth-child(index/even/odd/equation)
親エレメントの下にあるN番目のサブエレメントまたはパリティエレメント':eq(index)'に一致するのは、1つのエレメントのみです.これは、親エレメントごとに子エレメントが一致します.:nth-childは1から始まり、eq()は0から計算されます!使用可能:nth-child(even):nth-child(odd):nth-child(3 n):nth-child(2):nth-child(3 n+1):nth-child(3 n+2)
各ulで2番目のli:$(「ul li:nth-child(2))を検索します.
:first-child
最初のサブエレメント':first'は1つのエレメントのみに一致し、このセレクタは親エレメントごとに1つのサブエレメントに一致します.
各ulで最初のli:$(「ul li:first-child」)を検索します.
:last-child
最後のサブエレメント':last'は1つのエレメントにのみ一致し、このセレクタは親エレメントごとに1つのサブエレメントに一致します.
各ulで最後のli:$(「ul li:last-child」)を検索します.
:only-child
ある要素が親要素の中で唯一の子要素である場合、親要素に他の要素が含まれている場合、一致しません.
ulで唯一のサブエレメントであるli:$(「ul li:only-child」)を検索します.
一部は張子秋のブログを参考に
表の中のは公式のリンクをクリックして見てください.もっと理解しやすいです.