# jQuery 概念

# JavaScript 库

仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库直接找就可以了

JavaScript 库:即 library，是一个封装好的特定的集合（方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 animate、hide、show，比如获取元素等。

简单理解 ∶ 就是一个 JS 文件，里面对我们原生 js 代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。心比如 jQuery，就是为了快速方便的操作 DOM，里面基本都是函数(方法）。

# 常见的 JavaScript 库

jQuery
Prototype
YUI
Dojo
Ext JS
移动端的 zepto

这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery

# jQuery 的概述

jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less ， Do More”，即倡导写更少的代码，做更多的事情。

j 就是 JavaScript ;Query 查询;意思就是查询 js，把 js 中的 DOM 操作做了封装，我们可以快速的查询使用里面的功能。

jQuery封装了JavaScript常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

学习 jQuery 本质 ∶ 就是学习调用这些函数(方法)。

jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

优点

轻量级。核心文件才几十 kb，不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持，大大简化了 DOM 操作
支持插件扩展开发。有着丰富的第三方的插件，例列如 ∶ 树形菜单、日期控件、轮播图等
免费、开源

# jQuery 下载

官方地址 (opens new window)

版本：

1x︰兼容 IE 678 等低版本浏览器，官网不再更新
2x:不兼容 E 678 等低版本浏览器，官网不再更新
3x︰不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本

各个版本的下载 (opens new window)

# jquery 的使用步骤

引入 jQuery 文件
使用

# jQuery 入口函数

等着页面 DOM 加载完毕再去执行 js 代码

$(document).ready(function () {
  $("div").hide();
});

$(function () {
  $("div").hide();
});

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
相当于原生 js 中的 DOMContentLoaded。
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css 文件、图片加载完毕才执行内部代码。

$(function(){
    ....//此处是页面DOM加载完成的入口函数
});
$(document).ready(function(){
    ...//此处是页面DOM加载完成的入口
});

# jQuery 的顶级对像 $

$是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使$
$是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成 Query 对象，就可以调用 jQuery 的方法。

<style>
    div {
        width: 500px;
        height: 500px;
        border: 1px solid blue;
    }
</style>

<body>
    <div></div>
    <script>
        // 1. $是jQuery的别称
        // $(function() {
        //     alert(3435345);
        // })
        jQuery(function() {
                jQuery('div').hide()
            })
            //2.$同时也是jQuery的顶级对象
    </script>
</body>

# jQuery 对象和 DOM 对象

用原生 js 获取来的对象就是 DOM 对象
用 jquery 方式获取的元素就是 jquery 对象
jQuery 对象本质是:利用$对 DOM 对象包装后产生的对象（伪数组形式存储)。

<body>
  <button>按下</button>
  <script>
    // 1. DOM 对象: 用原生js获取过来的对象就是DOM对象 var btn =
    document.querySelector('button'); //btn就是 DOM对象 // 2. jquery 对象：
    用jquery方法获取的对象就是jquery对象 本质通过$把DOM元素进行包装 $('button');
    //$('button')是jquery对象 $('span'); //$('span')是jquery对象
    console.dir(btn); console.dir($('button')) // 3. jquery
    对象只能使用jquery方法DOM对象只能使用原生JavaScript方法
  </script>
</body>

DOM 对象与 jQuery 对象之间是可以相互转换的。

因为原生 js 比 jQuery 更大，原生的一些属性和方法 jQuery 没有给我们封装.要想使用这些属性和方法需要把 jQuery 对象转换为 DOM 对象才能使用。

DOM 对象转换为 jQuery 对象︰$(DOM 对象)

$("div");

jQuery 对象转换为 DOM 对象（两种方式)

$('div')[index]  index是索引号

$('div').get(index)  index是索引号

<body>
  <audio src="./public/music/昨夜书.mp3"></audio>
  <script>
    // 1. DOM对象直接转换为 jquery对象 $('audio'); // 2. 使用原生js 获取DOM对象
    var audio = document.querySelector('audio'); audio.play() console.dir(audio)
    // jquery 没有play对象将jquery对象转换为DOM对象 $('audio')[0].play()
    $('audio').get(0).play() console.dir($('audio'))
  </script>
</body>

← 目录与目标 jquery常用API →