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 相关文章推荐
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
js实现图片懒加载效果
Jul 17 Javascript
JS实现百度搜索框
Feb 25 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
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
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP多进程编程实例
2014/10/15 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
利用Python如何实现一个小说网站雏形
2018/11/23 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
Python如何实现动态数组
2019/11/02 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
np.dot()函数的用法详解
2020/01/17 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python Django路径配置实现过程解析
2020/11/05 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
教师业务学习制度
2014/01/25 职场文书
售后求职信范文
2014/03/15 职场文书
大学生评语大全
2014/04/18 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书