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 相关文章推荐
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
使用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 CURL模拟GET及POST函数代码
2010/04/25 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
微信小程序实现刷脸登录
2018/05/25 Javascript
element中的$confirm的使用
2020/04/26 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
python实现红包裂变算法
2016/02/16 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Flask之flask-session的具体使用
2018/07/26 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
详解python-图像处理(映射变换)
2019/03/22 Python
python 默认参数相关知识详解
2019/09/18 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
大学校庆邀请函
2014/01/11 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
教师远程研修感悟
2015/11/18 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers