一、jQuery 介绍
1、jQuery是什么
为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了,JavaScript库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的页面, 并且兼容各大浏览器。
jQuery,顾名思义,就是 JavaScript和查询(Query),它就是辅助 JavaScript 开发的 js 类库。
2、jQuery 核心思想
它的核心思想是 write less,do more(写得更少,做得更多), 所以它实现了很多浏览器的兼容问题。
3、jQuery 好处
jQuery 是继 prototype 之后又一个优秀的 JavaScript 框架,优势如下:
① 轻量级(压缩后只有几十K);
② 强大的选择器;
③ 出色的 DOM 操作的封装;
④ 可靠的事件处理机制;
⑤ 完善的 Ajax;
⑥ 出色的浏览器兼容性;
⑦ 隐式迭代,对集合对象做相同操作时不需要逐个进行遍历,jQuery 自动进行遍历;
⑧ 可扩展插件;
二、使用 jQuery
1、将 jQuery的库文件加入应用
去 jQuery官网下载对应的 jQuery库,使用 <script> 标签引入到文档即可。
注意:
production 版本是精简和压缩后的,为实际开发网站时使用,减小文件大小;
development 版本是原生 js 库,可以用于自己查看 jQuery 源代码进行学习。
2、案例
Demo:
1 <!-- 导入jQuery库-->
2 <script type="text/javascript" src="script/jquery-1.10.3.js"/>
3 <script type="text/javascript">
4 //调用jQuery库定义的函数
5 $(function(){
6 $("button").click(function(){
7 alert("Hello");
8 });
9 });
10 </script>
11
12 <button>ClickMe!</button> //页面上面的按钮
3、源码初分析
源码:
1 (function( window, undefined ) { //16行
2
3 var jQuery = (function() { //22行
4
5 var jQuery = function( selector, context ) {
6 // The jQuery object is actually just the init constructor 'enhanced'
7 return new jQuery.fn.init( selector, context, rootjQuery );
8 };
9
10 jQuery.fn = jQuery.prototype = { //97行
11 constructor: jQuery,
12 init: function( selector, context, rootjQuery ) {
13 //...
14 } //207行
15
16 }; //319行
17
18 //...
19 return jQuery; //981行
20
21 })(); //983行
22
23 // Expose jQuery to the global object
24 window.jQuery = window.$ = jQuery; //9384行
25
26 })( window ); //9404行
说明:
1、自执行函数;
2、给 window 添加了两个等同的函数:jQuery()/$();
3、执行$(),返回的是一个 jQuery 库包装的对象,一般称之为 jQuery 对象;
三、核心函数
jQuery 库中为 window 对象定义了一个 $函数(方法) jQuery()
$()函数 会根据参数数据类型的不同做不同的工作,返回一个 jQuery 封装的伪数组的对象
1、传入参数为 [函数] — $(callback)
① 传入一个 function 作为参数,作为回调函数;
② 在 DOM 文档载入完成后,回调函数自动执行;
③ 这个函数的作用如同 $(document).ready(callback) 一样;
④ 相当于 window.onload,但还是有区别:
2、传入参数为 [HTML字符串] — $(htmlString)
① 接收一个标签字符串参数;
② 创建对应的标签对象,并包装成 jQuery 对象,如: $("<div><p>Hello</p></div>")
3、传入参数为 [选择器字符串] — $(selector)
① 接收一个 CSS 选择器格式的字符串参数;
② 根据此字符串在 document 中去匹配一组元素,并封装成 jQuery 对象返回;
如:
$("#id属性值"); id选择器,根据id查询标签对象
$("标签名"); 标签名选择器,根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器, 可以根据 class 属性查询标签对象
4、传入参数为 [DOM对象] — $(domEle)
① 接收一个 DOM 对象类型的参数;
② 返回包含这个 dom 对象的 jQuery 对象;(注意:如果声明一个变量指向 jQuery 对象,那么这个变量习惯要以$开头,这是jQuery对象的命名规范)
③ jQuery 对象只能调用 jQuery 封装的方法;
④ DOM 对象只能调用 DOM 中所定义的方法;