jQuery的选择器完全继承了CSS的风格，利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为。

CSS选择器

/*标签选择器*/

td{

    font-size: 14px;

    width: 120px;

}

/*ID选择器*/

#note{

    font-size: 14px;

    width: 120px;

}

/*类选择器*/

div.note{

    font-size: 14px;

}

.dream{

    font-size: 14px;

}

/*群组选择器*/

td,p,div.a{

    font-size: 14px;

}

/*后代选择器*/

#links a{

    color: red;

}

/*通配选择符*/

*{

    font-size: 14px;

}

ID和class的区别

对于html而言，ID和class都是DOM元素的属性值。不同的地方在于ID属性的值是唯一的，而class属性值可以重复。
一般不会对ID添加样式，使用只对class添加样式。

jQuery选择器

利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，并且无需担心浏览器是否支持这一选择器。

在HTML中设置事件（JavaScript代码和HTML代码混杂）

<p onclick="demo();">

    喵喵喵

</p>

<script type="text/javascript">

    function demo() {

        alert("喵喵喵!");

    }

</script>

使用jQuery方法做到网页内容和行为分离

<p class="demo">

    喵喵喵

</p>

<script type="text/javascript">

    $(".demo").click(function demo() {

        alert("喵喵喵!");

    })

</script>

jQuery选择器的优势

简洁的写法。对比于DOM方法的getElementById()和getElementsByTagName()函数，更加简洁。
支持CSS1到CSS3选择器
完善的处理机制。使用DOM方法的getElementById()和getElementsByTagName()时，若不存在相应的DOM元素（ID或TagName），浏览器就会报错。但使用jQuery获取网页中不存在的元素也不会报错。

<div>test</div>

<script type="text/javascript">

    $("#tt").css("color","red");

</script>

注：若要判断所选择的元素是否存在，应该判断获取到的元素长度或者转换成DOM对象来判断

if ($("#tt").length > 0) { //判断长度

    //do something

}

if ($("#tt")[0]) { //转换成DOM对象

    //do something

}

jQuery选择器的种类

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。用以下页面进行试验：

HTML:

<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 style="display: none;" class="none">style的displ为“none”点的div</div>

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

<div>

    包含type为“hidden”的input的div

    <input type="hidden" size="8"/>

</div>

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

CSS

<style type="text/css">

    div,span,p{

        width: 140px;

        height: 140px;

        margin: 5px;

        background: #aaa;

        border: #000 1px solid;

        float: left;

        font-size: 17px;

        font-family: Verdana;

    }

    div.mini{

        width: 55px;

        height: 55px;

        background-color: #aaa;

        font-size: 12px;

    }

    div.hide{

        display: none;

    }

</style>

1. 基本选择器

基本选择器是最常用、最简单的选择器，通过元素id、class和标签名来查找DOM元素。

//ID

$("#one")

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

//类(class)

$(".mini")

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

//元素div

$("div")

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

//所有元素

$("*")

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

//所有<span>元素和id为two的元素

$("span, #two")

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

2. 层次选择器

通过DOM元素之间的层次关系来获取特定元素。包括后代元素、子元素、相邻元素、兄弟元素。

//后代元素：改变<body>内所有<div>的背景色

$("body div")

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

//子元素：改变<body>内子<div>元素的颜色(仅为body下一级的div元素)

$("body > div")

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

$("body >> div")//可以嵌套，表示下两级

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

$("body > div > div")

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

//相邻元素：改变class为one的下一个<div>元素背景色（注意不会选中自身）

$(".one + div")

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

$(".one").next("div") //更常用的方法

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

//兄弟元素：改变id为two的元素后面所有<div>兄弟元素的背景色（注意不会选中自身）

$("#two ~ div") //所有元素

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

$("#two").nextAll("div") //更常用的方法

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

$("#two").siblings("div")//nextAll只能选择之后的同辈元素，siblings方法可以选择与前后位置无关的同辈元素

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

3. 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素。选择器以冒号(:)开头，搭以不同的过滤规则。在冒号前可以有一个元素、多个元素、或者没有元素。

1. 基本过滤选择器

$("div:first") //所有div元素的第一个

