细说 jQuery 元素篇（一） - 理解 DOM

everfight 发布于2019-08-19 14:52 / 3013人阅读

摘要：最强大的特性之一就是简化了对元素的操作。从图中，我们可以看出元素中父元素子元素之间的关系。被封装到对象中的元素会被自动地，隐式地循环遍历。访问从上可知，返回的是对象，但是我们有时也希望直接对元素进行操作。

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

DOM 树

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

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

$()函数

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

标签名 $("a") //取得文档中所有 a 标签

ID $("#myId") //取得文档中 id 为 myId 的 DOM 元素

类名 $(".myClass") //取得文档中 class 为 myClass 的 DOM 元素

遍历 DOM

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

1.filter

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

$("a.before")

使用 filter 函数后，我们也可以这样写：

$("a").filter(".before")

这样看上去，好像 filter 只是做了件重复的事情，但是 filter 的功能肯定不仅限于此。让我们来看看它更强大的地方。
假设现在我们有两个 class 都为 before 的 a 标签，而我们希望能取到父元素是 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/

GPU云服务器云服务器 DOM元素修改DOM元素 dom获取元素 DOM元素事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78151.html

细说 jQuery 事件篇（三） - 事件传播

摘要：是如何决定由哪个元素来处理事件的，以及又是如何优化处理这个问题的，这些都涉及到了事件传播。事件冒泡的弊端事件冒泡可能会导致意料之外的行为，例如在响应事件时，依旧是上例，当为最外层的添加一个事件。使用方法可以避免事件传播导致的问题。 Javascript 是如何决定由哪个元素来处理事件的，以及 jQuery 又是如何优化处理这个问题的，这些都涉及到了事件传播。事件传播策略当页面内...

Cc_2011 2019-08-19 14:51 评论0 收藏0
细说 jQuery 事件篇（一） - 代码执行时机

摘要：在元素一篇介绍过，可以使用来使得代码在加载完毕后自动执行代码，接下来具体介绍下这个机制。这样看上去貌似没什么问题，但是如果有两个函数需要指定时就会遇到麻烦，因为属性只能保存对一个函数的引用，如果我们写成以下形式最后代码执行后的效果是会覆盖。在元素一篇介绍过，jQuery 可以使用 $(document).ready() 来使得代码在 DOM 加载完毕后自动执行代码，接下来具体介绍下这...

dunizb 2019-08-19 14:51 评论0 收藏0
细说 jQuery DOM操作篇（二） - DOM 树操作

摘要：此时，点击新建的将会触发。设置元素内容的方法则使用上述两种方法，将新内容作为参数传递即可，例如修改上例中的文本内容方法同理。我们知道通过 $() 函数可以访问文档中的元素，并返回一个 jQuery 对象，并且通过一系列方法，我们可以修改元素的样式和内容，实际上，我们还可以通过该函数做更多的事情，例如添加、删除、复制等操作来改变 DOM 树的结构。创建元素我们可以通过 $() ...

Anchorer 2019-08-21 12:20 评论0 收藏0
细说 jQuery DOM操作篇（一） - 属性操作

摘要：之前已经知道可以使用和等方法来修改类属性，今天来具体讨论下各种属性的操作。非类属性有时候，我们还需要对一些其他的属性进行操作，例如，，等等。例如单选按钮的属性。之前已经知道可以使用 addClass 和 removeClass 等方法来修改类属性，今天来具体讨论下各种属性的操作。非类属性有时候，我们还需要对一些其他的属性进行操作，例如 href，title，id 等等。这里，...

ideaa 2019-08-19 14:52 评论0 收藏0
细说 jQuery 元素篇（二） - 选择符

摘要：为了更方便对元素操作，提供了完整的选择符体系，可以分为选择符属性选择符以及自定选择符。选择符几乎支持到规范中的所有选择符。介绍个比较有用的自定义选择符选择符。为了更方便对 DOM 元素操作，jQuery 提供了完整的选择符体系，可以分为 CSS 选择符、属性选择符以及自定选择符。 CSS 选择符 jQuery 几乎支持 CSS1 到 CSS3 规范中的所有选择符。举例如下： ...

104828720 2019-08-19 14:51 评论0 收藏0