JQuery操作DOM(8)

一.jQuery操作样式

1.设置和获取样式

/* 单个样式 */

$(selector).css(属性,值)；

/* 多个样式 */

$(selector).css({属性:值,属性:值});

/* 获取样式 */

$(selector).css(属性)；

2.追加和移除样式(追加类样式，即依旧保存原有的类样式)

/* 追加单个样式*/

$(selector).addClass(class);

/* 追加多个样式*/

$(selector).addClass(class1 class2 ....classN);

/* 移除单个样式*/

$(selector).removeClass(class);

/* 移除多个样式*/

$(selector).removeClass(class1 class2 ....classN);

3.切换样式

$(selector).toogleClass(class);

给功能为当元素中含有名称为class的css样式时，删除该样式，如果没有该样式，则增加一个该样式，实现了addClass和removeClass之间的切换

4.判断是否含指定样式

$(selector).hasClass(class);

如果包含查找的样式则返回true，否则返回false

二.jQuery操作内容

1.HTML代码操作

html([content]);

2.标签内容操作

text([content]);

3.属性值操作

val([value]);

三.jQuery操作节点

1.查找节点(使用jQuery选择器)

2.创建节点

$(selector)  或  $(element)  或  $(html)

3.插入节点

3.1内部插入(父子插入节点)

append：向所选元素内部插入内容  -->  $(A).append(B);   将B追加到A中

appendTo：把所选元素追加到一个指定的集合元素中  -->  $(A).appendTo(B);  把A追加到B中

prepend：向所选元素内部前置内容  -->  $(A).prepend(B)  将B前置到A中

prependTo：将所有匹配元素前置到指定元素中  -->$(A).prependTo(B);  把A前置到B中

3.2 外部插入(同辈插入节点)

after(content)：在匹配元素之后插入内容   --> $(A).after(B);  将B插入A之后

insertAfter(content)：将所有匹配元素插入指定元素的后面

before()：向所选元素的前面插入内容

insertBefore(content)：将所匹配的元素插入指定元素之前

4.删除节点: remove();  detach();  empty();

$(selector).remove([expr]);

   $(selector).empty();    作用清空节点，但当前节点保留

$(selector).detach();

remove 和 detach 区别：

相同之处：将匹配的元素从dom中删除，删除后的对象在jQuery对象中仍然存在

不同之处：detach在删除元素后，在jQuery中保存着元素的绑定事件、附加的数据，而remove不保留

5.替换节点

replaceWith();  将匹配的元素换为指定的元素  -->  $(A).replace(B)  将A换成B

replaceAll();与插入节点类似，只是颠倒了replaceWith的操作

6.克隆节点

$(selector).clone([includeEvents]);

includeEvents为可选值，为true或false,当为true时，复制事件处理；为false时反之

四、jQuery操作属性

1.获取和设置元素属性

/* 获取属性 */

$(selector).attr([name]);    

/* 设置单个属性 */

$(selector).attr(name,value);

/* 设置多个属性 */

$(selector).attr({name:value,name:value});

2.删除元素属性

$(selector).removeAttr(name);

五、节点遍历

1.遍历子元素

$(selector).children([expr]);

2.遍历同辈元素

next();紧邻其后的元素

prev();紧邻其前的元素

siblings();所有同辈元素

nextAll();

prevAll();

3.遍历前辈元素

parent([selector]);获取元素的父级元素

parents([selector]);获取元素的每个祖先元素

4.其他遍历方式

each()方法

$(selector).each(function(index,element)) 

index指表示选择器的index位置，element表示当前的元素

end()方法

.end();

结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

六、CSS-DOM操作

详情：https://www.cnblogs.com/yuyujuan/p/9425159.html

面试新发现：https://my.oschina.net/langgege/blog/1544801