jQ1 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
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(事件处理函数);
六.修改样式
DOM方式
document.getElementById("hello").style.color = "red";//得值得时候无法得到内嵌样式的值
jQuery方式
$("#hello").css("color","#ff0000");//同一个方法名字既表示读操作，又表示写操作
$("#hello").css("color","#ff0000");//写操作
$("#hello").css("color");//读操作