jQuery详细介绍
2017-07-13 本文已影响0人
常威爆打来福
一.$ 符号
1 将“$”定义为变量，运行如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery入口函数与js的不同</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
var $="我是$";
$("#bt").click(function () {
//alert("我是$");
})
})
</script>
</head>
<body>
<input type="button" value="按钮" id="bt">
</body>
</html>
运行结果：
点击按钮后毫无反应
2 将代码修改如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery入口函数与js的不同</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
//var $="我是$";
$("#bt").click(function () {
alert("我是$");
})
})
</script>
</head>
<body>
<input type="button" value="按钮" id="bt">
</body>
</html>
运行结果：
弹出窗口
由上操作对比可知，$符号在jQuery中只是一个定义好的操作符，是不需要我们自己去定义的。
二 jQuery入口函数的模拟实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery入口函数与js的不同</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
var iQurey= function (dom) {
var obj={
ready:function (func) {
// 判断一下 docuemnt.onload 有没有被赋值（或者说有没有这个事件）
// 1.有：接收一个旧的函数，然后呢，我先去调用新的函数，接着再调用旧的函数
// 2.没有：直接赋值个onload事件
if(typeof dom.onload ==="function" ){
var oldFunc=dom.onload;
dom.onload=function () {
//调用新的函数
func();
//调用旧的函数
oldFunc();
}
}else{
dom.onload=func;
}
}
};
return obj;
};
iQurey(window).ready(function () {
alert("第一调用");
});
iQurey(window).ready(function () {
alert("第二调用");
});
var obj = {
ready: function () {
}
};
var obj1 = new Object();
obj1.ready = function () {
};
</script>
</head>
<body>
<input type="button" value="按钮" id="bt">
</body>
</html>
运行结果：
第一次弹出
第二次弹出
三 js入口函数跟jQuery入口函数的区别
1 js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完之后，才回去执行
2 jQuery的入口函数是在html所有标签都加载完之后，就回去执行
四 js创建对象的三种方式
1 var obj = { }
2 var obj1 = new Object();
3 var obj2 = Object.create();
//方法一
var obj ={
ready: function () {
}
};
//方法二
var obj1 = new Object();
obj1.ready() = function () {
};
方法一和二的区别：
推荐使用方法一。第二种方法存在效率问题，因为要new对象，会涉及原型查找问题。
