jQuery---节点操作

1.查找

$("ul>li:eq(0)").text();
$("ul>li:contains('篮球')").attr('title);

2.添加

$("<li title='冰球'>冰球</li>");

3.插入

函数	描述
$(selector).html(content)	改变被选元素的(内部)的html
$(selector).append(content)	向被选元素的(内部)HTML追加内容
$(selector).prepend(content)	向被选元素的(内部)HTML”预置”内容
$(selector).after(content)	在被选元素之后添加HTML
$(selector).before(content)	在被选元素之前添加HTML

4.删除节点

//删除节点
$("ul>li:eq(0)").remove();
$("ul li").remove("[title='篮球']");
//清空节点中的文本,但是节点本身还在
$("ul>li:eq(1)").empty();

5.复制节点

var ii=$("ul>li:eq(1)").clone();
$("ul").append(ii);

6.替换节点

$("ul>li:eq(0)").replaceWith("<li title='冰球'>冰球</li>");
$("<li title='冰球'>冰球</li>").replaceWith("ul>li:eq(2)");

7.包裹节点

$("p").wrap("<a href="3"></a>");//将某个节点用其他标记包裹起来
$("p").wrapInner("<a href="3"></a>");

8.遍历节点
(1)children方法
取得匹配的子元素集合

$("p").children();

(2)next方法
取得匹配元素后面紧邻的同辈元素

$("p").next();

(3)closest方法
获得最近的匹配元素

//点哪个,哪个变颜色
$("ul").bind("click",function(e){
    $(e.target).closest("li").css("color","red");
});

9.css与DOM操作
(1)css()
css(name) 获取第一个匹配的样式的属性
css(name,value) 设置第一个匹配的样式的属性

//获取
var tt=$("p").css("color");
//设置
$("p").css("color","red");
//同时设置多个属性值
$("p").css({"color":"red","font-size":"50px"});

height() 取得第一个匹配元素的高度值
width() 获取第一个匹配元素的宽度值
height(value) 设置第一个匹配元素的高度值
width(value) 设置第一个匹配元素的宽度值

//获取高度
var he=$("p").height();
//获取宽度
var wi=$("p").width();
//设置高度
$("p").height(50);
//设置宽度
$("p").width(100);

offset() 获取匹配元素在当前窗口的相对偏移

var xx=$("p").offset();
//获取上边距
alert(xx.top);
//获取左边距
alert(xx.left);