jQuery基本介绍及使用

一、jQuery基本介绍

---

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

1.1 JavaScript 库

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

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

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

常见的JavaScript 库

• Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。

• Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。

• YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。

• Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。

• Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。

• jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。

• 移动端的zepto

二、jQuery基本使用

---

2.1 jQuery版本

jQuery版本有很多，分为 1.x、2.x、 3.x

• 1.x 版本：能够兼容 IE6, 7, 8 浏览器（不再更新版本）

• 2.x 版本：不兼容 IE6, 7, 8 浏览器（不再更新版本）

• 3.x版本：不兼容 IE6, 7, 8，更加的精简（在国内不流行，因为国内使用 jQuery 的主要目的就是兼容 IE6, 7, 8）

1.x 和 2.x 版本 jquery 都不再更新版本了，现在只更新3.x版本

2.2 jQuery下载

官网：https://jquery.com/

• production （压缩过的版本，体积小，上线用）——生产版（压缩版）

• develepment（未压缩版本，开发时使用，适合查找）——开发版（测试版）

2.3 使用 jQuery

• 在页面中引入 jQuery 库

<!-- 服务器本地库 -->

<scriptsrc="./jquery-3.6.0.js"></script>

<!--

CDN远程库

项目上线时，一般使用比较靠谱的CDN资源库，减轻服务器负担

[https://www.bootcdn.cn/](https://www.bootcdn.cn/)：搜索`jQuery`，复制`<script>`标签到项目中即可使用

-->

• 在 script 标签中使用 jquery 语法即可，如：

<div>Content</div>

<scriptsrc="./jquery-3.6.0.js"></script>

<script>

$('div').hide();

</script>

2.4 jQuery 闭包结构

打开jQuery库查看后 有一个基本架构如下

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

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

• 在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局

• 把当前沙箱需要的外部变量通过函数参数引入进来

• 只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数。

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

2.5 jQuery 的 2 把利器

// jQuery核心代码
(function(window){
    varjQuery=function(){
        returnnewjQuery.fn.init();
    }
    window.$=window.jQuery=jQuery
})(window)

jQuery 核心函数

简称：jQuery函数（$/jQuery），jQuery库向外直接暴露的就是$/jQuery

引入jQuery库后，直接使用即可

• 当函数用：$(xxx)

• 当对象用：$.xxx()

// jQuery函数：直接可用
console.log($, typeof$);  // ƒ ( selector, context ) {}    function
console.log(jQuery===$); // true

jQuery 核心对象

简称：jQuery对象

得到jQuery对象：执行jQuery函数返回的就是jQuery对象

使用jQuery对象：$obj.xxx()

// jQuery对象：执行jQuery函数得到它
console.log($(), typeof$(), $() instanceofObject); // jQuery.fn.init {} "object" true

2.5.1 jQuery 函数的使用

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

1. 参数为函数：当 DOM 加载完成后，执行此回调函数

2. 参数为选择器字符：查找所有匹配的标签并将它们封装成jQuery对象

3. 参数为 DOM 对象：将 dom 对象封装成jQuery对象

4. 参数为 html 标签字符串（用得少）：创建标签对象并封装成jQuery对象

作为对象使用：$.xxx()

• $.each()：隐式遍历数组

• $.trim()：去除两端的空格

// 需求1.点击按钮：显示按钮的文本，显示一个新的输入框
// 1、参数为函数：当 DOM 加载完成后，执行此回调函数
$(function () { // 绑定文档加藏完成的监听
    // 2、参数为选择器字符：查找所有匹配的标签并将它们封装成`jQuery`对象
    $("#btn").click(function () {
        // alert(this.innerHTML); // this是什么？发生事件的dom元素（<button>）
        // 3、参数为 DOM 对象：将 dom 对象封装成`jQuery`对象
        alert($(this).html());
        // 4、参数为 html 标签字符串（用得少）：创建标签对象并封装成`jQuery`对象
        $('<input type="text" name="msg3"><br/>').appendTo("div");
    });
    
    // 需求2.遍历输出数组中所有元素值
    vararr= [3, 7, 4];
    $.each(arr, function (index, item) {
        console.log(index, item); // 0 3    1 7    2 4
    });
})

2.5.2 jQuery 对象的使用

理解

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

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

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

属性和方法

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

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

• CSS：操作标签的样式

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

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

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

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

这里我们先学习jQuery对象的基本行为，其他的不放在当前章节中

2.6 入口函数

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

<scriptsrc="./jquery-3.6.0.js"></script>
<script>
    $(document).ready(function () {
        //
    });
</script>

等待页面 DOM 加载完毕后执行，相当于原生 js 中 DOMContentLoaded

或

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

或

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

jQuery 入口函数与 window.onload 的对比

• JavaScript 的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。

• jQuery 的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

三、选择器

---

jQuery 选择器是 jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素

3.1 基本选择器

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

注意：jQuery选择器返回的是jQuery对象。

<scripttype="text/javascript">
    //常用选择器
    //根据id获取元素 获取到的结果：类数组对象
    console.log( $('#div0') );
    console.log( $('#div0')[0] );
    //根据class获取元素
    console.log( $('.div_1') );
    //根据标签名称来获取元素
    console.log( $('div') );
    //根据属性获取元素
    console.log( $('input[name=username]') );
    //根据表单元素属性获取元素
    console.log( $(':checked') );
</script>

3.2 层级选择器

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

3.3 过滤选择器

这类选择器都带冒号:

名称	用法	描述
:eq（index）	$('li:eq(2)').css('color', 'red');	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$('li:odd').css('color', 'red');	获取到的li元素中，选择索引号为奇数的元素
:even	$('li:even').css('color', 'red');	获取到的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')	找最近一个祖先元素

3.5 this 和 当前索引

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

$("li").click(function () {
    console.log($(this).index());
}

供各位猿友参考学习，有错误请私信，感谢指出！！！