Jquery

一. 概述

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax操作更加简单。

全面解决pc端的兼容性问题。
语法精炼，性能好。插件库非常庞大。

二. 下载 jQuery

打开cdn链接
搜索 jquery
复制 <script> 标签

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>

三. jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
提示：除此之外，Jquery还提供了大量的插件。

详情请参考文档1
[参考文档2]https://www.runoob.com/jquery/jquery-tutorial.html

（一）. 选择器

:even() 下标偶数
:odd()  下标奇数

prev + next 相邻一个选择器
prev ~ next 相邻所有选择器

gt(0) 大于下标 0，不包括 0
lt(1) 小于下标 1

（二）. 属性

attr 自定义属性
prop 固有属性，例： $("input").prop("checked")

（三）. HTML 元素操作

添加元素

方法名	描述	注意点
append	被选元素结尾	选择元素内部插入
prepend	被选元素开头	选择元素内部插入

appendTo(‘p’)	把… 添加到p 元素里面

after	被选元素之后	选择元素外面追加
prepend	被选元素之前	选择元素外面追加

删除元素
empty() 清空被选元素中子元素
remove() 删除被选元素

（四）. HTML DOM 遍历

父元素	子元素	兄弟元素/同级元素
parent()	children()	next()/ nextAll()/ nextUntil()
parents()	find()	prev()/ prevAll()/ prevUntil
parentsUntil()

四. 详细描述 & 面试题

（一）. jQuery四种事件绑定方式: .on() .bind() .live() .delegate() 的区别

1. on

$("ul").on("click","li",function () { alert(1); })

(1) 提供了一种统一绑定事件的方法
(2) 仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()

2. bind

$( "a" ).bind( "click", function( e ) { alert(1);} )

(1) 这是最直接的绑定方法。jQuery 扫描文档找到所有 $(‘a’) 元素，然后给每一个找到的元素的 click 事件绑定处理函数。
(2) 当元素很多时，会出现效率问题; 当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题

3. live

$('a').live('click',function() { alert(1); })

(1) JQuery把alert函数绑定到$(document)元素上，并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与’a’这一CSS选择器是否匹配，如果都是的话，则执行函数。    
(2) live方法有一个最大的缺点，只能用css选择器，用起来很不方便。    
(3) 从1.7开始已经不被推荐了，所以你也要开始逐步淘汰它了。

4. delegate

$("ul").delegate("li","click",function(){ alert(1); })

向未来的元素添加事件处理程序

总结

(1) 我们可以用.on()来代替上述的3种方法    
(2) 用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上    
(3) 不要再用.live()了，它已经不再被推荐了，而且还有许多问题    
(4) .delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上

（二）. 关于事件冒泡、事件捕获和事件委托

1. 事件冒泡

(1) 会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
//点击 #box3, 触发顺序是 box3>box2>box1，这种现象就是事件冒泡。

(2) 阻止冒泡：
e.stopPropagation() //方法一
return false; //方法二

2. 事件捕获

会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
//点击 #box3, 触发顺序是 box1>box2>box3，这种现象就是事件捕获。

3. 事件委托

(1) 又称事件代理，通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。
(2) 换种说法：委托它们父级代为执行事件。我们只用给父元素添加监听器，而不用再一步步的去遍历子元素，在子元素上添加事件监听。
(3) 事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
(4) 事件委托就是利用事件冒泡原理实现的。
(5) 自动绑定动态添加的元素。

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

//方法一：
$(function () {
    $("ul").on("click","li",function () {
        alert(1);
    })
});

//方法二：
$(function(){
    $("#list").delegate("li","click",function(){
        alert(1);
    })
    var $li = $('<li>6</li>');
    $("#list").append($li);
})

备注：
在jQuery1.7中 .delegate()已被.on()取代。
两者区别是seleter和events顺序不同。
delegate和on方法被选元素的子元素必须是"合法的"子元素。

（三）. jQuery 点击事件 click() 和onclick() 区别

