博主信息
博文 250
粉丝 3
评论 0
访问量 385948
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jquery包裹节点的方法
梁凯达的博客
原创
1824人浏览过

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

批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学