jQuery—DOM操作

摘抄自《锋利的jQuery》

一、查找节点

1、查找元素节点

var li_txt = $li.text();

2、查找属性节点

var p_txt = $para.attr("title");

二、创建节点

1、创建元素节点

2、创建文本节点

3、创建属性节点

三、插入节点

1、append()

$("<p>我想说：</p>").append("<b>你好</b>");
<p>我想说：<b>你好</b></p>

2、appendTo()

$("<b>你好</b>").appendTo("<p>我想说：</p>");
<p>我想说：<b>你好</b></p>

3、prepend()

$("<p>我想说：</p>").prepend("<b>你好</b>");
<p><b>你好</b>我想说：</p>

4、prependTo()

$("<b>你好</b>").prependTo("<p>我想说：</p>");
<p><b>你好</b>我想说：</p>

5、after()

$("<p>我想说：</p>").after("<b>你好</b>");
<p>我想说：</p><b>你好</b>

6、insertAfter()

$("<b>你好</b>").insertAfter("<p>我想说：</p>");
<p>我想说：</p><b>你好</b>

7、before()

$("<p>我想说：</p>").before("<b>你好</b>");
<b>你好</b><p>我想说：</p>

8、insertBefore()

$("<b>你好</b>").insertBefore("<p>我想说：</p>");
<b>你好</b><p>我想说：</p>

四、删除节点

1、remove()

$("ul li:eq(1)").remove();
or
$("ul li").remove("li[title!=菠萝]");

2、detach()

与remove相同用法, 区别是如果重新追加后, 之前的绑定事件还在

3、empty()

$("ul li eq(1)").empty();

清空元素里的内容

五、复制节点

$(this).clone().appendTo("ul");
or
$(this).clone(true).appendTo("ul")

一个不带事件一个带事件

六、替换节点

$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
or
$("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");

完全替换所选节点内容(原先事件会失效)

七、包裹节点

1、wrap()

$("strong").warp("<b></b>");

符合的元素一个一个包括<b></b>

2、wrapAll()

$("strong").warpAll("<b></b>");

所有符合的元素最外层包括一个<b></b>

3、wraplnner()

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

符合的元素内容中包括<b></b>

八、属性操作

1、获取属性

var p_txt = $para.attr("title");

2、设置属性

$("p").attr("title", "your title");
$("p").attr({"title": "your title", "name": "test"});

3、删除属性

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

九、样式操作

1、获取样式(同上)

2、设置样式(同上)

3、追加样式

$("p").addClass("another");

4、移除样式

$("p").removeClass("high");
$("p").removeClass("high another");
$("p").removeClass();

5、切换样式

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

如果有就移除, 没有就附加

6、判断是否含有某个样式

$("p").hasClass("another");

返回true或false, 等价于$("p").is(".another");

十、设置和获取HTML、文本和值

1、html()

获取整段元素的HTML代码

2、text()

获取元素中的文本内容

3、var()

获取元素的value值

十一、遍历节点

1、childern()

获取匹配元素的所有子元素的个数

2、next()

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

3、prev()

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

4、sibings()

获取匹配元素前后所有的同辈元素

5、closest("xxx")

获取最近的匹配元素, 没有则返回空jQuery对象

6、其他

parent(), parents(), find(), filter(), nextAll()和prevAll()等

十二、css-dom

1、offset()

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

2、position()

获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移

3、scrollTop()、scrollLeft()

获取元素的滚动条距顶端的距离和距左侧的距离