DOM操作分为3个方面:
- DOM Core 任何一种支持DOM Core的语言都可以使用它,比如getElementById就是DOM Core操作
- HTML-DOM 只能用来处理web文档
- CSS-DOM 针对CSS的操作
关于jQuery中的DOM操作
查找节点可以很轻易通过就jQuery选择器来找到,这里略过。
创建节点
var $myli= $('<li title="troy">troy123</li>');//创建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);//这样就实现了两个节点互换
删除节点
复制节点
clone()方法进行复制节点,如果传参clone(true)就表示连节点的事件都会复制。
替换节点
我们当然可以先删后增来达到替换的效果,当然也有更简单的方法,那就是用replaceWith()和repalceAll();
包裹节点
$("strong").wrap("<b></b>");//每一个被匹配的<strong>元素都将被<b>包裹起来$("strong").wrapAll("<b></b>");//所有被匹配到的<strong>元素被同一个<b>包裹起来$("strong").wrapInner("<b></b>");//每一个被匹配到的<strong>元素的所有子元素都被一个<b>包裹起来
关于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);
遍历节点
CSS-DOM操作
css()方法无论是color属性,还是外部CSS导入,还是拼接在HTML的元素里,css方法都可以获取到属性style里的其他属性的值。
$("#mydiv").css("height");//获取样式高度值,可能为auto之类的$("#mydiv").height();//获取真实高度值,必定为数值px
关于元素定位
原标题:【jQuery基础学习】02 jQuery的DOM操作
关键词:jquery