Detailed explanation of jquery selector basic course examples

Jquery's selector is quite handsome, borrowing the syntax from XPath2.0 and CSS1-3, and is compatible with multiple browsers, making the originally very complex DOM suddenly become simpler, with the latest in hand The version is 1.2.2b, and all the examples below are also examples provided based on this version.

Test HTML code:

<div id="father">
   <div id="first">I am first</div>
   <div id="second" class="red">I am second</div>
   <div id="third" style="display:none">I am third</div>
</div>
<p class="red">I am forth</p>
<h4></h4>

Basic:

#id: According to the id of object PropertiesGet the object.

alert($('#first').html());
/ /Display I am first

element: All objects matching a certain HTML tag

alert($('p').length);
//Display 4

.class : Get the object based on its class attribute

alert($('.red').length);
//Display 2

*: Get all objects

alert( $('*').length);
//Display the sum of objects in HTML, but the results will be different in different browsers

selector1, selector2, selectorN: Get a collection of multiple selectors without removing duplicates.

alert($('.red,#second, p').length);
//Display 4

Level selector:

ancestor descendant: This selector is a space, indicating that the first All objects of one selector, and then find all objects matching the second selector among its descendant nodes.

alert($('#father .red').html());
//Display I am second

parent > child: This selector is the greater than sign, which means that all objects of the first selector are found first, and then in his Find all objects matching the second selector in child nodes (not grandchild nodes).

alert($('#father > .red ').html());
//Display I am second

prev + next: This selector is the plus sign, which means to find all the objects of the first selector first, and then find the same level as him The next node that immediately follows also matches the object of the second selector.

alert($('#father + .red').html());
//Display I am forth

prev ~ siblings: This selector is the ~ sign, which means to first find all the objects of the first selector, and then find them Objects that match the second selector in all subsequent nodes of the same level.

alert($('#first ~ #third').html());
//Display I am third

Basic filter character:

:first: matches the first of multiple objects objects
:last: Match the last object among multiple objects

alert($ ('.red:first').html());
//Display I am second
alert($('p:last') .html());
//Show I am third

:not(selector): Match items that remove the content in the selector after not

alert($('.red:not(#second)'). html());
//Show I am forth

:even: Matches the even number
of all objects: odd: Matches the odd number

alert($('p:even').length);
//显示2
alert($('p:odd').length);
//显示2

:eq(index)：匹配某一下表的单独某元素

alert($('p:eq(2)').html());
//显示I am second

:gt(index)：匹配大于某一下标的所有元素
:lt(index)：匹配小于某一下标的所有元素

alert($('p:gt(1)').length);
//显示2
alert($('p:lt(2)').length);
//显示2

:header：匹配所有的header元素，例如h1,h2,h3,h4,h5,h6

alert($(':header').length);
//显示1

:animated：匹配所有有动画效果的元素

function animateIt()
{
   $("#second").slideToggle("slow", animateIt);
}
animateIt();
alert($(':animated').html());
//显示I am second

文本过滤符：

:contains(text)：匹配内部拥有该文本元素的对象，包含间接有用的情况

alert($('p:contains("first")').length);
//显示2

:empty：匹配所有没有子元素的对象

alert($(':header:empty').length);
//显示1

:has(selector)：匹配所有至少含有一个子选择符的对象

alert($('p:has("#third")').attr('id'));
//显示father

:parent：匹配所有的父对象，父对象包含那些只含有文本的对象

alert($('p:parent').length);
//显示4

可见性过滤符：

:hidden：匹配所有隐藏对象，或者input中的hidden类型
:visible：匹配所有可见的对象

alert($('p:hidden').length);
//显示1
alert($('p:visible').length);
//显示3

属性过滤符：

[attribute]：匹配拥有某一属性的所有对象
[attribute=value]：匹配拥有某一属性和值的对象
[attribute!=value]：匹配拥有某一属性，且不是某一值的对象
[attribute^=value]：匹配拥有某一属性，且以某一值开头的对象
[attribute$=value]：匹配拥有某一属性，且以某一值结尾的对象
[attribute*=value]：匹配拥有某一属性，且包含某一值的对象

alert($('p[class]').html());
//显示I am second
alert($('p[class=red]').html());
//显示I am second
alert($('p[id!=father]').length);
//显示3
alert($('p[id^=f]').length);
//显示2
alert($('p[id$=d]').length);
//显示2
alert($('p[id*=ir]').length);
//显示2

[selector1][selector2][selectorN]：匹配同时符合多个属性选择符的对象

alert($('p[id=second][class^=r]').length);
//显示I am second

子过滤符：

:nth-child(index/even/odd/equation)：匹配子元素中的某一下标/偶数/奇数/等式的对象，:eq(index)只能匹配某单一对象的子元素特征，而这个方法可以匹配多个对象的某一子元素共同特征

alert($('#father p:nth-child(1)').html());
//显示I am first
alert($('#father p:nth-child(even)').length);
//显示1
alert($('#father p:nth-child(odd)').length);
//显示2
alert($('#father p:nth-child(3n)').length);
//显示1，其实是每3个一匹配

:first-child：匹配第一个子元素
:last-child：匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作

alert($('#father p:first-child').html());
//显示I am first
alert($('#father p:last-child').html());
//显示I am third

:only-child：如果一个父元素只有一个子元素，就匹配这个子元素

alert($('p:only-child').length);
//显示0

The above is the detailed content of Detailed explanation of jquery selector basic course examples. For more information, please follow other related articles on the PHP Chinese website!