收藏
批改状态：合格
老师批语：
总结：
通过学习jq的语法，觉得jq的语法比js的语法简单多了，js的要用很长的代码才可以写出啦，通过js的知识，一下子就可以写出来的，简单又好记，也有点像css的语法。这让我对学习充满了兴趣，但是前段的课程10左右就结束了，我也要赶紧复习前面的知识了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
button{
background-color: orange;
color: white;
}
li{
text-align-last: none;
}
</style>
</head>
<body>
<ul>
<li style="background-color: blue ;width:300px;">我是列表项1</li>
<li style="background-color: blue ;width:300px;">我是列表项2</li>
<li style="background-color: blue ;width:300px;">我是列表项3</li>
<li style="background-color: blue ;width:300px;">我是列表项4</li>
</ul>
<button>appendTo</button>
<button>prependTo</button>
<button>insertAfter</button>
<button>insertBefore</button>
<p style="background-color: #666; width:300px">要移动的节点</p>
<p style="background-color: #666; width:300px">要移动的节点</p>
<p style="background-color: #666; width:300px">要移动的节点</p>
<p style="background-color: #666; width:300px">要移动的节点</p>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//appendTo()
//语法：content.appendTo(target)
//参数：节点
//功能：插到目标元素内容后面
$('button').eq('0').on('click',function () {
//1新创新节点.添加节点
//var li = $('<li>') //添加文本
//.html('我是新生的节点') //设置样式
//.css('background-color','lightgreen') //将文本添加到页面中
//.appendTo($('ul'))
//移动已有的节点
$('p:eq(0)').appendTo($('li:eq(2)'))
})
//prependTo()
//语法：content.prependTo(target)
//参数：节点
$('button').eq('1').on('click',function () {
//1新创新节点.添加节点
//var li = $('<li>') //添加文本
//.html('我是新生的节点') //设置样式
//.css('background-color','lightgreen') //将文本添加到页面中
//.prependTo($('ul'))
//移动已有的节点
$('p:eq(1)').prependTo($('li:eq(1)'))
})
//insertAfter()
//语法：content.insertAfter(target)
//参数：节点
$('button').eq('2').on('click',function () {
//1新创新节点.添加节点
//var li = $('<li>') //添加文本
//.html('我是新生的节点') //设置样式
//.css('background-color','lightgreen') //将文本添加到页面中
//insertAfter($('ul'))
//移动已有的节点
$('p:eq(2)').insertAfter($('li:eq(0)'))
})
//insertBefore()
//语法：content nsertBefore(target)
//参数：节点
$('button').eq('3').on('click',function () {
//1新创新节点.添加节点
//var li = $('<li>') //添加文本
//.html('我是新生的节点') //设置样式
//.css('background-color','lightgreen') //将文本添加到页面中
//insertBefore($('ul'))
//移动已有的节点
$('p:eq(3)').insertBefore($('li:eq(1)'))
})
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
