jQuery选择器之基本选择器与层次选择器


Posted in Javascript onMarch 03, 2015

基本选择器

基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能使用一次,class允许重复使用。

       选择器       描述 返回                示例
#id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素
.class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素
element 根据给定的元素名称匹配元素 集合元素 $("p")选取所有的

元素

* 匹配所有的元素 集合元素 $("*")选取所有的元素
selector1,selector2,...selectorN 将每一个选择器匹配到的元素合并后一起返回 集合元素 $("div,span,p.myclass")选取所有
,和拥有class为myclass的

标签的一组元素

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等,那么层次选择器是一个非常好的选择。

选择器                 描述 返回 示例
$("ancestor descendant") 选取ancestor元素里的所有 descendant(后代)元素 集合元素 $("div span")选取
里 所有元素
$("parent>child") 选取parent元素下的child元素, 与$("ancestor descendant")有区别, $("ancestor descendant")选择的是后代元素 集合元素 $("div>span")选取
元素下 元素名是的子元素
$("prev+next") 选取紧邻在prev元素之后 的next元素 集合元素 $(".one+div")选取class为one的 下一个
同辈元素
$("prev~siblings") 选取prev元素之后的所有 siblings元素 集合元素 $("#two~div")选取id为two的 元素后面的所有
同辈元素

 $("prev+next")选择器与next()方法的等价关系

                    选择器                    方法
                  等价关系              $(".one+div")        $(".one").next("div")

 $("prev~siblings")选择器与nextAll()方法的等价关系

选择器 方法
等价关系 $("prev~div") $("#prev").nextAll("div")

以上就是本文的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 #Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 #Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 #Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 #Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 #Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 #Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 #Javascript
You might like
php基础知识:类与对象(1)
2006/12/13 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
python Django模板的使用方法
2016/01/14 Python
基于python实现FTP文件上传与下载操作(ftp&sftp协议)
2020/04/01 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
三星美国官网:Samsung美国
2017/02/06 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
医生自荐信
2013/10/11 职场文书
大专会计自我鉴定
2014/02/06 职场文书
美食节策划方案
2014/05/26 职场文书
公司总经理任命书
2014/06/05 职场文书
三峡大坝导游词
2015/01/31 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
黄埔军校观后感
2015/06/10 职场文书
党章学习心得体会2016
2016/01/14 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
利用python做数据拟合详情
2021/11/17 Python
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS