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时遇到的一些小问题
Dec 06 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
JavaScript实现表单验证功能
Dec 09 Javascript
Web应用开发TypeScript使用详解
May 25 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循环获取GET和POST值的代码
2008/04/09 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
python导入库的具体方法
2020/06/18 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
详解Anaconda 的安装教程
2020/09/23 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
八年级语文教学反思
2014/02/11 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
电台编导求职信
2014/05/06 职场文书
军训口号
2014/06/13 职场文书
教师求职信
2014/06/17 职场文书
小学优秀学生评语
2014/12/29 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
php修改word的实例方法
2021/11/17 PHP
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers