JQuery 代码少而多实现的JS类库 就是这么6 |
一、关于JQuery
（一）、什么是JQuery ?
《1》jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。
1、使用jquery一定要引入jquery库吗？
要使用JQury首先必须导入jquery类库
2、jquery中的$到底是什么？
$是JQuery类库的核心函数 $()即调用这个核心函数
3、怎么为按钮添加点击响应函数的？
1）查询元素，2）绑定事件《2》JQuery好处！！！
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷
例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
（二）JQuery使用步骤：
1）第一步，先使用script标签引入Jquery源文件。
//js放在 WebContent/script/jquery-1.7.2.js
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>2）第二步，在文档加载完成之后，给按钮动态绑定事件。
二、用JQuery和js的页面加载完成事件来分析入门JQuery
<1>、JQuery 实现 与JavaScript 比较它有什么强大的地方？
<1>简单的页面加载完成函数 体会JQuery 与js
example：使用JQuery与js进行页面加载事件（onload）的比较
$(function(){}); //JQuery实现
和
window.onload = function(){} //js实现
的区别？<2>它们的三个区别如下
他们分别是在什么时候触发？
Jquery的页面加载完成之后。是指在整个html页面的标签被解析然后创建好dom对象之后。
也就是大多数人常用说的。整个dom树被创建好之后。
window.onload的页面加载完成之后。是指整个html页面中所有的元素都被加载完成。他们触发的顺序？
先执行jquery的页面加载完成
再执行window.onload的方法他们执行的次数？
window.onload只会执行最后一次的绑定。
Jquery的页面加载完成之后。会根据注册的顺序依次全部执行。代码测试：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 他们分别是在什么时候触发？
//一、window.onload是在页面中所有元素加载完成之后
window.onload = function() {
alert("这是window.onload事件1号");
}
window.onload = function() {
alert("这是window.onload事件2号");
}
window.onload = function() {
alert("这是window.onload事件3号");
}
// 这个window.onload事件只会执行一次执行3号事件。
// 二、 $(function(){
// alert("jquery页面加载完成之后！");
// });
// 在整个页面被浏览器加载解析完成。整个Dom树创建完成之后
$(document).ready(function(){
alert("jquery页面加载完成之后！11111");
});
$(document).ready(function(){
alert("jquery页面加载完成之后！22222");
});
$(document).ready(function(){
alert("jquery页面加载完成之后！33333");
});
$(document).ready(function(){
alert("jquery页面加载完成之后！444444");
});
// Jquery的页面加载完成之后。每注册一次。jquery都会缓冲一个function到集合中。当页面加载完成之后。它会
// 按照这个事件注册的顺序依次执行。
// 先执行jquery的页面加载完成之后，再执行window.onload的加载完成
</script>
</head>
<body>
<button>我是按钮</button>
<iframe src="http://www.baidu.com"></iframe>
<img src="http://www.baidu.com/1.jpg" alt="图片找不到" />
</body>
</html>分析如下：
上述为js和JQuery的比较和JQueryd $ 核心函数使用
依次弹出为：
jquery页面加载完成之后！11111
jquery页面加载完成之后！22222
jquery页面加载完成之后！33333
jquery页面加载完成之后！44444
这是window.onload事件3号其中js实现的window.onload = function(){}事件1被事件2覆盖，事件2被事件3覆盖 最后执行事件3
而JQuery实现的$(document).ready(function(){}每次都执行
三、Jquery 核心函数 $()
<1>是jquery的核心函数，能完成jquery的很多功能。()就是调用$这个函数
<2>
1、传入参数为 [ 函数 ] 时：$( function(){} )
文档加载完成后执行此方法等价于window.onload = function() {}
2、传入参数为 [ HTML 字符串 ] 时： $(“12“);
根据字符串创建元素的dom节点对象 <span>
3、传入参数为 [ 选择器字符串 ] 时：$(“#id”)
根据选择器查找出元素节点对象
4、传入参数为 [ DOM对象 ] 时： $(this)
将dom对象包装为jquery对象返回
四、JQuery对象和dom对象比较分析
1、什么是jquery对象，什么是dom对象
（一）Dom对象：
1.通过getElementById()查询出来的标签对象是Dom对象
2.通过getElementsByName()查询出来的标签对象是Dom对象
3.通过getElementsByTagName()查询出来的标签对象是Dom对象
4.通过createElement() 方法创建的对象，是Dom对象
（二）JQuery对象
5.通过JQuery提供的API创建的对象，是JQuery对象
$(“ <span>12</span> ”)
6.通过JQuery核心函数包装的Dom对象，也是JQuery对象
var dom对象；
var $jquery对象 = $(dom对象)
7.通过JQuery提供的API查询到的对象，是JQuery对象
$(“#id属性值”)
$(“标签名”)
两者特征：
JQuery对象：其实就是 （Dom对象数组和一系列JQuery方法）
Dom对象，不能调用JQuery对象的方法和属性。
JQuery对象、也不能调用Dom对象的属性和方法。2、dom与jquery对象之间的转换
1.将dom对象转为JQuery对象
var $Jquery对象 = $(dom对象);
2、jquery对象转为dom对象
var dom对象 = $Jquery[0];
