一、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 中所定义的方法;

 

posted on 2020-03-02 09:51  格物致知_Tony  阅读(218)  评论(0编辑  收藏  举报