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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
详解AngularJS controller调用factory
May 19 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 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正确配置mysql(apache环境)
2011/08/28 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
python访问系统环境变量的方法
2015/04/29 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
函授药学自我鉴定
2014/02/07 职场文书
授权委托书
2014/09/17 职场文书
校长一岗双责责任书
2015/05/09 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server