标签：.text offset fine with end 位置 strong scrollto dom操作
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());
标签：.text offset fine with end 位置 strong scrollto dom操作
原文地址：https://www.cnblogs.com/hjcblog/p/8994708.html
