Jquery Dom

来源:互联网 发布:网络英语翻译 编辑:程序博客网 时间:2024/04/28 08:14

创建节点及节点属性
1、流程
1.1 创建元素 document.createElement
1.2 设置元素 setAtrribute
1.3 添加文本 innerHTML
1.4 加入文档 appendChild

2、.append(content) 向每个匹配的元素内部追加内容 【前面是被插入的对象,后面是要在对象内插入的元素内容】
.appendTo(content) 把所有匹配的元素追加到另一个,制定的元素集合中【前面是要插入的元素内容,而后面是被插入的对象】

3:.after(content) 在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点
.before(content) 据参数设定,在匹配元素的前面插入内容
【.insertBefore() .insertAfter() 不支持多参数】

4:.prepend() 将指定元素插入到匹配元素里面作为他的第一个子元素
.prependTo() 把所有匹配的元素前置到另一个指定的元素集合中。

5:.empty() 移除指定元素中的所有子节点,自身不被删除
.remove() 移除元素中的一切(包含自身),也可以通过传递一个选择器表达式,用来过滤移除的节点
.clone() 复制所有匹配的元素集合,包含所有匹配元素,匹配元素的下级元素,文字节点,通过传递true,将所有绑定在原始元素上的事件处理函数复制到克隆元素上。
这里写图片描述

6:.replaceWith(newcontent) 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合这里写图片描述
.replaceAll(target) 用集合中的匹配元素替换每个目标元素
这里写图片描述
replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。

7:.wrap(wrappingElement) 在集合中匹配的每个元素周围包裹一个HTML结构
这里写图片描述
.unwarp() 删除匹配元素集合的父级元素,保留自身。
这里写图片描述

Jquery 遍历

8:祖先
.parent() 方法返回被选元素的直接父元素。
.parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (html)。
.parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
这里写图片描述

9:后代
.children() 方法返回被选元素的所有直接子元素。
.find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
这里写图片描述

10:同胞
.siblings() 方法返回被选元素的所有同胞元素。
.next() 方法返回被选元素的下一个同胞元素【该方法只返回一个元素】
.nextAll() 方法返回被选元素的所有跟随的同胞元素。
.nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
这里写图片描述

11:过滤
.first() 方法返回被选元素的首个元素。
.last() 方法返回被选元素的最后一个元素。
.eq() 方法返回被选元素中带有指定索引号的元素。[索引号从 0 开始,因此首个元素的索引号是 0 而不是 1]
这里写图片描述
.filter() 方法允许您规定一个标准。[不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。]
这里写图片描述
.not() 方法返回不匹配标准的所有元素。
提示:not() 方法与 filter() 相反。

12:.is() 遍历方法 根据选择器,元素或jquery对象检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。
语法:.is(selector) [selector 匹配元素的选择器表达式]
这里写图片描述
使用函数 :对基于函数而非选择器的相关元素的表达式进行求值。对于每个元素来说,如果该函数返回 true,则 .is() 也返回 true
这里写图片描述

13:.closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上
语法:.closest(selector) 【selector:字符串值,包含匹配元素的选择器表达式】
这里写图片描述
.closest() 与 .parents()的区别:
13.1 .closest() 是从当前元素开始;.parents() 是从父元素开始
13.2 .closest() 沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止;.parents() 沿 DOM 树向上遍历,直到文档的根元素【html】为止,将每个祖先元素添加到一个临时的集合,如果应用了选择器,则会基于该选择器对这个集合进行筛选。
13.3 .closest() 返回包含零个或一个元素的 jQuery 对象; .parents() 返回包含零个、一个或多个元素的 jQuery 对象

14:.each() 方法规定为每个匹配元素规定运行的函数。
语法:$(selector).each(function(index,element)) 【function(index,element) :必需。为每个匹配元素规定运行的函数。index - 选择器的 index 位置;element - 当前的元素(也可使用 “this” 选择器)】
14.1 each是一个for循环的包装迭代器
14.2 each通过回调的方式处理,并且会有2个固定的实参,索引和元素
14.3 each回调方法中的this只想当前迭代的dom元素
这里写图片描述

【回调函数里的参数:如果遍历的是数组,第一个参数是索引值,第二个参数是数组的值;如果遍历的是对象,第一个参数是属性,第二个参数是属性值】

15:.has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。
语法:.has(selector) 【selector:字符串值,包含匹配元素的选择器表达式。】
这里写图片描述

原创粉丝点击