jQuery中的DOM操作主要分为:样式操作、文本和value属性值操作、节点操作、节点中包括属性操作、节点遍历、CSS-DOM操作。核心是节点操作和节点遍历。
样式操作:
addClass比css更常用,因为更符合W3C中“结构与样式分离的“的准则
获取CSS属性:$(selector).css(name);
追加样式:addClass()
$(selector).addClass(class); //class:类样式名称
$(selector).addClass(class1 class2 class3); //用空格隔开
移除样式:
$(selector).removeClass(class); //移除单个
或
$(selector).removeClass(class1 class2 class3);//移除多个
切换样式:
$(selector).toggleClass(class);
判断是否含有指定样式:
$(selector).hasClass(class);
返回布尔类型如果包含返回true,否则返回false
HTML代码操作:
html([content])
content:可选,规定被选元素新内容,可以包含HTML标签,无参时表示获取被选元素的文本内容。
标签内容操作:
使用text()方法获得或设置元素的文本内容
text([content]);
content:可选,规定被选元素新内容,可以包含HTML标签,无参时表示获取被选元素的文本内容。
HTML雨text方法的区别
html() |
无参 |
用于获取第一个匹配元素的HTML内容或文本内容 |
html(content) |
content为元素的HTML内容 |
用于设置所匹配元素的HTML内容或文本内容 |
text() |
无参 |
用于获取所有匹配元素的文本内容 |
text(conten) |
content为元素的文本内容 |
用于设置所有匹配元素的文本内容 |
html()方法不能用于XML,只能用于(X)HTML,text()都支持
属性值操作:
val([value]);
value可选,规定被选元素的新内容,无参时返回值为第一个被选元素的value属性的值。
节点操作分:查找、创建、插入、删除、替换、复制
创建:$( );
selector |
选择器,使用jQuery选择器匹配元素 |
element |
DOM元素,以DOM来创建jQuery对象 |
html |
HTML代码,使用HTML字符串创建jQuery对象 |
插入节点
内部插入 |
A.append(B) |
向所选的元素内插入内容,B追加到A中 |
A.appendTo(B) |
把A追加到B中 |
|
A.prepend(B) |
把B插入A中前面 |
|
A.prependTo(B) |
把A追加到B中前面 |
|
外部插入 |
A.after(B) |
在每个匹配的元素后插入,B插入A之后 |
A.insertAfter(B) |
将所有匹配元素插入指定元素后,A插入B之后 |
|
A.before(B) |
将所选择的元素外部前面插入内容,B插入A之前 |
|
A.insertBefore(B) |
将所匹配的元素插入指定元素前面,A插入B之前 |
删除节点:
删除匹配元素包含的文本和子节点
$(selector).remove([expr])
如果接受expr,则该参数为筛选元素的jQuery表达式,通过表达式获取指定元素。
$(selector).empty();
清空元素中的所有后代节点。
替换节点:
replaceWith()
将所有匹配元素都替换成指定HTML或DOM元素。
replaceAll()
与replaceWith()相同,只是颠倒了方法操作
复制节点:
$(selector).clone([includeEvents])
includeEvents为可选,为true或false,规定是否复制元素的所有事件处理
属性操作
获取与设置元素属性:
$(selector).attr([name]); //单个
或
$(selector).attr({[name:value],[name:value]}) //多个
name表属性名,value表示属性值
删除元素属性:$(selector).removeAttr(name);
遍历子元素
$(selector).children([expr])
expr用于过滤子元素的表达式。
遍历同辈元素:
next([expr]) |
用于获取匹配元素之后的元素 |
prev([expr]) |
用于获取匹配元素之前的元素 |
siblings([expr]) |
用户获取匹配元素之后之前所有同辈元素 |
遍历前辈元素:
获取当前匹配元素集合中每个匹配元素的父级元素
$(selector).parent([selector]);
获取当前匹配元素集合中每个匹配元素的祖先元素
$(selector).parents([selector]);
$(selector).parent([selector]); |
获取当前匹配元素集合中每个匹配元素的父级元素 |
.parent();返回上层 .parent().parent()返回上上层 .parent().parent().remove()删除当前列表 |
$(selector).parents([selector]); |
获取当前匹配元素集合中每个匹配元素的祖先元素 |
查找父节点和祖先节点, 依次向上直到<html> |
为每个匹配元素规定运行的函数
$(selector).each(function(index,element));
index表示位置,element表示当前的元素
.eng();
在当前链条中最近的筛选操作,并将匹配元素还原为之前状态。
CSS-DOM
css() |
设置或返回匹配元素的样式属性 |
height([value]) |
设置或返回匹配值高度,没有则默认 |
width([value]) |
设置或返回匹配值宽度,没有则默认 |
offset([value]) |
返回以像素为单位的top和left坐标 |
offsetParent() |
返回最近的已定位祖先元素,相对、绝对、固定定位 |
position() |
返回第一个匹配元素相对于父元素的位置 |
scrollLeft([position]) |
设置或返回匹配元素相对滚动条左侧偏移 |
scrollTop([position]) |
设置或返回匹配元素相对滚动条顶部偏移 |