上一节的遗留问题,关于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相关问题及选择器的更多相关文章

  1. jquery学习笔记(二):DOM元素操作

    内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...

  2. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  3. jquery 学习笔记二 隐藏与显示

    css找到元素后是添加样式,而jquery找到元素后是添加形为. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  4. jQuery学习笔记二

    事件监听者是DOM的一部分,任何页面都可以增加事件监听者.浏览器利用事件监听者监视页面上做了什么,然后告诉Javascript解释器是否需要采取行动.如:$('#showMessage').click ...

  5. jQuery 学习笔记(3)(内容选择器、attr方法、prop方法,类的操作)

    内容选择器: 1.$("div:empty"): 空的div元素 2.$("div:parent"): 非空div元素 3.$("div:contai ...

  6. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  7. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  8. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  9. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  10. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

随机推荐

  1. Mongodb Manual阅读笔记:CH3 数据模型(Data Models)

    3数据模型(Data Models) Mongodb Manual阅读笔记:CH2 Mongodb CRUD 操作Mongodb Manual阅读笔记:CH3 数据模型(Data Models)Mon ...

  2. 十五天精通WCF——第九天 高级玩法之自定义Behavior

    终于我又看完了二期爱情保卫战,太酸爽了,推荐链接:http://www.iqiyi.com/a_19rrgublqh.html?vfm=2008_aldbd,不多说,谁看谁入迷,下面言归正传, 看看这 ...

  3. winform 可拖动的自定义Label控件

    效果预览: 实现步骤如下: (1)首先在项目上右击选择:添加->新建项,添加自定义控件 (2)自定义的一个Label让它继承LabelControl控件,LabelControl控件是DevEx ...

  4. 深入理解java垃圾回收机制

    深入理解java垃圾回收机制---- 一.垃圾回收机制的意义 Java语言中一个显著的特点就是引入了垃圾回收机制,使c++程序员最头疼的内存管理的问题迎刃而解,它使得Java程序员在编写程序的时候不再 ...

  5. view类的setVisibility

    android view setVisibility():有三个参数:Parameters:visibility One of VISIBLE, INVISIBLE, or GONE,想对应的三个常量 ...

  6. OpenStack 企业私有云的若干需求(9): 云管理平台 CMP

    本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...

  7. MMORPG大型游戏设计与开发(part1 of net)

    网络模块的设计,是大型多人在线游戏中比较重要的一部分.我之所以将网络模块放到最前面,是因为许许多多的开发者面对这一块的时候充满了疑惑,而且也觉得很神秘和深奥.这些我们面对到的困难,其实是由于我们对这方 ...

  8. POJ1849Two[DP|树的直径](扩展HDU4003待办)

    Two Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 1390   Accepted: 701 Description Th ...

  9. KSFramework:Unity3D开发框架快速入门

    KSFramework知识 https://github.com/mr-kelly/KSFramework KSFramework是一个整合KEngine.SLua和一些开发组件组成的全功能Unity ...

  10. Noip2000 T3 单词接龙

    题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...