【web前端 | jQuery】jQuery的基本概念

基本概念

1：JavaScript库：

library，是一个封装好的特定的集合（方法和函数）。

从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

简单理解：

就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

常见的JavaScript库：

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

2：jQuery

优点：

1. 轻量级。核心文件才几十kb，不会影响页面加载速度
2. 跨浏览器兼容。基本兼容了现在主流的浏览器
3. 优化了DOM的操作，事件处理，动画设计和AJAX交互
4. 加快了前端人员的开发速度
5. 链式编程、隐式迭代
6. 对事件、样式、动画支持，大大简化了DOM操作
7. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
8. 免费、开源

3：基本使用

3.1：jQuery的下载

jQuery官网

3.2：jQuery的使用

1. 直接引入jQuery下载的文件，jquery.main.js
2. 使用即可

3.3：jQuery的入口函数

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

方式一：

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

方式二：

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

3.4：jQuery的顶级对象 $

jQuery AKA $ ，相当于原生js中的window.

两个可以互换

3.5：jQuery对象和DOM对象

1. 用原生 JS 获取来的对象就是 DOM 对象
2. jQuery 方法获取的元素就是 jQuery 对象。
3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

【叨叨】只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

❤ 两者的相互转换

jQuery ——> DOM

//方法一
$('div') [index]       //index 是索引号 

//方法二
$('div') .get(index)    //index 是索引号

DOM ——> jQuery

//$(DOM对象)
$('div')