前端之jQuery

jQuery介紹

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

jQuery的優勢

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

jQuery的內容

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

jQuery對象

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

jQuery基礎語法

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

查找標簽

基本選擇器

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

層級選擇器

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

基本篩選器

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

屬性選擇器

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

表單篩選器

// 表單篩選器1. :text2. :password3. :file4. :radio5. :checkbox6. :submit7. :reset8. :buttoneg: $(":text") - 查找所有的text1. :enabled2. :disabled3. :checked4. :selectedeg: $("input:disabled") - 查找所有有disabled屬性的標簽

以上全是去查找標簽所使用的的,都是配合起來使用,達到鎖定標簽的作用.

篩選器方法

下一個元素

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

上一個元素

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

父親元素

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

兒子和兄弟元素

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

查找

搜索所有與指定表達式匹配的元素.這個函數是找出正在處理的后代元素的好方法.$("div").find("P") - div標簽下所有的p標簽== $("div p") - 兩個是一樣的

篩選

帥選出與指定表達式匹配的元素集合,這個方法用于縮小匹配的范圍.用逗號分隔多個表達式$("div").filter(".c1") - 找到id為c1的所有div標簽== $("div.c1") - 兩個是一樣的

補充

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

操作標簽

樣式操作

樣式類

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

CSS

標簽.css("color","red") - DOM中的操作是 標簽.style.color="red"eg:    $("p").css("color","red") - 把所有的p標簽設置為紅色

位置操作

1. offset() - 獲取匹配元素在當前窗口的相對便宜或設置元素位置2. position() - 獲取匹配元素相對父元素的偏移## 左側的滾條3. scrolltop() - 獲取匹配元素相對滾動條頂部的偏移4. scrollleft() - 獲取匹配元素相對滾動條左側的偏移//.offset()方法允許我們檢索一個元素相對于文檔（document）的當前位置。和 .position()的差別在于： .position()是相對于相對于父級元素的位移。

尺寸

height()width()innerHeight()innerWidth()outerHeight()outerWidth()// 這些就是獲取標簽的尺寸屬性,點出來就歐克啦

文本操作

html

1. html() - 取得第一個匹配元素的html內容2. html("內容") - 設置匹配到的元素html的內容// 內容中標簽代碼也會生效

文本值

1. text() - 取得所有匹配元素的內容2. text("內容") - 設置所有匹配到的元素的內容// 就是普通的文本

值

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

屬性操作

用于ID等自定義屬性

1. attr(屬性名) - 返回第一個匹配元素的屬性值2. attr(屬性名,屬性值) - 為所有匹配的元素設置一個屬性值3. attr({屬性名1:屬性值1,屬性名2:屬性值2}) - 為所有匹配的元素設置多個屬性值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進行賦值操作時會出bug，在3.x版本的jQuery中則沒有這個問題。為了兼容性，我們在處理checkbox和radio的時候盡量使用特定的prop()，不要使用attr("checked", "checked")。

prop和attr的區別：

attr全稱attribute(屬性)

prop全稱property(屬性)

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

總結一下:

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

文檔處理

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

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

添加到指定元素內部的前面

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

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

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() - 刪除匹配的元素集合中所有的子節點。

事件

格式

標簽名.on( events [, selector ],function(){})events： 事件selector: 選擇器（可選的）function: 事件處理函數注意：像click、keydown等DOM中定義的事件，我們都可以使用`.on()`方法來綁定事件，但是`hover`這種jQuery中定義的事件就不能用`.on()`方法來綁定了。想使用事件委托的方式綁定hover事件處理函數，可以參照如下代碼分兩步綁定事件：1. $('ul').on('mouseenter', 'li', function() {//綁定鼠標進入事件    $(this).addClass('hover');});2. $('ul').on('mouseleave', 'li', function() {//綁定鼠標劃出事件    $(this).removeClass('hover');});

常用事件

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

移除事件

標簽名.off( events [, selector ][,function(){}])off() 方法移除用 .on()綁定的事件處理程序。events： 事件selector: 選擇器（可選的）function: 事件處理函數

阻止后續事件發生

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

阻止事件冒泡-阻止后續事件發生應用

<!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代碼.為了防止獲取不到標簽.

兩種寫法:

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

與window.onload的區別:

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

事件委托

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

克隆和事件委托組合就可以實現,克隆的東西和能夠有主體的函數功能

each(),data()

each也就是循環的意思:

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

注意：在遍歷過程中可以使用 return false提前結束each循環。

data也就是在匹配的元素上存儲任意相關數據:

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