jQuery选择器集锦(读《锋利的jQuery(第二版)》所摘)

￡神魔★判官ぃ 2022-08-07 15:55 147阅读 0赞

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

$("input:not(.myClass)")选取class不是myClass的<input>元素。

$("input:even")选取索引是偶数的<input> 元素

$(":header")选取网页中所有的<h1>,<h2>，<h3>.

$(":focus")选取当前获取焦点的元素

内容过滤选择器的过滤规则主要体现在他所包含的子元素或文本内容上。

$("div:has(p)")选取含有<p>元素的<div>元素。

$("div:parent")选取拥有子元素(包括文本元素)的<div>元素

$("div:parent").css("background","\#bbffaa"); 改变含有子元素(包括文本元素)的<div>元素的背景色。

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

:hidden 选取所有不可见的元素。 返回集合元素。

:visible  选取所有可见的元素。。返回集合元素。

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。  
  
下面是属性过滤选择器的实例:

$("div\[id\]")选取拥有属性id的元素

$("div\[title=test\]")选取属性title为"test"的<div>元素。

$("div\[title!=test\]")选取属性title不等于"test"的<div>元素(注意:没有属性title的<div>元素也会被选取)

$("div\[title^=test\]")选取属性title以"test"开始的<div>元素。

$("div\[title$=test\]")选取属性title以"test"结束的<div>元素。

$("div\[title\*=test\]")选取属性title以"test"结束的<div>元素。

$('div\[title|="en"\]')选取属性title等于en或以en为前缀(该字符串后跟一个连字符'-')的元素。

$('div\[title~="uk"\]')选取属性title用空格分隔的值中包含字符uk的元素。

$("div\[id\]\[title$='test'\]")选取拥有属性id,并且属性title以"test"结束的<div>元素。

:nth-child()选择器是很常用的子元素过滤选择器，详细功能如下。

(1):nth-child(even)能选取每个父元素下的索引值是偶数的元素。

(2) :nth-child(odd)能选取每个父元素下的索引值是奇数的元素。

(3):nth-child(2)能选取每个父元素下的索引值等于2的元素。

(4):nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素。

(5):nth-child(3n+1)能选取每个父元素下的索引值是（3n+1）的元素。(n从1开始)。

eq(index)只匹配一个元素,而:nth-child将为每一个符合条件的父元素匹配子元素。同时应该注意到 nth-child(index)的

index是从1开始的,而:eq(index)是从0开始的。同理:first和:first-child,:last和:last-child也类似。

表单对象属性过滤选择器，此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。  
  
  
![Center][]

[Center]: /images/20220805/0ec3cc731af245ecbd738124b05607e0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery选择器、jQuery关系选择器、jQuery伪选择器

一、jQuery选择器 1、父元素(向上遍历单一层级)：parent() 2、祖先元素：parents(selector) 3、子元素(向下遍历单一层级)：child

本是古典何须时尚/ 2023年10月07日 11:58/ 0 赞/ 52 阅读

相关读《锋利的jQuery(第二版)》笔记

一下的数字表示第几个细节知识点。另外在<code></code>尖括号里包裹的表示是代码。 1)detach()和remove()一样，也是从DOM中去掉所有匹配的元素。但

你的名字/ 2022年08月07日 17:41/ 0 赞/ 171 阅读

相关 jQuery选择器集锦(读《锋利的jQuery(第二版)》所摘)

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过

￡神魔★判官ぃ/ 2022年08月07日 15:55/ 0 赞/ 148 阅读

相关锋利的jquery

今天用jquery写了一个标签提示功能的小程序，发现jquery真是叫锋利 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

灰太狼/ 2022年07月16日 09:44/ 0 赞/ 220 阅读

相关 jQuery-jQuery选择器

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择

雨点打透心脏的1/2处/ 2022年04月17日 07:05/ 0 赞/ 452 阅读

相关 jQuery选择器

jQuery选择器　　jq 选择器和 css 的选择器语法类似, jq 的选择器是他的灵魂　　就是将 html 中的节点元素选择出来的语法, 　　jq 的选择器

╰半夏微凉°/ 2022年01月11日 06:45/ 0 赞/ 316 阅读

相关 Jquery 选择器

使用特殊操作符或“组合符”可以将简单选择器组合起来，表达文档树中元素之间的关系。下表列举了jQuery支持的组合选择器。这些组合选择器与CSS3支持的组合选择器是一样的。下

╰半橙微兮°/ 2021年10月08日 05:58/ 0 赞/ 515 阅读

相关 jQuery-选择器

[http://www.webhek.com/post/jquery-61-selector.html][http_www.webhek.com_post_jquery-61-

小鱼儿/ 2021年09月28日 10:46/ 0 赞/ 475 阅读

相关 jQuery 选择器

jQuery 选择器

╰半橙微兮°/ 2021年07月04日 14:22/ 0 赞/ 597 阅读

相关《锋利的jquery》认识jquery总结

1. window.onload和$(document).ready()执行时机不同，前者必须等待网页中所有的内容加载完毕后，后者是所有dom结构绘制完毕后；编写个数前者只允

- 日理万妓/ 2021年06月24日 15:59/ 0 赞/ 502 阅读