jQuery 中选择器有哪些? 下面本篇文章就来给大家介绍一些 jQuery 中常用的选择器. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
jQuery 选择器是用来查找元素节点的, jQuery 中 $()函数最强大最常用的功能之一就是使用选择器选择 DOM 元素.
jQuery 选择器总共有四大类, 分别为基本选择器, 层次选择器, 过滤选择器和表单选择器, 下面我们分别来看一下这四种 jQuery 选择器.
1,jQuery 的基本选择器
基本选择器是 jQuery 最常用的选择器, 也是最简单的选择器, 它通过元素 id,class 和标签名来查找 DOM 元素.
$("#myELement") | 选择 id 值等于 myElement 的元素,id 值不能重复在文档中只能有一个 id 值是 myElement 所以得到的是唯一元素 |
$("div") | 选择所有的 div 标签元素,返回 div 元素数组 |
$(".myClass") | 选择使用 myClass 类的 CSS 的所有元素 |
$("*") | 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如 $("#myELement,div,.myclass") |
注意: 在网页中 id 只能使用一次, 即 id 具有唯一性, 但 class 是允许重复使用的.
2,jQuery 层次选择器
层次选择器通过 DOM 元素间的层次关系来获取元素, 主要的层次关系包括父子, 后代, 相邻, 兄弟关系.
$("form input") | 选择所有的 form 元素中的 input 元素 |
$("#main > *") | 选择 id 值为 main 的所有的子元素 |
$("label + input") | 选择所有的 label 元素的下一个 input 元素节点,经测试选择器返回的是 label 标签后面直接跟一个 input 标签的所有 input 标签元素 |
$("#prev ~ div") | 同胞选择器,该选择器返回的为 id 为 prev 的标签元素的所有的属于同一个父元素的 div 标签 |
说明: 只有这个方法返回的是 jQuery 对象才能进行链式操作.
3,jQuery 过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 过滤规则与 CSS 中的伪类选择器语法相同, 即选择器都以一个冒号 (:) 开头(关于 CSS 伪类选择器更多知识可以参考 CSS 在线手册 https://www.html.cn/book/css/ ). 按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单 对象属性过滤选择器共六种选择器. 下面我们分别来简单看一下 jQuery 这六种过滤选择器
(1)jQuery 基本过滤选择器
过滤选择器是根据某类过滤规则进行元素的匹配, 书写时都以 (:) 开头; 简单过滤选择器是过滤选择器中使用最广泛的一种.
$("tr:first"): 选择所有 tr 元素的第一个
$("tr:last"): 选择所有 tr 元素的最后一个
$("input:not(:checked) + span") : 过滤掉: checked 的选择器的所有的 input 元素
$("tr:even"): 选择所有的 tr 元素的第 0,2,4... ... 个元素(注意: 因为所选择的多个元素时为数组, 所以序号是从 0 开始)
$("tr:odd"): 选择所有的 tr 元素的第 1,3,5... ... 个元素
$("td:eq(2)"): 选择所有的 td 元素中序号为 2 的那个 td 元素
$("td:gt(4)") : 选择 td 元素中序号大于 4 的所有 td 元素
$("td:ll(4)"): 选择 td 元素中序号小于 4 的所有的 td 元素
$(":header"): 匹配如 h1, h2, h3 之类的标题元素. 这个是专门用来获取 h1,h2 这样的标题元素
$("div:animated"): 匹配所有正在执行动画效果的元素
(2)jQuery 内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上.
$("div:contains('John')") : 选择所有 div 中含有 John 文本的元素
$("td:empty") : 选择所有的为空 (也不包括文本节点) 的 td 元素的数组
$("div:has(p)") : 选择所有含有 p 标签的 div 元素
$("td:parent"): 选择所有的以 td 为父节点的元素数组
(3)jQuery 可见性过滤选择器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素.
$("div:hidden"): 选择所有的被 hidden 的 div 元素
$("div:visible"): 选择所有的可视化的 div 元素
(4)jQuery 属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素.
$("div[id]"): 选择所有含有 id 属性的 div 元素
$("input[name='newsletter']"): 选择所有的 name 属性等于'newsletter'的 input 元素
$("input[name!='newsletter']") : 选择所有的 name 属性不等于'newsletter'的 input 元素
$("input[name^='news']"): 选择所有的 name 属性以'news'开头的 input 元素
$("input[name$='news']") : 选择所有的 name 属性以'news'结尾的 input 元素
$("input[name*='man']") : 选择所有的 name 属性包含'news'的 input 元素
(5)jQuery 子元素过滤选择器
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") : 匹配其父元素下的第 N 个子或奇偶元素. 这个选择器和之前说的基础过滤 (Basic Filters) 中的 eq() 有些类似, 不同的地方就是前者是从 0 开始, 后者是从 1 开始.
$("div span:first-child"): 返回所有的 div 元素的第一个子节点的数组
$("div span:last-child"): 返回所有的 div 元素的最后一个节点的数组
$("div button:only-child") : 返回所有的 div 中只有唯一一个子节点的所有子节点的数组
(6) jQuery 表单对象属性过滤选择器
此选择器主要对所选择的表单元素进行过滤.
$(":enabled"): 选择所有的可操作的表单元素
$(":disabled"): 选择所有的不可操作的表单元素
$(":checked"): 选择所有的被 checked 的表单元素
$("select option:selected"): 选择所有的 select 的子元素中被 selected 的元素
$("input[@ name =S_03_22]").parent().prev().text(): 选取一个 name 为 "S_03_22″的 input text 框的上一个 td 的 text 值
$("input[@ name ^='S_']").not("[@ name $='_R']"): 名字以 "S_" 开始, 并且不是以 "_R" 结尾的
$("input[@ name =radio_01][@checked]").val();: 一个名为 radio_01 的 radio 所选的值
$("A B"): 查找 A 元素下面的所有子节点, 包括非直接子节点
$("A>B") : 查找 A 元素下面的直接子节点
$("A+B") : 查找 A 元素后面的兄弟节点, 包括非直接子节点
$("A~B") : 查找 A 元素后面的兄弟节点, 不包括非直接子节点
4,jQuery 表单选择器
利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素.
注意: 注意: 要选取 input 中为 hidden 值的方法就是上面例子的用法, 但是直接使用 ":hidden" 的话就是匹配页面中所有的不可见元素, 包括宽度或高度为 0 的.
$(":input") : 选择所有的表单输入元素, 包括 input, textarea, select 和 button
$(":text") : 选择所有的 text input 元素
$(":password"): 选择所有的 password input 元素
$(":radio") : 选择所有的 radio input 元素
$(":checkbox") : 选择所有的 checkbox input 元素
$(":submit") : 选择所有的 submit input 元素
$(":image") : 选择所有的 image input 元素
$(":reset") : 选择所有的 reset input 元素
$(":button") : 选择所有的 button input 元素
$(":file") : 选择所有的 file input 元素
$(":hidden"): 选择所有类型为 hidden 的 input 元素或表单的隐藏域
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/17008.html