脚本宝典收集整理的这篇文章主要介绍了

细说 jQuery 元素篇(一) – 理解 DOM

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

DOM - Document Object Model,即文档对象模型,它通过对象树来展示 HTML 代码。jQuery 最强大的特性之一就是简化了对 DOM 元素的操作。

DOM

w3shcoolDOM 树模型图就能很好地表现 DOM 树的结构。

请输入图片描述

从图中,我们可以看出 DOM 元素中父元素、子元素之间的关系。
在开发时,我们可以通过调试工具更清晰地看到 DOM 树的结构。

$()函数

通过 $() 函数,我们可以创建 jQuery 对象,这个函数可以接受标签名,ID 和类名作为参数,可以单独使用,也可以同时使用多个。
被封装到 jQuery 对象中的 DOM 元素会被自动地,隐式地循环遍历。

  • 标签名 $('a') //取得文档中所有 a 标签
  • ID $('#myId') //取得文档中 idmyIdDOM 元素
  • 类名 $('.myClass') //取得文档中 classmyClassDOM 元素

遍历 DOM

我们已经知道通过 $() 函数可以取得一组元素,在此基础上,jQuery 还提供了很多方法来操作取得的元素,例如取得父元素、子元素等等。有了这些操作,我们就可以灵活地穿梭在 DOM 树中。

1.filter

首先我们必须要提到过滤函数 - filter
我们知道 $() 函数可以接受多个内容作为参数,例如我们希望取得类名为 beforea 标签,可以这样写:

$('a.before')

使用 filter 函数后,我们也可以这样写:

$('a').filter('.before')

这样看上去,好像 filter 只是做了件重复的事情,但是 filter 的功能肯定不仅限于此。让我们来看看它更强大的地方。
假设现在我们有两个 class 都为 beforea 标签,而我们希望能取到父元素是 span 的那个 a 标签,那么直接用第一种方式写肯定难以实现,不过有了 filter 函数就方便多了:

$('a').filter(function(){
  return this.className == 'before' && this.parentElement.nodeName == 'SPAN';
});

2.连缀

jQuery 中可以使用一行代码取得多个指定的 DOM 元素集合,并可以对这个集合的元素进行操作,这一能力我们称之为连缀能力。jQuery的这种连缀能力不仅有助于保持代码简洁,而且在替代组合重新指定选择符时,还有助于提升脚本性能。
为了可读性,我们习惯于把一行代码拆开来写:

请输入图片描述

连缀相当于是一句话做了很多事情,虽然效率方面表现不错,但无疑比较难理解,所以我们尽量将其分行写,同时添加上合适的注释。

访问 DOM

从上可知,jQuery 返回的是 jQuery 对象,但是我们有时也希望直接对 DOM 元素进行操作。这时,我们需要用到 jQuery 提供的 get 方法。例如,.get(0) 可以访问到 jQuery 对象封装的第一个 DOM 元素。

$('a').get(0)

对此,jQuery 还提供了一种更简的写法:

$('a')[0]

这种语法结构有点类似于 Javascript 中的数组操作,但实际上两者是不同,这就相当于剥开 jQuery 的封装,直接露出 DOM 节点列表,然后进行选择。

参考

http://book.douban.com/subject/24669823/

总结

以上是脚本宝典为你收集整理的

细说 jQuery 元素篇(一) – 理解 DOM

全部内容,希望文章能够帮你解决

细说 jQuery 元素篇(一) – 理解 DOM

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过