前端之jQuery

jQuery介紹

1. jQuery是一個輕量級的,兼容多瀏覽器的JavaScript庫.
2. jQuery使用戶能夠跟方便地處理HTML Document,Events,實現(xiàn)動畫效果,方便的與Ajax交互,能夠極大簡化JavaScript編程.他的宗旨是:"write less,do more."

jQuery的優(yōu)勢

1. 一款輕量級的JS框架.jQuery的核心JS文件才十幾kb,不會影響頁面加載速度.
2. 豐富的DOM選擇器,jQuery的選擇器用起來很方便,比如要找到某個DOM對象的相鄰元素,JS可能要寫好幾行代碼,而jQuery一行代碼就搞定了.
3. 鏈?zhǔn)奖磉_(dá)式.jQuery的鏈?zhǔn)讲僮骺梢园讯鄠€操作的css代碼寫在一行代碼里,更加簡潔.
4. 事件,樣式,動畫支持.jQuery還簡化了JS操作css代碼,并且代碼的可讀性也比JS要強(qiáng).
5. Ajax操作支持.jQuery簡化了AJAX操作,后端只需要返回一個JSON格式的字符串就能完成與前端的通信.
6. 跨瀏覽器兼容.jQuery基本兼容了現(xiàn)在的主流的瀏覽器,不用再為瀏覽器的兼容問題而傷透腦筋.
7. 插件擴(kuò)展開發(fā).jQuery有著豐富的第三方的插件,例如:樹形菜單,日期控件,圖片切換插件,彈出窗口等等基本前端頁面上的組件都有對應(yīng)插件，并且用jQuery插件做出來的效果很炫，并且可以根據(jù)自己需要去改寫和封裝插件，簡單實用。

jQuery的內(nèi)容

1. 選擇器
2. 篩選器
3. 樣式操作
4. 文本操作
5. 屬性操作
6. 文檔處理
7. 事件
8. 動畫效果
9. 插件
10. each,data,Ajax

jQuery對象

jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。jQuery對象是 jQuery獨(dú)有的。如果一個對象是 jQuery對象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

jQuery基礎(chǔ)語法

-- $(selector).action() --

查找標(biāo)簽

基本選擇器

// 基本選擇器
1. id選擇器
    $("#id")
2. 標(biāo)簽選擇器
    $("tagName")
3. class選擇器
    $(".className")
4. 所有元素選擇器
    $("*")
5. 配合使用
    $("div#a") - 找到id為'a'的div標(biāo)簽
    $("div.abc") - 找到class為'abc'的div標(biāo)簽
6. 組合選擇器
    $("#id, .className, tagName") - 逗號隔開

層級選擇器

// 層級選擇器
1. $("x y") - x的所有后代y（子子孫孫）
2. $("x > y") - x的所有兒子y（兒子）
3. $("x   y") - 找到所有緊挨在x后面的y
4. $("x ~ y") -  x之后所有的兄弟y

基本篩選器

// 基本篩選器
1. :first - 第一個
2. :last - 最后一個
3. :eq(index) - 索引等于index的那個屬性
4. :even - 匹配所有索引值為偶數(shù)的元素,從 0 開始計數(shù)
5. :odd - 匹配所有索引為奇數(shù)的元素,從0 開始計數(shù)
6. :gt(index) - 匹配所有大于給定索引值的元素
7. :lt(index) - 匹配所有小于給定索引值得元素
8. :not(元素選擇器) - 移除所有滿足not條件的標(biāo)簽
9. :has(元素選擇器) - 選取所有包含一個或多個標(biāo)簽在內(nèi)的標(biāo)簽(指的是從后代元素找)
    eg: $("div:has(h1)")// 找到所有后代中有h1標(biāo)簽的div標(biāo)簽
        $("div:has(.c1)")// 找到所有后代中有c1樣式類的div標(biāo)簽
        $("li:not(.c1)")// 找到所有不包含c1樣式類的li標(biāo)簽
        $("li:not(:has(a))")// 找到所有后代中不含a標(biāo)簽的li標(biāo)簽

屬性選擇器

// 屬性選擇器
1. $("div[age='18']") - 選擇div標(biāo)簽中屬性age等于18的div標(biāo)簽
2. $("div[age!='18']") - 選擇屬性age不是18的div標(biāo)簽

表單篩選器

// 表單篩選器
1. :text
2. :password
3. :file
4. :radio
5. :checkbox
6. :submit
7. :reset
8. :button

eg: $(":text") - 查找所有的text

1. :enabled
2. :disabled
3. :checked
4. :selected

