jQuery 选择器详解


Posted in Javascript onJanuary 19, 2015

$()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是.

$(“#id”)通过id来获取元素,用来代替document.getElementById()函数.

$(“tagName”)通过标签名来获取元素,用来代替document.getElementsByTagName()函数.

jQuery的基本语法是:$(selector).action(), selector即选择器.

jQuery选择器的分类

jQuery的选择器基本可以分为四大类:

基本选择器(basic)

层次选择器(level)

过滤选择器(filter)

表单选择器(form)

有些类别又可以分为具体的子类别.

基本选择器

jQuery 选择器详解

* 匹配所有元素.示例:$(“*")选取所有元素.

#id根据给定的id匹配元素(最多只返回一个元素).示例: $("#lastname”)选取id="lastname"的元素.

.class根据给定的类名匹配元素.示例:$(".intro”)选取所有class=“intro"的元素.

element根据给定的元素名匹配元素.示例: $(“p")选取所有<p>元素.

.class.class 示例: $(".intro.demo”)选取所有且class="demo”的元素.(交集).

selector1, selector2, …, selectorN, 将每一个选择器匹配到的元素合并后一起返回.(并集).

除了#id选择器返回单个元素外,其他选择器返回的都是元素集合.

这是因为HTML规范里面id应该是唯一的,所以重复id的元素没有被考虑.

如果多个元素的id相同,取这个id也只能获取第一个元素.即获取的jQuery对象的length属性是1.

如果要匹配的元素不存在,则都返回一个空的jQuery对象.

     基本选择器之间可以组合,用逗号分隔,结果取所有条件的结果的并集.

当没有用逗号分隔时,应该是所有条件都满足的交集.

层次选择器

jQuery 选择器详解

$(“ancestor descendant”) 选取ancestor元素里的所有descendant后代元素,包括直接子元素和更深嵌套的后代元素.

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

注意:选择器都是全页面扫描,返回一个集合,所有符合选择条件的元素都会被包括进去.所以多个<div>下面的<span>都会被选择.

$(“parent>child”)选取parent元素下的child子元素,即只有直接子元素被选取.其他后代元素不包括.

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

$(“prev+next”)选取紧接在prev元素后的next元素(同一层级).

例:$(“.one+div”)选取class为one的下一个div元素.

$(“prev+siblings”)选取prev元素之后的所有siblings元素(同一层级).

例:$(“#two~div”)选取id为two的元素后面的所有<div>兄弟元素.

等价方法:

$(“prev+next”)等价于方法$(“prev”).next(“next”);选取prev元素之后紧接着的一个next元素.

$(“prev~sublings”)等价于方法$(“prev”).nextAll(“sublings”),选取prev元素之后的所有同级的sublings元素.

而$(“prev”).sublings(“next”)方法选取与prev同辈的所有next元素,与前后位置无关.

过滤选择器

过滤选择器这个大类又分为六个子类:

基本过滤;内容过滤;可见性过滤;属性过滤;子元素过滤;表单对象属性过滤.

基本过滤

jQuery 选择器详解

gt和lt分别是greaterthan和lessthan.

jQuery 选择器详解

内容过滤

jQuery 选择器详解

可见性过滤

jQuery 选择器详解

属性过滤

jQuery 选择器详解

属性过滤是用方括号来标识的.

注意多个属性过滤选择器连在一起的时候,取的是结果的交集.

子元素过滤

jQuery 选择器详解

前面基本过滤选择器里面index是从0算起的,这里子元素过滤选择器的index是从1开始算起的.

表单对象属性过滤

jQuery 选择器详解

表单选择器

jQuery 选择器详解

Javascript 相关文章推荐
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 #Javascript
jQuery应用之jQuery链用法实例
Jan 19 #Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 #Javascript
jQuery中ready事件用法实例
Jan 19 #Javascript
jQuery中offsetParent()方法用法实例
Jan 19 #Javascript
jQuery中outerWidth()方法用法实例
Jan 19 #Javascript
javascript数据类型示例分享
Jan 19 #Javascript
You might like
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
php实现的ping端口函数实例
2014/11/12 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP函数积累总结
2019/03/19 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
jquery提交form表单简单示例分享
2014/03/03 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Python之re操作方法(详解)
2017/06/14 Python
Python异常的检测和处理方法
2018/10/26 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
运动会方阵解说词
2014/02/12 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技