大部分选择器都是基于下面这个简单的页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div,span,p{

            width: 140px;

            height: 140px;

            margin: 5px;

            background: #aaa;

            border:#000 1px solid;

            float: left;

            font-size: 17px;

            font-family: Verdana, Geneva, sans-serif;

        }

        div.mini{

            width: 55px;

            height: 55px;

            background-color: #aaa;

            font-size: 12px;

        }

        div.hide{

            display: none;

        }

    </style>

    <script src="http://code.jquery.com/jquery-2.2.3.js" ></script>

</head>

<body>

    <div class="one" id="one">

        id 为one，class为one的div

        <div class="mini">class为mini</div>

    </div>

    <div class="one" id="two" title="test">

        id为two,class为one,title为test的div

        <div class="mini" title="other">class为mini,title为other</div>

        <div class="mini" title="test">class为mini,title为test</div>

    </div>

    <div class="one">

        <div class="mini">class为mini</div>

        <div class="mini">class为mini</div>

        <div class="mini">class为mini</div>

        <div class="mini"></div>

    </div>

    <div class="one">

        <div class="mini">class为mini</div>

        <div class="mini">class为mini</div>

        <div class="mini">class为mini</div>

        <div class="mini" title="tesst">class为mini,title为tesst</div>

    </div>

    <div class="none" style="display: none;">

        style的display为"none"的div

    </div>

    <div class="hide">class为“hide”的div</div>

    <div>

        包含input的type为"hidden"的div <input type="text" class="hidden" size="8">

    </div>

    <span id="mover">正在执行动画的span元素.</span>

</body>

</html>

效果如下：

一、基本选择器

改变id为one的元素的背景色：

$("#one").css("background","#bbffaa");

改变class为mini的所有元素的背景色：

$(".mini").css("background","#bbffaa");

改变元素名是<div> 的所有元素的背景色

$("div").css("background","#bbffaa");

改变所有元素的背景色

$("*").css("background","#bbffaa");

改变所有的<span>元素和id未two的元素的背景色

$("span,#two").css("background","#bbffaa");

二、层次选择器

改变<body>内所有<div>的背景色。

$("body div").css("background","#bbffaa");

改变<body>内子<div>的背景色。

$("body>div").css("background","#bbffaa");

改变class为one的下一个<div>同辈元素的背景色。

$(".one+div").css("background","#bbffaa");

等价于

$(".one").next("div").css("background","#bbffaa");

包含input的type为"hidden"的div并不是class为one的下一个同辈元素，因为中间有有两个元素隐藏了。

改变id为two的元素后面的所有<div> 同辈元素的背景色。

$("#two~div").css("background","#bbffaa");

等价于

$("#two").nextAll("div").css("background","#bbffaa");

$("prev~siblings")和jquery中siblings()的区别： siblings()与前后位置无关，只有是同辈节点就都能匹配。

$("#two").siblings("div").css("background","#bbffaa");

三、过滤选择器

过滤选择器按过滤规则可分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、和表单对象属性过滤选择器。

1、基本过滤选择器

：first选取第一个元素。

例：$("div:first")选取所有<div>中第一个<div>。

:last选取最后一个元素。

例:$("div:last")选取所有<div>中最后一个<div>。

:not(selector)去除所有与给定选择器匹配的元素。

例：$("input:not(.myClass)") 选取class不是myClass的<input>元素。

改变class不为one的元素的背景色。

$("div:not(.one)").css("background","#bbffaa");

：even选取索引是偶数的所有元素，索引从0开始。

例：$("input:even")选取索引是偶数的<input>元素。

:odd选取索引是奇数的所有元素，索引从0开始。

例：$("input:odd")选取索引是奇数的<input>元素。

：eq(index) 选取索引等于index的元素（index从0开始）。

例：$("input:eq(1)")选取索引等于1的<input>元素。

:gt(index)选取索引大于index的元素(index从0开始)。

例：$("input:gt(1)")选取索引大于1的<input>元素。（大于1而不等于1）

：lt(index)选取索引小于index的元素（index从0开始）。

例：$("input:lt(1)")选取索引小于1的<input>元素。（小于1而不等于1）

:header选取所有的标题元素，例如h1,h2,h3等。

