回味jQuery系列(1)-选择器
jQuery-选择器浅析
jQuery 最核心的组成部分就是:选择器引擎,选择器引擎Sizzle占了jQuery很大一部分。它继承了CSS 的语法,可以对DOM 元素的标签名、属性名、状态等进行快速准确的选择,并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。
基础选择器
选择类型 选择器 返回
元素名 $('div') 获取所有div元素的DOM对象
ID $('#xzavier') 获取一个ID为box元素的DOM对象
类(class) $('.xzavier') 获取所有class为box的所有DOM对象
群组选择 $('span,.xzavier') 获取多个选择器的DOM对象
后代选择 $('ul li a') 获取追溯到的多个DOM对象
通配选择 $('*') 获取所有元素标签的DOM对象
后代选择 $('ul li a') 获取追溯到的多个DOM对象
子选择 $('div p') 只获取子类节点的多个DOM对象
next选择 $('div + p') 只获取某节点后一个同级DOM对象
nextAll选择 $('div ~ p') 获取某节点后面所有同级DOM对象$('#xzavier').find('button') //等价后代选择器
$('#xzavier').children('button') //等价子选择器
$('#xzavier').next('button') //等价next选择器
$('#xzavier').nextAll('button') //等价nextAll选择器
$('#xzavier').prev('button') //选择同级上一个元素
$('#xzavier').prevAll('button') //选择同级所有上面的元素
$('#xzavier').prevUntil('button') //选择同级上非指定元素,遇到则停止
$('#xzavier').nextUntil('button') //选择同级下非指定元素,遇到则停止
$('#xzavier').siblings('button') //选择同级上下所有元素
更多:
1.ID返回的是单个元素,而元素标签名和类(class)返回的是多个,我们可以采用jQuery 核心自带的一个属性length 或size()方法来查看返回的元素个数。
2.ID在页面中是唯一的,一般要求开发者要遵守规范。如果你在页面中出现三次,在CSS使用样式是会成功显示样式的,但在jQuery,就匹配不到后面的ID。
3.在使用上,通配选择器一般用的并不多,尤其是,比如:$(''),这种使用方法效率很低,影响性能。
4.在构造选择器时,尽量简单,只保证必要的确定性。当选择器筛选越复杂,jQuery 内部的选器引擎处理字符串的时间就越长。
5.注意,find()、next()、nextAll()和children()这四个方法中,如果不传递参数,就相当于传递了“*”,即任何节点。
属性选择器
对应CSS模式 选择器 返回
a[title] $('a[title]') 获取title属性的DOM对象
a[title=num] $('a[title=num]') 获取title属性且=num的DOM对象
a[title^=num] $('a[title^=num]') 获取title且开头属性值匹配的DOM对象
a[title|=num] $('a[title|=num]') 获取title且=num或开头属性值匹配后面跟一个“-”号的DOM对象
a[title$=num] $('a[title$=num]') 获取title属性且结尾属性值匹配的DOM对象
a[title!=num] $('a[title!=num]') 获取title属性且!=num的DOM对象
a[title~=num] $('a[title~=num]') 获取title且属性值是以一个空格分割的列表,其中包含属性值的DOM对象
a[title*=num] $('a[title*=num]') 获取title且属性值含有一个指定字串的DOM对象
a[xz][title=num] $('a[xz][title=num]') 获取具有bbb属性且title属性=num的DOM对象
过滤选择器
基本过滤选择器
过滤器名 jQuery 返回
:first $('li:first') 选取第一个元素
:last $('li:last') 选取最后一个元素
:not(selector) $('li:not(.xzavier)') 选取class不是xzavier的li元素
:even $('li.even') 选择索引(0 开始)是偶数的所有元素
:odd $('li:odd') 选择索引(0 开始)是奇数的所有元素
:eq(index) $('li:eq(2)') 选择索引(0 开始)等于index的元素
:gt(index) $('li:gt(2)') 选择索引(0 开始)大于index的元素
:lt(index) $('li.lt(2)') 选择索引(0 开始)小于index的元素
:header $(':header') 选择标题元素,h1 ~ h6
:animated $(':animated') 选择正在执行动画的元素
:focus $(':focus') 选择当前被焦点的元素
更多:
1.:focus 过滤器,必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者Tab键盘敲击激活的。
2.:first、:last 和first()、last()这两组过滤器和方法在出现相同元素的时候,first 会实现第一个父元素的第一个子元素,last 会实现最后一个父元素的最后一个子元素。所以,如果需要明确是哪个父元素。
内容过滤器
过滤器名 jQuery 返回
:contains(text) $(':contains("xzavier")') 选取含有"xzavier"文本的元素
:empty $(':empty') 选取不包含子元素或空文本的元素
:has(selector) $(':has(.xzavier)') 选取含有class是xzavier的元素
:parent $(':parent') 选取含有子元素或文本的元素
更多:
1.jQuery 提供了一个has()方法来提高:has 过滤器的性能:$('ul').has('.xzavier')
2.jQuery 提供了一个名称和:parent 相似的方法,但这个方法并不是选取含有子元素或文本的元素,而是获取当前元素的父元素,返回的是元素集合
可见性过滤器
过滤器名 jQuery 返回
:hidden $(':hidden') 选取所有不可见元素集合元素
:visible $(':visible') 选取所有可见元素集合元素
更多:
1.:hidden 过滤器一般是包含的内容为:CSS 样式为display:none、input 表单类型为type="hidden"和visibility:hidden 的元素
子元素过滤器
过滤器名 jQuery 返回
:first-child $('li:first-child') 获取每个父元素的第一个子元素
:last-child $('li:last-child') 获取每个父元素的最后一个子元素
:only-child $('li:only-child') 获取只有一个子元素的元素
:nth-child(odd/even/eq(index)) $('li:nth-child(even)') 获取每个自定义子元素的元素(索引值从1开始计算)
过滤方法
方法名 jQuery 备注
is(s/o/q/f) $('li').is('.red') 参数可传递选择器、DOM、jquery对象或是函数来匹配
hasClass(class) $('li').hasClass('xzavier') 同is("." + class)
slice(start, end) $('li').slice(0,2) 选择从start到end位置的元素,如果是负数,则从后面开始
filter(s/o/q/f) $('li').filter('.xzavier') 参数可传递选择器、DOM、jquery对象或是函数来匹配
end() $('div').find('p').end() 获取当前元素前一次状态集合元素
contents() $('div').contents() 获取某元素下面所有元素节点,包括文本节点
表单元素选择器
选择器名 jQuery 返回
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
更多:
1.这些选择器都是返回元素集合,如果想获取某一个指定的元素,最好结合一下属性选择器。
$(':text[name=xzavier]); //获取单行文本框name=xzavier 的元素
我们在使用中,不会所有标签都有id,使用起来也不方便,代码冗杂。综合组合很多选择器使用,选到特定的元素,也是非常方便的。
回味jQuery系列(1)-选择器相关推荐
- jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- JQuery系列(4) - AJAX方法
jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作.调用该方法后,浏览器就会向服务器发出一个HTTP请求. $.ajax方法 $.ajax()的用法主要有两种. $.a ...
- jquery系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery表单选择器input、:text、:password、:radio、:checkbox、:submit、:reset、:image、:button、:file、:hidden
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery表单选择器 jquery表单选择器,包括:input.input.:text.:password.:radio.:c ...
- jquery属性过滤选择器[attr=value]、[attr!=value]、[attr^=value]、[attr$=value]、[attr*=value]、[attr|=value]
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery属性过滤选择器 jquery属性过滤选择器,包括[attr].[attr=value].[attr!=value]. ...
- jquery可见性过滤选择器:hidden、:visible
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery可见性过滤选择器 jquery可见性过滤选择器,包括:hidden.:visible,具体功能如代码中注释. 代码如 ...
- jquery基本过滤选择器:first :last :not(.myclass) :even :odd :eq(1) :gt(5) :lt(1) :header :animated :focus
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本过滤选择器 jquery基本过滤选择器,包括:first.:last.:not(.myclass).:even, ...
- jquery系列教程6-ajax的应用全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
最新文章
- [Tips]:SQL server 2005 Create Assembly Failed
- KerGNNs:结合Graph kernels的可解释GNN
- autofac JSON文件配置
- Python 技术篇-pip安装提示:‘pip‘ 不是内部或外部命令,也不是可运行的程序或批处理文件,问题解决方法
- hdu1395 2^x mod n = 1
- React Hook基本使用踩坑指南
- 使用python对比两个目录下的文件名差异
- centos修改ip mac等
- 电路串联和并联图解_负反馈型三极管放大电路的识图方法
- MySQL 5.7 主从复制配置
- spring框架中Bean的基本属性及调用外部properties等配置文件的方法介绍
- Table 点击单元格编辑并获取对应的行列
- 程序设计c语言高速公路收费标准,高速公路收费系统c语言课程设计报告分解.docx...
- android-Intent,Injector,Template,Adapter,Validation,Gesture,Game,Game Engine,Bluetooth...
- php极光短信验证码,极光短信验证码验证问题
- Ubuntu18 编译和运行PL-SVO(不需要ROS)
- 在线测试地址 mp3/mp4
- QQ txd文件解析完毕
- 观点 | 关于元宇宙的21个真相
- c++ 输入一段完整的英文语句,统计其英文单词个数,并将个数保存到文件file.txt中