一、JQuery 介绍

JQuery 是快速、简洁的JavaScript库，也就是写好的JS文件。

1、JavaScript 库

JavaScript 库：是一个封装好的集合（方法和函数）。里面都是写好的函数。

• Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
• Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
• YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
• Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。
• Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。
• jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。
• 移动端的zepto

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

这些基本的我们跳过进入正题

二、jQuery基本使用

1、jQuery版本

jQuery版本有很多，有1.0~3.0以上等版本

• 1.0的版本能兼容IE6、7、8浏览器
• 2.0的版不兼容IE6、7、8浏览器
• 3.0的版不兼容IE6、7、8，更加精简的

2、jQuery下载

官网：https://jquery.com/

• production （压缩过的版本，体积小，上线用）——生产版（压缩版）
• develepment（未压缩版本，开发时使用，适合查找）——开发版（测试版）

3、使用jQuery

• 如果是使用软件的，把js文件c到js包里，再使用script标签中scr属性导入就行。

  4、Jquery 闭包结构

  (function( global,factory){
       })();
  

• 用一个函数域包起来，就是所谓的沙箱

• 在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局
• 把当前沙箱需要的外部变量通过函数参数引入进来
• 只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数。

jQuery 具体的实现，都被包含在了一个立即执行函数构造的闭包里面，为了不污染全局作用域，只在后面暴露 $ 和 jQuery 这 2 个变量给外界。

5、jQuery的两种用法

// jQuery核心代码
(function(window){
   
    var jQuery = function(){
   
        return new jQuery.fn.init();
    }
    window.$ = window.jQuery = jQuery
})(window)

jQuery引用库后：可以直接使用

• 当函数用：$()
• 当对象用：$.xxx()

  1)jQuery 函数的使用

  作为一般函数调用：$(param)

1. 参数为函数：当 DOM 加载完成后，执行此回调函数
2. 参数为选择器字符：查找所有匹配的标签并将它们封装成jQuery对象
3. 参数为 DOM 对象：将 dom 对象封装成jQuery对象
4. 参数为 html 标签字符串（用得少）：创建标签对象并封装成jQuery对象

• $.each()：隐式遍历数组
• $.trim()：去除两端的空格

  2) jQuery 对象的使用

  执行jQuery核心函数返回的对象

jQuery对象内部包含的是 dom 元素对象的伪数组（可能只有一个元素）

jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作 dom

属性和方法

• 基本行为：操作标签的基本方法

• 属性：操作内部标签的属性或值

• CSS：操作标签的样式

• 文档：对标签进行增删改操作

• 筛选：根据指定的规则过滤内部的标签

• 事件：处理事件监听相关

• 效果：实现一些动画效果

  6、入口函数

  一般代码写在页面底部，等元素加载完，才能执行 jQuery 代码，或者可以使用下方入口函数解决

<script src="./jquery-3.6.0.js"></script>
<script>
    $(function(){
    
        //
    })
</script>
或
<script>
    $().ready(function() {
    

    });
</script>

一、选择器

1、基本选择器

ID选择器 ：$('#id'); 获取指定ID的元素
类选择器 ：$('.class');获取同一类class的元素
标签选择器 ：$('div'); 获取同一类标签的所有元素
并集选择器 ：$('div,p,li'); 使用逗号分隔，只要符合条件之一就可。
交集选择器 ：$('div.redClass'); 获取class为dClass的div元素
属性选择器 ： $('input[name=username]')获取 input 标签中 name 属性为 username 的元素

2、层级选择器

子代选择器：$('ul > li');使用 > 号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器：$("ul li")使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

3、过滤选择器

这类选择器都带冒号:

4、jQuery筛选方法

children(selector): $('ul').children('li') : 相当于$('ul>li')，子类选择器
find(selector) $('ul').find('li');: 相当于$('ul li'),后代选择器
siblings(selector) $('#first').siblings('li'); : 查找兄弟节点，不包括自己本身
parent() $('#first').parent(); 查找父亲
parents() $('li').parents(); 查找祖先元素
eq(index) $('li').eq(2); 相当于$('li:eq(2)'),index从0开始
next()$('li').next():找下一个兄弟
prev() $('li').prev(): 找上一次兄弟
closest $('li').closest('ul'): 找最近一个祖先元素

5、this 和 当前 索引

$(this) 表示当前操作的 jQuery 对象
$(this).index() 表示当前元素的索引号

[注意]：支持链式编程
下一章：JQuery怎么用？（工具方法、CSS属性及方法、筛选、文档处理、事件、动画）后续