一、JQuery基本介绍
1. JavaScript库
JavaScript库 ：
即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单的理解 ：
就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
JQuery出来就是为了快速方便操作DOM，里面基本都是封装好的函数
#标题
1.1常见的JavaScript库
- Prototype : 是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
- Do jo : 提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
- YUI : 是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
- Ext JS : 原本是对YUI的一个扩展，主要用于创建前端用户界面。
- Moo Tools : 是一套轻量、简洁、模拟化和面向对象的JS框架。
- JQuery : 同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它
这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，这篇主要讲解的是 jQuery。
官方地址：http://jquery.com/
1.2 为什么要使用JQuery
为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
1.3 那些情况下使用
- 中大型网站开发
- 是一些前端框架的基础，比如EasyUI，Bootstrap
1.4 怎么用 ？
工具 ： HBuilderX
使用JQuery步骤 ：
- 下载JQuery库
点击 JQuery文件下载
2 . 引入到HBuiderX项目JS文件中
将下载的Js文件直接复制到到相应的项目文件夹中
3 . 使用 ：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>课堂案例</title> <!-- 载入函数 --> <script src="js/jquery-3.3.1.js"></script> <script> // $()构造了一个jquery对象。所以"$()"可以叫做jquery的构造函数 //$(function(){}) $("选择器") $("标签") $(DOM对象) //ID选择器：#ID ——单个元素 $(function() { $("#odiv").css("background","skyblue") }); </script> </head> <body> <div id="odiv">姬霓太美</div> </body> </html>
运行结果
2 . JQuery文件结构
2.1 JQuery版本
jQuery版本有很多，分为1.X 2.X 3.X
- X版本 ：能够兼容IE6, 7, 8 浏览器（不再更新版本）
- x 版本：不兼容 IE6, 7, 8 浏览器（不再更新版本）
- x版本：不兼容 IE6, 7, 8，更加的精简（在国内不流行，因为国内使用 jQuery 的主要目的就是兼容 IE6, 7, 8）
1.x 和 2.x 版本 jquery 都不再更新版本了，现在只更新3.x版本
2.2 JQuery闭包结构
打开jQuery库查看后有 一个基本架构如下
( function( global, factory ) {
} )();
- 用一个函数域包起来，就是所谓的沙箱
- 在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局
- 把当前沙箱需要的外部变量通过函数参数引入进来
- 只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数。
jQuery 具体的实现，都被包含在了一个立即执行函数构造的闭包里面，为了不污染全局作用域，只在后面暴露 $ 和 jQuery 这 2 个变量给外界。
2.3 自执行函数
(function(){ window.jQuery = window.$ = jQuery }());
jQuery文件中可以看出是一个自执行函数
- 自执行函数也叫立执行函数
- 是将函数的声明和调用合并在一起
2.3.1 核心函数
$ 和 $() 引入JQuery库后,直接使用调用即可
- 当函数调用 ：$(xxx)
- 当对象调用 ：$.xxx()
2.3.2 JQquery的构造函数
- $( function ( ) { } )
- $( " 选择器 " )
- $( " 标签 " )
- $( DOM对象 )
具体使用如下目录
二 、 函数的使用
1. JQuery 函数的使用
1.1 作为一般函数调用 ：$( param )
- 参数为函数：当 DOM 加载完成后，执行此回调函数
- 参数为选择器字符：查找所有匹配的标签并将它们封装成
jQuery对象 - 参数为 DOM 对象：将 dom 对象封装成
jQuery对象 - 参数为 html 标签字符串（用得少）：创建标签对象并封装成
jQuery对象
1.2 作为对象使用 ：$.xxx()
- $.each () : 隐式遍历数组
var arr = [3, 7, 4]; $.each(arr, function (index, item) { console.log(index, item); //结果（index是下标 item返回的是值） 0 3 1 7 2 4 });
- $.trim () : 去除两端的空格
var text = " hello 靓仔 "; $.trim(text).length; // 返回 7
1.2.1JQuery对象的使用
即执行JQuery核心函数返回的对象
jQuery对象内部包含的是 dom 元素对象的伪数组（可能只有一个元素）jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作 dom
1.2.2属性和方法
- 基本行为：操作标签的基本方法
- 属性：操作内部标签的属性或值
- CSS：操作标签的样式
- 文档：对标签进行增删改操作
- 筛选：根据指定的规则过滤内部的标签
- 事件：处理事件监听相关
- 效果：实现一些动画效果
这里我们先学习jQuery对象的基本行为，其他的在文章目录有详细介绍
