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);