例：$("：header")选取网页中所有的<h1>,<h2>...

:animated:选取当前正在执行动画的所有元素。

例：$("div:animated")选取正在执行动画的<div>元素。

：focus：选取当前获取焦点的元素。

例：$(":focus")选取当前获取焦点的元素。

2、内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

:contains(text)：选取含有文本内容为"text"的元素。

$("div:contains('我')")选取含有文本"我"的<div>元素。

:empty选取不包含子元素或者文本的空元素

$("div:empty")选取不包含子元素(包括文本元素)的<div>空元素。

:has(selector)选取含有选择器所匹配的元素的元素。

$("div:has(p)")选取含有<p>元素的<div>元素。

:parent选取含有子元素或者文本的元素。

$("div:parent")选取拥有子元素(包括文本元素)的<div>元素。

例子：

改变含有文本“di”的<div>元素的背景色。

$("div:contains('di')").css("background","#bbffaa");

改变不包含子元素（包括文本元素）的<div>空元素背景色。

$("div:empty").css("background","#bbffaa");

改变含有class为mini元素的<div> 元素的背景色。

$("div:has('.mini')").css("background","#bbffaa");

改变含有子元素（包含文本元素）的<div>元素的背景色。

$("div:parent").css("background","#bbffaa");

3、可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

:hidden选取所有不可见的元素。

$("hidden")选取所有不可见的元素。包括<input type="hidden">，<div style="display:none">和<div style="visibility:hidden">等元素，如果只想选取<input>元素，可以使用$("input :hidden")。

:visible选取所有可见的元素。

$("div:visible")选取所有可见的<div>元素。

例：显示隐藏的<div> 元素。show（）是jquery方法，3000是事件，单位毫秒。

$("div:hidden").show(3000);

4、属性过滤选择器

属性过滤选择器通过元素的属性来获取相应的元素。

[attribute]:选取拥有此属性的元素。

[attribute1][attribute2][attributeN]用属性选择器合并成一个符合属性选择器，满足多个条件。每选择一次，缩小一次范围。

[attribute=value]选取属性值为value的元素。

[attribute!=value]选取属性值不为value的元素。

[attribute^=value]选取属性值以value开始的元素。

[attribute$=value]选取属性值以value结束的元素。

[attribute*=value]选取属性值含有value的元素。

[attribute|=value]选取属性等于给定字符串或以给定字符串为前缀(该字符串后跟一个连字符“-”)的元素。

[attribute~=value]选取属性用空格分隔的值中包含一个给定值的元素。

改变含有属性为title的<div>元素的背景色。

正确写法：

$("div[title]").css("background","#bbffaa");

错误写法：

$("div['title']").css("background","#bbffaa"); //title不能加引号

改变title值等于“test” 的<div>元素的背景色

正确写法：

$("div[title='test']").css("background","#bbffaa");  //test值加引号

$("div[title=test]").css("background","#bbffaa");   //test值不加引号

一个专为易混属性选择器准备的demo。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{

            width: 140px;

            height: 140px;

            margin: 5px;

            background: #aaa;

            border:#000 1px solid;

            float: left;

            font-size: 17px;

            font-family: Verdana, Geneva, sans-serif;

        }

    </style>

</head>

<body>

    <div title="en">title为en的div元素</div>

    <div title="en-UK">title为en-UK的div元素</div>

    <div title="english">title为engliashi的div元素</div>

    <div title="en uk">title为en uk的div元素</div>

    <div title="uken">title为uken 的div元素</div>

</body>

</html>

$("div[title^=en]").css("background","#bbffaa");    //改变title值以"en"开始的<div>的背景色

$("div[title*=en]").css("background","#bbffaa");    //改变title值含有"en"的<div>的背景色

$("div[title|=en]").css("background","#bbffaa");    //改变属性title等于en或以en为前缀(该字符串后面跟一个连字符“-”)的字符串。

$("div[title~=uk]").css("background","#bbffaa");    //改变属性title用空格分隔的值中包含字符串uk的元素的背景色

5、子元素过滤选择器

:first-child 选取元素，且该元素是其父元素的第一个子元素。

:last-chld 选取元素，且该元素是其父元素的最后一个子元素。

:only-child 选取元素，且该元素是其父元素的唯一子元素。

