jQuery概述及基本使用

一、jQuery概述

1、JavaScript库

(1)什么是js库？

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

简单理解，JavaScript库就是一个js文件，里面对原生js代码进行了封装，这样就可以快速高效使用这些封装好的功能了。

比如jQuery就是为了快速方便地操作DOM，里面基本都是函数(方法)的一个JavaScript库。

(2)常见的js库

• jQuery
• Prototype
• YUI
• Dojo
• Ext JS
• 移动端的zepto

2、jQuery概念

jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是"write Less, Do More"，把js中的DOM操作做了封装，可以快速查询使用里面的功能。里面封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。

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

3、jQuery优点

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

二、jQuery的基本使用

官网地址：jQuery

1、版本

• 1x：兼容IE 678等低版本浏览器，官网不再更新
• 2x：不兼容IE 678等低版本浏览器，官网不再更新
• 3x：不兼容IE 678等低版本浏览器，官网主要更新维护的版本

2、jQuery入口函数

原生js中如果想要等页面全部加载完毕再执行js代码，可以使用load事件或者DOMContentLoaded事件。

document.addEventListener('load', function() {
    ···
})

在jQuery中有两种方法可以替代：

	<script>
        // $('div').hide();
        // 1.等着页面DOM加载完毕再去执行js代码
        // (1)method1
        $(document).ready(function () {
            $('div').hide();
        })
        // (2)method2
        $(function () {
            $('div').hide();
        })
    </script>
	<div></div>

注意这里相当于是原生js中的DOMContentLoaded，不同于原生js中的load事件(等页面文档、外部js文件、css文件、图片加载完毕才执行内部代码)

3、jQuery的顶级对象$

$是jQuery的别称，在代码中可以使用jQuery替代$，但一般为了方便，通常直接使用$

4、jQuery对象 vs DOM对象

(1)区别

• 用原生js获取的对象就是DOM对象
• jQuery方法获取的元素就是jQuery对象，本质是利用$对DOM对象包装后产生的对象(以伪数组的形式存储)

注意：对象和方法一定要对应！

	// 1.DOM 对象
        var myDiv = document.querySelector('div');
        console.dir(myDiv);
        myDiv.style.display = 'none';
        // myDiv.hide(); 会报错，因为myDiv是一个DOM对象，不能使用jQuery中的hide方法
    // 2.jQuery 对象
        var div = $('div');
        console.dir(div);
        div.hide();
        // div.style.display = 'none'; 同样会报错，因为div是一个jQuery对象，不能使用原生js的属性和方法

(2)相互转换

因为原生js比jQuery更大，原生的一些属性和方法jQuery并没有进行封装，比如视频的play()方法；要是想使用这些方法和属性，则需要将jQuery对象转换为DOM对象。

• DOM对象转换为jQuery对象：$(DOM对象)

• jQuery对象转换为DOM对象：

$('div')[index]; //index是索引号
$('div').get(index);

	<video src="mov.mp4" muted></video>
    <script>
        var myVideo = document.querySelector('video');
        myVideo.play();
        // 1.DOM对象可以转换为jQuery对象
        $(myVideo);

        // 2.jQuery对象也可以转换为DOM对象
        $('video')[0].play();
        $('video').get(0).play();
    </script>

不要忘记引入jQuery的js文件哦~