码迷,mamicode.com
首页 > Web开发 > 详细

jq与js的区别备忘

时间:2015-03-07 18:27:49      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

从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的区别备忘

标签:

原文地址:http://www.cnblogs.com/masita/p/4320727.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!