jQuery 复合选择器应用的几个例子


Posted in Javascript onSeptember 11, 2014

<!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js -->

一. 复合选择器对checkbox的相关操作

<input type="checkbox" id="ckb_1" /> 
<input type="checkbox" id="ckb_2" disabled="true" /> 
<input type="checkbox" id="ckb_3" /> 
<input type="checkbox" id="ckb_4" /> 
<input type="button" id="btn" value="点击">

例.需要把类型为checkbox,同时"可用"的元素设置成"已选择"

方法①使用属性过滤选择器 [type='checkbox'] 和 [disabled!=disabled]

$("input[type='checkbox'][disabled!=disabled]").attr("checked",true);

注意在这个复合选择器中,"可用"元素的选择应使用 disabled!=disabled,而设置属性时应使用 attr("checked",true)。disabled属性和checked属性的用法类似。

方法②使用表单选择器 :checkbox 和属性过滤选择器 [disabled!=disabled]

$('input:checkbox[disabled!=disabled]').attr("checked",true);

方法③使用表单选择器 :checkbox 和表单对象属性过滤选择器 :enabled

$(':checkbox:enabled').attr("checked",true);

方法④使用.each()遍历

$("input[type=checkbox]").each(function(){

if ($(this).attr("disabled") != "disabled") {

$(this).attr("checked",true);
}
});

没用到复合选择器。需要注意的和方法①中一样,在判断属性时应该判断是"disabled"还是"enable",而不是false或true。而设置属性时既可以用"disabled"或"enable",也可以用false或true。

二. 复合选择器的其他例子

<ul>
<li >第一行</li>
<li class="showli">第二行</li>
<li class="showli">第三行</li>
<li>第四行</li>
<li style="display:none">第五行</li>
<li class="showli">第六行</li>
<li>第七行</li>
</ul>

例. 把第一个class为showli的li元素背景设为红色

$("ul li[class=showli]:eq(0)").css("background":"red");

结果是'<li class="showli">第二行</li>'的背景变成了红色。使用了属性过滤选择器 [class=showli] 和基本过滤选择器 eq(0)

例. 把第五个可见的li的背景设为红色

$("ul li:visible:eq(4)").css({"display":"blaock","background":"red"});

结果是'<li class="showli">第六行</li>'的背景变成了红色,display:block是为了检测隐藏的li是否会被:visible过滤,display:none下是看不到红色背景的。使用了可见性过滤选择器 :visible

例.(比较绕的)把第二个class为showli的li后面可见的第二个li的背景设成红色

$("ul li.showli:eq(1)").nextAll("li:visible:eq(1)").css({"display":"block","background":"red"});

结果是'<li class="showli">第六行</li>'的背景变成了红色。

Javascript 相关文章推荐
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
微信小程序 教程之事件
Oct 18 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 #Javascript
sogou地图API用法实例教程
Sep 11 #Javascript
当前流行的JavaScript代码风格指南
Sep 10 #Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 #Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 #Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 #Javascript
javascipt:filter过滤介绍及使用
Sep 10 #Javascript
You might like
php zend解密软件绿色版测试可用
2008/04/14 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
offsetParent 算法分析
2010/04/05 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
python进阶教程之词典、字典、dict
2014/08/29 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
使用Tkinter制作信息提示框
2020/02/18 Python
基于Python正确读取资源文件
2020/09/14 Python
Python 中Operator模块的使用
2021/01/30 Python
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
房屋买卖协议书
2014/04/10 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
教师节演讲稿
2014/05/06 职场文书
胡桃夹子观后感
2015/06/11 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
nginx请求限制配置方法
2021/07/09 Servers
python基础之类方法和静态方法
2021/10/24 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技