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()
获取元素的滚动条距顶端的距离和距左侧的距离