8.1 DOM操作
在jQuery中,DOM操作是一个非常重要的组成部分。jQuery中提供了一系列操作DOM强有力的方法,它们不仅简化了传统JavaScript操作DOM时繁冗的代码,更加解决了令开发者苦不堪言的跨平台浏览器兼容。
8.1.1 DOM操作分类
JavaScript操作DOM时分为三类----DOM Core(核心),HTML-DOM和CSS-DOM。
8.2 样式操作
1.设置和获取样式值
使用css()方法为指定的元素设置样式值,其语法如下:
1.$(selector).css(name,value); //设置单个属性
2.$(selector).css(name:value,name:value,name:value....); //同时设置多个属性
css()方法的参数说明
参数 | 描述 |
---|---|
name | 必需。规定CSS属性名称。该参数可以使任何CSS属性。 |
value | 必需。规定CSS属性的值。该参数可以使任何CSS属性值。 |
如何获取CSS属性的值,其语法如下:
$(selector).css(name); //获取属性值
2.追加样式和移除样式
1)追加样式
使用addClass()方法为元素追加类样式,其语法如下:
$(selector).addClass(class);
class为类样式的名称,也可以增加对个类样式,各个类样式之间以空格隔开即可。其语法如下:
$(selector).addClass(class1,class2....classN);
addClass()比css()更加常用,因为使用addClass()添加样式,更加符合W3C规范中“结构与样式分离的准则”。
2)移除样式
与addClass()方法相对应的方法是移除样式方法removeClass(),其语法如下:
1.$(selector).remobeClass(class); //移除单个样式
2.$(selector).removeClass(class1,class2....classN); //移除多个样式
3.切换样式
使用toggle()方法可以切换元素的可见状态。使用toggleClass()方法可以切换不同元素的类样式,其语法如下:
$(selector).toggleClass(class);
4.判断是否含指定的样式
提供hasClass()方法来判断是否包含指定的样式,其语法如下:
$(selector).hasClass(class);
参数class是类名,该名称是必选的,规定指定元素查找的类名,返回值是布尔型。
8.3 内容操作
1.HTML代码操作
html()方法的参数说明:
参数 | 描述 |
---|---|
content | 可选。规定被选元素的新内容。该参数可以包含HTML标签。无参数时,表示获取被选元素的文本内容。 |
2.标签内容操作
text()方法的参数说明:
参数 | 描述 |
---|---|
content | 可选。规定呗选元素 的新文本内容。注释:特殊字符会被编码。无参数时,表示获取被选元素的额文本内容。 |
html()方法和text()方法的区别
3.属性值操作
val()方法的参数说明
参数 | 描述 |
---|---|
value | 可选。规定被选元素的新内容。无参数时,返回值为第一个被选元素的value属性的值 |
8.5 节点与属性操作
一种是对节点本身 的操作,一种是对节点中属性节点的操作。
8.5.1 节点操作
1.查找节点
2.创建节点元素
该函数是用于将匹配到的DOM元素转换为jQuery对象的,它就好像一个零配件的生产工厂,所以被形象的成为工厂函数。$()方法语法格式如下:
3.插入节点
两大类:内部插入节点和外部插入节点
4.删除节点
5.替换节点
6.复制节点
8.5.2 属性操作
1.获取与设置元素属性
2.删除元素属性
8.7 节点遍历
8.7.1 遍历子元素
提供children()方法。该方法可以用来获取元素的所有子元素,而不考虑其他后代元素,其语法如下:
$(selector).children([expr])
其参数expr为可选,用于过滤子元素的表达式。
8.7.2 遍历同辈元素
8.7.3 遍历前辈元素
8.7.4 其他遍历方法
1.each()方法
each()方法规定为每个匹配元素规定运行的函数,其语法如下:
$(selector).each(function(index,element))
参数index表示选择器的index位置,element表示当前的元素,当返回值为false时可用于及早停止循环。
2.end()方法
end()方法结束当前链条中最近的筛选操作,并将匹配元素集还原为之前的状态,语法如下:
.end();