click是触发事件 (模拟鼠标点击操作)
onclick是绑定事件 (告诉浏览器在鼠标点击的时候要做什么)

click()是用程序去点击按钮

1
2
3

$("#testclick").click(function(){
    console.log("click"); 
});

onclick(）只是触发click事件去调用内部方法

<input type="button" onclick="test();" class="input1" id="testclick" value="test_button"/>

function test(){ 
    console.log("function test()"); 
}

（四）. Ajax

1. 什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。

$.ajax({
    type: "post", //数据提交类型
    dataType: "json", //返回的数据类型
    url: "https://www.baidu.com:80", //请求地址 : 协议+域名+端口
    async: true, //同步或者异步 ,ajax 就是为了异步而生
    data: {"type": "2"}, // 发数的参数/数据
    success: function (result) {
        if (result.code === 200) {
            console.log(reslt);
        }
    },
    error: function (result) {
        console.log(result);
        console.log(result.message);
    }
})

（五）. 跨域解决方法，下面讲述四种

什么是跨域

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。
同源是指，域名、协议、端口均为相同。

参考链接

1. jsonp

JSONP 只能解决GET跨域
原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤：
(1). 创建一个script标签
(2). script的src属性设置接口地址
(3). 接口参数,必须要带一个自定义函数名要不然后台无法返回数据。
(4). 通过定义函数名去接收后台返回数据

方法：

let script = document.createElement("script");//去创建一个script标签
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://www.test.cn/login?username=test&callback=callback";
document.head.appendChild(script);//插入到页面
function jsonpCallback(data){//通过定义函数名去接收后台返回数据
    //注意：jsonp返回的数据是json对象可以直接使用
    //ajax 取得数据是json字符串需要转换成json对象才可以使用。
}

2. CORS

CORS：跨域资源共享
原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求
限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上需要后台设置

方法：

1 2	Access-Control-Allow-Origin: * //允许所有域名访问，或者 Access-Control-Allow-Origin: http://a.com //只允许所有域名访问

3. postMessage 跨域

页面跟嵌套在iframe中的页面通信

方法：
有a,b 两个页面，在b页面中引用a页面

<body>
  <iframe src='http://localhost:3000/a.html' id='aIframe' onload='load()'></iframe>
  <script>
  	function load(){
  	    let frame = document.getElementById('aIframe')
  	    //给嵌套在iframe中的页面的window发送信息
  	    //第二个参数是origin
  	    frame.contentWindow.postMessage('你好我是b页面','http://localhost:3000/a.html')
    }
    //b页面监听来自a页面的信息
    window.onmessage=function(e){
      console.log(e.data)
    }
  </script>
</body>

在a页面中监听b页面的信息

window.onmessage=function(e){
    console.log(e.data)
    //收到信息后给b页面发送信息，
    e.source.postMessage('你好，我是a页面'，e.origin)
}

总结：

//发送信息
window.postMessage('信息'，orign)
//最主要是：frame.contentWindow.postMessage('你好我是b页面','http://localhost:4000/xxx')
//接收信息
window.onmessage=function(e){
  console.log(e.data)
}

4. 设置 document.domain

二级域名/子域名	一级域名/主域名	整体
aaa	xxx.com	aaa.xxx.com
bbb	xxx.com	bbb.xxx.com

原理：相同主域名不同子域名下的页面，可以设置document.domain让它们同域
限制：同域document提供的是页面间的互操作，需要载入iframe页面
需求：aaa里的一个网页（a.html）引入了bbb 里的一个网页（b.html），这时a.html里同样是不能操作b.html里面的内容的。因为document.domain不一样，一个是aaa.xxx.com，另一个是bbb.xxx.com。
方法：
这时我们就可以通过Javascript，将两个页面的domain改成一样的，
需要在a.html里与b.html里都加入：document.domain = "xxx.com";
这样这两个页面就可以互相操作了。也就是实现了同一基础域名之间的”跨域”。