jquery gets the selector in css (explanation with examples)_jquery

Before you start writing, let’s review the difference between elements and nodes:

The

element is one of the most widely used nodes in the W3C Document Object Model (DOM).

elements have associated "properties".

The XmlElement class has many methods to access its "attributes" (GetAttribute, SetAttribute, RemoveAttribute, GetAttributeNode, etc.).

You can also use the "Attributes" attribute to return an "XML attribute set" that supports "name" or "serial number" access.

So, from the explanation of the XmlElement class, we can easily know the difference between the XmlNode and XmlElement classes:

The XmlElement class is a node that only has "properties", while XmlNode is a node that not only has "properties" but also has "child nodes".

So, when we use them, if you need to get or set the innerText or innerXml in the node, then you need to use XmlNode; and if you need to get or set the attributes (parameters) of the node itself At that time, you need to use XmlElement. Of course, you can also use (XmlElement) to convert XmlNode.

Now let’s get to the main topic

In JavaScript, except for the id selector, which is easier to select, the rest are not easy to select. jquery is much better in this area and provides many acquisition methods, including

1. Basic selectors (mainly including tag selector, id selector, class selector, universal selector, group selector)

$("#divId") Gets the element with ID divId
$("a") Gets all elements

$(".bgRed") Get the element whose CSS class is bgRed

$("*") gets all elements of the page

$("#divId, a, .bgRed") gets three selectors that meet the conditions

2. Hierarchical selectors (mainly including child element selectors, descendant element selectors, immediate sibling element selectors, and adjacent sibling element selectors)

2.1 Child element selector> ===============Select child element

Copy code The code is as follows:

• Item 1


• Item 2
   
  • Nested item 1
  • Nested item 2
  • Nested item 3
  
   
> ;

• Item 3

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

This is the official code, you can refer to the following usage

2.2 The descendant selector directly uses spaces to indicate that it includes not only sons but also grandsons...================ Select descendant elements

Copy code The code is as follows:

Form is surrounded by the green outline
Child:



 
"none" />
<script> $("form input").css("border", "2px dotted blue");</script>


2.3 Next to All elements that meet the conditions of the sibling element selector will be selected. It mainly selects the parallel elements after an element =============== Selects the next sibling element of the specified element

Copy code

The code is as follows:

  

    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. Child element filters Child Filters

名称	说明	举例
: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")

Name

Description

Example

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

Match the Nth child or odd-even element under its parent element ':eq(index)' only matches one element, while this one will match child elements for every parent element. :nth-child starts from 1, and :eq() starts from 0! Can be used:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth -child(3n 1)
:nth-child(3n 2)

Find the 2nd li in each ul:
$("ul li:nth-child(2)")

:first-child

Matches the first child element ':first' only matches one element, while this selector will match one child element for each parent element

Find the first li in each ul:
$("ul li:first-child")

:last-child

Matches the last child element ':last' only matches one element, while this selector will match one child element for each parent element

Find the last li in each ul:
$("ul li:last-child")

:only-child

If an element is the only child element of the parent element, it will be matched If the parent element contains other elements, it will not be matched.

Find li which is the only child element in ul:
$("ul li:only-child")