jQuery DOM 小结
结点
创建结点
var $p = $("<p title='sb'>这是一个jqurey创建的结点</p>")
,直接使用html字符串来创建DOM结点。
插入结点
$("body").append($p)
:将结点作为body的最后一个结点插入
$("body").prepend($p)
:将结点作为body的第一个结点插入
$("#id1").before($p)
:将结点插入到id为id1的结点的前面
$("#id1").after($p)
:将结点插入到id为id1的结点的后面
$($p).appendTo("body")
:将结点作为body的最后一个结点插入
$($p).prependTo("body")
:将结点作为body的第一个结点插入
$($p).insertBefore("#id1")
:将结点插入到id1的前面
$($p).insertAfter("#id1")
:将结点插入到id1的后面
注意:后面4种方法可以移动元素。即先删除,再添加
删除结点
$(“ul li:eq(1)”).remove()
:删除ul的第2个li
$("ul li").remove("li:eq(1)")
:删除ul的第2个li
$("ul").empty()
:清空ul中的元素,只剩下ul标签
$("ul").detach()
:这个只是删除ul,并不清除ul上面绑定的事件,其余的跟remove一样
克隆结点
$("#id1").clone(true)
:克隆结点(可以是多个),有没有参数true的区别在于是否保存结点上的事件等等
包裹结点
$("p").wrap("<b></b>")
:用标签b将每一个标签p包裹起来
$("p").wrapAll("<b></b>")
:用标签b将所有的p包裹起来,如果有中间有其他的元素,则将其放到后面
$("p").wrapInner("<b></b>")
:用标签将p内的内容包裹起来,b标签将紧挨着放在p标签内部
替换结点
$(“#id1”).replaceWith($p)
: 使用结点p替换id1结点
$($p).replaceAll("#id1")
: 使用结点p替换id1结点
遍历结点
$("#id1").parent()
:id1结点的父节点
$("#id1").parents("ul")
:id1结点的祖先结点中所有的ul标签元素
$("#id1").closest("ul")
:id1结点的祖先结点的第一个匹配的ul标签元素
$("#id1").children("ul")
:id1结点的子结点中的ul结点
$("#id1").siblings("ul")
:id1兄弟结点中的所有的ul结点
$("#id1").next("ul")
:id1后面的兄弟结点的第一个ul结点
$("#id1").nextAll("ul")
:id1后面的兄弟结点中的所有ul结点,注意跟siblings不一样
$("#id1").prev("ul")
和$("#id1").prevAll("ul")
:同next,只是prev选的是前面的结点
属性
获取属性
$("#id1").attr("name")
:获取id1结点的name属性
设置属性
$("#id1").attr("name", "sam")
:设置id1结点的name属性为sam
$("#id1").attr({"name": "sam", "title": "niubi"})
: 设置id1结点的多个属性
删除属性
$("#id1").removeAttr()
:删除id1结点的所有属性
$("#id1").removeAttr("name")
: 删除id1结点的name属性
内容
获取内容
$("#id1").html()
:获取id1结点的innerHTML值
$("#id1").text()
:获取id1结点的文本值
$("#id1").val()
:获取id1(应为表单元素)的value值
注意:如果有多个匹配项,那么只返回第一个匹配项的值
设置内容
同获取内容的方法,但是应为其设置一个字符串值
类class
添加css类
$("#id1").addClass("class1")
: 为id1结点添加一个class1的类
删除css类
$("#id1").removeClass("class1 class2")
: 为id1结点移除类(可以是多个)
切换css类
$("#id1").toggleClass("class1")
: 为id1结点切换类,有则删,无则添。
$("#id1").toggleClass("class1", true)
: 为id1结点切换类,true则添,false则删
样式
获取一般样式值
$("#id1").css("color")
:获取id1结点的color值
设置一般样式值
$("#id1").css("color", "red")
:设置一个样式的值
$("#id1").css({"color": "red", "back-ground-color": "red"})
:设置多个样式的值
注意:设置多个样式的值时,如果键没有用引号引起来,那么需要使用小驼峰式键值,如果有引号,可以使用小驼峰式或者带-的方式,建议都使用引号
宽高的设置和获取
直接使用.height和.width方法即可。
定位相关
.position()
方法:返回一个对象Object(top,left),表示某个结点相对于父元素的偏移
.offset()
方法:返回一个对象Object(top, left),表示某个结点相对于当前视窗的偏移