jQuery操作DOM
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]) |
设置或返回匹配元素相对滚动条顶部偏移 |