javascript的封装jQuery
注意:(我们上课用的jquery库的版本是1.8.3,不同版本的jquery库会对其实的函数或者属性做不出不同程度的修改或者添加、删除,所以在之后的具体的操作中,最终还是要以当前版本的测试结果为准,但是它们的操作方式和思路几乎都是一样的,同时注意浏览器的兼容性问题)
1.发展历程:javascript到jQuery：
javascript
是Netscape公司开发的一种脚本语言，
其出现使得网页和用户之间实现了一种
实时的，动态的和交互的关系使网页包含更多活跃的元素。
弊端：
1.复杂的文档对象模型（DOM）
2.不一致的浏览器实现
3.缺乏便捷的开发调试工具
AJAX （Asynchronous javascript and xml,异步的javascript和XML）
javascript库的作用：为了简化javascript的开发，
javascript库封装了很多预定义的对象和使用函数。
JQuery就是js的一个库(其实就是别人给我们封装好的js文件,简化我们平时的js中的代码操作)
JQuery 简洁的语法和跨平台的兼容性，极大的简化了javascript开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发AJAX(javascript + xml + json )，其理念：write less,do more
优势：
1，轻量级
2，强大的选择器
3，出色的DOM操作的封装
4，可靠的事件处理机制
5，完善的Ajax,$.ajax()无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用
6，不污染顶级变量，只建立一个名为jQuery对象，其所有函数方法都在这个对象之下
7，出色的浏览器兼容性
8，链式操作方式，发生在同一个jquery对象上的一组动作，可以直接连写而不用重复获取对象
9，基于jquery可以开发出各种各样优秀的jquery插件
注意:我们自己可以使用jquery提供给我们的各种函数对页面中的dom元素来进行操作从而完成我们想要的功能和效果。同时我们也可以针对页面中的某一种功能效果,使用jquery来开发基于jquery的插件,那么这个插件将来就可以在不同的项目中使用从而实现和我们之前一样的效果(就像我们使用java开发框架在不同的项目中使用一样的道理).
jquery库类型
完整版本： 主要用于测试，学习和开发
mini版本： 主要用于产品和项目
jquery官网下载地址:http://jquery.com/download/
jquery库有俩种版本
jquery 1.x 兼容所有IE浏览器的
jquery 2.x 不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
jquery 3.x 不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本;最新版本：3.2.1（2017年3月20日）
2.jQuery的使用
jQuery不需要安装，想要在某个页面上使用jQuery时，只需要在相关的html中引入jQuery的库文件即可。
注意:jQuery库中只提供了一个【名字为jQuery】的对象,但是这个对象有很多方法以及属性,同时还提供了方法可以把我们平时使用的普通页面元素【转换】为jQuery类型的对象来使用,这样我们就可以在拿到页面元素后转成jQuery对象并使用jQuery使用的方法和属性了。
例如:
var d1 = document.getElementById("my_div");
//出错,因为d1是dom模型中的对象而不是jQuery的对象,而hide是jQuery中的函数
d1.hide();
//注:jQuery对象一般用$开头的变量接收,当然也使用一般的变量名字
var $d2 = jQuery("#my_div");
//正确的把div隐藏了,因为$d2是一个jQuery的对象,所以调用jQuery提供的方法
$d2.hide();
强调:jQuery库只提供了一个叫jQuery的对象,但是我们可以使用jQuery库中提供的方法把我们的普通dom对象转换为jQuery的对象,从而使用其提供的方法.
$是jQuery的一个简写形式
$("#my_div")等价于jQuery("#my_div")
之后的代码中我们一般都会使用jQuery的简写
如何判断一个对象是不是jQuery的对象?
var $d2 = jQuery("#my_div");
alert($d2 instanceof jQuery);//返回true则是jQuery对象
alert(typeof($d2));//Object 这个判断不出来
window对象的onload事件:当某个元素加载完毕的时候触发
例如:
.....
.....
.....
注:这里表示当网页中所有的内容加载完毕后（包含图片）才能执行代码中的匿名函数
jQuery中的有一个函数可以代替这种情况:
例如:
.....
.....
.....
注:网页中所有DOM结构加载完毕后就执行ready方法中定义的匿名函数，可能dom元素关联的东西并没有加载完(图片等资源),效果和onload事件一样,但是执行效率比onload高,因为不需要等待页面中图片等资源的加载完毕.
jQuery的这个函数有一个简写的形式:
$(function(){
});
很像我们之前java中的在一个方法中写的匿名内部类的对象
a.test(new Student(){
....
});
3.DOM对象与jQuery对象：
1.DOM(Document Object Model 文档对象模型) 每一份DOM都可以表示成一颗树。
在html中，
1.发展历程:javascript到jQuery：
javascript
是Netscape公司开发的一种脚本语言，
其出现使得网页和用户之间实现了一种
实时的，动态的和交互的关系使网页包含更多活跃的元素。
弊端：
1.复杂的文档对象模型（DOM）
2.不一致的浏览器实现
3.缺乏便捷的开发调试工具
AJAX （Asynchronous javascript and xml,异步的javascript和XML）
javascript库的作用：为了简化javascript的开发，
javascript库封装了很多预定义的对象和使用函数。
JQuery就是js的一个库(其实就是别人给我们封装好的js文件,简化我们平时的js中的代码操作)
JQuery 简洁的语法和跨平台的兼容性，极大的简化了javascript开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发AJAX(javascript + xml + json )，其理念：write less,do more
优势：
1，轻量级
2，强大的选择器
3，出色的DOM操作的封装
4，可靠的事件处理机制
5，完善的Ajax,$.ajax()无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用
6，不污染顶级变量，只建立一个名为jQuery对象，其所有函数方法都在这个对象之下
7，出色的浏览器兼容性
8，链式操作方式，发生在同一个jquery对象上的一组动作，可以直接连写而不用重复获取对象
9，基于jquery可以开发出各种各样优秀的jquery插件
注意:我们自己可以使用jquery提供给我们的各种函数对页面中的dom元素来进行操作从而完成我们想要的功能和效果。同时我们也可以针对页面中的某一种功能效果,使用jquery来开发基于jquery的插件,那么这个插件将来就可以在不同的项目中使用从而实现和我们之前一样的效果(就像我们使用java开发框架在不同的项目中使用一样的道理).
jquery库类型
完整版本： 主要用于测试，学习和开发
mini版本： 主要用于产品和项目
jquery官网下载地址:http://jquery.com/download/
jquery库有俩种版本
jquery 1.x 兼容所有IE浏览器的
jquery 2.x 不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
jquery 3.x 不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本;最新版本：3.2.1（2017年3月20日）
2.jQuery的使用
jQuery不需要安装，想要在某个页面上使用jQuery时，只需要在相关的html中引入jQuery的库文件即可。
注意:jQuery库中只提供了一个【名字为jQuery】的对象,但是这个对象有很多方法以及属性,同时还提供了方法可以把我们平时使用的普通页面元素【转换】为jQuery类型的对象来使用,这样我们就可以在拿到页面元素后转成jQuery对象并使用jQuery使用的方法和属性了。
例如:
var d1 = document.getElementById("my_div");
//出错,因为d1是dom模型中的对象而不是jQuery的对象,而hide是jQuery中的函数
d1.hide();
//注:jQuery对象一般用$开头的变量接收,当然也使用一般的变量名字
var $d2 = jQuery("#my_div");
//正确的把div隐藏了,因为$d2是一个jQuery的对象,所以调用jQuery提供的方法
$d2.hide();
强调:jQuery库只提供了一个叫jQuery的对象,但是我们可以使用jQuery库中提供的方法把我们的普通dom对象转换为jQuery的对象,从而使用其提供的方法.
$是jQuery的一个简写形式
$("#my_div")等价于jQuery("#my_div")
之后的代码中我们一般都会使用jQuery的简写
如何判断一个对象是不是jQuery的对象?
var $d2 = jQuery("#my_div");
alert($d2 instanceof jQuery);//返回true则是jQuery对象
alert(typeof($d2));//Object 这个判断不出来
window对象的onload事件:当某个元素加载完毕的时候触发
例如:
.....
.....
.....
注:这里表示当网页中所有的内容加载完毕后（包含图片）才能执行代码中的匿名函数
jQuery中的有一个函数可以代替这种情况:
例如:
.....
.....
.....
注:网页中所有DOM结构加载完毕后就执行ready方法中定义的匿名函数，可能dom元素关联的东西并没有加载完(图片等资源),效果和onload事件一样,但是执行效率比onload高,因为不需要等待页面中图片等资源的加载完毕.
jQuery的这个函数有一个简写的形式:
$(function(){
});
很像我们之前java中的在一个方法中写的匿名内部类的对象
a.test(new Student(){
....
});
3.DOM对象与jQuery对象：
1.DOM(Document Object Model 文档对象模型) 每一份DOM都可以表示成一颗树。
在html中，