老师是这样吗
来源：3-4 自由编程
hyperse
2019-10-15 22:54:45
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3-4 练习</title>
<style>
.box{
width:300px;
height: 300px;
background: pink;
}
.small{
width: 100px;
height: 100px;
background: lightblue;
}
</style>
</head>
<body>
<p>点击这里</p>
<div class="box">
<!-- <div class="small">我是smallbox内容</div>
-->
</div>
<script src="js/zepto.min.js"></script>
<script>
$(document).ready(function(){
var $cr = $('<div>我是smallbox</div>');
$('p').click(function(){
var a = $('.box').prepend($cr);
$cr.addClass('small').click(function(){
alert('1');
})
})
});
</script>
</body>
</html>插入操作有点混乱，老师可以再把插入操作都讲一下吗？谢谢！
写回答
1回答
-
好帮手慕夭夭
2019-10-16
你好同学，效果实现的正确。另外，prepend()参考如下理解：
作用：
prepend() 方法在被选元素的开头插入指定内容。
像代码中，被选元素就是box ，所以会在它开头的位置插入一个子元素
为了更好的观察效果，在box中加入如下：
可以按F12进行查看效果，会发现上面创建的div插入在了最前面：
另外，在前面的课程中，是有讲过的插入操作的。建议同学如果课程内容不熟悉，要复习一下，并且把老师写的代码都练习几遍，像老师上面讲的那样，看看不同的方法插入，有什么不同的效果。自己总结才会记忆深刻，学过的知识才会巩固哦。
课程地址 ：https://class.imooc.com/lesson/1011#mid=24289
祝学习愉快，望采纳。
0
