JQuery 之从 $（核心函数）加载事件入门

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

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的页面加载完成之后。会根据注册的顺序依次全部执行。

代码测试：

我是按钮

分析如下：

上述为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节点对象

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对象
$(“ 12 ”)

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];