锋利的jQuery学习笔记之jQuery选择器
在介绍jQuery选择器之前,先简单介绍一下CSS选择器--->
一、CSS选择器
常见的CSS选择器有以下几种:
选择器 | 语法 | 描述 | 示例 |
标签选择器 | E{CSS规则} | 以文档元素为选择符 |
td{font-size:10px;} a{tetx-decoration:none;} |
ID选择器 | #ID{CSS规则} | 以文档元素的唯一标示ID为选择符 | #node{corlor:red;} |
类选择器 | .className{CSS规则} | 以文档元素的class作为选择符 | div.node{background-color:yellow;} |
群组选择器 | E1,E2,E3{CSS规则} |
以多个文档元素作为选择符 |
p,div,a,span{font-size:10px;} |
后代选择器 | E F{CSS规则} | 以元素E的任意后代元素F作为选择器 | div input{font:10px black;} |
通配选择器 | *{CSS规则} | 以文档所有元素作为选择器 | *{font-size:10px;} |
二、jQuery选择器
jQuery选择器完全继承CSS选择器,可以快速找到DOM元素并添加对应的行为。
jQuery共有基本选择器、层次选择器、过滤选择器和表单选择器。下面对这几类选择器一一介绍
1、基本选择器
选择器 | 描述 | 返回 | 示例 |
element | 根据给定的元素名称匹配元素 | 集合元素 | $("p")选取所有的p元素 |
#id | 根据给定的id匹配指定的元素 | 一个元素 | $("#nodeName")选取id为nodeName的元素 |
#className |
根据给定的class名称匹配元素 |
集合元素 | $("div.span")选择class为span的所有div |
* |
匹配所有的元素 |
集合元素 | $("*")选择所有的元素 |
selecter1,selecter,...,selecterN | 将每一个选择器匹配的元素合并后返回 | 集合元素 | $("div,span,p.info")选择所有的div\span和class为info的p元素 |
2、层次选择器
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选择ancestor里的所有descendant(后代)元素 | 集合元素 | $("div span")选取div里的所有span元素 |
$("parent > child") |
选择parent的child(子)元素 PS:$("ancestor descendant")是选择后代(包括孙辈元素) $("parent > child")只选择子元素 |
集合元素 | $("div > span")选择div元素下名为span的子元素 |
$("pre + next') | 选择紧接在pre元素后的下一个同辈元素 | 集合元素 | $(".one + div")选择class为one后面的第一个div同辈元素 |
$("pre ~ siblings") | 选择pre元素后面的所有同辈元素 | 集合元素 | $("#two ~ div")选择id为two后面的所有div同辈元素 |
jQuery中的方法可以代替上面的某些选择器:
- next()方法等价于$("pre + next")。所以$(".one + div")就等价于$(".one").next();
- nextAll()方法等价于$("pre ~ siblings")。所以$("#two ~ div")就等价于$("#two").nextAll();
- siblings()方法是获取当前元素的所有同辈元素,不分前后;
3、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS的伪类选择器语法相同,即选择器都是以一个冒号(:)开头,按照不同的过滤规则,过滤选择器可以分为:
基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤
选择器 | 描述 | 返回 | 示例 |
:first | 选择第一个元素 | 单个元素 | $("div:first")选择所有div中的第一个元素 |
:last | 选择最后一个元素 | 单个元素 |
$("div:last")选择所有div中的最后一个元素 |
:not(selector) | 去所有与给定选择器匹配的元素 | 集合元素 | $("div:not('.div1')")选择class不是div1所有div元素 |
:even | 选择索引值为偶数的元素 | 集合元素 | $("tr:even")选择索引值为偶数的tr元素 |
:odd | 选择索引值为奇数的元素 | 集合元素 | $("tr:odd")选择索引值为奇数的tr元素 |
:eq(index) | 选择索引值等于index的元素 | 单个元素 | $("input:eq(2)")选择索引值为2的元素,即第三个input元素(索引从0开始) |
:gt(index) | 选择索引值大于index的元素 | 集合元素 | $("inputgt(2)")选择索引值大于2的元素,即第三个input后面的元素(索引从0开始) |
:lt(index) | 选择索引值小于index的元素 | 集合元素 | $("input:lt(2)")选择索引值小于2的元素,即第三个input前面的元素(索引从0开始) |
:header | 选择所有的标题元素,例如h1,h2等 | 集合元素 | $("header")选择网页中所有的标题元素h1到h6 |
:animated | 选择当前正在执行动画的元素 | 集合元素 | $("div:animated")选择正在执行动画的div元素 |
:focus | 选择所有获取焦点的元素 | 集合元素 | $(":focus")选择网页中所有获取焦点的元素 |
内容过滤选择器:它的过滤规则主要体现在它所包含的子元素或文本内容上。
选择器 | 描述 | 返回 | 示例 |
:contains(text) | 选择文本内容包含text的元素 | 集合元素 | $("div:contains('学生')")选择文本内容包含“学生”的所有div元素 |
:empty | 选择不包含子元素或内容为空的元素 | 集合元素 | $("div:empty")选择不包含子元素或者内容为空的div元素 |
:has(selector) | 选择包含匹配选择器元素的元素 | 集合元素 | $("div:has(p)")选择包含p元素的div元素 |
:parent |
选择含有子元素或者文本的元素 |
集合元素 | $("div:parent")选择含有子元素或者文本内容不为空的div元素 |
可见性过滤选择器根据元素的可见和不可见性来选择元素。
可见性过滤选择器
选择器 | 描述 | 返回 | 示例 |
:hidden | 选择所有的隐藏元素 | 集合元素 |
$(":hidden")选择页面所有的隐藏元素 PS:隐藏元素包括样式属性display为none,visibility为hidden及隐藏的表单域 |
:visible | 选择所有的可见元素 | 集合元素 | $("div:visible")选择所有可见的div元素 |
属性过滤选择器是根据元素属性选择相应的元素
过滤器 | 描述 | 返回 | 示例 |
[attribute] | 选择包含该属性的元素 | 集合元素 | $("div[id]")选择含有id属性的div元素 |
[attribute=value] | 选择属性值等于value的元素 |
集合元素 |
$("div[id='div1']")选择id属性值等于div1的div元素 |
[attribute!=value] | 选择属性值不等于value的元素 | 集合元素 | $("div[id!='div1']选择id属性值不等于div1的div元素 |
[attribute^=value] | 选择属性值以value开头的元素 | 集合元素 | $("div[id^='div1']选择id属性值以div1开头的div元素 |
[attribute$=value] | 选择属性值以value结尾的元素 | 集合元素 |
$("div[id$='div1']选择id属性值以duv1结尾的div元素 |
[attribute*=value] | 选择属性值包含value的元素 | 集合元素 | $("div[id*='div1']选择id属性值包含div1的div元素 |
[attribute|=value] | 选择属性值为value或以value为前缀(该字符串后面跟一个连字符’-‘)的元素 | 集合元素 | $("div[id|='div1']选择id属性值为div1或者以div1为前缀的div元素 |
[attribute~=value] | 选择属性用空格分隔的值中包含一个给定值的元素 | 集合元素 | $("div[id~='div1']选择id属性用空格分隔的值中等于div1的div元素 |
[attribute1][attribute2][attribute3] | 用属性选择器合并成一个复合属性选择器,满足多个条件,没选择依一次,缩小一次选择 | 集合元素 | $("div[id][title='hello'])选择含有id属性并且title的属性值为hello的div元素 |
子元素过滤选择器是针所有父元素进行过滤,而不只是某一个指定的父元素
选择器 | 描述 | 返回 | 示例 |
:nth-child(index/even/odd/equation) | 选择每个父元素下第index的子元素或者奇偶于元素(index从1开始) | 集合元素 | :eq(index)只匹配一个元素,而:nth-child(index)将匹配每一个父元素中索引值为index的子元素,且前者的索引从0开始,后者索引从1开始。 |
:first-child |
选择每个父元素的第一个子元素 | 集合元素 |
:first只返回单个元素,而:first-child将返回每一个父元素中的第一个元素 $("ul li:last-child")选择每个ul中的第一个元素 |
:last-child | 选择每一个父元素的最后一个子元素 | 集合元素 |
:last只返回打个元素,而:last-child将返回每一个父元素中的最后一个元素 $("ul li:first-child")选择每个ul中的最后一个元素 |
:only-child | 如果某个元素是它父元素中的唯一子元素,那么它将被匹配,否则不会被匹配 | 集合元素 | $("ul li:only-child")获取的是ul中的唯一子元素li |
表单元素属性过滤器,主要是对所选择的的表单元素进行过滤。
选择器 | 描述 | 返回 | 示例 |
:enabled | 选择所有可用的表单元素 | 集合元素 | $("#form1 :enabled")选择id=form1的表单内所有可用元素 |
:disabled | 选择所有不可用的表单元素 | 集合元素 | $("#form1 :disabled")选择id=form1的表单内所有不可用元素 |
:checked | 选择所有被选中的元素(包括单选框、复选框) | 集合元素 | $("#input:checked")选择所有被选中的input元素 |
:selected | 选择所有被选中的选项元素(下拉列表) | 集合元素 | $("select option:selected")选择i所有被选中的选项元素 |
至此,所有的过滤选择器就介绍完了,下面介绍最后一种选择器-----表单选择器
3、表单选择器
利用表单选择器可以方便地获取到某个或某种类型的元素
选择器 | 描述 | 返回 | 示例 |
:input | 选择所有的input、textarea、button、select元素 | 集合元素 | $(":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中所有的选择器及使用方法,这么多的选择器,要想每一个都能理解,关键还在实践。
锋利的jQuery学习笔记之jQuery选择器的更多相关文章
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jquery学习笔记(一):选择器
内容来自[汇智网]jquery学习课程 1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根 ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- jQuery学习笔记之jQuery.fn.init()的参数分析
这篇文章主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下 从return new jQuery.fn.init( selector, context, rootjQuer ...
- jQuery学习笔记(jquery.ui插件)
官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...
- jQuery学习笔记(jquery.simplemodal插件)
官网地址:http://www.ericmmartin.com/ SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架.Simpl ...
- jQuery学习笔记(jquery.form插件)
官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...
随机推荐
- ArrayList去除重复元素(多种方法实现)
package other; import java.util.ArrayList; import java.util.HashSet; public class test4 { public sta ...
- 解决无法wifi上网的问题
1.查看网卡型号 lspci | grep Network 可以看到我的是Wireless-AC 9560 2.登录Inter官网下载网卡驱动 https://www.intel.com/conten ...
- c++ static关键字的作用
1.被申明的函数或值无法被其他源文件使用 2.static的第二个作用是保持变量内容的持久.(static变量中的记忆功能和全局生存期) 存储在静态数据区的变量会在程序刚开始运行时就完成初始化,也是唯 ...
- Duilib 入门教程: 怎么创建一个自定义的窗口
一直想找一个好用UI 界面库,看过Direct UI,也想过 金山的界面库,后来找到了这个Duilib 现在的软件界面很多都是利用XML 来布局和定位. 像迅雷7,QQ,金山卫士等 [html] vi ...
- kafka集群搭建文档
kafka集群搭建文档 一. 下载解压 从官网下载Kafka,下载地址http://kafka.apache.org/downloads.html 注意这里最好下载scala2.10版本的kafka, ...
- System.Web.Mvc.ViewResultBase.cs
ylbtech-System.Web.Mvc.ViewResultBase.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Pub ...
- js 获取字符串中某字符第二次出现的下标
var res = "a-b-c-d";var index = find(res,'-',1); //字符串res中第二个‘-’的下标 var ress = res.substri ...
- Frame用navigate导航到新页面后导航条隐藏的方法
设置Frame的NavigationUIVisibility="Hidden"
- PHP SSH2 不支持 IdentityFile
有的情况下 我们会用到 类似命令行 sftp -o IdentityFile=.ssh/identity username@host方式 登陆, 想用php 操作, 但是 php 现在看是不支持的, ...
- CodeForces - 752B
CodeForces - 752Bhttps://vjudge.net/problem/597648/origin简单模拟,主要是细节特殊情况多考虑一下,看代码就行 #include<iostr ...