8、使用jQuery操作DOM

–1、jQuery中的DOM操作说明
jQuery中的DOM操作主要分为样式操作、文本和value属性值操作、节点操作，节点操作中又包含属性操作、节点遍历和CSS-DOM操作。其中,最核型的部分是节点操作和节点遍历。
–2、设置和获取样式值
-1.在jQuery中,使用css()方法为指定的元素设置样式值,其语法格式如下。
语法：
$(selector).css(name,value) //设置单个属性
或者：
$(selector).css({name:value,name:value,name:value}) //同时设置多个属性
-2.css()方法的参数说明
name:
必须。规定CSS属性的名称。该属性可以是任何CSS属性。
例如,font-size、background等
value:
必须。规定CSS属性的值。该参数可以是任何CSS属性值。
例如,#000000、24px等
-3.获取CSS属性值的方法很简单,语法格式如下。
语法：
$(selector).css(name); 获取属性
–3、追加样式和移除样式
-1.追加样式
1.除了使用css()方法可以元素添加样式外,还能使用addClass()方法为元素追加式。其语法如下。
语法：
$(selector).addClass(class)
2.class为类样式的名称，也可以增加多个类样式,各个类样式之间以空格隔开即可。其语法如下。
语法：
$(selector).addClass(class1,class2,class3…ClassN)
-2.移除样式
在jQuery中,与addClass()方法相对应的方法是移除样式的方法removeClass(),其语法格式如下。
语法：
$(selector).removeClass(Class) //移除单个样式
或者
$(selector).removeClass(class1,class2,class3…ClassN)
-3.切换样式
在jQuery中,使用toggle()方法可以切换元素的可见状态,使用toggleClass()方法可以切换不同元素的类样式,其语法格式如下。
语法：
$(selector).roggleClass(Class)
-4.判断是否含指定的样式
在jQuery中,提供了hasClass()方法来判断是否包含指定的样式,其语法如下所示。
语法：
$(selector).hasClass(class);
参数class是类名,该名称是必须的,规定指定元素中查找的类名,返回值为布尔值,如果包含查找的类则返回true,否则返回false。
–4、内容操作
-1.jQuery提供了对元素内容操作的方法,即对HTML代码(包括标签和标签内容)、标签内容和属性值内容三者的操作
-2.HTML代码操作
1.在jquery中,可以使用html()方法对HTML代码进行操作,该方法类似于传统JavaScript中的innerHTML,通常用于动态的新增页面内容。其语法如下。
语法：
html([content])
2.html()方法的参数说明
content:
可选。规定被选元素的新内容。给参数可以包括HTML标签。
无参数时,表示获取被选元素的文本内容
3.标签内容操作
1.在jQuery中,可以使用text()方法获取或设置元素的文本内容,不含HTML标签。其语法格式如下。
语法：
text([content])
1.text()方法的参数说明
content:
可选。规定被选元素的新文本内容。注释：特殊字符会被编码。
无参数时,表示获取被选元素的文本内容
4.html()方法和text()方法的区别
语法格式 参数说明 功能描述
html() 无参数 用于获取第一个匹配元素的HTML内容或文本内容
html(content) content参数为元素的HTML内容 用于设置所有匹配元素的HTML内容或文本内容
text() 无参数 用于获取所有匹配元素的文本内容
text(content) content参数为元素的文本内容 用于设置所有匹配元素的文本内容
-3.属性值操作
1.在jQuery中,除了可以使用html()方法和text()方法获取与设置元素内容外,还提供了获取元素value属性值的方法val()。该方法非常常用多用于操作表单的元素。val()方法的语法格式如下。
语法：
val([value])
2.val()方法的参数说明
value:
可选。规定被选元素的新内容。
无参数时,返回值为第一个被选元素的value属性的值
–5、操作节点
-1.在jQuery中,节点操作主要分为查找、创建、插入、删除、替换和复制六种操作方法。
-2.创建节点
语法：
$(selector)
或者
$(element)
或者
$(html)-3.$()的参数说明
selector:选择器。使用jQuery选择器匹配元素
element:DOM元素。以DOM元素来创建jQuery对象
html:HTML代码。使用HTML字符串创建jQuery对象
-4.插入节点方法
内部插入：
append(content):向所选择的元素内部
appendTo(content):把所选择的元素追加到另一个指定的元素集合中
prepend(content):向每个选择的元素内部前置内容
prependTo(content):将所有匹配元素前置到指定的元素中
外部插入：
after(content):在每个匹配的元素之后插入内容
insertAfter(content):将所有匹配元素插入指定元素后面。
before(content):向所选择的元素外部前面插入内容
insertBefore(content):将所匹配的元素插入指定元素的前面
-5.插入节点
1.remove()方法
语法：
$(selector).remove([expr])
其参数expr为可选项,如果接收参数,则该参数为筛选元素的jQuery表达式,通过该表达式获取指定元素,并进行删除。
2.empty()方法
语法：
$(selector).empty()
-6.替换节点
replaceWith()
replaceAll()
-7.复制节点
语法：
$(selector).clone([includeEvents])
–6、属性操作
-1.获取与设置元素属性
语法：
$(selector).attr([name]) //获取属性值
或者
$(selector).attr({[name1:value1],[name2:value2]…[nameN:valueN]}) //设置多个属性值
其参数name表示属性名称,value表示属性值
-2.删除元素属性
语法：
$(selector).removeAttr(name)
–7、节点遍历
-1.遍历子元素
在jQuery中,遍历子元素的方法只有一个,即children()方法。如果想获取某元素的子元素,并对其进行操作,可以使用jQuery中提供的children()方法。该方法可以用来获取元素的所有子元素的所有子元素,而不考虑其他后代元素。其语法格式如下。
语法：
$(selector).children([expr])
其参数expr为可选,用于过滤子元素的表达式。
-2.遍历同辈元素的说明方法
next([expr]):用于获取紧邻匹配元素之后的元素
prev([expr]):用于获取紧邻匹配元素之前的元素
siblings([expr]):用于获取位于匹配元素前面和后面的所有同辈元素
-3.遍历前辈元素
语法：
参数可选。获取当前匹配元素集合中每个元素的父级元素
$(selector).parent([selector])
参数可选。获取当前匹配元素集合中每个元素的祖先元素
$(selector).parents([selector])
-4.其他遍历方法
1.each()方法
each()方法规定为每个匹配元素规定运行的函数,语法格式如下。
语法：
$(selector).each(function(index,element))
2.end()方法
end()方法结束当前链条中最近的筛选操作,并将匹配元素集还原为之前的状态,语法如下所示。
语法：
.end();
–8、CSS-DOM相关操作方法说明
css():设置或返回匹配元素的样式属性
height([value]):参数可选。设置或返回匹配元素的高度。如果没有规定长度单位,则使用默认的px作为单位
width(value):参数可选。设置或返回匹配元素的宽度。如果没有规定长度单位,则使用默认的px作为单位
offset([value]):返回以像素为单位的top和left坐标。此方法仅对可见元素有效
offseParent():使用最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed元素
postiton():返回第一个匹配元素相对于父元素的位置
scrollLeft([postiton]):参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([postiton]):参数可选。设置或返回匹配元素相对滚动条顶部的偏移