jQuery选择器心得

1. :empty选择器，选择所有的没有子节点且内容为空的节点，就是说，如果含有子节点且子节点为空，该节点不会被选中，如果没有子节点，但是当前节点内容不为空，一样不会被选中。（或者说文本内容可以看作是文本节点）例如

a

在jQuery中使用$(":empty")选择器，仅被选中

2. contains(text),选择所有包括指定text的元素，要特别提醒一点是，单独使用$(:contains(text))会发生意想不到的结果，例如以下情况，整个页面都会变成红色。
   是包括在中的文本。

3.has选择器。在例子中，整个页面都变成红色,匹配含有选择器所匹配的元素的元素,所以匹配到道德元素是selector的父元素

:has(selector) 匹配含有选择器所匹配的元素的元素 给所有包含 p 元素的 div 元素添加一个 text 类: $(“div:has§”).addClass(“test”);

Welcome to My Homepage

My name is Donald

I live in Duckburg

My best friend is Mickey

Who is your favourite:

• Goofy
• Mickey
• Pluto

4. :parent选择器，匹配所有包含子元素或者内容不为空的元素，则

   My name is Donald

I live in Duckburg

两列变为红色，第三列不变色，因为第三列不含有子元素或者内容。

Welcome to My Homepage

My name is Donald

I live in Duckburg

Who is your favourite:

• Goofy
• Mickey
• Pluto

5.属性选择器：包含指定属性[attr]，指定属性等于，不等于，开头，结尾，任意位置，都可以进行筛选，也可以使用符合属性条件进行筛选。

[attributeFilter1][attributeFilter2][attributeFilterN] 复合属性选择器，需要同时满足多个条件时使用。 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的: 
$("input[id][name$=‘man’]")

Welcome to My Homepage

My name is Donald

I live in Duckburg

My best friend is Mickey

Who is your favourite:

• Goofy
• Mickey
• Pluto

$(“h1:[class = ‘intro’]”).css(“background-color”,“red”);
  $(“p:has(.intro)”).css(“background-color”,“red”);

这两句话区别出了:has和属性选择器的区别，has选出包含指定属性选择器的父元素，属性选择器选择出包含指定属性的元素，所以Welcome to My Homepage变为红色，My name is Donald不变色。

w3schools.com


Google.com


wikipedia.org

只有wikipedia.org变成红色。

6.子元素选择器

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

Welcome to My Homepage

My name is Donald

I live in Duckburg

My best friend is Mickey

Who is your favourite:

• Goofy
• Mickey
• Pluto

• abc

运行结果：

• abc
• 和
• Goofy
• 均为红色标出。 ———————————————— 版权声明：本文为CSDN博主「sruru」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/sruru/article/details/7788782