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]);

　　/*获取标签中的html代码*/
　　$("ul").html()
　　/*指定标签中的html代码*/
　　$("ul").html("<li>hehe</li>");

　　2.标签内容操作

　　　　text([content]);

　　/*获取标签中的text代码*/
　　$("li:first").text();
　　/*指定标签中的text文本*/
　　$("li:first").text("hehe");

　　3.属性值操作

　　　　val([value]);

　　/*获取标签中的value属性值*/
　　$("input").val();
　　/*指定标签中的value属性值*/
　　$("input").val("呵呵");

三.jQuery操作节点

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

　　2.创建节点

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

/* 创建节点 */
var $element=$("<li style='color:Fuchsia'>大哥</li>");

　　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