Fork me on GitHub

jQuery学习笔记(二)

this相关问题及jQuery选择器

this的相关问题

this指代
  • this指代当前操作的DOM对象
  • 在jQuery中,this可以用于单个对象,也可以用于多个对象。
    1
    2
    3
    4
    5
    6
    $('#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对象
    1
    2
    3
    4
    $("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的元素,而这些元素之间没有办法互相区分彼此:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!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是不一致的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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元素之间的关系来确定元素:
  • 同级元素:即当前元素处于同一层级。
  • 父级元素:即当前元素的直属上层元素。
  • 祖先元素:即当前元素的所有上层元素。
  • 子级元素:即当前元素的直属子层元素。
  • 后代元素:即当前元素的所有子层元素。

    1
    2
    3
    4
    <div>
    <p>0</p> // 当前两个标签为p的元素处于同一层级,属于同级元素
    <p>1</p>
    </div>
    1
    2
    3
    4
    5
    6
    <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>
  • 现在有如下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <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元素

选择器总结

基础选择器
1
2
3
4
$('#info');        // 选择id为info的元素,id为document中是唯一的,因此可以通过该选择器获取唯一的指定元素
$('.infoClass');    // 选择class为infoClass的所有元素
$('div');      // 选择标签名为div的所有的元素
$('*');       // 选择所有标签元素
基本过滤器
  • 基本选择器获取的元素集合,通过过滤器的筛选,使选择更加精确。
1
2
3
4
5
6
7
$('.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准备了内容过滤器用于对选择的元素集合内容进行过滤。
  • 统一名称:
    • 空元素:不包含任何后代元素或文本内容的元素,如
    • 非空元素:包含后代元素或者包含文本内容的元素
1
2
3
4
$('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允许通过参数进行过滤。
1
2
3
4
5
6
$('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的元素
子元素过滤器
  • 这个比较容易混淆,进行对比总结。
1
2
3
4
5
6
7
8
9
10
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
1
2
3
4
5
$('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> 元素
关系选择器
  • 同级元素:即当前元素处于同一层级。
  • 父级元素:即当前元素的直属上层元素。
  • 祖先元素:即当前元素的所有上层元素。
  • 子级元素:即当前元素的直属子层元素。
  • 后代元素:即当前元素的所有子层元素。
1
2
3
4
$('form input');           // 选择所有标签为form的元素中,后代元素标签为input的元素
$('form>input'); // 选择所有标签为form的元素中,子级元素标签为input的元素
$('label+input'); // 选择所有标签为label的同级元素中,标签为input的元素集合中的第一个
$('label~input'); // 选择所有标签为label的同级元素中,标签为input的元素集合
表单选择器
  • 方便表单元素的选择。
1
2
3
4
5
6
7
8
9
10
11
$(':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元素或表单的隐藏域
  • 表单元素过滤器
1
2
3
4
$(':enabled');                  // 选择所有的可操作的表单元素 
$(':disabled'); // 选择所有的不可操作的表单元素
$(':checked'); // 选择所有的被checked的表单元素
$('select option:selected'); // 选择所有的select 的子元素中被selected的元素
对比总结
  • 为了方便记忆,将功能相关的选择器进行总结:
  1. $(‘#id’)与$(‘.calss’)

    1
    2
    $('#id');        // 根据id选择元素
    $('.class');    // 根据class选择元素
  2. $(‘div:first’)与$(‘div:last’)

    1
    2
    $('div:first');     // 选择div元素集合中的第一个  
    $('div:last'); // 选择div元素集合中的最后一个
  3. $(‘div:odd’)与$(‘div:even’)

    1
    2
    $('div:odd');       // 选择div元素集合中的奇数个元素  
    $('div:even'); // 选择div元素集合中的偶数个元素
  4. $(‘div:gt(i)’)与$(‘div:lt(i)’)

    1
    2
    $('div:gt(i)');       // 选择div元素集合中索引大于i的元素  
    $('div:lt(i)'); // 选择div元素集合中索引小于i的元素
  5. $(‘div:empty’)与$(‘div:parent’)

    1
    2
    $('div:empty');        // 选择div元素集合中空元素
    $('div:parent'); // 选择div元素集合中非空元素
  6. $(‘div:visible’)与$(‘div:hidden’)

    1
    2
    $('div:visible');      // 选择div元素集合中可见元素
    $('div:hidden'); // 选择div元素集合中隐藏元素
  7. $(‘ul li:first’)与$(‘ul li:first-child’)

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

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