eg: $("input:disabled") - 查找所有有disabled屬性的標(biāo)簽

以上全是去查找標(biāo)簽所使用的的,都是配合起來使用,達(dá)到鎖定標(biāo)簽的作用.

篩選器方法

下一個元素

1. $("#id").next() - 查找下一個
2. $("#id").nextAll() - 查找下面所有
3. $("#id").nextUntil("#id2") - 兩個標(biāo)簽之間的(不包含這兩個本身)

上一個元素

1. $("#id").prev() - 查找上一個
2. $("#id").orevAll() - 查找上面所有的
3. $("#id").prevUntil("#id2") - 兩個標(biāo)簽之間的(不包含這兩個本身)

父親元素

1. $("#id").parent()
2. $("#id").parents()  // 查找當(dāng)前元素的所有的父輩元素
3. $("#id").parentsUntil() // 查找當(dāng)前元素的所有的父輩元素，直到遇到匹配的那個元素為止。

兒子和兄弟元素

1. $("#id").children();// 兒子們
2. $("#id").siblings();// 兄弟們

查找

搜索所有與指定表達(dá)式匹配的元素.這個函數(shù)是找出正在處理的后代元素的好方法.

$("div").find("P") - div標(biāo)簽下所有的p標(biāo)簽
== $("div p") - 兩個是一樣的

篩選

帥選出與指定表達(dá)式匹配的元素集合,這個方法用于縮小匹配的范圍.用逗號分隔多個表達(dá)式

$("div").filter(".c1") - 找到id為c1的所有div標(biāo)簽
== $("div.c1") - 兩個是一樣的

補(bǔ)充

.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最后一個元素
.not() // 從匹配元素的集合中刪除與指定表達(dá)式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

// 查找和篩選可以配合這個使用

操作標(biāo)簽

樣式操作

樣式類

1. addClass() - 添加指定的css標(biāo)簽類名
2. removeClass() - 移除指定的css標(biāo)簽的類名
3. hasClass() - 判斷這個標(biāo)簽里面的指定類名存不存在
4. toggleClass() - 給定一個指定類名給標(biāo)簽,有就刪除,沒有添加

CSS

標(biāo)簽.css("color","red") - DOM中的操作是 標(biāo)簽.style.color="red"

eg:
    $("p").css("color","red") - 把所有的p標(biāo)簽設(shè)置為紅色

位置操作

1. offset() - 獲取匹配元素在當(dāng)前窗口的相對便宜或設(shè)置元素位置
2. position() - 獲取匹配元素相對父元素的偏移
## 左側(cè)的滾條
3. scrolltop() - 獲取匹配元素相對滾動條頂部的偏移
4. scrollleft() - 獲取匹配元素相對滾動條左側(cè)的偏移

//.offset()方法允許我們檢索一個元素相對于文檔（document）的當(dāng)前位置。和 .position()的差別在于： .position()是相對于相對于父級元素的位移。

尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

// 這些就是獲取標(biāo)簽的尺寸屬性,點出來就歐克啦

文本操作

html

1. html() - 取得第一個匹配元素的html內(nèi)容
2. html("內(nèi)容") - 設(shè)置匹配到的元素html的內(nèi)容

// 內(nèi)容中標(biāo)簽代碼也會生效

文本值

1. text() - 取得所有匹配元素的內(nèi)容
2. text("內(nèi)容") - 設(shè)置所有匹配到的元素的內(nèi)容

// 就是普通的文本

值

1. val() - 取得第一個匹配元素的value值,也就是當(dāng)前值
2. val("value值") - 設(shè)置所有匹配到元素的value值
3. val(valuer值1,value值2) - 設(shè)置多選的checkbox,select的值

屬性操作

用于ID等自定義屬性

1. attr(屬性名) - 返回第一個匹配元素的屬性值
2. attr(屬性名,屬性值) - 為所有匹配的元素設(shè)置一個屬性值
3. attr({屬性名1:屬性值1,屬性名2:屬性值2}) - 為所有匹配的元素設(shè)置多個屬性值
4. removeAttr(屬性名) - 從沒一個匹配元素中刪除一個屬性

用于checkbox和radio

1. prop() - 獲取屬性
2. removeProp() - 移除屬性

eg:
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

注意:
在1.x及2.x版本的jQuery中使用attr對checkbox進(jìn)行賦值操作時會出bug，在3.x版本的jQuery中則沒有這個問題。為了兼容性，我們在處理checkbox和radio的時候盡量使用特定的prop()，不要使用attr("checked", "checked")。

prop和attr的區(qū)別：