:nth-child(index/even/odd/equation)常用且重要

:nth-child(even) 选取每个父元素下的索引指是偶数的元素。
:nth-child(odd) 选取每个父元素下的索引值是奇数的元素。
:nth-child(2) 选取每个父元素下的索引值等于2的元素。
:nth-child(3n) 选取每个父元素下的索引值是3的倍数的元素。（n从1开始）。
:nth-child(3n+1) 选取每个父元素下的索引值是(3n+1)的元素。（n从1开始）。

demo:改变每个class为one的<div> 父元素下的第2个子元素的背景色。

$("div.one :nth-child(2)").css("background","#bbffaa");

对比：

eq(index) 只匹配一个元素。eq(index)的index从0开始。

:nth-child(index) 将为每一个符合条件的父元素匹配子元素。:nth-child(index)的index从0开始。

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

对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。

:enabled 选取所有可用元素。http://i.cnblogs.com/EditPosts.aspx?postid=5411457

:disabled 选取所有不可用的元素。

:checked 选取所有被选中的元素（单选框，复选框）。

:selected 选取所有被选中的选项元素（下拉列表）。

专为表单对象属性过滤选择器准备的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo of starof</title>

    <script src="http://code.jquery.com/jquery-2.2.3.js"></script>

</head>

<body>

    <form action="#" id="form1">

        可用元素：

        <input type="text" name="add" value="可用文本框">

        <br> 不可用元素：

        <input type="text" name="email" disabled="disabled" value="不可用文本框">

        <br> 可用元素：

        <input type="text" name="che" value="可用文本框">

        <br> 不可用元素：

        <input type="text" name="name" disabled="disabled" value="不可用文本框">

        <br>

        <br> 多选框：

        <br>

        <input type="checkbox" name="newsletter" checked="checked" value="test1"> test1

        <input type="checkbox" name="newsletter" value="test2"> test2

        <input type="checkbox" name="newsletter" value="test3"> test3

        <input type="checkbox" name="newsletter" checked="checked" value="test4">test4

        <input type="checkbox" name="newsletter" value="test5"> test5

        <div></div>

        <br>

        <br>

        <select name="test" id="" multiple style="height:100px;">

            <option value="">浙江</option>

            <option value="" selected="selected">湖南</option>

            <option value="">北京</option>

            <option value="" selected="selected">天津</option>

            <option value="">广州</option>

            <option value="">湖北</option>

        </select>

        <br>

        <br> 下拉列表2：

        <br>

        <select name="test2" id="">

            <option value="">浙江</option>

            <option value="">湖南</option>

            <option value="" selected="selected">北京</option>

            <option value="">天津</option>

            <option value="">广州</option>

            <option value="">湖北</option>

        </select>

    </form>

</body>

</html>

改变表单内可用<input>元素的值。

Note:像input（select，checkbox textarea radio）这样的替换元素，获取值和赋值只能用value。了解更多可参考：DOM

    //$("#form1 input:enabled").text("变化了");    //错误

    //$("#form1 input:enabled").html("变化了");    //错误

    $("#form1 input:enabled").val("变化了");        //正确

获取多选框选中的个数：

$("#form1 input:checked").length

获取下拉框选中的内容：

$("#form1 :selected").text()

四、表单选择器

：input 选取所有的<input> ，<textarea>,<select>和<button>元素。

例：$(":input")选取所有<input>，<textarea>,<select>和<button>元素。

:text 选取所有的单行文本框。

:password 选取所有的密码框。

:radio 选取所有的单选框。

:checkbox 选取所有的多选框。

:submit选取所有的提交按钮。

:image 选取所有的图像按钮。

:reset 选取所有的重置按钮。

:button 选取所有的按钮。

:file选取所有的上传域。

:hidden 选取所有不可见元素。

表单选择器例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo of starof</title>

    <script src="http://code.jquery.com/jquery-2.2.3.js"></script>

</head>

