1.jQuery入门

一.what

JS库,JS框架

 

框架: 半成品.一半已经完成了,一半没有完成.就像考试中的填空题、选择题.

 

JS框架:相当于一些现成的函数和对象的集合,直接拿来使用就可以了

 

常见的JS库还有Prototype、Ext JS、Dojo、MooTools、YUI等

 

 

   口号:Write less,do more.

 

二．How

下载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对象

 

演示代码

//1.dom对象---->jQuery对象

var div1 = document.getElementById("div1");

var $div1 = $(div1);

alert($div1.html());// $div1.width()

 

jQuery对象实质就是map、关联数组

 

Dom对象是存到jQuery对象的第一个元素中

 

使用console.dir打印jQuery对象演示

 

使用数组模拟jQuery对象

 

2.把jQuery对象转化为DOM对象

//2.把jQquery对象--->dom对象

var $div = $("#div1");

//第一种方式

//var div = $div[0];//div是DOM对象

//第二种方式

var div = $div.get(0);

alert(div.innerHTML);

 

 

变量定义的规范:jQuery对象 前面要加$,dom对象不用加$

 

 

使用数组模拟jQuery对象

var div1= document.getElementById("div1");

var arr= [div1,2,3];

Array.prototype.aaa = "111";

Array.prototype.get= function(i){

return this[i];

}

var haha= arr.get(0);

alert(haha)

 

 

四.$(document).ready()和window.onload区别

(1)window.onload只能绑定一个事件处理函数，如果绑定多个

只执行最后一个，而$(document).ready()可以绑定多个函数

 

(2)

window.onload必须等待网页中所有的内容加载完毕后(包括图片)才能执行

   

$(document).ready() 网页中所有DOM结构绘制完毕后就执行,可能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(){

});

 

 

五.绑定事件处理函数

//绑定事件处理函数

$("#btn1").click(function(){

alert('你好');

});

 

jquery对象.click(事件处理函数);

 

 

六.修改样式

<a id="hello">click me</a>

 

DOM方式

document.getElementById("hello").style.color = "red";//得值得时候无法得到内嵌样式的值

 

jQuery方式

 

$("#hello").css("color","#ff0000");//同一个方法名字既表示读操作，又表示写操作

 

 

$("#hello").css("color","#ff0000");//写操作

$("#hello").css("color");//读操作