jquery 中多条件选择器,相对选择器,层次选择器的区别


Posted in Javascript onJuly 03, 2012

一、Jquery常用的过滤选择器如下所示:

1、:first,选取第一个元素,比如$("div:first")选取第一个div元素

2、:last,选取最后一个元素,比如$("div:last")选取最后一个div元素

3、:not(选择器),选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素

4、:even/:odd,选取索引为偶数/奇数的元素,比如$("div:even"),选取索引号为偶数的所有div元素

5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号),选取等于索引号/大于索引号/小于索引号的元素,比如$("div:lt(3)"),选取索引号小于3的所有div元素

注意:

过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础,即过滤的逐级性,比如

$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号,不要写成lt(4)

二,重点

多条件选择器
多条件选择器:$("p,div,span,menuitem"),同时选择p标签,div标签,和拥有menuitem样式的span标签元素
注意选择器表达式中的空格不能多不能少,易错!

相对选择器

只要在$()指定第二个参数,第二个参数为相对的元素。比如html代码如下

<table id="table1"> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
</table>

那么可以用如下的js代码操作td的背景色
$("td", $(this)).css("background", "red"),这句代码用的就是相对选择器,选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素,没有涉及到其他行的td元素
<script type="text/javascript"> 
$(function () { 
$("#table1 tr").click(function () { 
$("td", $(this)).css("background", "red"); 
}); 
}); 
</script>

层次选择器:
1 $("#div li")获取div下的所有li元素(后代,子,子的子....)
2 $("#div > li")获取div下的直接li子元素//注意空格
3 $(".menuitem + div")获取样式名为menuitem之后的第一个div元素,不常用。
3 $(".menuitem ~ div")获取样式名为menuitem之后的所有的div元素,不常用。

细节区别在于(易错点):
多条件选择器:$("p,div,span,menuitem"),相对选择器:$("td", $(this)).css("background", "red")",层次选择器:$("#div li")获取div下的所有li元素(后代,子,子的子....)

三者的区别是:

多条件选择器:在一个“”内有逗号区分,

相对选择器:2个元素分开 ,

层次选择器在一个“”内以空格区分

Javascript 相关文章推荐
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 #Javascript
JavaScript中的细节分析
Jun 30 #Javascript
JavaScript中的作用域链和闭包
Jun 30 #Javascript
JavaScript中的面向对象介绍
Jun 30 #Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 #Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 #Javascript
Fixie.js 自动填充内容的插件
Jun 28 #Javascript
You might like
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
PHP flush 函数使用注意事项
2016/08/26 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
详解vue v-model
2020/08/31 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python实现句子翻译功能
2017/11/14 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
python实现电子产品商店
2019/02/26 Python
pycharm配置git(图文教程)
2019/08/16 Python
Python的互斥锁与信号量详解
2019/09/12 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
PHP经典面试题
2016/09/03 面试题
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
经销商年会策划方案
2014/05/29 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
清洁员岗位职责
2015/02/15 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers