jQuery学习笔记（二）

this相关问题及jQuery选择器

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指代的是DOM对象，$(this)指代的是包装当前DOM对象的jQuery对象。

$("div").each(function(index){
     alert($(this));  // [object Object] jQuery对象
     alert(this);    // [object HTMLDivElement] DOM对象
});

jQuery选择器

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

获取指定id的元素，对其进行操作：

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

获取指定class的元素，对其进行操作：

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

现有一系列具有相同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>

获取这一系列元素中的第一个元素：

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

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

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

获取这一系列元素中的任意一个元素：

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

选择符合某些条件的复数个元素：

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

选择系列元素中索引为奇数的元素：

1
2

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

获取这一系列元素中的第一个：

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

获取这一系列元素中的第一个：

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

现有一系列链接元素，但是它们并没有唯一id标识，也没有className区分，各个元素之间仅有href是不一致的：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div>
        　　<a>0</a>
        　　<a href='/info'>1</a>
        　　<a href='/information'>2</a>
        　　<a href='/test'>3</a>
        </div>
    </body>
</html>

选择带有href属性的a标签元素：

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

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

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

选择href属性值以info开头的a标签元素：

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

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

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

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

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

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

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

根据DOM元素的内容来选择合适的元素：

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

根据DOM元素之间的关系来确定元素：

同级元素：即当前元素处于同一层级。
父级元素：即当前元素的直属上层元素。
祖先元素：即当前元素的所有上层元素。
子级元素：即当前元素的直属子层元素。

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

<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元素：

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

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

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

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

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

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

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

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

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

选择器总结

基础选择器

$('#info');  　　　　　 // 选择id为info的元素，id为document中是唯一的，因此可以通过该选择器获取唯一的指定元素
$('.infoClass');  　　 // 选择class为infoClass的所有元素
$('div');  　　　　  // 选择标签名为div的所有的元素
$('*');   　　　　　　// 选择所有标签元素

基本过滤器

基本选择器获取的元素集合，通过过滤器的筛选，使选择更加精确。

$('.infoClass:first');    // 选择class为infoClass的所有元素集合，并筛选集合中的第一个元素
$('.infoClass:last');     // 选择class为infoClass的所有元素集合，并筛选集合中的最后一个元素
$('.infoClass:odd');      // 选择class为infoClass的所有元素集合，并筛选集合中索引为奇数的元素，如1,3,5
$('.infoClass:even');     // 选择class为infoClass的所有元素集合，并筛选集合中索引为偶数的元素，如0,2,4
$('.infoClass:eq(2)');    // 选择class为infoClass的所有元素集合，并筛选集合中索引为2的元素
$('.infoClass.lt(2)');    // 选择class为infoClass的所有元素集合，并筛选集合中索引小于2的元素集合
$('.infoClass.gt(2)');    // 选择class为infoClass的所有元素集合，并筛选集合中索引大于2的元素集合

内容过滤器

jQery准备了内容过滤器用于对选择的元素集合内容进行过滤。
统一名称：
- 空元素：不包含任何后代元素或文本内容的元素，如
- 非空元素：包含后代元素或者包含文本内容的元素

$('div:contains("info")');     // 选择标签为div的所有元素集合，并筛选集合中文本内容包含info字段的元素
$('div:empty');                // 选择标签为div的所有元素集合，并筛选集合中所有空元素
$('div:parent');              // 选择标签为div的所有元素集合，并筛选集合中所有非空元素
$('div:has(p)');               // 选择标签为div的所有元素集合，并筛选集合中后代元素含有p标签的元素

可视化过滤器

对于元素是否可见，jQuery也进行了处理。

1 2	$('div:visible'); // 选择标签为div的所有元素集合，并筛选集合中可见的元素 $('div:hidden'); // 选择标签为div的所有元素集合，并筛选集合中不可见的元素

属性过滤器

不同元素之间，拥有不同的属性参数，jQuery允许通过参数进行过滤。

$('input[placeholder]');               // 选择所有标签为input的元素集合，并筛选包含placeholder属性的元素
$('input[placeholder="info"]');        // 选择所有标签为input的元素集合，并筛选placeholder属性值为info的元素
$('input[placeholder^="info"]');       // 选择所有标签为input的元素集合，并筛选placeholder属性值以info开头的元素
$('input[placeholder$="tion"]');       // 选择所有标签为input的元素集合，并筛选placeholder属性值以tion结尾的元素
$('input[placeholder*="mat"]');        // 选择所有标签为input的元素集合，并筛选placeholder属性值中包含字段mat的元素
$('input[id][placeholder*="mat"]');    // 选择所有标签为input的元素集合，并筛选包含id属性并且placeholder属性值中包含字段mat的元素

子元素过滤器

这个比较容易混淆，进行对比总结。

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

$('ul li:first-child').css('background-color', 'red');   // 选择每一个ul标签下的li元素集合中的第一个

$('ul li:first').css('background-color', 'red');   // 选择所有ul标签下的li元素集合中的第一个

$('ul li:last-child');   // 选择每一个ul标签下的li元素集合中的最后一个

1	$("p:nth-child(3)"); //选取属于其父元素的第三个子元素的每个<p> 元素

关系选择器

同级元素：即当前元素处于同一层级。
父级元素：即当前元素的直属上层元素。
祖先元素：即当前元素的所有上层元素。
子级元素：即当前元素的直属子层元素。
后代元素：即当前元素的所有子层元素。

$('form input');           // 选择所有标签为form的元素中，后代元素标签为input的元素
$('form>input');           // 选择所有标签为form的元素中，子级元素标签为input的元素
$('label+input');          // 选择所有标签为label的同级元素中，标签为input的元素集合中的第一个
$('label~input');          // 选择所有标签为label的同级元素中，标签为input的元素集合

表单选择器

方便表单元素的选择。

$(':input');                // 选择所有表单输入元素，包括input，textarea，select
$(':text');                 // 选择所有的type为text的input元素
$(':password');             // 选择所有的type为password的input元素
$(':radio');                // 选择所有的type为radio的input元素 
$(':checkbox');             // 选择所有的type为checkbox的input元素 
$(':submit');               // 选择所有的type为submit的input元素 
$(':image');                // 选择所有的type为image的input元素 
$(':reset');                // 选择所有的type为reset的input元素 
$(':button');               // 选择所有的type为button的input元素 
$(':file');                 // 选择所有的type为file的input元素 
$(':hidden');               // 选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤器

$(':enabled');                  // 选择所有的可操作的表单元素 
$(':disabled');                 // 选择所有的不可操作的表单元素 
$(':checked');                  // 选择所有的被checked的表单元素 
$('select option:selected');    // 选择所有的select 的子元素中被selected的元素

对比总结

为了方便记忆，将功能相关的选择器进行总结：

$(‘#id’)与$(‘.calss’)

1 2	$('#id'); 　　　　　 // 根据id选择元素 $('.class'); 　　 // 根据class选择元素

$(‘div:first’)与$(‘div:last’)

1 2	$('div:first'); // 选择div元素集合中的第一个 $('div:last'); // 选择div元素集合中的最后一个

$(‘div:odd’)与$(‘div:even’)

1 2	$('div:odd'); // 选择div元素集合中的奇数个元素 $('div:even'); // 选择div元素集合中的偶数个元素

$(‘div:gt(i)’)与$(‘div:lt(i)’)

1 2	$('div:gt(i)'); // 选择div元素集合中索引大于i的元素 $('div:lt(i)'); // 选择div元素集合中索引小于i的元素

$(‘div:empty’)与$(‘div:parent’)

1 2	$('div:empty'); // 选择div元素集合中空元素 $('div:parent'); // 选择div元素集合中非空元素

$(‘div:visible’)与$(‘div:hidden’)

1 2	$('div:visible'); // 选择div元素集合中可见元素 $('div:hidden'); // 选择div元素集合中隐藏元素

$(‘ul li:first’)与$(‘ul li:first-child’)

1 2	$('ul li:first'); // 选择所有ul后代元素li元素集合中的第一个 $('ul li:first-child'); // 选择每个ul后代元素li元素集合中的第一个

$(‘:disable’)与$(‘:enable’)

1 2	$(':disable'); // 选择所有可以操作的表单元素 $(':enable'); // 选择所有不可以操作的表单元素