jQuery — jQuery介绍与jQuery核心函数

一、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：

<!-- 导入jQuery库-->
<script type="text/javascript" src="script/jquery-1.10.3.js"/>
<script type="text/javascript">
    //调用jQuery库定义的函数
    $(function(){
        $("button").click(function(){
            alert("Hello");
        });
    });
</script>

<button>ClickMe!</button>  //页面上面的按钮

　　3、源码初分析

　　　　源码：

(function( window, undefined ) {    //16行
    
    var jQuery = (function() {    //22行
    
        var jQuery = function( selector, context ) {
            // The jQuery object is actually just the init constructor 'enhanced'
            return new jQuery.fn.init( selector, context, rootjQuery );
        };
        
        jQuery.fn = jQuery.prototype = {    //97行
            constructor: jQuery,
            init: function( selector, context, rootjQuery ) {
                //...
            }    //207行
            
        };    //319行
    
        //...
        return jQuery;    //981行

    })();    //983行
    
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;    //9384行
    
})( 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 中所定义的方法；