<jQuery>总结：知识点
2018-05-26 本文已影响17人
玉圣
一、jQuery基础和原理：
1、jQuery的本质是一个闭包：
(function( window, undefined ) {
//.....
})(window);
闭包：一种立即执行的函数
//方式一
function test1() {
var x = 10;
console.log(x); //结果是 10
}
test1();
//------------------------------
//方式二
(function test1() {
var x = 10;
console.log(x); //结果是 10
})();
说明：
方式一和方式二的效果是一样的，其中就是将test1(); 中的函数名test1替换为上面定义的函数，两者是等同的
2、jQuery为什么要使用闭包来实现：
1.1、原因：
为了避免多个框架的冲突
1.2、解释：
导入jQuery的框架：<script src="js/jquery-1.12.4.js"></script> 就相当于将js代码拷贝到当前页面中，因此在框架中定义的变量，有可能会和其他框架定义的变量相同，而产生被覆盖的可能。而由于在闭包中定义变量，变量的作用域就只是在当前闭包函数中，就可以解决别其他框架覆盖的可能。
function test1() {
//自身框架定义的变量
var num = 1;
//其他框架定义的变量，会覆盖上面定义的num
var num = 2;
console.log(num); //结果是 2
}
test1();
3、jQuery如何让外界访问内部定义的局部变量：
在函数内部，将变量赋值给window存放，这样就可以通过window拿到函数内部的变量使用了
1.1、例如：
window.xxx = xxx;
1.2、jQuery内部做法：
(function( window, undefined ) {
var jQuery = function () {
return new jQuery.fn.init();
};
window.jQuery = window.$ = jQuery;
})(window);
4、jQuery为什么要给自己传递一个window参数（在最后的括号中的window）：
1.1、为了方便后期压缩代码
压缩代码是为了减少传输量，加载更快
在压缩版本中，其中的所有参数都会被改成简写变量，如window就会变为e，类似如下样式
(function(e, undefined) {
var jQuery = function () {
return new jQuery.fn.init();
};
e.jQuery = e.$ = jQuery;
})(window);
这时，如果不传入window参数，那其中的e，并不知道是什么含义，而传入一个window参数，就可以明确其中的e就是传入的window
1.2、为了提升查找的效率
如果不传入window参数，在作用域中使用window的时候，就需要到外层作用域中去查找，没有找到的话，就会接着到再上一层查找，直到在作用域链中找到为止。
因此，为了查找效率，直接使用传入的参数，而无需到外层作用域去查找。
var param = 1;
function p1() {
var param = 10; //注释此行，打印上一层的param，结果为10
function p2() {
var param = 20; //注释此行，打印上一层的param，结果为10
function p3() {
var param = 30; //注释此行，打印上一层的param，结果为20
console.log(param);
}
}
}
5、jQuery为什么要给自己接受一个undefined参数：
1.1、为了方便后期压缩代码
1.2、在IE9一下的浏览器中，undefined可以被修改，为了保证内部使用的undefined不被修改，所以需要接受接收一个正确的undefined
undefined = 998;
console.log(undefined); //结果为undefined，IE9以下可能为998
6、jQuery的原型对象处理
(function( window, undefined ) {
var jQuery = function () {
//等价于new jQuery.prototype.init();
return new jQuery.fn.init();
};
//......
//jQuery.fn中的fn就是prototype
jQuery.fn = jQuery.prototype;
//......
jQuery.prototype = {
constructor: jQuery
};
/*
init的原型对象指向了jQuery的原型对象，所以就可以不用
手动在调用init方法了，直接在创建jQuery的对象时，就同时给init赋值了。
*/
jQuery.prototype.init.prototype = jQuery.prototype;
//......
window.jQuery = window.$ = jQuery;
})(window);
二、函数：
1、holdReady(b)方法：
- 作用：暂停或开始执行ready方法
示例：
<button id="btn">点我啊</button>
<script>
$.holdReady(true);
$(document).ready(function () {
alert("helow jQuery！")
});
$("#btn")[0].onclick = function () {
$.holdReady(false);
};
</script>
三、事件：
1、jQuery阻止事件冒泡和默认行为的方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("#father").click(function () {
alert("father");
});
//阻止事件冒泡 方式一：
$("#btn1").click(function () {
alert("click");
return false;
});
//阻止事件冒泡 方式二：
$("#btn1").click(function (event) {
alert("click");
event.stopPropagation();
});
//阻止事件默认行为 方式一：
$("#a1").click(function () {
alert("click");
return false;
});
//阻止事件默认行为 方式二：
$("#a1").click(function (event) {
alert("click");
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="father" style="width: 100px; height: 100px; background-color: red;">
<button id="btn1">点我啊</button>
</div>
<a id="a1" href="https://www.baidu.com/">百度一下</a>
</body>
2、jQuery事件自动触发：
1.1、使用方式：
”通过使用trigger(event) 和 triggerHandler(event); 可以自动触发事件
$("#btn1").click(function () {
alert("click");
});
//方式一：
$("#a1").trigger("click");
//方式二：
$("#a1").triggerHandler("click");
1.2、区别：
- trigger 如果利用trigger自动触发事件，会触发事件冒泡和默认行为
- triggerHandler 如果利用triggerHandler会自动触发事件，不会触发事件冒泡和默认行为
1.3、特殊情况：
对于 <a> 标签，如果使用trigger，则不会触发默认行为（仅为默认行为，事件冒泡会不影响） - 需求：
如果需要让a标签自动触发默认行为，则可以使用如下方式：
即在a标签中包裹一层span标签，将自动触发的事件加在span上即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("#aFather").click(function () {
alert("aFather");
});
$("#span").click(function () {
alert("click");
});
$("#span").trigger("click");
});
</script>
</head>
<body>
<div id="aFather" style="width: 100px; height: 100px; background-color: blue;">
<a id="a1" href="https://www.baidu.com/"><span id="span">百度一下</span></a>
</div>
</body>
</html>
