02-jQuery

jQuery 曾经是最流行的 JavaScript 库，在 2000 年后期，得到了广泛的应用，围绕它也产生了一个丰富的生态系统，诞生了大量的插件

jQuery 是一个 JavaScript 函数库
jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
工具函数

1. jQuery安装

从 jquery.comopen in new window 下载 jQuery 库
从 CDN 中载入 jQuery

百度CDN：

<head>
   <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

新浪 CDN：

<head>
  <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>

Google CDN：

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

2. jQuery语法

jQuery 语法：通过选取 HTML 元素，并对选取的元素执行某些操作

基础语法：$(selector)

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例：

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>什么是jQuery?</title>
    </head>
    <body>
        <div class="app">code app</div>
        <button>button</button>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $("button").click(function(){
                $(".app").hide();    // 隐藏
            })
        </script>
    </body>
</html>

3. jQuery选择器

允许对 HTML 元素组或单个元素进行操作
基于元素的 id、类、类型、属性、属性值选择 HTML 元素。CSS 选择器open in new window
所有选择器都以 $() 开头

1. id选择器

// 通过 id 选取元素
$("#test")

2. class选择器

// 通过指定的 class 查找元素
$(".test")

3. 更多选择器

$("*")：所有元素
$(this)：当前 HTML 元素
$("p.intro")： class 为 intro 的 <p> 元素
$("p:first")：第一个 <p> 元素
$("ul li:first")：第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")：每个 <ul> 元素的第一个 <li> 元素
$("[href]")：带有 href 属性的元素
$("a[target='_blank']")：所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")：所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")：所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")：偶数位置的 <tr> 元素
$("tr:odd")：奇数位置的 <tr> 元素

4. 事件

在元素上移动鼠标
选取单选按钮
点击元素

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
clickopen in new window	keypressopen in new window	submitopen in new window	loadopen in new window
dblclickopen in new window	keydownopen in new window	changeopen in new window	resizeopen in new window
mouseenteropen in new window	keyupopen in new window	focusopen in new window	scrollopen in new window
mouseleaveopen in new window		bluropen in new window	unloadopen in new window
hoveropen in new window

5. jQuery事件

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法

1. click()

$("p").click(function(){
  $(this).hide();
});

6. jQuery解决的核心问题

它提供了一整套简洁的 API 用于操作 DOM，尤其是提供了一系列强大的方法去选择页面元素。eg：基于和其他元素关系来筛选
- 筛选引擎最终抽象成一个独立库《Sizzle》

// 在 container 节点下，选出 list 列表中每一个元素
$('#container ul.list li');

抹平了不同浏览器的差异。在它以前，要支持多个浏览器是件非常不容易的事情
- 由于早年浏览器缺乏统一标准，开发者需要兼容不同浏览器解决各种边界情况。早期 jQuery 的源代码，开发者让 jQuery 的团队去完成这些浏览器兼容的事情
jQuery 又添加了更多的特性。eg：动画、ajax

// If Mozilla is used
if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
    // Use the handy event callback
    jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );

// If IE is used, use the excellent hack by Matthias Miller
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
} else if ( jQuery.browser == "msie" ) {

    // Only works if you document.write() it
    document.write("<scr" + "ipt id=__ie_init defer=true " +
            "src=javascript:void(0)></script>");

    // Use the defer script hack
    var script = document.getElementById("__ie_init");
    script.onreadystatechange = function() {
        if ( this.readyState == "complete" )
            jQuery.ready();
    };

    // Clear from memory
    script = null;

// If Safari is used
} else if ( jQuery.browser == "safari" ) {
    // Continually check to see if the document.readyState is valid
    jQuery.safariTimer = setInterval(function(){
        // Loaded and complete are both valid states
        if ( document.readyState == "loaded" ||
                document.readyState == "complete" ) {

            // If either one are found, remove the timer
            clearInterval( jQuery.safariTimer );
            jQuery.safariTimer = null;

            // and execute any waiting functions
            jQuery.ready();
        }
    }, 10);
}

1. 变化的环境

近年来 jQuery 受欢迎程度有所下降。2018 GitHub 网站中删除了 jQuery，而 Bootstrap v5 也将丢弃 jQuery，因为它是 Bootstrap 中最大的 JavaScript 的依赖库（压缩和 gzip 后 30KB）。Web 开发的一些趋势削弱了 jQuery 作为必须使用的工具的地位

2. 浏览器

浏览器差异和限制变得不那么重要了。首先是标准化有所改进，主要的浏览器供应商（Apple、Google、Microsoft、Mozilla）通过 Web Hypertext Application Technology Working Group 在 Web 标准上进行协作
浏览器的更新速度比过去更快。大多数浏览器现在都有常绿更新策略，这意味着用户可以更快地采用新的浏览器功能和错误修复，开发人员不必等待使用率百分比达到可接受的水平。可以自信地使用功能和 API 而无需加载 jQuery 或 polyfill
IE 越来越接近无关紧要，IE 一直是各地 Web 开发者的祸根
- 微软加速了 IE 的弃用，结束了对 2016 年 IE 10 及以下版本的支持，将 IE 11 作为最后一个支持版本。Web 开发人员忽视 IE 兼容性的现象越来越普遍
- 即使 jQuery 在 2013 年发布版本 2.0 时也放弃了对 IE 8 及以下版本的支持

