03的开发日志
0%

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

发表于 更新于 分类于
本文字数： 11k 阅读时长 ≈ 10 分钟
  1. CSS选择器
  2. jQuery选择器
  3. jQuery选择器的优势
  4. jQuery选择器的种类
    1. 1. 基本选择器
    2. 2. 层次选择器
    3. 3. 过滤选择器
    4. 4. 表单选择器
  5. 选择器中含有空格的注意事项

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

CSS选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*标签选择器*/
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代码混杂）
1
2
3
4
5
6
7
8
<p onclick="demo();">
    喵喵喵
</p>
<script type="text/javascript">
    function demo() {
        alert("喵喵喵!");
    }
</script>
  • 使用jQuery方法做到网页内容和行为分离
1
2
3
4
5
6
7
8
<p class="demo">
    喵喵喵
</p>
<script type="text/javascript">
    $(".demo").click(function demo() {
        alert("喵喵喵!");
    })
</script>

jQuery选择器的优势

  1. 简洁的写法。对比于DOM方法的getElementById()和getElementsByTagName()函数，更加简洁。
  2. 支持CSS1到CSS3选择器
  3. 完善的处理机制。使用DOM方法的getElementById()和getElementsByTagName()时，若不存在相应的DOM元素（ID或TagName），浏览器就会报错。但使用jQuery获取网页中不存在的元素也不会报错。
1
2
3
4
<div>test</div>
<script type="text/javascript">
    $("#tt").css("color","red");
</script>

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

1
2
3
if ($("#tt").length > 0) { //判断长度
    //do something
}
1
2
3
if ($("#tt")[0]) { //转换成DOM对象
    //do something
}

jQuery选择器的种类

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

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//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元素之间的层次关系来获取特定元素。包括后代元素、子元素、相邻元素、兄弟元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//后代元素：改变<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. 基本过滤选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$("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. 内容过滤选择器
1
2
3
4
5
6
7
8
9
$("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. 可见性过滤选择器

1
2
3
4
//让不可见元素显示。show()是jQuery显示元素的方法，3000是时间，单位是毫秒。
$("div:hidden").show(3000);

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

注：常用到的的不可见元素
1
2
3
<input type="hidden"/>
<div style="display: none;">略略略看不见我</div>
<div style="visibility: hidden;">略略略还是看不见我</div>

4. 属性过滤选择器

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 含有属性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. 子元素过滤选择器

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//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表单页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>

表单对象属性过滤选择器：
1
2
3
4
5
6
7
8
9
10
11
12
13
//选取可用元素
$("#form1 input:enabled")
    .val("这里变化了");

//选取不可用元素
$("#form1 input:disabled")
    .val("这里变化了");

//选取已被选中的元素（单选框、复选框）
$("#form1 input:checked").length;

//选取已被选中的元素（下拉列表）-注意select后面有空格
$("#form1 select :selected").text();

4. 表单选择器

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(":input") //<input><textarea><select><button>元素

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

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

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

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

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

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

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

$(":button") //按钮

$(":file") //上传域
    
$(":hidden") //不可见元素

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

来看一个例子：
HTML：

1
2
3
4
5
6
7
8
9
10
11
<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：
1
2
3
4
5
6
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，同时自身是隐藏元素的所有元素。