第一章：初识jQuery
一、原生的JS与jQuery的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-jQuery和JS入口函数的区别</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
window.onload = function (ev) {
// 1.通过原生的JS入口函数可以拿到DOM元素
var images = document.getElementsByTagName("images")[0];
console.log(images);
// 2.通过原生的JS入口函数可以拿到DOM元素的宽高
var width = window.getComputedStyle(images).width;
console.log("onload", width);
}
// 1.原生JS和jQuery入口函数的加载模式不同
// 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
// jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
$(document).ready(function () {
// 1.通过jQuery入口函数可以拿到DOM元素
var $images = $("images");
console.log($images);
// 2.通过jQuery入口函数不可以拿到DOM元素的宽高
var $width = $images.width();
console.log("ready", $width);
});
// 1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
// 2.jQuery中编写多个入口函数,后面的不会覆盖前面的
window.onload = function (ev) {
alert("hello lnj1");
}
window.onload = function (ev) {
alert("hello lnj2");
}
$(document).ready(function () {
alert("hello lnj1");
});
$(document).ready(function () {
alert("hello lnj2");
});
</script>
</head>
<body>
<img src="https://img.alicdn.com/tfs/TB1P_MofwmTBuNjy1XbXXaMrVXa-190-140.gif" alt="">
</body>
</html>
二、jQuery入口函数的4种写法
// 第1种写法： $(document).ready(function () { alert("hello jquery1") }) // 第2种写法： jQuery(document).ready(function () { alert("hello jquery2") }) // 第3种写法：（推荐） $(function () { alert("hello jquery3") }) // 第4种写法： jQuery(function () { alert("hello jquery4") })
三、jQuery的冲突问题
问题描述：jQuery使用 $ 符号来作为选择器，如果其他的框架也通用使用 $ 符号，两者产生冲突，后面引入的框架会覆盖掉前面的
<script src="js/jquery-1.12.4.js"></script>
<script src="js/test.js"></script> //自定义的一个框架也使用了 $
<script>
// 1.释放$的使用权
// 注意点: 释放操作必须在编写其它jQuery代码之前编写
// 释放之后就不能再使用$,改为使用jQuery
jQuery.noConflict();
jQuery(function(){
alert('hello world')
})
// 2.自定义一个访问符号
var nj = jQuery.noConflict();
nj(function () {
alert("hello lnj");
});
</script>