1.内部插入
append(content|fn) 向每个匹配的元素内部追加内容
appendTo(content) 把所有匹配的元素追加到另一个指定的元素集合中
prepend(content|fn) 向每个匹配的元素内部前置内容
prependTo(content) 把所有匹配的元素前置到另一个指定的元素集合中
父元素调用append( ) 子元素调用appendTo( )
例如:
$(’.box’).append(’<img src=“images/1.jpg”>’);把照片加入到box中的最后。
$(’<img src=“images/1.jpg”>’).appendTo(’.box’);把照片加入到box中的最后。
父元素调用prepend( )和子元素调用prependTo( )是添加到box中的最前面。
2.外部插入
after(content|fn) 在每个匹配的元素之后插入内容
before(content|fn) 在每个匹配的元素之前插入内容
insertAfter(content) 把所有匹配的元素插入到另一个指定的元素元素集合的后面
insertBefore(content) 把所有匹配的元素插入到另一个指定的元素元素集合的前面
父元素调用after( )和子元素调用insertAfter( )是添加到box外的最后面。
父元素调用before( )和子元素调用insertBefore( )是添加到box外的最前面。
3.包裹
wrap(html|ele|fn) 把所有匹配的元素每个用其他元素的结构化标记包裹起来
wrapAll(html|ele) 把所有匹配的元素一起用其他元素的结构化标记包裹起来
unwrap() 移出选中元素的父元素,可以移到body前,每次移出一个
wrapInner(html|ele|fn) 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
$(’.box img’).wrap(’<li>’); 把选中的img每个都包上li
$(’.box img’).wrapAll(’<li>’); 把选中的img一块包上li
$(’.box img’).unwrap(); 把选中的img去掉一层包裹,一直去到body,但body不可去。
$(’.box ul’).wrapInner(’<li>’);把ul中的内容用一个li包裹起来
4.替换
replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素
replaceWith(content|fn) 旧的调用,括号中传新的,新的会替换旧的
旧的调用,括号中传旧的,括号中的那个去替换,那么它原来的位置会消失。
若不想让原来的位置消失,用克隆版的去替换。
$(’.box img.active’).replaceWith(img1.clone());
replaceAll(selector) 新的调用,传旧的,新的会把匹配到的都替换掉
5. 删除
remove([expr]) 从DOM中删除所有匹配的元素
empty() 删除匹配的元素集合中所有的子节点
$(’.box img.active’).remove(); 删除选中的,删自己
$(’.box’).empty(); 把box中的都删除,清空
6. 复制
clone(true) 克隆匹配的DOM元素,括号中传true,把子元素也一起克隆,括号中不传或者传false,只克隆本身,不克隆子元素。
jQueryDOM操作解析:
最新推荐文章于 2024-08-19 14:05:29 发布