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 相关文章推荐
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
JS表的模拟方法
Feb 05 Javascript
$.extend 的一个小问题
Jun 18 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
vue插件实现v-model功能
Sep 10 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 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
多重?l件?合查?(二)
2006/10/09 PHP
php适配器模式介绍
2012/08/14 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
python fabric实现远程操作和部署示例
2014/03/25 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python中的ceil()方法使用教程
2015/05/14 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
高一自我鉴定
2013/12/17 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
企业员工辞职信范文
2015/05/12 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书