从js转到jq，以为很容易掌握。但是还是发现不少问题，群里面的大神常说，jq只是一个库，用来简化DOM操作的，并不是万能的。所以还是有些方法是要注意的。
1.var $li=$(‘li‘)不在动态获取元素，与原生JS区分
2.attr与css区别
css是设置样式，等同于style.display=block;同样效果
3.更改class样式
用attr，不能添加CSS样式
css是更改style的样式，attr是修改HTML的属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{width: 100px;height: 100px;background: red;}
.active{width: 100px;height: 100px;background: yellow;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function () {
var $div=$("#div1");
$("#btn1").click(function(){
$div.attr(‘class‘,‘active‘);
});
})
</script>
</head>
<input type="button" value="start" id="btn1">
<div id="div1" class="item"></div>
</body>
</html>
但是用CSS却不灵了
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{width: 100px;height: 100px;background: red;}
.active{width: 100px;height: 100px;background: yellow;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function () {
var $div=$("#div1");
$("#btn1").click(function(){
$div.css(‘class‘,‘active‘);//这里改成了css
});
})
</script>
</head>
<input type="button" value="start" id="btn1">
<div id="div1" class="item"></div>
</body>
</html>
4.照片墙(其中一个练习)
自己不等于自己
时间： 2024-10-25 21:21:17