jQuery文档处理

jQuery文档处理

方法	描述
addClass()	向被选元素添加一个或多个类名
after()	在被选元素后插入内容
append()	在被选元素的结尾插入内容
appendTo()	在被选元素的结尾插入 HTML 元素
attr()	设置或返回被选元素的属性/值
before()	在被选元素前插入内容
clone()	生成被选元素的副本
css()	为被选元素设置或返回一个或多个样式属性
detach()	移除被选元素（保留数据和事件）
empty()	从被选元素移除所有子节点和内容
hasClass()	检查被选元素是否包含指定的 class 名称
height()	设置或返回被选元素的高度
html()	设置或返回被选元素的内容
innerHeight()	返回元素的高度（包含 padding，不包含 border）
innerWidth()	返回元素的宽度（包含 padding，不包含 border）
insertAfter()	在被选元素后插入 HTML 元素
insertBefore()	在被选元素前插入 HTML 元素
offset()	设置或返回被选元素的偏移坐标（相对于文档）
offsetParent()	返回第一个定位的祖先元素
outerHeight()	返回元素的高度（包含 padding 和 border）
outerWidth()	返回元素的宽度（包含 padding 和 border）
position()	返回元素的位置（相对于父元素）
prepend()	在被选元素的开头插入内容
prependTo())	在被选元素的开头插入 HTML 元素
prop()	设置或返回被选元素的属性/值
remove()	移除被选元素（包含数据和事件）
removeAttr()l)	从被选元素移除一个或多个属性
removeClass()	从被选元素移除一个或多个类
removeProp()l)	移除通过 prop() 方法设置的属性
replaceAll()l)	把被选元素替换为新的 HTML 元素
replaceWith()	把被选元素替换为新的内容
scrollLeft())	设置或返回被选元素的水平滚动条位置
scrollTop()	设置或返回被选元素的垂直滚动条位置
text()	设置或返回被选元素的文本内容
toggleClass()	在被选元素中添加/移除一个或多个类之间切换
unwrap()	移除被选元素的父元素
val()	设置或返回被选元素的属性值（针对表单元素）
width()	设置或返回被选元素的宽度
wrap()	在每个被选元素的周围用 HTML 元素包裹起来
wrapAll()	在所有被选元素的周围用 HTML 元素包裹起来
wrapInner()	在每个被选元素的内容周围用 HTML 元素包裹起来
$.escapeSelector()	转义CSS选择器中有特殊意义的字符或字符串
$.cssHooks]	提供了一种方法通过定义函数来获取和设置特定的CSS值

（三）文档处理

append（）

向每个匹配的元素内部添加内容

$("p").append("<b>Hello</b>");

appendTo（）

把所有匹配的元素追加到另一个指定的元素集合中

$("p").appendTo("div");   //把p的内容追加到div中

prepend()

向每个匹配的元素内部前置内容

<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");  //结果为<p><b>Hello</b>I would like to say: </p> 

prependTo()

把所有匹配的元素前置到拎一个指定的元素集合中

<p>I would like to say: </p><div id="foo"></div>
$("p").prependTo("#foo");  //结果为<div id="foo"><p>I would like to say: </p></div>

after()

向每个匹配的元素之后插入内容

<p>I would like to say: </p>
$("p").after("<b>Hello</b>");  //结果是：<p>I would like to say:</p><b>Hello</b>

insertAfter()

把所有段落插入到一个元素之后。与 $("#foo").after(“p”)相同

<p>I would like to say: </p>  <div id="foo">Hello</div>
$("p").insertAfter("#foo");//结果为<div id="foo">Hello</div><p>I would like to say: </p>

上述两个的区别
$("span").insertBefore($("div")).css("backgroundColor", 'red'); //设置的是span的样式
$("div").before($("span")).css("backgroundColor", 'red');  //设置的是div的样式

before()

向每个匹配的元素之前插入内容

<p>I would like to say: </p>
$("p").before("<b>Hello</b>");  //结果是：[ <b>Hello</b><p>I would like to say: </p> ]

insertBefore()

把所有段落插入到一个元素之前。与 $("#foo").before(“p”)相同。

<div id="foo">Hello</div>  <p>I would like to say: </p>
$("p").insertBefore("#foo");//结果: <p>I would like to say: </p><div id="foo">Hello</div>

wrap(html|element|fn)

把所有的段落用一个新创建的div包裹起来

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

用ID是"content"的div将每一个段落包裹起来

$("p").wrap(document.getElementById('content'));

用原先div的内容作为新div的class，并将每一个元素包裹起来

unwrap()

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>

 $("p").unwrap()

结果:

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

wrapAll()

将所有匹配的元素用单个元素包裹起来

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

wrapInner(htm|element|fnl)

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

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

replaceWith(content|fn)

将所有匹配的元素替换成指定的HTML或DOM元素。

<p>Hello</p> <p>cruel</p> <p>World</p>
$("p").replaceWith("<b>Paragraph </b>");
//结果：<b>Paragraph</b><b>Paragraph</b><b>Paragraph</b>

replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。

<p>Hello</p> <p>cruel</p> <p>World</p>
$("<b>Paragraph</b>").replaceAll("p");
//结果：<b>Paragraph</b><b>Paragraph</b><b>Paragraph</b>

empty()

删除匹配的元素集合中所有的子节点

$("p").empty();  //删除p元素中的所有子节点

remove()

从DOM中删除所有匹配的元素。

$("p").remove(); //删除所有的p
$("p").remove(".hello"); //删除所有class为hello的p

detach()

从DOM中删除所有匹配的元素。同remove用法相同，remove直接删除节点，detach删除节点，但是会保留之前的行为。

clone([Even[,deepEven]])

克隆匹配的DOM元素，添加到其他位置

$("b").clone().prependTo("p"); //克隆所有的b前置到所有的p标签前