$("div:last") //所有div元素的最后一个

$("input:not(.myClass)") //选择class不是myClass的input

$("input:even") //索引为偶数的<input>

$("input:odd") //索引为奇数的<input>

$("input:eq(0)") //索引等于0的<input>，若索引号为负数，则逆序寻址

$("input:gt(1)") //索引大于1的<input>

$("input:lt(10)") //索引小于10的<input>

$(":header") //所有<h1><h2><h3>...

$("div:animated") //正在执行动画的<div>

2. 内容过滤选择器

$("div:contains('di')") //选择含有文本"di"的<div>

$("div:empty") //选择不包含子元素（包括文本元素）的<div>

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

$(":has(#two)")  //选取含有id为two的所有元素

$(":has(.mini)") //选取含有class为mini的所有元素

$("div:parent") //选择拥有子元素（包括文本元素）的<div>.（当爸爸了）

注：contains()和has()方法的区别

contains()方法只选取文本
has()方法只可以选取标签、id和class

3. 可见性过滤选择器

//让不可见元素显示。show()是jQuery显示元素的方法，3000是时间，单位是毫秒。

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

$("div:visible") //选取可见的div元素

注：常用到的的不可见元素

<input type="hidden"/>

<div style="display: none;">略略略看不见我</div>

<div style="visibility: hidden;">略略略还是看不见我</div>

4. 属性过滤选择器

通过元素的属性来获取相应的元素

// 含有属性title的div

$("div[title]")

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

//属性title值为test的div

$("div[title=test]")

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

//title的值不为test的div（不一定要有title）

$("div[title!=test]")

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

//title以te开头的div

$("div[title^=te]")

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

//title以st结尾的div

$("div[title$=st]")

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

//title包含es的div

$("div[title*=es]")

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

//含有属性id，同时title包含es的div

$("div[id][title*=es]")

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

5. 子元素过滤选择器

特别强调：子元素过滤选择器的冒号前一定要有空格，不然会报错。

//class为one的div父元素下第二个子元素

$("div.one :nth-child(2)")

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

//class为one的div父元素的第一个子元素

$("div.one :first-child")

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

//class为one的div父元素的最后一个子元素

$("div.one :last-child")

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

//选择只有一个子元素的class为one的div元素

$("div.one :only-child")

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

注：nth-child()和eq()的区别

eq(index)只匹配一个元素，nth-child(index)将为每一个父元素匹配子元素
eq(index)的index从0开始；nth-child(index)的index从1开始

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

主要是对所选择的表单元素进行过滤，如下拉框、多选框等。

HTML表单页面：

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

    可用元素：<input name="add" value="可用文本框"/><br/>

    不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>

    可用元素：<input name="che" value="可用文本框"/><br/>

    不可用元素：<input 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/>

    下拉列表1：<br/>

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

        <option>浙江</option>

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

        <option>北京</option>

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

        <option>广州</option>

        <option>湖北</option>

    </select>

    <br/><br/>

    下拉列表2：<br/>

    <select name="test2">

        <option>浙江</option>

        <option>湖南</option>

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

        <option>天津</option>

        <option>广州</option>

        <option>湖北</option>

    </select>

    <div></div>

</form>

表单对象属性过滤选择器：

//选取可用元素

$("#form1 input:enabled")

    .val("这里变化了");

//选取不可用元素

$("#form1 input:disabled")

    .val("这里变化了");

//选取已被选中的元素（单选框、复选框）

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

//选取已被选中的元素（下拉列表）-注意select后面有空格

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

4. 表单选择器

表单选择器可以方便用户获取表单的某个或某类型的元素。和表单对象属性过滤选择器的区别在于：表单选择器侧重于选择表单元素，而表单对象属性过滤选择器侧重于选择属性。

$(":input") //<input><textarea><select><button>元素

$(":text") //单行文本框

$(":password") //密码框

$(":radio") //单选框

$(":checkbox") //复选框

$(":submit") //提交按钮

$(":image") //图像按钮

$(":reset") //重置按钮

$(":button") //按钮

$(":file") //上传域

$(":hidden") //不可见元素

选择器中含有空格的注意事项

