使用jQuery操作DOM

1.DOM操作

DOM操作分类

1. DOM Core(核心)
   JavaScript中的getElementById()、getElementsByTagName()等都是DOM Core的组成部分。

document.getElementById("div")  //获取页面id为div的元素。

2. HTML-DOM
   HTML-DOM代码较为简短。

document.getElementById("div").innerHTML  //获取id为div元素的内容。

3. CSS-DOM
   CSS-DOM的主要作用是获取和设置style对象的各种属性。

document.getElementById("div").style.color = "red"  //设置id为div的元素字体颜色为红色。

jQuery中的DOM操作

jQuery中deDOM操作主要可分为样式操作、文本和value属性值操作、节点操作，节点操作中又包含属性操作、节点遍历和CSS-DOM操作。

2.样式操作

1. 设置和获取样式值

$(selector).css(name,value);  //设置单个属性
$(selector).css({name:value,name:value...});  //设置多个属性

$(selector).css(name);  //获取样式值

css()方法的参数说明

参数	描述
name	必需。规定CSS属性的名称。该参数可以是任何CSS属性。
value	必需。规定CSS属性的值。该参数可以是任何CSS属性。

2. 追加样式和移除样式

$(selector).addClass(class);  //追加单个样式
$(selector).addClass(class1 class2...);  //追加多个样式(追加多个样式时，各个样式之间用空格隔开。)
$(selector).removeClass(class);  //移除单个样式
$(selector).removeClass(class1 class2...);  //移除多个样式(移除多个样式时，各个样式之间用空格隔开。)

3. 切换样式

$(selector).toggleClass(class);  //切换样式

toggleClass()方法相当于addClass()和removeClass()实现样式切换的过程。

4. 判断是否含指定样式

$(selector).hasClass(class);  //判断样式是否存在，返回值为bool类型

3.内容操作

1. HTML代码操作

html([content]);

html()方法的参数说明

参数	描述
content	可选。规定被选元素的新内容。该参数可以包含HTML标签。无参数时，表示获取被选元素的文本内容。

2. 标签内容操作

text([content]);

text()方法的参数说明

参数	描述
content	可选。规定被选元素的新文本内容。特殊字符会被编码。无参数时，表示获取被选元素的文本内容。

htm()和text()方法的区别

无参	带参
html()用于获取第一个匹配元素的HTML内容或文本内容	html(content)用于设置所有匹配元素的HTML内容或文本内容
text()用于获取所有匹配元素的文本内容	text(content)用于设置所有匹配元素的文本内容

3. 属性值操作

val([value]);

val()方法的参数说明

参数	描述
value	可选。规定被选元素的新内容。无参数时，返回值为第一个被选元素的value属性的值

4.节点与属性操作

节点操作

1. 查找节点

$("div a.red").css("color","red");  //找到div下类名为.red的a节点并设置字体颜色

2. 创建节点对象

$(selector) or $(element) or $(html)

$()的参数说明

参数	描述
selector	选择器。使用jQuery选择器匹配元素
element	DOM元素。以DOM元素来创建jQuery对象
html	HTML代码。使用HTML字符创建jQuery对象

3. 插入节点

内部插入节点方法	描述
append(content)	向所选择的元素内部插入内容
appendTo(content)	把所选择的元素追加到另一个指定元素集合中
prepend(content)	向每个选择的元素内部前置内容
prependTo(content) 将所有匹配元素前置到指定的元素中

外部插入节点方法	描述
after(content)	在每个匹配的元素之后插入内容
insertAfter(content)	将所有匹配元素插入指定元素的后面
before(content)	向所选择的元素外部前面插入内容
insertBefore(content)	将所匹配的元素插入指定元素的前面

4. 删除节点

$(selector).remove([expr]);  //expr为可选，接受参数时，该参数为筛选元素的jQuery表达式，通过该表达式获取指定元素并删除
$(selector).detach([expr]);  //与remove不同的是，删除元素后元素的绑定事件、附加数据会保留
$(selector).empty();  //清空节点

5. 替换节点
   replaceWith()和replaceAll()方法用于将所有匹配元素都替换为指定的HTML或者DOM元素。

$("div a").replaceWith(newNode);
$(newNode).replaceAll("div a");

6. 复制节点

$(selector).clone([includeEvents]);  //参数includeEvents为可选，值为true或false,规定给是否复制元素的所有事件处理，true为复制，false反之

属性操作

1. 获取与设置属性元素

$(selector).attr([name]); //获取属性值
$(selector).attr({[name1:value1],[name2:value2]...});  //设置多个属性值

2. 删除元素属性

$(selector).removeAttr(name);

5.节点遍历

1. 遍历子元素

$(selector).children([expr]);  //expr为可选，用于过滤子元素的表达式

2. 遍历同辈元素

方法	描述
next([expr])	用于获取紧邻匹配元素之后的元素，expr为可选
prev([expr])	用于获取紧邻匹配元素之前的元素，expr为可选
siblings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素，expr为可选

3. 遍历前辈元素

$(selector).parent([selector]);
$(selector).parents([selector]);

参数说明

参数	描述
parent([selector])	参数可选，获取当前匹配元素集合中每个元素的父级元素
parents([selector])	参数可选，获取当前匹配元素集合中每个元素的祖先元素

4. 其他遍历方法

//each规定为每个匹配元素规定运行的函数
$(selector).each(function(index,element));  //index表示选择器的index位置，elemen表示当前元素，返回值为false可以及早停止循环
.end();  //end方法结束当前链条中最近的筛选操作，并荆匹配元素集还原为之前的状态

6.CSS-DOM操作

方法	描述
css()	设置或返回匹配元素的样式属性
height([value])	参数可选，设置或返回匹配元素的高度，若没规定长度单位则默认为px
width([value])	参数可选，设置或返回匹配元素的宽度，若没规定长度单位则默认为px
offset([value])	返回以像素为单位的top和left坐标，仅对可见元素有效
offsertParent()	返回最近已定位的祖先元素
position()	返回第一个匹配元素相对与父元素的位置
scrollLeft([position])	参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])	参数可选。设置或返回匹配元素相对滚动条顶部的偏移