jQuery(二)DOM部分

jQuery DOM部分

1. DOM节点的创建

直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$(“html结构”),包括创建元素节点,文本节点以及属性节点,如下:

$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

2. DOM节点的插入

  • .append()

内部插入,向每个匹配到的元素内部追加内容,前面是被插入的对象,后面是要在对象内插入的元素内容

  • .appendTo()

内部插入,把要插入的元素内容追加到被插入的对象中

  • .after()

外部插入,在匹配元素集合中的每个元素后插入参数所指定的内容,作为其兄弟节点,后面的元素后移

  • .before()

外部插入,在匹配元素集合中的每个元素前插入参数所指定的内容,作为其兄弟节点,前面的元素前移

  • .prepend()

内部插入,向每个匹配到的元素内部追加前置内容,前面是被插入的对象,后面是要在对象内插入的元素内容

  • .prependTo()

内部插入,把要插入的元素内容追加并前置到被插入的对象中

  • .insertBefore()

.before()和.insertBefore()实现同样的功能,但插入元素在方法前面,它将被放置在参数里元素的前面作为其兄弟节点

  • .insertAfter()

.after()和.insertAfter()实现同样的功能,但插入元素在方法前面,它将被放置在参数里元素的后面作为其兄弟节点

3. DOM节点的删除

  • .empty()

移除当前元素的子元素及其后代元素,同样移除元素里的文本节点,但不移除当前元素的属性

  • .remove()

将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及该元素相关的jQuery数据。并且还可以传递一个选择器表达式来过滤将被移除的匹配元素集合,选择性的删除指定的节点

  • .detach()

临时删除页面上的节点,节点上的附加数据和绑定事件不会丢失,append()之后可以重新回到文档流,但是这个方法只能处理通过jQuery方法绑定的事件或数据

4. DOM节点的复制与替换

  • .clone()

复制所有匹配的元素集合,包括所有匹配元素,匹配元素的下级元素,文字节点

  • .clone(ture)

不仅克隆单纯的节点结构,还会把附加的事件与数据一并克隆(通过jQuery绑定的事件与数据)

  • .replaceWith(newContent)

用提供的newContent替换集合中所有匹配的元素包括其数据和事件处理程序并且返回被删除元素的集合

  • .replaceAll(target)

.replaceAll()和.replaceWith()功能类似,但是目标和源相反

  • .wrap(wrappingElement)

为匹配元素集合中的每个元素周围包裹一个 HTML 结构

  • .wrap(function() {})

一个回调函数,返回用于包裹每个匹配元素的 HTML 内容或 jQuery 对象

  • .unwrap()

将匹配元素集合的父元素删除,保留自身(和兄弟元素)在原来的位置

  • .wrapAll(wrappingElement)

为匹配元素集合中的每个元素周围统一包裹一个 HTML 结构

  • .wrapAll(function() {})

一个回调函数,返回用于包裹每个匹配元素的 HTML 内容或 jQuery 对象

  • .wrapInner()

给匹配元素集合中的元素的内部,增加包裹的HTML结构

  • .wrapInner(function)

允许我们用一个callback函数做参数,每次遇到匹配元素时,该函数被执行,返回一个DOM元素,jQuery对象,或者HTML片段,用来包住匹配元素的内容

5. DOM节点的遍历

  • .children()

返回匹配元素集合中每个元素的所有子元素,允许传一个选择器表达式,对这个合集对象进行一定的筛选

  • .find()

返回匹配元素集合中每个元素的后代,不包括自己,允许传一个选择器表达式,对这个合集对象进行一定的筛选

  • .parent()

返回匹配元素集合中每个元素的父元素(只会向上查找一级),允许传一个选择器表达式,对这个合集对象进行一定的筛选

  • .parents()

返回匹配元素集合中每个元素的所有父元素(会一直向上查找),允许传一个选择器表达式,对这个合集对象进行一定的筛选

  • .closet()

从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素(匹配到即停止查找),允许传一个选择器表达式,对这个合集对象进行一定的筛选

  • .next()

取得指定元素集合中每一个元素紧邻的后面同辈元素的元素集合,允许传一个选择器表达式,对这个合集对象进行一定的筛选

  • .prev()

取得指定元素集合中每一个元素紧邻的前面同辈元素的元素集合,允许传一个选择器表达式,对这个合集对象进行一定的筛选

  • .siblings()

取得指定元素集合中每一个元素的同辈元素的元素集合,允许传一个选择器表达式,对这个合集对象进行一定的筛选

  • .add()

将元素添加到匹配的元素集合中,并创建一个新的jQuery对象

  • .each()

一个for循环的迭代器,它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)

1
2
3
4
5
$("li").each(function(index, element) {
index 索引 0,1
element是对应的li节点 li,li
$(this) 指向的是li
})