来看一个例子：

HTML：

<div class="test">

    <div style="display: none;">aa</div>

    <div style="display: none;">bb</div>

    <div style="display: none;">cc</div>

    <div class="test" style="display: none;">dd</div>

</div>

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

    ee

    <div style="display: none;">ff</div>

</div>

<div class="test" style="display: none;">gg</div>

JavaScript：

var $t_a = $(".test :hidden"); //带空格

var $t_b = $(".test:hidden"); //不带空格

var len_a = $t_a.length;

var len_b = $t_b.length;

alert(len_a); //输出5

alert(len_b); //输出3

区别：

$(".test :hidden"); //带空格选取的是class为test的元素中所有的隐藏元素。
$(".test:hidden"); //不带空格选取的是class为test，同时自身是隐藏元素的所有元素。

jQuery学习笔记（2） jQuery选择器的更多相关文章

jQuery 学习笔记：jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
jQuery学习笔记之jQuery的Ajax（3）
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点基本选择器层次选择器过滤选择器表单选择器第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
jquery学习笔记(一)：选择器
内容来自[汇智网]jquery学习课程 1.1 基础选择器选择器功能返回值 #id 根据给定的id匹配一个元素单个元素 element 根据给定的元素名匹配所有元素元素集合 .class 根 ...
锋利的jQuery学习笔记之jQuery选择器
在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器常见的CSS选择器有以下几种: 选择器语法描述示例标签选择器 E{CSS规则} 以文档元素为选择符 t ...
jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作查找节点创建节点删除节点复制节点替换节点包裹节点属性操作样式操作对HTML.文本和值的操作遍历节点 CSS-DOM操作小结本 ...
jQuery学习笔记之jQuery.fn.init()的参数分析
这篇文章主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下从return new jQuery.fn.init( selector, context, rootjQuer ...
jQuery学习笔记（jquery.ui插件）
官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...
jQuery学习笔记（jquery.simplemodal插件）
官网地址:http://www.ericmmartin.com/ SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架.Simpl ...
jQuery学习笔记（jquery.form插件）
官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...

随机推荐

Git使用指南（下）
9 初识分支把每一次的提交,都用线连起来,你会发现,很连贯. C/C++ 指针的概念 git reset --hard commitid HEAD 如果说内容已经add到暂存区,此时要想 ...
JavaScript 的 7 种设计模式
原文地址:Understanding Design Patterns in JavaScript 原文作者:Sukhjinder Arora 译者:HelloGitHub-Robert 当启动一个新的 ...
vue watcher errors
vue watcher errors Error in callback for watcher TypeError: Cannot set property of undefined" n ...
如何在没有显示器的情况下，查看 Raspberry Pi 3的 IP 信息（Raspberry Pi 3 ，IP Address）
1. 如何在没有显示器的情况下,查看 Raspberry Pi 3的 IP 信息(Raspberry Pi 3 ,IP Address) 1 IP Address Any device connect ...
how to convert Map to Object in js
how to convert Map to Object in js Map to Object just using the ES6 ways Object.fromEntries const lo ...
React Native hot reloading & Android & iOS
React Native hot reloading & Android & iOS https://facebook.github.io/react-native/docs/debu ...
nasm astrset_s函数 x86
xxx.asm %define p1 ebp+8 %define p2 ebp+12 %define p3 ebp+16 section .text global dllmain export ast ...
ts 使用 keyof typeof
传递参数 const cats = { "Coding Cat": "https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy. ...
用一次就会爱上的cli工具开发
本文转载自用一次就会爱上的cli工具开发写在前面最近接手任务--使用nodejs开发一个公司内部使用的cli工具,简而言之就是输入一行命令快速搭建好项目结构,也可以通过不同的命令引入不同的文件. ...
TERSUS无代码开发(笔记07)-简单实例手机端后台逻辑开发
提交申请逻辑开发 1.添加父级对象引用(从父级对象中获取前端输入框的值) 1.设计数据库表(表名和字段名称不能用中文) 2.设计置数据库主键(可设联合主键) 3.传值形成数据实列处理 4.服务器端处理 ...

jQuery学习笔记（2） jQuery选择器

目录