jQuery中的DOM操作
通常DOM操作可分为三类——DOM Core(核心)、HTML-DOM和CSS-DOM。
样式操作
css()直接设置样式
css("name","value")//设置单个属性
或
css({"name":"value","name":"value",...})//设置多个属性
addClass()为元素追加类样式
addClass("class")//添加单个样式
或
addClass("class1" "class2" ... "classN")//添加多个样式
remove()移除样式,和addClass()方法对应。
removeClass("class")//移除单个样式
或
removeClass("class1" "class2" ... "classN")//移除多个样式
toggleClass()切换样式
toggleClass("class")//模拟了addClass()和removeClass()实现样式切换的过程。
内容操作
html()获取或设置元素的内容(包含HTML标签)
html()//用于获取第一个匹配元素的HTML内容和文本内容
html("content")//用于设置所有匹配元素的HTML内容和文本内容
text()获取或设置元素的文本内容(不包含HTML标签)
text()//用于获取所有匹配元素的文本内容
text("content")//用于设置所有匹配元素的内容
val()获取或设置value属性值的方法
val()//用于获取第一个被选元素的value属性的值
val("新value属性值")//规定被选元素的新内容
节点操作
1.查找节点
在jQuery中,获取元素,可以使用jQuery选择器。
2.创建节点
使用$()工厂函数来创建节点。
3.插入节点
内部插入
/*向父节点的内部的后面插入新节点*/
("父节点").append("新子节点")
或
("新子节点").appendTo("父节点")
/*向父节点的内部的前面插入新节点*/
("父节点").prepend("新子节点")
或
("新子节点").prependTo("父节点")
外部插入
/*向原节点的后面插入同辈新节点*/
("原节点").after("新节点")
或
("新节点").insertAfter("原节点")
/*向原节点的前面插入同辈新节点*/
("原节点").before("新节点")
或
("新节点").insertBefore("原节点")
4.删除节点
$("要删除节点").remove()//删除所选节点
$("要清空节点").empty()//清空所选节点中的内容
5.替换节点
/*将所有匹配元素替换成指定的新元素*/
$("被替换节点").replaceWith("新节点")
或
$("新节点").replaceAll("被替换节点")
6.复制节点
$(selector).clone([includeEvents])//其中参数为可选值,为布尔值,规定是否复制元素的所有事件处理,为true时复制事件处理,为false时反之。
属性操作
/*获取、设置和删除元素属性*/
attr([name])//获取或设置单个元素的属性值
attr({[name1:value1],[name2:value2],...[nameN:valueN]})//设置多个属性值
removeAttr("attName")//删除某个元素特定的属性
节点遍历
遍历子元素
children([expr])//遍历子元素的方法只有一个,该方法可以用来获取元素的所有子元素,而不考虑其他的后代元素。其参数expr可选,用于过滤子元素的表达式。
遍历同辈元素
next([expr])//获取紧邻匹配元素的下一个同辈元素
prev([expr])//获取紧邻匹配元素的上一个同辈元素
sibling([expr])//获取匹配元素的所有同辈元素
遍历前辈元素
parent([selector])//获取匹配元素集合中的每个元素父级元素
parents([selector])//获取匹配元素集合中的每个元素的祖先元素
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.