登录  /  注册
博主信息
博文 38
粉丝 0
评论 2
访问量 22926
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
将节点添加或移动到目标节点的方法—4月8日
→忆指凡尘&的博客
原创
520人浏览过

大家好:

       以下是我对新建节点的添加和已在节点的移动到目标节点的联系,如有错误望大家指出,谢谢

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>将节点添加或移动到目标节点的方法</title>
</head>
<body>
	<div>
		<ul>
			<li><img src="images/zly.jpg" alt="" width="200"></li>
			<li><img src="images/fbb.jpg" alt="" width="200"></li>
			<li><img src="images/gyy.jpg" alt="" width="200"></li>
			<li><img src="images/sl.jpg" alt="" width="200"></li>
		</ul>
		<button>移动</button>
		<p>这是赵丽颖</p>
		<p>这是范冰冰</p>
		<p>这是高圆圆</p>
		<p>这是孙俪</p>
	</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	//获取button按钮,并给按钮添加一个点击事件
	$('button').on('click',function(){
		// 创建一个节点(img),并给这个节点添加css样式
		var img = $('<img src="images/boy.jpeg">').css('width','300').css('box-shadow','3px 3px 3px #888').css('border-radius','20%')
		// 将创建的这个节点插入到ul内容区的最后面
		img.appendTo($('ul'))
		//将第四个p标签移到ul内容区的最后面
		$('p').eq(3).appendTo('ul')

        // 将创建的这个节点插入到ul内容区的最前面
		img.prependTo($('ul'))
		//将第1个p标签移到ul内容区的最后面
		$('p').eq(0).prependTo('ul')

        // 将创建的这个节点插入到目标节点的后面(第一个li标签后面)
		img.insertAfter($('li:eq(0)'))
		//将第三个p标签移动到指定目标节点后面(第二个li标签)
		$('p').eq(2).insertAfter($('li:eq(1)'))

		// 将创建的这个节点插入到目标节点的后面(第四个li标签前面)
		img.insertBefore($('li:eq(3)'))
		//将第二个p标签移动到指定目标节点前面(第二个li标签)
		$('p').eq(1).insertBefore($('li:eq(1)'))
		
	})
</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

                                                                                        课程总结

         通过这节课程我总结了以下的知识点:

         1.appendTo()的功能和用法:          

            语法: content.appendTo(target)—例如:li.appendTo($('ul'))  ---(将新建节点'li'插入到'ul'内容区的最后面)

            参数: 要添加或移动到所在位置作为参考的节点

            功能: 插入到目标元素内容的后面

         2.prependTo()的功能和用法:       

            语法: content.prepend(target)—例如:$('p:eq(1)').prependTo($('ul'))  ---(将已存在的第二个节点'li'插入                               到'ul'内容区的最前面)

            参数:  要添加或移动到所在位置作为参考的节点

            功能: 插入到目标元素内容的前面

        3.insertAfter()的功能和用法:   

           语法: content.after(target)—例如:img.insertAfter($('li:eq(0)'))---(将创建的这个节点插入到目标节点的后面)

           参数:  要添加或移动到所在位置作为参考的节点

           功能: 插入到指定目标节点的后面

        4.insertBefore()的功能和用法:

           语法: content.insertBefore(target)—例如:$('p').eq(1).insertBefore($('li:eq(1)'))---(将第二个p标签移动到指定                        目标节点前面)

           参数:要添加或移动到所在位置作为参考的节点

           功能: 插入到指定目标节点的前面


批改状态:未批改

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

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

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