Blogger Information
Blog 250
fans 3
comment 0
visits 321673
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery包裹节点的方法
梁凯达的博客
Original
1491 people have browsed it

包裹节点,可以理解为就是套上一个标签,比方说给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>

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post