jQuery学习笔记:this相关问题及选择器

Posted Pеcu❤lian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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中的选择器进行总结。

以上是关于jQuery学习笔记:this相关问题及选择器的主要内容,如果未能解决你的问题,请参考以下文章

jQuery学习笔记:this相关问题及选择器

jQuery学习笔记:this相关问题及选择器

Jquery:小知识;

Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

二次学习JQuery 选择器&选择集过滤&转移

锋利的jQuery学习笔记之jQuery选择器