jQuery DOM操作

 

$(html):

根据传入的HTML标记字符串，创建一个Dom对象（返回的是一个jQuery对象）。

var $li = $(“<input type=text></input>”);

$(“#div”).append($li);

append():

向每个匹配的元素后追加内容。$(“div”).append(“<input type=text> </text>”)。

appendTo():

将所有匹配的元素追加到指定的元素中。实际上，使用该方法颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中。

$(“<b>helloKitty</b>”).appendTo(“p”);

结果是：<p><b>helloKitty</b></p>

prepend():

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

prependTo():

将所有匹配的元素前置到指定的元素中。

after():

insertAfter():

before():

insertBefore():

remove():

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

$(“p :lt(3)”).remove();  //删除前3个p标记

empty():

empty()不是删除节点，是清空节点和节点的子元素。

clone():

复制节点，如果带参数true，则该节点的事件也复制。

replaceWith():

替换节点。$(p:eq(1) ). .replaceWith(“<b>helloKitty</b>”);

$(“<b>helloKitty</b>”).replaceAll(“p”);

wrap():

$(“strong”).wrap(“<b></b>”); //用<b>标签把<strong>元素包裹起来

wrapAll():

全部元素都包裹

wrapInner():

包裹内容

attr():

设置和获取属性。

jQuery中很多同一个方法用来设置和获取的，例如：html(),text(),height(),width(),val(),css()等等。

removeAttr():

删除属性。

addClass():

添加样式  $(“div”).addClass(“myClass”);

removeClass():

移除样式。

toggle():

交替切换样式。

$(“#myButton”).toggle(fucntion(){

//显示元素

},function(){

//隐藏元素

});

toggleClass():

存在则移除，不存在则添加。

hasClass()：

判断是否含有某样式。$(“#div”).hasClass(“myClass”);

这个代码等价于$(“#div”).is(“.myClass”);

html():

类同javascript中的innerHTML()方法，用来设置或者获取某个元素中的HTML内容。

text():

类同javascript中的innerText(),用来设置或者获取某个元素中的文本内容。

val():

类同javascript中的value属性，用来设置或者获取某个元素的值。

children():

获取匹配元素的子元素集合，只考虑子元素，不考虑孙元素。

next():

获取匹配元素后面紧邻的同辈元素。

prev():

获取匹配元素前面紧邻的同辈元素。

siblings():

获取匹配元素所有的兄弟元素。

css():

获取和设置元素的样式。传入的属性最好用””括起来。

offset():

获取元素在当前视窗的相对偏移。

var $ offset = $(“#myCanvas”).offset();

var left = $offset.left(); //左偏移量

var right = $offset.right();  //右偏移量