jQuery学习笔记（二）：this相关问题及选择器

上一节的遗留问题，关于this的相关问题，先来解决一下。

this的相关问题

this指代的是什么

这个应该是比较好理解的，this就是指代当前操作的DOM对象。

在jQuery中，this可以用于单个对象，也可以用于多个对象。

$('btn').click(function(){

    alert(this.innerHTML);  // 单个对象，this指代当前id为btn的DOM对象

});

$('div').each(function(index){

    alert(this.innerHTML);  // 多个对象，this指代当前循环中索引为index的DOM对象

});

jQuery中的this和$(this)有什么区别

jQuery中的this和$(this)有什么区别

$("div").each(function(index){

     alert($(this));  // [object Object] jQuery对象

     alert(this);    // [object HTMLDivElement] DOM对象

});

可以观察到，this指代的是DOM对象，$(this)指代的是包装当前DOM对象的jQuery对象。

jQuery选择器

上一节也分析到，jQuery的最大贡献之一就是方便的获取DOM元素，并对DOM元素进行操作。

先看几个简单的例子：

$('div');  // 选择所有标签为div的DOM元素

$('#info');  // 选择id为info的DOM元素

$('div>p');  // 选择所有div标签下的子集标签为p的DOM元素

$('input[placeholder*="info"]');  // 获取所有input标签中，属性placeholder值中包含info字段的DOM元素

$('p:odd');  // 获取所有标签为p的元素压入栈中，选择其中索引值为奇数的DOM元素

可以看到，有多种选择方式让你获取你所需要的对象，这些先作为一个引子，让我们对jQuery的选择器有一个大致上的印象。现在以开发者的角度来思考：如何选择需要的DOM元素。

1. 首先能想到的是，获取指定id的元素，对其进行操作。

$('#info');  // 获取id为info的元素

2. 既然可以获取指定id的元素，那么理所应当的，也可以获取指定class的元素。

$('.info');  // 获取class为info的元素

3. 有时会遇到一系列具有相同className的元素，而这些元素之间没有办法互相区分彼此。

<!DOCTYPE html>

<html>

    <head>

        <title>Test</title>

    </head>

    <body>

    　　<div class='info'>0</div>

    　　<div class='info'>1</div>

    　　<div class='info'>2</div>

    　　<div class='info'>3</div>

    　　<div class='info'>4</div>

    </body>

</html>

这时，如果我想获取这一系列元素中的第一个：

$('.info:first').val();  // 获取class为info的一系列元素中的第一个元素的值，即0

我想获取这一系列元素中的最后一个：

$('.info:last').val();  // 获取class为info的一系列元素中的最后一个元素的值，即4

那获取任意一个元素呢？

$('.info:eq(2)').val();  // 获取class为info的一系列元素中索引为2的元素的值，即2（索引从0开始）

看来选择单个元素还是很方便的，那要是选择符合某些条件的复数个元素呢？比如选择这一组元素的后三个元素：

$('.info:gt(1)');  // 获取class为info的一系列元素中索引大于1的对象，即2,3,4

$('.info:lt(2)');  // 获取class为info的一系列元素中索引小于2的对象，即0,1

选择系列元素中索引为奇数的元素（好像很少这么做，但jQuery也为我们提供了选择器）

$('.info:odd');  // 获取class为info的一系列元素中索引为奇数（1,3）的对象，即1,3
$('.info:even');  // 获取class为info的一系列元素中索引为偶数（0,2,4）的对象，即0、2、4

4. 比如现在有一系列链接元素，但是它们并没有唯一id标识，也没有className区分，各个元素之间仅有href是不一致的，该如何选择需要的元素呢？

<!DOCTYPE html>

<html>

    <head>

        <title>Test</title>

    </head>

    <body>

        <div>

        　　<a>0</a>

        　　<a href='/info'>1</a>

        　　<a href='/infomation'>2</a>

        　　<a href='/test'>3</a>

        </div>

    </body>

</html>

比如我想选择带有href属性的a标签元素：

$('a[href]');  // 选择带有href属性的a标签，即1,2,3

选择href属性值为info的a标签元素：

$('a[href="info"]');  // 选择href属性为info的a标签，即1

选择href属相值已info开头的a标签元素：

$('a[href^="info"]');  // 选择带有href属性值已info开头的a标签，即1,2

选择href属性值已tion结尾的a标签元素：

$('a[href$="tion"]');  // 选择带有href属性值已tion结尾的a标签，即2

选择href属性值中有fo字段的a标签元素：

$('a[href*="fo"]');  // 选择带有href属性值中包含fo的a标签，即1,2

当然，也可以进行反选，选择href属性值中不包含info的a标签元素：

$('a[href!="info"]');  // 选择带有href属性值中不包含info的a标签，即3

5. 还有会遇到一些情况，要求我们根据DOM元素的内容来选择合适的元素。

$('div:contains("info")'); // 选择div标签中内容包含info字段的元素

6. 现在我们已经通过指定id、class或是指定索引值、属性值来确定元素，让我们换个角度，有没有可能从元素之间的关系来确定元素呢？

先统一名称：

同级元素：即当前元素处于同一层级。

<div>

    <p>0</p>  // 当前两个标签为p的元素处于同一层级，属于同级元素

    <p>1</p>

</div>

父级元素：即当前元素的直属上层元素。

祖先元素：即当前元素的所有上层元素。

子级元素：即当前元素的直属子层元素。

后代元素：即当前元素的所有子层元素。

<div id='ancestor'>

    <div id='father'>  // 标签为p的元素的父级元素是id为father的元素，祖先元素为id为father和ancestor的元素

          <p><span>0</span></p>  // id为father的元素的子级元素是标签为p的元素，后代元素为标签p与span的元素

          <p>1</p>

    </div>

</div>

统一好关系名称之后，再探讨元素之间的关系就不会感觉混乱。

现在有如下代码：

<form>

    <label>Name:</label>

    <input name="name" />

    <fieldset>

        <label>Newsletter:</label>

        <input name="firstletter" />
　　　　 <input name="secondletter" />
    </fieldset>

    <input name="none" />

</form>

选择标签为form的所有子级input元素：

$('form>input'); // 选择标签为from的元素下的所有标签为input的子级元素，即name=“name”，name=“none”的元素

选择标签为form的所有的后代input元素：

$('form input'); // 选择标签为from的元素下的所有标签为input的后代元素，即name=“name”，name=“none”，name=“firstletter”，name=“secondletter”的元素

也可以选择符合条件的同级元素（同级元素中的第一个）：

$('label+input'); // 选择标签为label的同级元素中，标签为input的元素中的第一个，即name=“name”，name=“firstletter”的元素

也可以选择所有符合条件的同级元素：

$('label~input'); // 选择标签为label的同级元素中，所有标签为input的元素，即name=“name”，name=“firstletter”，name=“secondletter”，name=“none”的元素

选择后代元素中包含选定元素的元素：

<div>

    <p><span>Hello</span></p>

</div>

<div>Hello again!</div>

$('div:has(span)') // 选择所有后代元素中包含span元素的div元素

以上便是暂时能够想到的获取DOM对象的方法，通过阅读jQuery手册，发现jQuery也很好的将这些考虑了进去。在下一节中，可以针对jQuery中的选择器进行总结。