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 相关文章推荐
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
深入理解node.js http模块
Jan 24 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
javascript实现倒计时关闭广告
Feb 09 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
收音机术语解释
2021/03/01 无线电
php的mssql数据库连接类实例
2014/11/28 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
Python实现简单过滤文本段的方法
2017/05/24 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
自我评价格式
2014/01/06 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
投标授权委托书范文
2014/08/02 职场文书
教师年度考核个人总结
2015/02/12 职场文书
自荐信模板大全
2015/03/27 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
员工离职通知函
2015/04/25 职场文书
法律意见书范文
2015/05/20 职场文书
银行服务理念口号
2015/12/25 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书