JQuery：DOM操作、属性操作、CSS操作的常用方法

DOM操作

1.append在div1的内部最后追加一个图片

　　$("#div1").append("<img src='........'/>");

2.appendTo把一个图片追加到div1的内部最后

　　$("<img src='.........'/>").appendTo("#div1");

3.prepend、prependTo内部最前方插入

　　$("#div1").prepend("<img src='.........'/>");
　　$("<img src='........'/>").prependTo("#div1");

4.after、insertAfter在div2的外部，后面插入节点

　　$("#div1").after("<p>这是一个div</p>");
　　$("<p>这是一个div</p>").insertAfter("#div1");

5.before、insertBefore在div1的外部，前面插入节点

　　$("#div1").before("<p>这是一个div</p>");
　　$("<p>这是一个div</p>").insertBefore("#div1");

6.wrap为每一个选中的节点，都套一层父节点

　　$("div").wrap("<section></section>");

7.wrapAll将选中的所有节点包裹在同一个父节点中

　　$("div").wrapAll("<section></section>");

8.unwrap删除选中节点的父节点

　　$("#div1 p").unwrap();

9.wrapInner将选中节点中的所有子元素包裹在一个新的父节点中 ，新的父节点依然是当前元素节点的子节点

　　$("#div1").wrapInner("<div></div>");

10.replaceWith、replaceAll将所有选中节点重新替换为新的节点

　　$("div p").replaceWith("<span>1</span>");
　　$("<span>1</span>").replaceAll("div p");

11.empty清空当前节点中的内容，但会保留当前节点标签

　　$("#div1").empty();

12.remove删除当前节点以及当前节点的所有子节点

　　[remove和detachde的区别]
　　使用remove删除的节点，如果恢复以后，将不再保留节点所绑定的事件
　　使用detach删除的节点，在节点恢复以后，可以保留节点所绑定的事件

　　$("#div1").remove();
　　$("#div1").detach();

13.clone
　　[JS中cloneNode()与JQ中clone()的区别]
　　1.cloneNode() 如果不传参数或者参数传入false，表示只克隆当前节点，不克隆子节点；
　　2.clone() 无论传入true还是false都会克隆当前节点以及所有子节点
　　传入true表示克隆节点的同时将包括节点所绑定的事件。
　　否则，只克隆节点而不克隆事件。
　　第二个参数可以传入true或者false表示是否克隆子节点

　　$("#div1").clone().empty().insertBefore("button:eq(0)");

属性操作

1.attr设置节点的属性

　　$("#div1").attr("class","cls cls2 cls3");

　传入对象，以键值对的形式同时设置多对属性。 （常用）

　　$("#div1").attr({
　　　　"class":$("#div1").attr("class")+" cls1",
　　　　"name":"name1",
　　　　"style":"font-size:24px;color:yellow;"
　　});

.attr取到节点的属性

　　console.log($("#div1").attr("id"));

2.removeAttr删除节点属性

　　$("#div1").removeAttr("class");

3.prop和attr一样，都可以对节点属性进行读取和设置

　　[两者不同]
　　在读取属性名="属性值"的属性时，attr将返回属性值和undefined：而prop将返回true或false。
　　也就是说，attr要取到的属性，必须是在标签上已经写明的属性，否则无法取到。

　　console.log($("input:eq(0)").attr("disable"));
　　console.log($("input:eq(0)").prop("disable"));
　　$("input:eq(0)").removeProp("disable");

4.addClass在原有class 的基础上新增class名

　　$("#div1").addClass("cls0000");

5.removeClass删除指定的class名称。其余未删除的class名，依然保留

　　$("#div1").removeClass("cls");

6.toggleClass切换class：如果有指定class就删除，如果没有就新增。

　　$("button").click(function(){
　　　　$("#div1").toggleClass("div1");
　　});

7.html([val|fn]) 取到或设置节点中的html代码

8.text([val|fn]) 取到或设置节点中的文本

9.val([val|fn|arr]) 取到或设置表单元素的value值

CSS操作

1.css()给节点添加css样式，属于行级样式表权限

　　$("#div1").css("color","green");

 同时给一个节点添加 多对样式

　　$("#div1").css({
　　　　"color":"green",
　　　　"font-size":"36px"
　　});

通过回调函数返回值修改样式

　　$("button:eq(0)").click(function(){
　　　$("#div1").css({
　　　　　　"color":"green",
　　　　　　"font-size":function(index,value){
　　　　　　　　var n=parseInt(value)+1;
　　　　　　　　return n +"px";
　　　　　}
　　　　});
　　});

2.height、width取到或者设置宽高。只含width/height

　　$("#div1").height(400);
　　$("#div1").width("400px");

3.innerHeight、innerWidth取到节点的宽高+padding。不包含border和margin

　　console.log($("#div1").innerHeight());
　　console.log($("#div1").innerWidth());

4.outerHeight、outerWidth不传参数，表示宽高+padding+border
传入true，表示宽高+padding+border+margin

　　console.log($("#div1").outerHeight());
　　console.log($("#div1").outerWidth(true));

5.offset返回一个节点相对于浏览器左上角的偏移量
返回结果为一个对象{top:20,left:20}

　　console.log($("#div1").offset());

6.position返回一个节点，相对于父容器的偏移量。
　　注意：
　　① 使用此方法，要求父元素必须是定位元素。如果父元素不是定位元素，则依然是相对于浏览器左上角进行测量。
　　② 此方法，测量偏移时，将不考虑margin。而会将margin视为当前容器的一部分

　　console.log($("#div1").position());

7.scrollTop()：设置或取到指定节点的滚动条位置

　　console.log($(document).scrollTop());