第三章中主要讲了几个对DOM进行操作的方法。
归纳如下:
属性的获取和设置:
//属性的获取
$("li").attr("title");
//属性的设置
$("li").attr("title","test");
//批量属性的设置
$("li").attr({"title":"test","id":"test2"......});
删除属性:
$("p").removeAttr("title");
创建节点:
这个很好玩,完全就是直接写html代码就好
$("<b title = "xxx">xxx</b>")
插入节点:
这个就臭又长了~而且很好玩,他找到几个插几个找一个标签p,找到100个他就插100个,
直接在p的内部插入,插到最后面。
$("p").append($("<b>xxx</b>"));
将$txt插到p1内部,注意语法,是前插后
var $txt = $("<b>World</b>");
$txt.appendTo("#p1");
prepend()查到元素内部前面
$("p").prepend($("<b>xxx</b>"));
prependTo()前面的元素插到后面元素内部前面
after()插到指定元素之后(同级)
insertAfter()前插后
before()插到指定元素之前(同级)
insertBefore()前插后
删除节点:
这个简单,找到节点,一个remove()
$li = $(ul li:eq(0)).remove();
但是他会返回一个删除掉的子节点哦。
删除子节点
empty()
$(ul li:eq(0)).empty
注意,其中的文字也算子节点哦
复制节点
$(ul li:eq(0)).clone()
//其中如果clone(true)的话可以连里面的事件一起复制
替换节点:
$("p").replaceWith("<b>xxx</b>");
//或者
$("<b>xxx</b>").replaceAll("p")
包裹节点:
将已有的节点用其他标签包裹起来:如:<b>xx</b>包裹一个p:<p><b>xxx</b></p>
$("b").wrap("<p></p>");
但是这个只能包裹单个如果相同的标签有一堆,他会一个个包裹起来
所以有了:wrapAll()
$("strong").wrap("<b></b>");
多个的就被一个包裹起来了。
样式操作:
除了传统的属性设定指望,还有有addClass(),追加样式
找到元素,使用addClass("样式名");即可在原有样式后空格再来一个样式
移除样式removeClass("样式名");
获取html内容:类似innerHTML
$("#p1").html()
获取text内容:类似innerText
$("p").text();
获取value值,在选择之类的地方很好用哦
$("single").val();//获取值
$("single").val("1");//指定值
遍历DOM:
.children()方法,遍历指定元素下子节点
next()下一个同级节点
prev();上一个同级节点
siblings();获取所有同级元素
css操作:
获取节点,然后进行css设定:
$("P").css("color":"red","backgroundColor":"blue")