<body>

    <form action="#" id="form1">

        <input type="button" value="Button"><br>

        <input type="checkbox" name="c">1

        <input type="checkbox" name="c">2

        <input type="checkbox" name="c">3 <br>

        <input type="file"><br>

        <input type="hidden"><div style="display:none">test</div><br>

        <input type="image"><br>

        <input type="password"><br>

        <input type="radio" name="a">1<input type="radio" name="a">2 <br>

        <input type="reset">    <br>

        <input type="submit" value="提交">    <br>

        <input type="text">    <br>

        <select>

            <option>Option</option>

        </select><br>

        <textarea></textarea><br>

        <button>Button</button><br>

    </form>

</body>

</html>

区别：$("#form1 :input")和$("#form1 input")

<script>

        alert($("#form1 :input").length);        //表单内表单元素的个数16

        alert($("#form1 input").length);         //表单内input元素个数13

</script>

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5411457.html有问题欢迎与我讨论，共同进步。

jquery选择器demo的更多相关文章

jQuery 选择器demo练习
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...
在.NET中使用JQuery 选择器精确提取网页内容
1. 前言相信很多人做开发时都有过这样的需求:从网页中准确提取所需的内容.思前想后,方法无非是以下几种:(本人经验尚浅,有更好的方法还请大家指点) 1. 使用正则表达式匹配所需元素.(缺点:同类型的 ...
jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点基本选择器层次选择器过滤选择器表单选择器第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
jQuery-认识JQuery，jQuery选择器
认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机必须等待网页中的所有内容 ...
jQuery 选择器（基础恶补)
jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
[JS] jQuery选择器
jQuery 选择器选择器实例选取 * $("*") 所有元素 #id $("#lastname") id=lastname 的元素 .class $(& ...
jQuery 选择器（转）
jQuery 选择器选择器实例选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元 ...
jQuery 选择器【1】
jQuery 选择器请使用我们的 jQuery 选择器检测器来演示不同的选择器. 选择器实例选取 * $("*") 所有元素 #id $("#lastname&q ...
JavaScript（15）jQuery 选择器
jQuery 选择器选择器同意对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器同意通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器同意对 ...

随机推荐

WPF DataGrid 鼠标双击选中的DataGridRow及Row数据
设置DataGrid的MouseDoubleClick事件代码 //DataGrid鼠标双击事件 Private void dataGrid_MouseDoubleClick(object send ...
客户端调用 WCF 的几种方式
转载网络代码.版权归原作者所有..... 客户端调用WCF的几种常用的方式: 1普通调用 var factory = new DataContent.ServiceReference1.Custome ...
装饰模式 - Decorator 和外观模式 - Facade
装饰模式 Decorator,不改变接口但动态给对象加入责任,所需功能按顺序串联起来控制,比生成子类灵活. 外观模式 Facade,让接口更简单.为子系统中的一组接口提供一个一致的界面. 参考:
C#的Socket实现UDP协议通信
今天稍花化了一点时间,利用C#的Socket验证了UDP的通信,为接下来特地利用UDP做个分布式的通信仿真系统打下基础.众所周知,UDP 就是用户数据报协议,在互联网参考模型的第四层——传输层.与TC ...
基于CkEditor实现.net在线开发之路（3）常用From表单控件介绍与说明
上一章已经简单介绍了CKEditor控件可以编写C#代码,然后可以通过ajax去调用,但是要在网页上面编写所有C#后台逻辑,肯定痛苦死了,不说实现复杂的逻辑,就算实现一个简单增删改查,都会让人头痛欲裂 ...
JavaScript一词被《牛津大词典》收录了
早上看VS Team的推特发了这个图片,以前总爱问Java怎么读,现在好了,有标准发音了. 确定是扎瓦·死磕瑞普特 ,哈哈,以后不要再念加瓦了. …… Last month JavaScript r ...
jquery 文本/html/值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Debian 7 安装配置总结
最近几天折腾了一下Debian 7 (gnome桌面DVD版,KDE桌面CD版最后会提到),总的来说收获还是挺大的,对比以前使用ubuntu,debian 7给我的感觉像是一个新生婴儿,不带多余的花俏 ...
Linux查看CPU和内存使用情况(转)
在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会 ...
SVN版本控制系统学习(中文配置)
先吐槽下往上搜索的一些SVN下载地址,里面乱七八糟啥都有,下载好后点击安装一不注意啥玩意都安装上了, 什么玩意都有,真心不明白这些推送者是怎么想的.搜集了一个WIN32的百度网盘下载地址: http: ...

jquery选择器demo