jQuery入门
什么是jQuery ?
JS库，JS框架
框架：半成品。一半已经完成，一半未完成，就像填空题。
JS框架：相当于一些现成的函数和对象的集合，直接拿来用就好了。
常见的JS库还有：Prototype、Ext JS、Dojo、MooTools、YUI等等。
jQuery的口号：write less,do more.
怎么用？
下载jQuery 官方网站 http://jquery.com/
最新版v3.1.0
jquery-2.1.4.js(未压缩版)
jquery-2.1.4.min.js(压缩版)
未压缩版: 开发、学习、调试时用
压缩版: 项目正式运行的时候使用,可以减少带宽,提高项目的性能，
1.引入jquery-2.1.4.js
<script type="text/javascript" src="jquery-2.1.4.js"></script>
2.从下面的语句开始
//ready方法的作用是当页面中的DOM加载完后执行参数中的函数
$(document).ready(function(){
alert(“Hello World!”);
});
DOM对象和jQuery对象的转化
1.dom对象—–>jQuery对象
$(DOM对象)：是把dom对象转化成jQuery对象
演示：
var div1 = document.getElementById("div1");
var $div1 = $(div1);
console.dir($div1);
alert($div1.html());//div1.innerHTMLjQuery 对象实质是map、关联数组
DOM对象是存到jQuery对象的第一个元素中
使用console.dir打印jQuery对象，发现dom在jQuery的下标为0的位置。
使用数组模拟jQuery对象：
var div1 = document.getElementById("div1");
var $jQuery = {};
var arr = [div1,2,3];
Array.prototype.aaa = "111";
Array.prototype.get = function(i){
return this[i];
}
var haha = arr.get(0);2.把jQuery对象转化成dom对象
var $div = $("#div1"); //第一种方式
// var div = $div[0];
//第二种方式
// var div = $div.get(0);
// alert(div.innerHTML);
变量定义的规范:jQuery对象 前面要加$,dom对象不用加$$(document).ready()和window.onload()的区别
区别1：load只能绑定一个事件，如果绑定多个，只有最后一个起作用；ready可以绑定多个事件，都起作用。
区别2：onload需要等待所有对象（dom及其关联对象）全部加载完才执行，效率低；ready()只需等待所有的dom结构加载完就可以执行，效率高。
测试两种方法的加载时间：
第一种:
console.time(“test”);
window.onload = function(){
console.timeEnd("test");
alert('test');
}
console.time(“test”);
$(document).ready(function(){
console.timeEnd("test");
alert('test');
});
(3)简写
window.onload 无
$(document).ready(function(){
});
可以简写成
$().ready(function(){
});
也可以简写成
$(function(){
});
绑定事件函数
示例：给按钮绑定单击事件
js代码：
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
alert('你好');
});
});
</script>
html代码：
<input type="button" name="btn1" id="btn1" value="点我" />修改单一样式
示例：修改div块的背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// $("#div1").css("background-color","blue");//既读又写
//读
var $bgc = $("#div1").css("background-color");
alert($bgc);//rgb(255,255,0)
//写
// $("#div1").css("background-color","blue");
});
</script>
</head>
<body>
<div id="div1" style="width:200px;height:200px;background-color: yellow;">
我是div1
</div>
</body>
</html>
上一篇： 春节要宣布取消年终奖
下一篇： 揭开职场关键得会恭维
推荐阅读