使用jQuery操作DOM
一、样式操作
设置样式 设置单个:css(name,value) 设置多个:css({name1:value1,name2:value2,.....}) 无参数时获取样式
追加样式 addClass(className)
移除样式 removeClass(className)
切换样式 toggleClass(className)
二、内容操作
html() 解析HTML语句。获取时能获取到<>的文本显示。带参数时,文本按HTML解析后的样式显示
text() 不解析HTML语句。获取时只获取文本,<>内容被忽略。带参数时,文本原样显示,即“<标签名>文本</标签名>”
val() 获取或者设置元素的value属性值
contains() 获取涵盖某些文本的元素标签
三、节点操作
节点本身的操作
查找节点 使用选择器获取元素
创建节点
$(element) 以DOM元素来创建jQuery对象 $(document)
$(selector) 使用jQuery选择器匹配元素 $("li")
$(html) 使用HTML字符串创建 var $newNode=$("<li><li>"); var $newNode=$("<li>你好!<li>");
插入节点
内部插入
append(content) $(A).append(B) 将B追加到A中
appendTo(content) $(A).appendTo(B) 将A追加到B中
prepend(content) $(A).prepend(B) 将B插入到A中的前方
prependTo(content) $(A).prependTo(B) 将A前置B中的前方
外部插入
after(content) $(A).after(B) 将B插入到A之后
insertAfter(content) $(A).insertAfter(B) 将A插入B之后
before(content) $(A).before(B) 将B插入到A之前
insertBefore(content) $(A).insertBefore(B) 将A插入到B之前
删除节点
01、$(selector).remove([expt])
参数为可选项,有参数删除参数获得的元素,无参数删除remove前的元素本身
02、$(selector).empty()
清空元素中的所有后代节点
03、detach()
删除节点,但保留事件。
需要变量来接受此方法的返回值,以便恢复节点。
empty(), remove(), detach()三者的区别 |
empty() | 只能清空节点的内容和子元素!节点本身不会被删除! |
remove() | 01.删除整个节点,包含自身和子元素! |
02.删除了节点所对应的事件 | |
detah() | 01.删除整个节点,包含自身和子元素! |
02.不会删除节点所对应的事件 |
复制节点
$(selector).clone([includeEvents])
includeEvents为可选值,true 或者 false
true 复制元素的所有事件处理
false 只复制元素,不复制事件处理
替换节点
replaceWith() $(A).replaceWith(B) 用B替换掉A
replaceAll() $(A).replaceAll(B) 用A替换掉B
属性操作
获取属性和设置属性
获取属性值:$(selector).attr([name])
设置属性:$(selector).attr({[name1:value1],[name2:value2],[name3:value3],....})
删除属性
$(selector).remove(name)
节点遍历
遍历子节点
$(selector).children([expr])
expr 用于过滤子元素的表达式,可选项
遍历紧邻其后的兄弟节点
$(selector).next([expr])
expr 可选项。若有,既要是紧邻selector之后的那个元素,又要满足过滤
遍历紧邻其前的兄弟节点
$(selector).prev([expr])
expr 可选项。若有,既要是紧邻selecto之前的那个元素r,又要满足过滤
遍历所有兄弟节点(不包含自身)
$(selector).siblings([expr])
expr 用于过滤的表达式,可选项。既要是兄弟,又要满足过滤
遍历父节点
$(selector).parent([expr])
expr 用于过滤父元素的表达式,可选项。既要是直属父级,又要满足过滤
遍历祖先节点(包含直接父级)
$(selector).parents([expr])
expr 用于过滤父元素的表达式,可选项。获取所有满足过滤条件的祖先元素
其他遍历方法
each()
end()
四、CSS-DOM操作
获取或设置元素的样式
css()
获取或设置元素的宽度、高度
height()
width()
获取元素相对最近的已定位祖先节点
offsetParent()
获取元素在当前视窗的相对偏移
position()
获取元素的滚动条距离顶端和左侧的距离
scrollLeft([position])
scrollTop([position])