attr全稱attribute(屬性)

prop全稱property(屬性)

雖然都是屬性，但他們所指的屬性并不相同，attr所指的屬性是HTML標(biāo)簽屬性，而prop所指的是DOM對象屬性，可以認(rèn)為attr是顯式的，而prop是隱式的。

總結(jié)一下:

1. 對于標(biāo)簽上有的能看到的屬性和自定義屬性都用attr
2. 對于返回布爾值的比如checkbox、radio和option的是否被選中都用prop。

文檔處理

添加到指定元素內(nèi)部的后面

1. $(A).append(B) - 把B追加到A元素內(nèi)部后面
2. $(A).appendTo(B) - 把A追加到B元素內(nèi)部后面

添加到指定元素內(nèi)部的前面

1. $(A).prepend(B) - 把B添加到A元素內(nèi)部前面
2. $(A).prependTo(B) - 把A添加到B元素內(nèi)部前面

添加到指定元素外部的后面

1. $(A).after(B) - 把A添加到B的后面
2. $(A).insertAfter(B) - 把B添加到A后面

添加到指定元素的前面

1. $(A).before(B) - 把B放到A的前面
2. $(A).insertBefore(B) - 把A放到B的前面

移除和清空元素

1. remove() - 從DOM中刪除所有匹配的元素。
2. empty() - 刪除匹配的元素集合中所有的子節(jié)點。

事件

格式

標(biāo)簽名.on( events [, selector ],function(){})

events： 事件
selector: 選擇器（可選的）
function: 事件處理函數(shù)

注意：
像click、keydown等DOM中定義的事件，我們都可以使用`.on()`方法來綁定事件，但是`hover`這種jQuery中定義的事件就不能用`.on()`方法來綁定了。

想使用事件委托的方式綁定hover事件處理函數(shù)，可以參照如下代碼分兩步綁定事件：
1. $('ul').on('mouseenter', 'li', function() {//綁定鼠標(biāo)進(jìn)入事件
    $(this).addClass('hover');
});
2. $('ul').on('mouseleave', 'li', function() {//綁定鼠標(biāo)劃出事件
    $(this).removeClass('hover');
});

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

移除事件

標(biāo)簽名.off( events [, selector ][,function(){}])

off() 方法移除用 .on()綁定的事件處理程序。

events： 事件
selector: 選擇器（可選的）
function: 事件處理函數(shù)

阻止后續(xù)事件發(fā)生

1. 只要在函數(shù)里面寫上 return false; 后面的就不可以執(zhí)行了  // 常見的阻止表單提交
2. e.preventDefault(); // 寫的位置一樣,只不過需要函數(shù)的括號里面寫一個參數(shù) "e"

阻止事件冒泡-阻止后續(xù)事件發(fā)生應(yīng)用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>點我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
　　　　　　//阻止事件冒泡
　　　　　　e.stopPropagation

    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })

/script
/body
/html

頁面載入

和JS里面的一樣,就是等待頁面生成完畢后再加載JS代碼,這里是加載JQuery代碼.為了防止獲取不到標(biāo)簽.

兩種寫法:

代碼多點的:
$(document).ready(function(){
    // 在這里寫你的JS代碼...
})

簡寫:
$(function(){
    // 在這里面寫JS代碼
})

與window.onload的區(qū)別:

• window.onload()函數(shù)有覆蓋現(xiàn)象，必須等待著圖片資源加載完成之后才能調(diào)用
• jQuery的這個入口函數(shù)沒有函數(shù)覆蓋現(xiàn)象，文檔加載完成之后就可以調(diào)用（建議使用此函數(shù)）

事件委托

事件委托是通過事件冒泡的原理，利用父標(biāo)簽去捕獲子標(biāo)簽的事件。

克隆和事件委托組合就可以實現(xiàn),克隆的東西和能夠有主體的函數(shù)功能

each(),data()

each也就是循環(huán)的意思:

一個通用的迭代函數(shù)，它可以用來無縫迭代對象和數(shù)組。數(shù)組和類似數(shù)組的對象通過一個長度屬性（如一個函數(shù)的參數(shù)對象）來迭代數(shù)字索引，從0到length - 1。其他對象通過其屬性名進(jìn)行迭代。

注意：在遍歷過程中可以使用 return false提前結(jié)束each循環(huán)。

data也就是在匹配的元素上存儲任意相關(guān)數(shù)據(jù):

在匹配的元素集合中的所有元素/上存儲任意相關(guān)數(shù)據(jù)或返回匹配的元素集合中的第一個元素的給定名稱的數(shù)據(jù)存儲的值