jq与js的区别备忘

浏览数：20 / 时间：2015年06月09日

从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.照片墙(其中一个练习)
自己不等于自己

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jq与js的区别备忘