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 ...

随机推荐

PTA L1-006 连续因子【暴力模拟】
一个正整数N的因子中可能存在若干连续的数字.例如630可以分解为3*5*6*7,其中5.6.7就是3个连续的数字.给定任一正整数N,要求编写程序求出最长连续因子的个数,并输出最小的连续因子序列. 输入 ...
Leetcode（22）-括号生成
给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", "(()())& ...
vue开发环境和生产环境配置
开发环境配置一般情况下开发环境是会跨域的,所以我们只需要在跨域的位置配置即可.进入config/index.js,在proxyTable对象里面添加代码,如下 '/api': { target: ' ...
vue stop event bug
vue stop event bug [Vue warn]: Error in v-on handler: "TypeError: e.prevntDefault is not a func ...
如何使用 js 实现一个 Promise.all 方法 PromiseAll
如何使用 js 实现一个 Promise.all 方法 PromiseAll Promise.all PromiseAll https://developer.mozilla.org/en-US/do ...
vue & $router & History API
vue & $router gotoTemplateManage(e) { e.preventDefault(); this.$router.push({ path: `/operate-to ...
vux使用
Vue中使用vux的配置,分为两种情况: 一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my ...
NGK算力持有好处多多！SPC、VAST等免费拿！
众所周知,NGK是分布式存储的,作为Web3.0以及数字经济时代的基础设施,为数字加密市场带来了全新的商业模式和经济业态,但是,这只是一个重要的起点,真正的价值还在后面! 为了满足NGK生态建设者强烈 ...
PAA子公司在印度印度成立
近日PAA房产又有大动作啦!在一片期待中,印度分公司正式成立!这是集团继泰国.越南.韩国.上海.成都.中国香港.中国台湾等分公司成立之后的又一扛鼎力作,更是PAA集团全球化战略布局的重要举措. 印度分 ...
【python接口自动化】- 正则用例参数化
我们在做接口自动化的时候,处理接口依赖的相关数据时,通常会使用正则表达式来进行提取相关的数据. 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式.常规表示法(Regular Ex ...

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

目录