jQuery中的DOM节点操作

查找节点(略)  创建节点  插入节点  包裹节点  删除节点  复制节点  替换节点  节点遍历(略)  操作dom节点属性  操作样式

创建节点

用$符包起来的节点和用引号包起来的节点,都可以用来创建新的节点

jQuery中的DOM节点操作_第1张图片

插入节点(内部插入和外部插入)

内部插入

append()向每个匹配元素尾部插入DOM,匹配元素在前

appendTo()向每个匹配元素尾部插入DOM,匹配元素在后

prepend() 向每个匹配元素头部插入DOM,匹配元素在前

perpendTo() 向每个匹配元素头部插入DOM,匹配元素在后

jQuery中的DOM节点操作_第2张图片
内部插入实例

外部插入

after()向每个匹配元素之后插入DOM,匹配元素在前

insertAfter()向每个匹配元素之后插入DOM,匹配元素在后

before()  向每个匹配元素之前插入DOM,匹配元素在前

insertBefore()向每个匹配元素之前插入DOM,匹配元素在后

jQuery中的DOM节点操作_第3张图片
外部插入实例

包裹节点

wrap()将所有匹配元素单独包裹

wrapAll()将所有匹配元素用一个元素包裹

wrapInner()将所有匹配的元素的子内容用其他标签包裹

jQuery中的DOM节点操作_第4张图片

删除节点

remove()删除节点

empty()清空节点

unwrap()删除元素的父元素

detach()删除节点,但保留jQuery对象

jQuery中的DOM节点操作_第5张图片

复制节点


jQuery中的DOM节点操作_第6张图片

替换节点

replaceWidth()  讲所有匹配的元素换成指定的HTML或DOM元素

replaceAll() 用指定的元素替换掉所有选择到匹配到的元素

操作节点属性

attr(key.value )获取添加属性

removeAttr()删除属性值

prop()同attr()

removeProp()同removeAttr()

jQuery中的DOM节点操作_第7张图片

你可能感兴趣的:(jQuery中的DOM节点操作)