浏览器 API 变得更加强大

Fetch API 可以取代 jQuery 的 Ajax 函数

// jQuery
$.getJSON('https://api.com/songs.json')
   .done(function (songs) {
        console.log(songs);
    })

// native
fetch('https://api.com/songs.json')
   .then(function (response) {
        return response.json();
    })
   .then(function (songs) {
        console.log(songs);
    });

querySelector和querySelectorAll API 可以替代 jQuery 的元素查询能力

// jQuery
const fooDivs = $('.foo div');

// native
const fooDivs = document.querySelectorAll('.foo div');

操作 DOM 元素可以用 classList

// jQuery
$('#warning').toggleClass('visible');

// native
document.querySelector('#warning').classList.toggle('visible');

3. 新框架

自 jQuery 发布以来，出现了大量的 Web 框架，领先者是 React、Angular、Vue

可以轻松地将 UI 组件化。能够很好的处理展现页面及更新页面。jQuery 通常仅用于更新页面，依靠服务器提供初始页面
- 组件允许 HTML、JS、CSS 间的紧密耦合。将 UI 分解为可重用的组件，更容易地构建和维护复杂的网站
较新的框架鼓励声明性范例，其中开发人员描述 UI 应该是什么样的，并将其留给框架以进行必要的更改以实现目标。这种方法与以 jQuery 代码为特征的命令式方法形成对比

随着时代发展，JQuery 的市场占有率越来越少，也许有一天真的完全被抛弃。其精华有些也演化成了 Web 标准。jQuery 很好地完成了前端发展的历史使命，前端开发也过了纯操作 DOM 的年代，程序员可以更好地专注于业务逻辑

7. jQuery整体架构

1. jQuery无new构建实例

$：是jQuery的别称
$()：是在创建jQuery的实例对象

当创建一个 jQuery 对象时，它会继承 jQuery 原型上的这些方法，从而可以方便地对 DOM 元素进行操作

// 定义一个简单的构造函数
function MyObj() {}

// 给构造函数的原型添加一个方法
MyObj.prototype.sayHello = function() {
    console.log("Hello!");
};

// 创建两个 MyObj 的实例
var obj1 = new MyObj();
var obj2 = new MyObj();

// 两个实例都可以访问原型上的方法
obj1.sayHello();
obj2.sayHello();

2. 共享原型设计

cmRXQWVNOVhKRUFWeHd3Szl3THlGb0JCMmt1VWZEazNPWDgwcnRKc0lBPT0=

3. extend

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<script src="jQuery.1.0.1.js"></script>
<script>
    console.log($)
    console.log($())
    // 1. 任意对象拓展
    $.extend({}, {name: "max"});

    // 2. JQ 本身拓展
    $.extend({
        work: function () {}
    });
    jQuery.work();

    // 3. 实例对象拓展
    $.fn.extend({
      sex: "男"
    })
    $().sex;


    var ret = {name: "max", list: {age: "30"}};
    var res = {list: {sex: "女"}};
    // 任意对象扩展
    // 浅拷贝
    var obj = $.extend({}, ret, res);
    // 深拷贝
    var obj = $.extend(true, {}, ret, res);
    console.log(obj);

</script>
</body>
</html>

8. Sizzle

一个纯粹并且独立的 JavaScript CSS 选择器引擎。可以植入其他库中配合使用，也可以单独使用。 jQuery 中引入了 Sizzle，以实现选择器查询

1. DOM对象

在文档对象模型中，每个部分都是节点
- 所有 HTML 元素是元素节点，而 Element 对象表示 HTML 元素
- HTML DOM Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点

2. jQuery对象

jQuery构造函数创建出来的对象
通过jQuery选择器可以获取HTML的元素，并且以一种类数组的形式存储在jQuery对象中

3. 错误用法与对象转换

// 错误用法示例代码
$('div').innerHTML;

// 错误用法示例代码
document.getElementsByName('div')[0].html();

// Element 对象转化成 jQuery 对象
var domObj = document.getElementById('id');
var $obj = $(domObj); // jQuery对象;

// jQuery 对象转换成 Element 对象
var $box = $('.box');
var box = $box[0];

4. 常用jQuery选择器接口

// 传入对象
$(this)

// 把传入的对象包装成 jQuery 对象
$(document)

// 传入函数
// 这个是在页面 DOM 文档加载完成后加载执行的，等效于在 DOM 加载完毕后执行了 `$(document).ready()`
$(function(){})

// 传入字符串。查询 DOM 节点包装成 jQuery 对象
$('.box')

// 传入 HTML 字符串。创建DOM节点包装成 jQuery 对象
$('<div>')

// 创建 jQuery 对象
$()