过滤选择器

4、属性过滤器

查找所有含有 id 属性的 div 元素
$(document).ready(function(){
$("div[id]").css("color","red");
});
<body>
<div>test1</div>
<div id="d">test2</div>
</body>
查找所有name是qin的input并选中
$(document).ready(function(){
$("input[name='qin']").attr("checked","true");
});
</script>
查找所有name不是qin的input并选中
$(document).ready(function(){
$("input[name!='qin']").attr("checked","true");
});
查找所有name以qin开头的input
$(document).ready(function(){
$("input[name^='qin']").attr("checked","true");
});
查找所有name以lol结尾的input并选中
$(document).ready(function(){
$("input[name$='lol']").attr("checked","true");
});
查找所有name包含o的input并选中
$(document).ready(function(){
$("input[name*='o']").attr("checked","true");
});
查找所有含有id属性的并且name的结尾是e的input并选中
$(document).ready(function(){
$("input[id][name$='e']").attr("checked","true");
});

<body>
<input type="checkbox" name="qin" value="Hot Fuzz" />1
<input type="checkbox" name="yilol" value="Cold Fusion" />2
<input type="checkbox" name="love" value="Evil Plans" />3
</body>

5.子元素过滤选择器

匹配ul的第二个li （索引从1开始）
$(document).ready(function(){
$("ul li:nth-child(2)").css("color","red");
});
只匹配ul第1个元素
$(document).ready(function(){
$("ul li:first-child").css("color","red");
});
匹配ul最后一个li
$(document).ready(function(){
$("ul li:last-child").css("color","red");
});
匹配ul中是唯一的li
$(document).ready(function(){
$("ul li:only-child").css("color","red");
});

<body>
<div>test1</div>
<div id="d">test2</div>
<input type="checkbox" name="qin" value="Hot Fuzz" />1
<input type="checkbox" name="yilol" value="Cold Fusion" />2
<input type="checkbox" name="love" value="Evil Plans" id="test" />3
<ul>
<li>qin</li>
<li>yi</li>
<li>test</li>
</ul>
<ul>
<li>only</li>
</ul>
</body>

6.表单对象属性过滤选择器

匹配所有可用的input元素
$(document).ready(function(){
$("input:enabled").attr("checked","true");
});
匹配所有不可用的input元素
$(document).ready(function(){
$("input:disabled").attr("checked","true");
});
匹配所有选中的input元素（(复选框、单选框等，不包括select中的option)）
$(document).ready(function(){
$("input:checked").attr("checked","true");
});
匹配所有选中的option元素（下拉列表）
$(document).ready(function(){
$("select option:selected").css("background","#bfa");
});

<body>
<input type="checkbox" name="qin" value="Hot Fuzz" />1
<input type="checkbox" name="yilol" value="Cold Fusion" />2
<input type="checkbox" name="love" value="Evil Plans" id="test" />3
<input type="checkbox" name="email" disabled="disabled" />disabled
<select>
<option value="1" >qin</option>
<option value="2" selected="selected">yi</option>
<option>test</option>
</select>
</body>

7.7.表单选择器

匹配所有input类型：
$(document).ready(function(){
$(":input").css("background","#bfa");
});
匹配所有文本框：
$(document).ready(function(){
$(":text").css("background","#bfa");
});
匹配所有密码框：
$(document).ready(function(){
$(":password").css("background","#bfa");
});
匹配所有单选按钮：
$(document).ready(function(){
$(":radio").css("background","#bfa");
});
匹配所有复选框：
$(document).ready(function(){
$(":checkbox").css("background","#bfa");
});
匹配所有提交按钮：
$(document).ready(function(){
$(":submit").css("background","#bfa");
});

<body>
<div>test1</div>
<div id="d">test2</div>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="text" />
<input type="submit" />
</body>

Jquery选择器（三）的更多相关文章

  1. jquery选择器(三)-过滤选择器

    一.基本过滤选择器 二.内容过滤选择器 1. 包含文本内容为“text”的元素 2. 含有某个选择器所匹配的父元素 3. 包含有子元素或者文本的父元素 4. 不含有子元素或者文本的父元素 三.可见性过 ...

  2. jQuery（三）之 选择器(基础版)

    对于jQuery的调用,我们一般都会传入参数 html: <div></div> js: console.log($('<a />')); console.log( ...

  3. <三> jQuery 选择器

    jQuery 选择器选择需要应用效果的元素,jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择.选择器允许您对 HTML 元素组或单个元素进行操作. 元素选择 ...

  4. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  5. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  6. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  7. jQuery-1.9.1源码分析系列（二）jQuery选择器续1

    在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...

  8. 我人生中的jQuery选择器

    Jquery选择器 一.Jquery选择器简介 JavaScript只是一种运行于客户端,可以被客户端浏览器解析的一段代码.它和java没有任何关系.JavaScript简称JS.jQuery是对JS ...

  9. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  10. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

随机推荐

  1. python 正则表达式（二）

    下面列举了Python3的所有符号用法,别背,千万别背,用到时来查就行. 字符 含义 . 表示匹配除了换行符外的任何字符注:通过设置 re.DOTALL 标志可以使 . 匹配任何字符(包含换行符) | ...

  2. 关于unity3D的GL图像库的使用

    GL图象库 GL图象库是底层的图象库,主要功能是使用程序来绘制常见的2D与3D几何图形.这些图形具有一定的特殊性,他们不属于3D网格图形,只会以面的形式渲染.使用GL图象库,可在屏幕中绘制2D几何图形 ...

  3. Java微信开发_Exception_02_"errcode":40164,"errmsg":"invalid ip 61.172.68.219, not in whitelist hint

    ip查询网址: http://www.ip.cn/ 一.异常现象 今天开始做微信开发,在办公室时能正常获取access_token,晚上回家之后获取access_token时却报出下列错误信息: {& ...

  4. Abp模块分析

    1.什么是模块? 模块化是一种处理复杂系统分解为更好的可管理模块的方式.模块化用来分割,组织和打包软件.每个模块完成一个特定的子功能,所有的模块按某种方法组装起来,成为一个整体,完成整个系统所要求的功 ...

  5. SQL-INSERT INTO用法

    一.单独向表或视图中插入一行数据: insert [into]table_name[(column1,column2,...)]values (value1,value2,...) 说明: 1.int ...

  6. poj3630 Phone List (trie树模板题)

    Phone List Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 26328   Accepted: 7938 Descr ...

  7. 06 - Django应用第三步

    知识点 1) 编写urls 配合include()的URL查找过程 获取正则抓取的值并命名, 给url取名 2) 模板的编写 for循环的遍历 用点的方式执行函数, 不带括号 3) 视图函数的编写 H ...

  8. poj 2187 Beauty Contest —— 旋转卡壳

    题目:http://poj.org/problem?id=2187 学习资料:https://blog.csdn.net/wang_heng199/article/details/74477738 h ...

  9. Express Route的配置

    ExpressRoute在中国已经Preview了. 本篇文章讲介绍ExpressRoute如何配置. Express Route的逻辑拓扑结构: 在配置Express Route之前,需要做VLAN ...

  10. RPM包及其管理 rpm命令

    一.什么是RPMRPM:RedHat Package Manager     //红帽包管理如果Linux发行版本是redhat .redflag .centos .fedora .suse等或者衍生 ...