第3章 ,jQuery中的DOM操作

3.1 DOM操作的分类

一般来说，DOM操作分为3个方面，即DOM Core(核心)、HTML-DOM和CSS-DDM.

• 1.DOM Core
  DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。

JavaScript中的getElmentById(), getElementsByTagName(), getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。

• 2.HTML-DOM
  发现获取某些对象、属性既可以用DOM Core来实现，也可以使用HTML-DOM实现。相比较而言HTML-DOM的代码通常比较简短，不过它只能用来处理Web文档。
  如：

document.forms
element.src

• 3.CSS-DOM
  CSS-DOM是针对CSS 的操作。在JavaScript中，CSS-DOM技术的上要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。
  如：
  element.style.color = "red";

3.2 jQuery中的DOM操作

3.2.1 查找节点

• 1.查找元素节点
  
• 2.查找属性节点
  

3.2.2 创建节点

• 1.创建元素节点
  $(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
  如：
  
  

• 2.创建文本节点
  创建文本节点就是在创建元素节点时直接把文本内容写出来。
  如：
  

• 3.创建属性节点
  创建属性节点一与创建文本节点类似，也是直接在创建元素节点时一起创建。
  如：
  

3.2.3 插入节点

动态创建HTML元素并没有实际用处，还需要将新创建的元素插入文档中。将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个一节点的子节点。前面使用了一个插入节点的方法append()，它会在元素内部追加新创建的内容。


这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。
如：

3.2.4 删除节点

• 1.remove()方法
  作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
如：

另外remove()方法也可以通过传递参数来选择性地删除元素，jQuery代码如：

• 2.empty()方法
  严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。
  
  
  元素<li>并没有删除，只是其中的元素节点被删除了`

3.2.5 复制节点

商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到以下购物效果。

在页面中单击“菠萝”后，列表最下方出现新节点“菠萝”：

动态绑定
复制节点后，被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能(本例中是单击事件)，可以使用如下jQuery代码:

在clone[)方法中传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本一也同样具有复制功能(本例中是单击事件)。

3.2.6 替换节点

如果要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll()。

方法replaceAll())与replaceWith()方法的作用，只是颠倒了操作元素：

3.2.7 包裹节点

如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()。该方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。

结果为：

包裹节点操作还有其他两个方法，即wrapAll()和wraplnner()：

• 1.wrapAll()方法
  
  
  得到的结果为：
  
  

  
  若使用wrap()方法，得到的结果为：
  

• 2.wrapInner()方法
  该方法将梅一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。例如可以使用它来包裹<strong>标签的子内容，jQuery代码如下:
  
  结果为：
  

3.2.8 属性操作

• 1.获取属性和设置属性
  如果要获取<p>元素的属性title,那么只需要给attr()方法传递一个参数，即属性名称。
  
  如果要设置<p>元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名称和对应的值。
  
  一次性设置多个属性：
  
  

  
  Note:
  jQuery中的很多方法都是同一个函数实现获取(getter)和设置( setter)的，例如上面的att()方法，既能设置元素属性的值，也能获取元素属性的值。类似的还有html(), text(), height(), width(), val()和css()等方法。

• 2.删除属性
  removeAttr()方法：
  

3.2.9 样式操作

1. 获取样式和设置样式
   
   class也是<p>元素的属性，因此获取class和设置class都可以使用attr()方法来完成。
   如：
   

在大多数情况下，它是将原来的class替换为新的class，而不是在原来的笨础上追加新的class。

• 2.追加样式
  addClass()方法：
  
  其中，another为：
  
  若对某元素赋予多个样式，CSS有以下规定：
  (1)如果给一个元素添加了多个class值，那么就相当于合并了它们的样式。
  (2)如果有不同的class设定了同一样式属性，则后者覆盖前者。
  

• 3.移除样式
  removeClass()
  
  移除多个样式：
  
  移除全部样式：
  

• 4.切换样式
  toggleClass()
  如果类名存在则删除它，如果类名不存在则添加它。
  如：
  

• 5.判断是否含有某个样式
  hasClass()
  hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true,否则返回false.
  

3.2.10 设置和获取HTML、文本和值

• 1.html()方法
  此方法类似于1a}aScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。
  
  
  结果为：
  
  如果需要设置某元素的HTML代码，那么也可以使用该方法，不过需要为它传递一个参数。例如要设置<p>元素的HTML代码，可以使用如下代码:
  

• 2.text()方法
  此方法类似于JavaScript中的innerText属性，可以川来读取或者设置某个元素中的文本内容。
  
  
  结果为：
  
  与html()方法一样，如果需要为某元素设置文本内容，那么也需要为text()方法传递一个参数。

• 3.val()方法
  此方法类似于JavaScript中的value属性，可以用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。
  
  当地址框获取鼠标焦点时，如果地址框的值为“请输入邮箱地址：: “，则将地址框中的值清空。可以使用如下的jQuery代码:
  
  

当地址框失去鼠标焦点时，如果地址框的值为空，则将地址框的值设置为“清输入邮箱地址”。可以使用如下的jQuery代码:

focus()方法相当于JavaScript中的。onfocus()方法，作用是处理获得焦点时的事件。
blur()方法相当于JavaScript中的。onblur()方法，作用是处理失去焦点时的事件。

通过上面的例子可以发现val()方法不仅能设置元素的值，同时也能获取元素的值。另外，val()方法还有另外一个用处，就是它能使select ( 下拉列表框）， checkbox（多选框)和radio(单选框)相应的选项被选中，在表单操作中会经常用到。

该网页中一些元素是默认选中的，可以通过Val()方法来改变它们的选中项。

Note:
在jQuery中，val()方法是从最后一个选项往前读取，如果选项的value或者text中任意一项符合就会被选中。例如:

无论使用var("选择1号")还是val("选择2号"),最终都会选中后面的一个option。

3.2.11 遍历节点

• 1.children()方法
  该方法用于取得匹配元素的子元素集合。

  Note
  children()方法只考虑子元素而不考虑任何后代元素。

• 2.next()方法
  该方法用于取得匹配元素后面紧邻的同辈元素。

• 3.prev()方法
  该方法用于取得匹配元素前面紧邻的同辈元素。

• 4.siblings()方法
  该方法用于取得匹配元素前后所有的同辈元素。

• 5.closest()方法
  它用来取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返网元素本身。
  如给点击的目标元素的最近的 li 元素添加颜色，可以使用如下代码:
  

除此之外，在jQuery中还有很多遍历节点的方法，例如find(), filter() nextAll(),prevAll(), parent()和parents()等，此处不再赘述，读者可以查看附录的jQuery速查表文档。

3.2.12 CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

Note：
(1)如果值是数字，将会被自动转化为像素值。
(2)在css()方法中，如果属性中带有 “-” 符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如:

如果带上了引号，既可以写成“font-size”，也可以写成 “fontSize”.总之建议大家加上引号，养成良好的习惯。

此外，在CSS-DOM中，还有以下几个经常使用的方法。

• 1.offset()方法
  它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left只对可见元素有效。
• 2.position()方法
  它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left。
• 3.scollTop()和scrollLeft()方法
  这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。