博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery jquery选择器总结 转自(永远的麦子)
阅读量:5326 次
发布时间:2019-06-14

本文共 2045 字,大约阅读时间需要 6 分钟。

       jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器。下边就来分别总结一下。

1, 基本选择器?

       基本选择器就是jQuery中最常用的选择器,也是最简单的选择器,它通过元素标签名,元素Id,Class来查找DOM元素。基本选择器共有五种,总结如下:

       选择器

返回

示例

元素标签选择器

集合元素

$(“p”)选取所有的<p>元素。

Id选择器

单个元素

$(“#test”)选取Id为test的元素。

Class选择器

集合元素

$(“.test”)选取所有class为test的元素

通配符选择器

集合元素

$(“*”)选取所有的元素。

群组选择器

集合元素

$(“div,span,p.myclass”)选取所有<div>,<span>,和拥有class为myclass的<p>标签的一组元素。

2, 层次选择器?

       适合于通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相 邻元素和兄弟元素。

       选择器

返回

示例

后代元素选择器

集合元素

$(“div span”)选取<div>里的所有的<span>元素。

子元素选择器

集合元素

$(“div>span”)选取<div>元素下元素名是<span>的子元素。

相邻元素选择器

集合元素

$(“.one+div”)选取class为one的下一个<div>兄弟元素。

兄弟元素选择器

集合元素

$(“#two~div”)选取Id为two的元素后面的所有<div>兄弟元素。

       注意:$(“prev~siblings”)选择器与siblings()方法的区别。

       $(“#prev~div”)选择的是”#prev”元素后面的所有的同辈的div元素。而siblings()方法与 前后位置无关,只要是同辈节点就都能匹配。

 3, 过滤选择器?

       过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS    中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过 滤和表单 对象属性过滤选择器共六种选择器。

       这边只总结基本过滤器,其它过滤器在实际的开发过程中需要的时候再查看就可以了。

       选择器

返回

示例

:first

单个元素

$(“div:first”)选取所有<div>元素中第1个<div>元素。

:last

单个元素

$(“div:last”)选取所有<div>元素中最后1个<div>元素。

not(selector)

集合元素

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

:even

集合元素

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

:odd

集合元素

$(“input:odd”)选取索引是奇数的<input>元素。

:eq(index)

单个元素

$(“input:eq(1)”)选取索引等于1的<input>元素。

:gt(index)

集合元素

$(“input:gt(1)”)选取索引大于1的<input>元素。

:lt(index)

集合元素

$(“input:lt(1)”)选取索引小于1的<input>元素。(不包括1)

:header

集合元素

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

:animated

集合元素

$(“div: animated”)选取正在执行动画的<div>元素。

4, 表单选择器?

       利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素。

       选择器

返回

示例

:input

集合元素

$(“:input”)选取所有<input>,<textarea>,<select>和<button>元素。

:text

集合元素

$(“:text”)选取所有的单行文本框。

:password

集合元素

$(“: password”)选取所有的密码框。

:radio

集合元素

$(“: radio”)选取所有的单选框。

:checkbox

集合元素

$(“:checkbox”)选取所有的复选框。

:submit

集合元素

$(“: submit”)选取所有的提交按钮。

:image

集合元素

$(“: image”)选取所有的图像按钮。

:reset

集合元素

$(“: reset”)选取所有的重置按钮。

:button

集合元素

$(“: button”)选取所有的按钮。

:file

集合元素

$(“: file”)选取所有的上传域。

:hidden

集合元素

$(“: hidden”)选取所有不可见元素。

   以上就是jQuery选择器的总结,希望大家都能理解并熟练运用它们,谢谢!

转载于:https://www.cnblogs.com/1446358788-qq/p/4861350.html

你可能感兴趣的文章
省市县,循环组装,整合大数组
查看>>
stm32中字节对齐问题(__align(n),__packed用法)
查看>>
like tp
查看>>
posix多线程有感--线程高级编程(线程属性函数总结)(代码)
查看>>
spring-使用MyEcilpse创建demo
查看>>
DCDC(4.5V to 23V -3.3V)
查看>>
kettle导数到user_用于left join_20160928
查看>>
activity 保存数据
查看>>
typescript深copy和浅copy
查看>>
linux下的静态库与动态库详解
查看>>
hbuilder调底层运用,多张图片上传
查看>>
深入理解基于selenium的二次开发
查看>>
较快的maven的settings.xml文件
查看>>
Git之初体验 持续更新
查看>>
Exception in thread "AWT-EventQueue-0" java.lang.IllegalThreadStateException
查看>>
随手练——HDU 5015 矩阵快速幂
查看>>
启动redis一闪就关
查看>>
Maven之setting.xml配置文件详解
查看>>
ASP.NET 4.5 Web Forms and Visual Studio vs2013年入门1
查看>>
SDK目录结构
查看>>