jQuery DOM操作

jQuery DOM操作

概念:

1.DOM -> 即文档对象模型(Document Object Model),简单来说,DOM给予了Web设计师和开发者一套标准的方法,让他们能够轻松获取操作网页中的数据,脚本和表现层对象.

2.在实现DOM操作之前,必须要选择要操作的元素(使用jQuery强大的选择器)-> 基本选择器 层次选择器 内容选择器 过滤选择器......

DOM操作

1、节点操作

1)语法:$(html)

$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将此DOM对象包装成jQuery对象后返回

a)创建元素节点 -> ，​("<p/>")

注: 要符合标准的XHTML个格式 -> $("<p>")->错误

b)创建文本节点

$("<li>你好</li>")

$("<li><em>好好</em><b>学习</b></li>")

c)创建属性节点 -> $("<li title= "hello" >你好</li>")

注: 创建文本节点和属性节点一样,直接在创建元素节点时一起创建

2)插入节点

a)父子关系

append() -> 向每个匹配的元素内部追加内容 -> $("选择器").append("<b>Hello</b>");

appendTo() -> 把所有匹配的元素追加到另一个指定的元素元素集合中 -> $("选择器").appendTo("选择器");

prepend() -> 向每个匹配的元素内部前置内容 -> $("选择器").prepend("<b>Hello</b>");

prependTo() -> 把所有匹配的元素前置到另一个,指定的元素元素集合中 -> $("选择器").prependTo("选择器");

b)兄弟关系

after() -> 在每个匹配的元素之后插入内容

insertAfter() -> 把所有匹配的元素插入到另一个,指定的元素元素集合的后面

before() -> 在每个匹配的元素之前插入内容

insertBefore() -> 把所有匹配的元素插入到另一个,指定的元素元素集合的前面

3)删除节点

remove() -> 从DOM中删除某节点的元素,包括此节点的所有后代节点,返回删除节点的应用(还支持选择性删除)

detach() -> 与remove相同,但删除节点的事件,附加数据等会保留下来

empty() -> 清空节点,包括此节点的所有后代界定啊

4)复制节点

clone()-> 复制节点,可传boolen值,若为真,则该节点的事件也被复制

5)替换节点

replaceWith() -> 将所有匹配的元素替换成指定的HTML或DOM元素

replaceAll() -> 用匹配的元素替换掉所有 selector匹配到的元素

注: 以上两方法功能一样,只是调用的次序不一样(类似append和appendTo),如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会被替换的元素一起消失,需要在新元素上重新绑定事件

6)包裹节点

wrap() -> 把所有匹配的元素用其他元素的结构化标记包裹起来

wrapAll() -> 将所有匹配的元素用单个元素包裹起来

wrapInner() -> 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

2、属性操作

attr()/removeAttr() -> 获取/删除 匹配的元素集合中的第一个元素的属性的值或设置/删除 每一个匹配元素的一个或多个属性

prop()/removeProp() -> 获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性/ 用来删除由.prop()方法设置的属性集

3、样式操作

设置样式: attr("属性名","属性值")/prop("属性名","属性值")

追加/移除样式: addClass()/removeClass()

切换样式: toggleClass()

判断是否含有某个样式:hasClass()->判断是否含有某个class->等同于is()

设置样式: css("属性","属性值")

同时设置多个样式:css({"属1":"值1",....., "属n":"值n"}),类似的还有:

attr({"属1":"值1",......, "属n":"值n"})

prop({"属1":"值1",......,"属n":"值n"})

4、设置元素

html() -> 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档 -> $("选择器").html();

text() -> 取得所有匹配元素的内容 -> $("选择器").text();

注: 获取内容,不需要参数,如果设置内容,则把内容设置到参数中,类似的方法还有:attr() prop() height() width() css() val()等

5、表单处理元素值

val() -> 获得匹配元素的当前值 -> $("选择器").val();

6、遍历节点

1)children():获取匹配元素的子元素集合

2)next([selector]):获取匹配元素后面紧邻的同辈元素

对比:prev + next

3)nextAll([selector]): 获取匹配元素之后所有的同辈元素

对比: prev ~ siblings

4)prev([selector]):获取匹配元素前面紧邻的同辈元素

5)prevAll([selector]): 获取匹配元素之前所有的同辈元素

6)siblings([selector]):获取匹配元素前后的同辈元素

7)parent([selector]):获取匹配元素的上一级父元素

8)parents([selector]):获取匹配元素的父元素,包括所有的祖先元素

9)closest():从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素

10)slice(start,[end]):获取匹配元素,下标索引从start到end的子集

slice(n): 获取匹配元素下标索引从0到n的子集

slice(start,end): 获取匹配元素下标索引从start到end的子集

slice(-n): 获取匹配元素下标索引从末尾开始选择到n的子集

11)is: 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true

12)map: 将一组元素转换成其他数组(不论是否是元素数组)

13)has: 保留包含特定后代的元素,去掉那些不含有指定后代的元素

14)end: 回到最近的一个"破坏性"操作之前.即,将匹配的元素列表变为前一次的状态