包裹节点,可以理解为就是套上一个标签,比方说给li标签套上一个sapn,让li标签套上一个strong等。
方法为:
wrap方法:wrap()包裹整个
//方法1:wrap()
//语法:$('被包裹元素').wrap('被什么包裹')
//写法:$('a').wrap('li') a标签被li标签包裹
-
//方法2:wrapInter()包裹内容部分
//语法:$('被包裹的元素').wrapInter('<加上的特效或某个标签>')
//写法:$('a').wrapInter('<strong>)a标签的内容被strong标签给包裹了
-
//方法3:wrapAll()包裹一整个节点、比方说li的整个节点被ul包裹,a标签被 div包裹
//语法:$('包裹的目标'),warpAll('<包裹上什么标签>')
//写法:$('li').wrapAll('<ul style="background=red">')
-
//方法4:unwrap()解套操作,接触包裹属性,只能解除加上的包裹,不需要赋予参数
//语法:$('目标').unwrap()
//写法:$('li').unwrap()
代码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<a href="">这是一个a标签</a>
<a href="">这是一个a标签</a>
<a href="">这是一个a标签</a>
<a href="">这是一个a标签</a>
<br />
<button>wrap方法</button>
<button>wrapinner方法</button>
<button>wrapAll方法</button>
<button>Unwrap的方法</button>
<p>这个是一个段落</p>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//方法1:wrap()
//语法:$('被包裹元素').wrap('被什么包裹')
$('button').eq(0).on('click',function(){
$('a').wrap('<li>')
})
//wrapinner()包裹每个节点的内容
//$('被包裹元素').wrapInner[选中被包裹元素的内容部分]('被被包括内容套上个什么?')
$('button').eq(1).on('click',function(){
$('li').wrapInner('<strong>')
})
//wrapAll()包括整个一组的节点
//语法:warpAll().wrapAll('<ul style="background:red">')
$('button').eq(2).on('click',function(){
$('li').wrapAll('<ul style="background-color:red">')
})
//Unwrap():解套操作,用于解除代码上的所有集合
//语法:$('li').unwrap
$('button').eq(3).on('click',function(){
$('li').unwrap()
})
</script>
</html>