JQuery中的DOM操作

1.内部插入内容

下列jQuery方法可以在指定元素内部插入HTML内容或文本.
-append()
该方法在匹配元素集合的每个元素末尾插入由参数指定的内容并返回jQuery对象。

$(selector).append(content)
$(selector).append(function(i){return '索引值'+i})

-appendTo()
此方法将匹配元素集合中的每个元素插入目标元素的末尾并返回jQuery对象。
两种方法执行效果相同，区别在于语法上内容和目标的位置不同。

  $(content).appendTo(seletor)

-prepend()

此方法将参数指定的内容插入匹配元素集合中每个元素的开头并返回jQuery对象。

 $("p").prepend("<b>Hello world!</b> ");

-prependTo()

此方法将匹配元素集合中的每个元素插入目标元素的开头并返回jQuery对象。

$("<b>Hello World!</b>").prependTo("p");

-html()
1.html():获取匹配元素集合中第一个元素的HTML内容并返回字符串
2html(htmlstring):根据传递的字符串来设置匹配集合中每个元素的HTML内容并返回jQuery对象。
3.html(function(index,hmtl))：根据传递的函数来设置匹配元素集合中每个元素的HTML内容并返回jQuery对象。

$("p").html("Hello <b>world!</b>");

-text()
1.text():获取匹配元素集合中每个元素的组合文本内容并返回字符串
2.text(htmlstring):根据传递的字符串来设置匹配集合中每个元素的文本内容并返回jQuery对象。
3.text(function(index,hmtl))：根据传递的函数来设置匹配元素集合中每个元素的文本内容并返回jQuery对象。

$("p").text("Hello world!");

-val()
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
- 补充
is():方法用于查看选择的元素是否匹配选择器。

 if ($("p").parent().is("div")) {
 	alert("p 的父元素是 div");
 }

2.外部插入内容

以下方法为在指定元素的相邻位置（之前或之后）上插入内容。
-after()
该方法在匹配元素集合中的每个元素之后插入由参数指定的内容并返回jQuery对象。

$("p").after("<p>Hello world!</p>");

-before()
此方法将参数指定的内容插入到匹配元素集合中的每个元素之前，并返回jQuery对象。

$("p").before("<p>Hello world!</p>");

-insertAfter()
该方法在匹配元素集合中的每个元素插入到目标元素之后并返回jQuery对象。

$("<span>Hello world!</span>").insertAfter("p");

-insertBefore()
该方法在匹配元素集合中的每个元素插入到目标元素之前并返回jQuery对象。

$("<span>你好！</span>").insertBefore("p");

3.删除元素

以下方法可以从文档中删除指定的DOM元素，或从指定元素中删除所有子节点。
-remove()
移除被选元素，包括所有文本和子节点。

$("body").append($("p").remove());

-detach()
移除被选元素，包括所有文本和子节点
detach() 会保留所有绑定的事件、附加的数据

$("body").append($("p").detach());

-empty()
从被选元素移除所有内容，包括所有文本和子节点。

$("div").empty();

4.替换元素

以下方法用来对DOM元素执行替换操作，即以新建元素或现有元素替换指定的目标元素。
-replaceWith()
用指定的 HTML 内容或元素替换被选元素

$(selector).replaceWith(content)

-replaceAll()

replaceAll() 与 replaceWith() 作用相同。
差异在于语法：内容和选择器的位置，以及replaceWith() 能够使用函数进行替换。

$(content).replaceAll(selector) 

5.复制、包装元素

-.clone()
复制元素

$("body").append($("p").clone());

-wrap()
包裹元素

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

-unwrap()
删除被选元素的父元素

 $(selector).unwrap()

-wrapAll()
在指定的 HTML 内容或元素中放置所有被选的元素

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

-wrapInner()
使用指定的HTML 内容或元素，来包裹每个被选元素中的所有内容

$("p").wrapInner("<b></b>");

6.DOM属性操作

-attr()
设置或获取被选元素的属性值

 $(selector).attr(attribute)

eg：

$("img").attr("width","180");

设置多个值时，与css()方法用法相似

$("img").attr({"width":"180",'height':'150'});

-prop()
设置或返回被选元素的属性和值。
-removeAttr()
从被选元素中移除属性

$("p").removeAttr("id");

removeProp() 方法移除由 prop() 方法设置的属
性。
- prop()和attr()的主要区别：
prop()函数针对的是DOM元素(JS Element对象)的属性
attr()函数针对的是DOM元素所对应的文档节点的属性
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法
eg：

<a href="#" id="link1" action="delete">删除</a>

a元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，a元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

<input id="chk1" type="checkbox" />
<input id="chk2" type="checkbox" checked="checked" />

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

7.CSS操作

1.设置和切换CSS类
-addClass()
向被选元素添加一个或多个类。

$("p:first").addClass("intro");

-removeClass()
从被选元素移除一个或多个类。

$("p").removeClass("intro");

-toggleClass()
对设置或移除被选元素的一个或多个类进行切换。

$("p").toggleClass("main");

-hasClass()
检查被选元素是否包含指定的class。

 alert($("p:first").hasClass("intro"));

2.CSS属性操作
-CSS()
设置或返回被选元素的一个或多个样式属性。
获得eg：

$("p").css("background-color") 

设置eg：

$("p").css("background-color",'red')

-offset()
返回或设置匹配元素相对于文档的偏移（位置）
设置会自动设置成定位

 $(selector).offset().left/top 
 $(selector).offset({top:100,left:100})

-position()
返回匹配元素相对于父元素的位置（偏移）
该方法返回的对象包含两个整型属性：top 和 left，以像素计。
此方法只对可见元素有效。
-scrollLeft()
返回或设置匹配元素的滚动条的水平位置

$("div").scrollLeft(100);

-scrollTop()
返回或设置匹配元素的滚动条的垂直位置

$("div").scrollTop(100);

-尺寸

属性	描述
height()	返回或设置匹配元素的高度
width()	返回或设置匹配元素的宽度
innerHeight()	返回元素的高度,该方法包含padding，但不包含 border 和 margin
innerWidth()	返回元素的宽度,该方法包含padding，但不包含 border 和 margin
outerHeight()	返回元素的高度,该方法包含padding和 border
outerWidth()	返回元素的宽度,该方法包含padding和 border