DOM操作分为3个方面:
DOM Core 任何一种支持DOM Core的语言都可以使用它,比如getElementById就是DOM Core操作
HTML-DOM 只能用来处理web文档
CSS-DOM 针对CSS的操作
关于jQuery中的DOM操作
查找节点可以很轻易通过就jQuery选择器来找到,这里略过。
创建节点
var myli= (‘
- troy123
- ‘);//创建jQuery对象
("ul").append( myli);//将创建的DOM元素添加到ul中插入节点
append() 向每个匹配的元素内部追加内容(上面已有示例) appendTo() 将所匹配的元素追加到指定的元素中 $myli.appendTo("ul");//改编自创建节点中的代码,效果一样 prepend() 向每个匹配的元素内部前置内容(与append相反,append是加在元素里子元素的后面) prependTo() 将所匹配的元素追加到指定的元素中 after() 在每个匹配的元素之后插入内容,其实就是$("#liId").after($myli)的意思 insertAfter() 将所匹配的元素追加到指定的元素后面,同理,只不过不知道为什么没有写成afterTo,这样同一起来其实好理解一点 before() 在每个匹配的元素之前插入内容,其实就是$("#liId").before($myli)的意思 insertBefore() 将所匹配的元素追加到指定的元素前面,同理 var $one_li=$("ul li:eq(1)"); var $two_li=$("ul li:eq(2)"); $two_li.insertBefore($one_li);//这样就实现了两个节点互换
删除节点
remove() 当某个节点调用remove方法后,该节点及其后代节点都会被删除。该方法的返回值是一个只想该被删除节点的引用。 var $li= $("ul li:eq(0)").remove(); $li.prependTo("ul");//结果没变化 $("ul li").remove("li[title=troy]");//选择性删除 detach() 和remove效果一样。但是用这个删除再像上面的例子那样插入的话,你会发现绑定在元素节点上的事件和附加的数据都还在,而remove的就不行。detach翻译为英文为拆分,似乎可以说明这就是为了先拿出来再插入的。 empty() 清空节点的所有后代节点
复制节点
clone()方法进行复制节点,如果传参clone(true)就表示连节点的事件都会复制。
替换节点
我们当然可以先删后增来达到替换的效果,当然也有更简单的方法,那就是用replaceWith()和repalceAll();
包裹节点
$(“strong”).wrap(““);//每一个被匹配的元素都将被包裹起来
$(“strong”).wrapAll(““);//所有被匹配到的元素被同一个包裹起来
$(“strong”).wrapInner(““);//每一个被匹配到的元素的所有子元素都被一个包裹起来关于jQuery中的属性操作
var myDiv= (“div”);
var text= myDiv.attr(“title”);//获取属性 myDiv.attr(“title”,”Troy123”);//设置单个属性
myDiv.attr(title:”Troy123”,name:”Troy”);//设置单个属性 myDiv.removeAttr(“title”);//删除属性关于jQuery中的样式操作
attr("class") 样式的获取和设置,$myDiv.attr("class")和$myDiv.attr("class","myClass")即可。 addClass("myClass") 追加样式。如果在不同的class中设置同一样式,那么后者覆盖前者。也就是说,此函数追加的样式中某一样式属性,如果在前面已经被某样式决定了,那么新的这个会覆盖旧的。 removeClass("myClass") 仅仅只删除myClass样式。而如果不要参数,直接$myDiv.removeClass(),那么将删除所有样式。 toggleClass("myClass") 当点击div时增加样式myclass,当再点击一次则移除,反复如此。 hasClass("myClass") 如果含有则返回true,如果没有则返回false。实际上在内部是用了$myDiv.is(".myClass")操作来实现。
设置和获取HTML、文本和值
html() 设置和获取某节点的html,玩法和attr()一样 text() 设置和获取某节点的文本内容,玩法同上 val() 设置和获取某节点的value属性,而val方法还能使select,checkbox和radio相应的选项被选中。 复制代码 $("#mySelect").val("选项2");//选中选项2 $("#mulSelect").val(["选项2","选项3"]);//选中选项2,选项3 $(":checkBox").val(["check2","check3"]);//选中value为check2和check3的多选框 $(":radio").val(["radio1"]);//选中value为radio1的单选框 //下面用attr方法实现 $("#mySelect option:eq(1)").attr("selected",true); $("[value=radio2]:radio").attr("checked",true); 复制代码
遍历节点
children() 该方法取得匹配元素的子元素集合,只取得子元素,不考虑后代元素 next() 取得匹配元素后面紧邻的同辈元素 prev() 取得匹配元素前面紧邻的同辈元素 siblings() 取得匹配元素前后所有的同辈元素 closest() 取得最近的匹配元素。先检查该元素是否匹配,不匹配就向上查父元素,有就返回匹配元素,无就返回空的jQuery对象 parent() 获取集合中每个匹配元素的父元素 parents() 获取集合中每个匹配元素的祖先元素,还可以加匹配参数 $("#mydiv").parent(); $("#mydiv").parents("div"); $("#mydiv").closest("div");
CSS-DOM操作
css()方法无论是color属性,还是外部CSS导入,还是拼接在HTML的元素里,css方法都可以获取到属性style里的其他属性的值。
(“#mydiv”).css(“height”);//获取样式高度值,可能为auto之类的(“#mydiv”).height();//获取真实高度值,必定为数值px
关于元素定位
offset() 获取元素在当前视窗的相对偏移,其中返回的对象有两个属性:top和left。它只对可见元素有效。 var myOffset=$("#mydiv").offset(); var left=myOffset.left; var top=myOffset.top; position() 获取元素相对于最近的一个Position样式属性设置为relative或者absolute的祖先节点的相对偏移,也返回top和left。用法同上。 scrollTop()和scrollLeft() 获取和设置滚动条滑块距顶端和左侧的距离。 $("#myTextArea").scrollTop();//获取距离 $("#myTextArea").scrollTop(300);//设置距离