jqueryはCSSでセレクターを取得します（例で説明）_jquery

書き始める前に、要素とノードの違いを確認しましょう:

要素は、W3C ドキュメント オブジェクト モデル (DOM) で最も広く使用されているノードの 1 つです。

要素には「プロパティ」が関連付けられています。

XmlElement クラスには、その「属性」にアクセスするためのメソッドが多数あります (GetAttribute、SetAttribute、RemoveAttribute、GetAttributeNode など)。

「属性」属性を使用して、「名前」または「シリアル番号」アクセスをサポートする「XML 属性セット」を返すこともできます。

XmlElement クラスの説明から、XmlNode クラスと XmlElement クラスの違いを簡単に知ることができます。

XmlElement クラスは「プロパティ」のみを持つノードですが、XmlNode は「プロパティ」だけでなく「子ノード」も持つノードです。

つまり、 を使用する場合、ノードで innerText または innerXml を取得または設定する必要がある場合は、XmlNode を使用する必要があります。また、その属性 (パラメーター) を取得または設定する必要がある場合は、XmlNode を使用する必要があります。このとき、XmlElement を使用する必要があります。もちろん、(XmlElement) を使用して XmlNode を変換することもできます。

さて本題に移りましょう

JavaScript では、選択が簡単な ID セレクターを除いて、残りは選択が簡単ではありません。jquery はこの分野ではるかに優れており、

を含む多くの取得メソッドを提供します。

1. 基本セレクター (主にタグ セレクター、ID セレクター、クラス セレクター、ユニバーサル セレクター、グループ セレクターを含む)

$("#divId") ID divId を持つ要素を取得します
$("a") すべての 要素を取得します

$(".bgRed") CSS クラスが bgRed である要素を取得します

$("*") はページのすべての要素を取得します

$("#divId, a, .bgRed") は、条件を満たす 3 つのセレクターを取得します

2. 階層セレクター (主に子要素セレクター、子孫要素セレクター、直接の兄弟要素セレクター、隣接する兄弟要素セレクターを含む)

2.1 子要素セレクター> ===============子要素を選択

コードをコピー コードは次のとおりです。

• 項目 1


• 🎜 >
  • ネストされた項目 1
  • ネストされた項目 2
  • ネストされた項目 3
  
  li>
  
• アイテム 3


<script> $("ul.topnav > li") , "3px double red");</script>


これは公式コードです。次の使用法を参照してください

2.2 子孫セレクターは、息子だけでなく孫も含まれることを示すためにスペースを直接使用します...================ 子孫要素の選択

コードをコピーします コードは次のとおりです。

Form は緑色のアウトライン

input name="ニュースレター" />
"なし" />
<script> $("border", "2px dotted blue");</script> ;


2.3 次の要素 ============= の後の兄弟要素セレクターの条件を満たすすべての要素が選択されます。 == 指定された要素の次の兄弟要素を選択します




コードをコピー

コードは次のとおりです:

  

    Name:
   
   

      Newsletter:

     
   

 
 
<script>$("label + input").css("color", "blue").val("Labeled!")</script>

2.4  相邻同辈元素选择器 ===============选择指定元素的所有指定的平辈元素，可以隔几个不是指定的元素

复制代码 代码如下:

 

div (doesn't match since before #prev)

  span#prev
 

div sibling

 

div sibling

div niece

  span sibling (not div)
 

div sibling

<script>$("#prev ~ div").css("border", "3px groove blue");</script>

3、表单选择器主要选择表单、用的时间要注意$(":input")注意引号里面的冒号也可以选择类型如$(":button")不过多介绍

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 开始计数	查找第二行:$("tr:eq(1)")
:gt(index)	匹配所有大于给定索引值的元素 注:index从 0 开始计数	查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)")
:lt(index)	选择结果集中索引小于 N 的 elements 注:index从 0 开始计数	查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)")
:header	选择所有h1,h2,p一类的header标签.	给页面内所有标题加上背景色: $(":header").css("background", "#EEE");
:animated	匹配所有正在执行动画效果的元素	只有对不在执行动画效果的元素执行一个动画特效: $("#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. 子要素フィルター 子フィルター

に対して 1 つの子要素に一致します。 に対して 1 つの子要素に一致します。

名称	说明	举例
:nth-child(index/even/odd/equation)	匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！ 可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n 1) :nth-child(3n 2)	在每个 ul 查找第 2 个li: $("ul li:nth-child(2)")
:first-child	匹配第一个子元素 ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素	在每个 ul 中查找第一个 li: $("ul li:first-child")
:last-child	匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素	在每个 ul 中查找最后一个 li: $("ul li:last-child")
:only-child	如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配。	在 ul 中查找是唯一子元素的 li: $("ul li:only-child")

名前

説明

​​例

:nth-child(index/even/odd/equation)

親要素の下にある N 番目の子要素または奇数偶数要素と一致します ':eq(index)' は 1 つの要素のみに一致しますが、これはすべての親要素の子要素に一致します。 :nth-child は 1 から始まり、:eq() は 0 から始まります。 使用可能:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
: nth -child(3n 1)
:nth-child(3n 2)

各 ul の 2 番目の li を検索します:
$("ul li:nth-child(2)")

:first-child

最初の子要素と一致します ':first' は 1 つの要素のみに一致しますが、このセレクターは各親要素

各 ul の最初の li を検索します:
$("ul li:first-child")

:last-child

最後の子要素と一致します ':last' は 1 つの要素のみに一致しますが、このセレクターは各親要素

各 ul の最後の li を検索します:
$("ul li:last-child")

​​:only-child

要素が親要素の唯一の子要素である場合、その要素が一致します 親要素に他の要素が含まれている場合は一致しません。

ul の唯一の子要素である li を検索します:
$("ul li:only-child")