jQuery跟JS的比较
js对象和jQuery对象是不能相互使用的
js对象不能使用jQuery的方法
jQuery对象不能使用js的方法
<div id="container"></div>
<button id="Toggle">ToggleDiv</button>
</body>
<script src="../js/jquery-3.1.1.js"></script>//引入jQuery库
<script>
//js
var btn = document.getElementById("Toggle");
var con = document.getElementById("container");
btn.onclick = function () {
if(con.style.display == "none"){
con.style.display = "block";
} else {
con.style.display = "none";
}
}
//jQuery
$("#Toggle").click(function () {
$("#container").toggle();
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
就绪函数
js和jQuery文档就绪函数的区别
1.执行的时机不一样
js是等dom加载完毕，并且完全显示后执行
jQuery是等dom加载完毕后执行（执行的时机会提前）
2.js文档就绪函数不能重复执行
jQuery的可以重复定义
3.jQuery函数可以简写
js不能简写
<script src="../js/jquery-3.1.1.js"></script>
<script>
//jQuery
$(document).ready(function () {
$("#button").click(function () {
console.log(1);
})
});
//简写
$(
function () {
$("#button").click(
function () {
console.log("简写");
}
)
}
);
//js
window.onload = function () {
document.getElementById("button").onclick = function () {
console.log(2);
}
};
</script>
</head>
<body>
<button id="button">Button</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
JS对象跟jQuery对象的相互转化
<button id="btn">Button</button>
</body>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
//jQuery对象
var jQ=$("#btn");
jQ.click(function () {
console.log("jQ1");
});
//js对象
var JS=document.getElementById("btn");
JS.onclick = function () {
console.log("JS1");
};
//JS---->jQuery $():jQuery对象的加工厂
var jQbtn = $(JS);//转化
jQbtn.click(function () {
console.log("jQ2");
});
//jQuery--->JS
var jsbtn = jQ[0];
jsbtn.onclick = function () {
console.log("JS2");
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
jQuery解决多库冲突
<script src="../js/prototype.js"></script>
<script src="../js/jquery-3.1.1.js"></script>
<script>
var $j = jQuery.noConflict();//jQuery放弃$符，重新赋值一个。
//1
jQuery("#div").click(function () {
});
//2
$j("#div").click(function () {
});
//3
//匿名函数的自调用
!function ($) {
$("div").click(function () {
})
}(jQuery);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#代码规范
命名规则（驼峰命名法）：
1.所有的变量命名要有意义 看到名字就知道变量存储的数据
2.大驼峰：Person Animal Student 类名
3.小驼峰：name age height add weight showInfo 变量名，方法名
4.全驼峰：PI ID NAME SCHOOL
代码缩进
四个概念
<div id="div" style="color: red">JREDU</div>
1
1.元素 element ele
<div id="div" style="color: red">jredu</div>
1
2.标签 markup
<div></div>
1
3.属性 attribute
id style
1
4.内容 content
JREDU
---------------------
作者：Mode Cheng
来源：CSDN
原文：blog.csdn.net/weixin_4388…
版权声明：本文为博主原创文章，转载请附上博文链接！ |
|
