1，查找节点：
|
1
2
|
var $li = $("ul li:eq(1)");//查找元素
$li.attr("title"); //查找元素的属性值
|
2，创建和插入节点：
|
1
2
3
4
5
6
7
8
9
10
|
var $ul = $("#ulMain");
var $li_1 = $("<li id=‘liApple‘>苹果</li>"); //创建一个li元素。
$ul.append($li_1); //在ulMain内部末尾插入元素
$li_1.appendTo($ul); //将li追加到ul内部的末尾。
$ul.prepend($li_1); //在ul内部将li插入到最前面。
$li_1.prependTo($ul); //将li插入到ul内部的最前面。
$ul.after("<span>hello,span</span>"); // 在ul后面插入一个span元素
$("<b>重点</b>").insertAfter($ul); //将b插入到ul后面
$ul.before("<b>重点</b>"); //在ul前面插入b
$("<b>重点</b>").insertBefore($ul);
|
3，删除节点：
|
1
2
3
|
var $li = $("ul li").remove("li[title=hello]"); //移除ul内title值为hello的li并返回。
var $li = $("ul li").detach("li[title=hello]"); //和remove相同，不同之处：所有绑定的事件，附加的数据都会保留下来，将来可以再使用这些元素。
$li.empty(); //清空元素里的所有内容。
|
4，复制元素：
|
1
2
3
|
$("ul li").click(function(){
$(this).clone(true).appendTo("ul"); //点击li时将li复制后追加到ul中，同时复制li所绑定的事件。
}); |
5，替换元素，替换后元素绑定的事件会消失，需要重新绑定。
|
1
2
|
$("p").replaceWith("<strong> 你最不喜欢的水果是？</strong>"); //用strong替换p
$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p"); // 用strong替换掉p
|
6，包裹节点：
|
1
2
3
|
$("<strong>").wrap("<b></b>"); //用b标签把strong元素包裹起来。
$("<strong>").wrapAll("<b></b>"); //用b标签把所有匹配的strong元素包裹起来。
$("<strong>").wrapInner("<b></b>"); // 将每一个匹配的strong内的子内容用<b>包裹起来。
|
7，属性操作：
|
1
2
|
$ul.attr({"title":"yourTitle", "name":"theName"}); //同时为两个属性赋值。
$ul.removeAttr("title"); //删除title属性。
|
8，样式操作：
|
1
2
3
4
5
|
$ul.addClass("className"); //添加class
$ul.removeClass("className className2"); //同时移除两个class。
$ul.removeClass(); //移除所有class
$ul.toogleClass("another"); //在ul上切换another这个class，ul原有的class不受影响。
$ul.hasClass("another"); // ul是否包含another这个class
|
9，设置和获取html，文本和值：
|
1
2
3
|
$("div").html("<b>hello</b>"); //设置div的html代码，html()不能作用于xml文档。
$("div").text("the plain text"); //设置div的文本内容，同时支持xml文档。
$("select01").val(["text1", "text2"]); //使下拉框的第二项，第三项被选中。
|
10，遍历节点：
|
1
2
3
4
5
6
7
8
|
$ul.children(); //获取ul的子元素，而非后代元素。
$ul.next(); //获取紧邻ul后的一个同辈元素。
$ul.prev();$ul.siblings(); // 获取ul的所有同辈元素。
$ul.parent();//返回父级元素，返回一个节点。
$ul.parents(); //返回所有祖先元素
$ul.closest(); //如果本身匹配就返回本身，否则返回最先匹配的祖先元素。
其它方法：find(), filter(), nextAll(), prevAll()。 |
11，CSS-DOM操作：
|
1
2
3
4
5
6
7
8
9
|
$ul.css({fontSize:"30px",
backgroundColor:"#aaafff"}); 或 $ul.css({"font-size":"30px", "background-color":"#aaafff"});
$ul.height("10em"); //设置ul的高度为10em
$ul.height(); //获取ul的高度，是元素在页面中的实际高度，与样式的设置无关，且不带单位。
$ul.css("height"); //获取ul的高度，与样式的设置值有关，可能得到"auto" ，"10px"
之类的字符串。
$ul.width("10px");
var offsetObj=
$ul.offset(); var vLeft=
offsetObj.left; var vTop = offsetObj.top; //获取元素在当前视窗的相对偏移，返回的对象包含两个属性：top,
left.
var posObj =
$ul.position(); var vLeft =
posObj.left; var vTop = posObj.top; //获取元素相对于最近一个position样式设置为relative或absolute的祖先节点的相对偏移。
$ul.scrollTop(300); //ul的滚动条滚动到距顶端300的位置。
$ul.scrollLeft(300); //ul的滚动条滚动到距左侧300的位置。
|