Jquery小結

雖然如今MVVM框架盛行，可是不免有時候一些時候操做dom時，jquery帶來的兼容性大大提升了咱們的效率，因此那就做爲日常須要的時候緊急去查找，總結了一些經常使用的寫法，對於第一次接觸jquery的人來講也很通俗易懂，由於我就是由於須要纔剛剛去學的jquery

若是出現錯誤，請在評論中指出，我也好本身糾正本身的錯誤

author： thomaszhou

大坑

千萬不要寫箭頭函數代替function（）的寫法

$("p").on("click", function(){
  alert( $(this).text() ); // 指向當前觸發click事件的元素p的文本
});

// 若是咱們將function寫成箭頭函數
$("p").on("click", () => {
  alert( $(this).text() ); // 此時this指向的就是document
});
複製代碼

1、尋找元素

（1）選擇器

基本選擇器、層級選擇器、屬性選擇器 與CSS相似，這裏再也不細說

• 1.基本選擇器

$("#id")            //ID選擇器
$("div")            //元素選擇器
$(".classname")     //類選擇器
$(".classname,.classname1,#id1")     //組合選擇器
複製代碼

• 2.層次選擇器

$("#id>.classname ")    //子元素選擇器
$("#id .classname ")    //後代元素選擇器
$("#id + .classname ")    //緊鄰下一個元素選擇器
$("#id ~ .classname ")    //兄弟元素選擇器

eg:
    $("p > .ex1 ") // p元素的class=ex1的子元素
複製代碼

• 3.過濾選擇器(重點)

$("li:first")    //第一個li
$("li:last")     //最後一個li
$("li:even")     //挑選下標爲偶數的li
$("li:odd")      //挑選下標爲奇數的li

// 從0開始
$("li:eq(4)")    //下標等於4的li
$("li:gt(2)")    //下標大於2的li
$("li:lt(2)")    //下標小於2的li
$("li:not(#runoob)") //挑選除 id="runoob" 之外的全部li
複製代碼

• 3.2內容過濾選擇器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有選擇器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素
複製代碼

• 3.3可見性過濾選擇器

$("li:hidden")       //匹配全部不可見元素，或type爲hidden的元素
$("li:visible")      //匹配全部可見元素
複製代碼

• 3.4屬性過濾選擇器（適用於自定義屬性）

$("div[id]")        //全部含有 id 屬性的 div 元素
$("div[id='123']")        // id屬性值爲123的div 元素
$("div[id!='123']")        // id屬性值不等於123的div 元素
$("div[id^='qq']")        // id屬性值以qq開頭的div 元素
$("div[id$='zz']")        // id屬性值以zz結尾的div 元素
$("div[id*='bb']")        // id屬性值包含bb的div 元素
$("input[id][name$='man']") //多屬性選過濾，同時知足兩個屬性的條件的元素

eg:
    $("div[class='ex1']")  // class屬性值爲ex1的div 元素 
    $("div[ex='ex1']")  // ex屬性值爲ex1的div 元素 
複製代碼

• 3.5狀態過濾選擇器

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配選中的 input
$("option:selected")  // 匹配選中的 option
複製代碼

• 4.表單選擇器

$(":input")      //匹配全部 input, textarea, select 和 button 元素
$(":text")       //全部的單行文本框，$(":text") 等價於$("[type=text]")，推薦使用$("input:text")效率更高，下同
$(":password")   //全部密碼框
$(":radio")      //全部單選按鈕
$(":checkbox")   //全部複選框
$(":submit")     //全部提交按鈕
$(":reset")      //全部重置按鈕
$(":button")     //全部button按鈕
$(":file")       //全部文件域
複製代碼

（2）篩選器

• 過濾

$("p").eq(0)       //當前操做中第N個jQuery對象,相似索引
$('li').first()    //第一個元素
$('li').last()     //最後一個元素
$(this).hasClass("test")    //元素是否含有某個特定的類,返回布爾值
$('li').has('ul')  //包含特定後代的元素
複製代碼

• 查找

$("div").children()      //div中的每一個子元素,第一層
$("div").find("span")    //div中的包含的全部span元素,子子孫孫

$("p").next()          //緊鄰p元素後的一個同輩元素
$("p").nextAll()         //p元素以後全部的同輩元素
$("#test").nextUntil("#test2")    //id爲"#test"元素以後到id爲'#test2'之間全部的同輩元素,掐頭去尾

$("p").prev()            //緊鄰p元素前的一個同輩元素
$("p").prevAll()         //p元素以前全部的同輩元素
$("#test").prevUntil("#test2")    //id爲"#test"元素以前到id爲'#test2'之間全部的同輩元素,掐頭去尾

$("p").parent()          //每一個p元素的父元素
$("p").parents()         //每一個p元素的全部祖先元素,body,html
$("#test").parentsUntil("#test2")    //id爲"#test"元素到id爲'#test2'之間全部的父級元素,掐頭去尾

$("div").siblings()      //全部的同輩元素,不包括本身
複製代碼

2、jQuery HTML / CSS 方法

(1) 屬性操做

• 基本屬性操做

//
//當該方法用於返回屬性值，則返回第一個匹配元素的值。
$("img").attr("src");           //返回文檔中全部圖像的src屬性值

//當該方法用於設置屬性值，則爲匹配元素設置一個或多個屬性/值對。
$("img").attr("src","test.jpg");    //設置全部圖像的src屬性

$("img").removeAttr("src");      //將文檔中全部的img的src屬性刪除（多個）


//prop()、removeProp() 方法attr()、removeAttr()用法和特性同樣
$("input[type='checkbox']").prop("checked", true);    //選中複選框(返回第一個匹配元素的值。)
$("img").removeProp("src");       //刪除img的src屬性v
複製代碼

提示：如需檢索 HTML 屬性，請使用 attr() 方法代替。

提示：如需移除屬性，請使用 removeProp() 方法。

(2) CSS類

<script>
$("p").addClass("selected");    &emsp;&emsp;//爲全部p元素加上 'selected' 類
$("p").addClass("selected1 selected2");      // 給全部p加上selected1和selected2類（中間用空格隔開）

$("p").removeClass("selected");    //從p元素中刪除 'selected' 類
$("p").addClass("selected1 selected2");      // 移除全部p元素上的selected1和selected2類（中間用空格隔開）

$("p").toggleClass("selected");    //若是存在就刪除,不然就添加
//多個類，同上
複製代碼

(3) HTML代碼/文本/值

// 當該方法用於返回內容時，則返回(第一個)匹配元素的內容。
$('p').html();               //返回p元素的html內容(匹配第一個)
// 當該方法用於設置內容時，則重寫全部匹配元素的內容。
$("p").html("Hello <b>nick</b>!");  //設置p元素的html內容
複製代碼

提示：如需設置或返回被選元素的 innerHTML（文本 + HTML 標記），請使用 html() 方法。

//特性同html
$("input").val();             //獲取文本框中的值(匹配第一個)
$("input").val("nick");          //設置文本框中的內容
複製代碼

注意：val() 方法一般與 HTML 表單元素一塊兒使用。

// 當該方法用於返回內容時，則返回**(全部)**匹配元素的文本內容（會刪除 HTML 標記）。
$('p').text();               //返回p元素的文本內容(匹配全部！！！！！)
// 返回的是字符串形式

// 當該方法用於設置內容時，則重寫全部匹配元素的內容。
$("p").text("nick");           //設置p元素的文本內容
複製代碼

提示：如只需設置或返回被選元素的文本內容(不包括HTML標記)，請使用 text() 方法。

(惟一一個，用於返回內容時，是匹配全部的元素) ! ! ! ! ! ! ! ! ! ! ! !! ! ! !!

(4) CSS操做 ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

• 樣式

//
$("p").css("color");          //訪問查看p元素的color屬性(匹配第一個)
$("p").css("color","red");    //設置p元素的color屬性爲red
$("p").css({ "color": "red", "background": "yellow" });    //設置p元素的color爲red，background屬性爲yellow（設置多個屬性要用{}字典形式）
複製代碼

• 位置

$('p').offset()     //元素在當前視口的相對偏移,Object {top: 122, left: 260}(匹配第一個)
$('p').offset().top // 122
$('p').offset().left // 260
$('p').offset({top: 10, left:10}); // 給全部元素p添加「display:relaative,top:10px,left:10px」的樣式(匹配全部)

$("p").position()   //元素相對父元素的偏移,對可見元素有效(匹配第一個)，Object {top: 117, left: 250}
$("p").position().top // 117
$("p").position().left // 250
複製代碼

$(window).scrollTop()    //獲取滾輪滑的高度
$(window).scrollLeft()   //獲取滾輪滑的寬度
$(window).scrollTop('100')    //設置滾輪滑的高度爲100
複製代碼

提示：當滾動條位於最頂部-scrollTop(最左邊-scrollLeft)時，位置是 0。

• 尺寸**********************************************************

// (1) 當下面方法用於返回值時， 則返回（第一個匹配）元素的高度。
// (2) 當下面方法用於設置值時，則設置全部匹配元素的高度。
//
$("p").height();    //獲取p元素的高度(僅內容)
$("p").width();     //獲取p元素的寬度
$("p").height(30);  //設置全部p元素高度爲30px
$("p").width(30);  //設置全部p元素寬度爲30px

$("p:first").innerHeight()    //獲取第一個匹配元素內部區域高度(內容 + padding)
$("p:first").innerWidth()     //獲取第一個匹配元素內部區域寬度(內容 + padding)

$("p:first").outerHeight()    //匹配元素外部高度(內容 + padding + border)
$("p:first").outerWidth()     //匹配元素外部寬度(內容 + padding + border)
$("p:first").outerHeight(true)    //爲true時包括邊距(內容 + padding + border + margin)
複製代碼

border，margin，padding別忘了是兩邊都有，算的時候記得乘2

（5）文檔處理

• 內部插入

//
$("p").append("<b>nick</b>");    //每一個p元素內的尾部追加內容
$("p").appendTo("div"); // 將全部p元素（匹配的值）移動到全部的div元素內的尾部（注意，匹配的p元素是直接移動的，本來的位置都沒有了）

$("p").prepend("<b>Hello</b>");  //每一個p元素內的頭部追加內容
$("p").prependTo("div");    &emsp;   //將全部p元素（匹配的值）移動到全部的div元素內的頭部
複製代碼

• 外部插入

//
$("p").after("<b>nick</b>");     //每一個p元素同級以後插入內容
$("p").before("<b>nick</b>");    //在每一個p元素同級以前插入內容

// 下面的其實就是反過來
$("p").insertAfter("#test");     //全部p元素（匹配的值）插入到id爲test元素的後面
$("p").insertBefore("#test");    //全部p元素（匹配的值）插入到id爲test元素的前面
複製代碼

• 替換

$("p").replaceWith("<b>Paragraph. </b>");    //將全部匹配的元素替換成指定的HTML或DOM元素

// 下面同上
$("<b>Paragraph. </b>").replaceAll("p");     //用匹配的元素替換掉全部 selector匹配到的元素
複製代碼

• 刪除

//
$("p").empty();     //刪除匹配的元素集合中全部的子節點，不包括自己
$("p").remove();    //刪除全部匹配的元素,包括自己
$("p").detach();    //刪除全部匹配的元素(和remove()不一樣的是:全部綁定的事件、附加的數據會保留下來)
複製代碼

• 複製

$("p").clone();      //克隆元素並選中克隆的副本
$("p").clone(true);   //布爾值指事件處理函數是否會被複制
複製代碼

clone() 方法生成被選元素的副本，包含子節點、文本和屬性。

$("p").clone().appendTo("body"); // 這個和上面的appendTo例子不一樣就在於，把匹配的p元素複製一份，添加到body內的尾部，而不是以前的移動到尾部
複製代碼

3、jQuery 事件方法

詳細看這裏

（1）頁面載入

當 DOM（document object model 文檔對象模型）加載完畢且頁面徹底加載（包括圖像）時發生 ready 事件。

因爲該事件在文檔就緒後發生，所以把全部其餘的 jQuery 事件和函數置於該事件中是很是好的作法。

ready() 方法規定當 ready 事件發生時執行的代碼。

提示：ready() 方法不該該與 一塊兒使用。

$(document).ready(function(){
  do something...
});

//簡寫
$(function($) {
  do something...
});
複製代碼

(2) 頁面處理

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來不少便利，咱們推薦使用該方法，它簡化了 jQuery 代碼庫。

//on() 方法在被選元素及子元素上添加一個或多個事件處理程序。綁定多個用{}。
$("p").on("click", function(){
  alert( $(this).text() );
});

// 綁定多個事件
$('div').on({
    'click': function() {
      console.log($(this).text());
    },
	'mouseout': function() {
      console.log(`${$(this).text()}移出了！`);
	}
});        


$("p").one( "click", fun...)    // 主要區別：one 綁定一個一次性的事件處理函數
$("p").off( "click" )        //解綁一個事件
複製代碼

注意：使用 on() 方法添加的事件處理程序適用於當前及將來的元素（好比由腳本建立的新元素）。

提示：如需移除事件處理程序，請使用 off() 方法。

提示：如需添加只運行一次的事件而後移除，請使用 one() 方法。

(3)事件

$("p").click();      //單擊事件
$("p").dblclick();    //雙擊事件

$("input[type=text]").focus()  //元素得到焦點時,觸發 focus 事件
$("input[type=text]").blur()   //元素失去焦點時,觸發 blur事件

$("button").mousedown()//當按下鼠標時觸發事件
$("button").mouseup()  //元素上放鬆鼠標按鈕時觸發事件
複製代碼

$("p").mousemove()     //當鼠標指針在指定的元素中移動時觸發事件

$("p").mouseover()     //當鼠標指針位於元素及其子元素上方時觸發事件
$("p").mouseenter()    //當鼠標指針位於元素上方時觸發事件(與mouseover有區別！)

$("p").mouseout()     //當鼠標指針從元素及其子元素上移開時觸發事件
$("p").mouseleave()     //當鼠標指針從元素上移開時觸發事件(與mouseout有區別！)
複製代碼

區別：

• 區別一（mouseenter和mouseover）
  • mouseenter 事件只有在鼠標指針進入被選元素時被觸發
  • mouseover 事件在鼠標指針進入任意子元素時也會被觸發
• 區別二（）
  • mouseleave：只有在鼠標指針離開被選元素時被觸發
  • mouseout：在鼠標指針離開被選元素或任意子元素時都會被觸發

// 與 keydown 事件相關的事件順序：keydown -> keypress -> keyup

//當鍵盤或按鈕被按下時觸發事件 (window能夠換成別的元素，例如input)
$(window).keydown()   
 //keypress 事件與 keydown (window能夠換成別的元素) 事件相似。當按鈕被按下時發生該事件(區別看下面)
$(window).keypress()  

$("input").keyup()     //當按鈕被鬆開時觸發事件

// 請使用 event.which 屬性來返回哪一個鍵被按下（keydown）或者鬆開（keyup）
$("input").keydown(function(event){ // keyup同理
    $("div").html("Key: " + event.which);
});
// delete : 8
// enter: 13
// 空格: 32 
複製代碼

注意一：keypress 事件不會觸發全部的鍵（好比 ALT、CTRL、SHIFT、ESC）。請使用 keydown() 方法來檢查這些鍵。

// scroll 事件適用於全部可滾動的元素和 window 對象（瀏覽器窗口）。
$(window).scroll()     //當用戶滾動時觸發事件(window能夠換成別的元素)
$(window).resize()     //當調整瀏覽器窗口的大小時觸發事件

// 當元素的值改變時發生 change 事件（僅適用於表單字段）
$("input[type='text']").change()    //當元素的值發生改變時觸發事件
複製代碼

• 當用於 select 元素時，change 事件會在選擇某個選項時發生。
• 當用於 text field 或 text area 時，change 事件會在元素失去焦點時發生。並且初始化的時候要設置value屬性值(即便爲'')

// 當 textarea 或文本類型的 input 元素中的文本被選擇（標記）時，會發生 select 事件。
$("input").select()    //當input 元素中的文本被選擇時觸發事件
$("form").submit()     //當提交表單時觸發事件
複製代碼

(4) (event object) 對象

全部的事件函數均可以傳入event參數方便處理事件

$("p").click(function(event){  
 alert(event.type); //"click"  
}); 

(evnet object)屬性方法：
event.pageX   //事件發生時，鼠標距離網頁左上角的水平距離
event.pageY   //事件發生時，鼠標距離網頁左上角的垂直距離
event.type   //事件的類型
event.which   //按下了哪個鍵
event.data   //在事件對象上綁定數據，而後傳入事件處理函數
event.target  //性返回哪一個 DOM 元素觸發了事件。

//阻止事件的默認行爲(好比點擊連接，會自動打開新頁面\當點擊提交按鈕時阻止對錶單的提交\)
event.preventDefault()  
event.stopPropagation()  //中止事件向上層元素冒泡
複製代碼

提示：請使用event.isDefaultPrevented() 方法來檢查指定的事件上是否調用了 preventDefault() 方法

提示：請使用 event.isPropagationStopped() 方法來檢查指定的事件上是否調用了stopPropagation方法。

4、jQuery 效果 方法

(1) 基本

//
$("p").show()        //顯示隱藏的匹配元素
$("p").show("slow");    //參數表示速度,("slow","normal","fast")
$("p").show(1000);      //也可爲設置毫秒
// 當隱藏/顯示元素時，如何使用 callback 參數。
$("p").show(1000,function(){
	alert("Show()方法已完成!");
});

// hide() 和 show() 用法相同
$("p").hide()        //隱藏顯示的元素

$("p").toggle();      //toggle() 方法在被選元素上進行 hide() 和 show() 之間的切換。
複製代碼

注意：show() 適用於經過 jQuery 方法和 CSS 中 display:none 隱藏的元素（不適用於經過 visibility:hidden 隱藏的元素）

(2) 滑動-至關於以滑動的方式實現show()和hide()、toggle()

• slideDown(): 以滑動方式顯示元素
• slideUp():以滑動方式隱藏元素
• slideToggle():以滑動方式切換slideDown(),slideUp()

speed（("slow","normal","fast"，毫秒數），callback參數和show(),hide()方法同樣

$("p").slideDown("900");    //用900毫秒時間將段落滑下
$("p").slideUp("900");     //用900毫秒時間將段落滑上

$("p").slideToggle("900");  //用900毫秒時間將段落滑上，滑下
複製代碼

(3) 淡入淡出-至關於以淡入淡出的方式實現show()和hide()、toggle()

speed（("slow","normal","fast"，毫秒數），callback參數和show(),hide()方法同樣

$("p").fadeIn("900");        //用900毫秒時間將段落淡入
$("p").fadeOut("900");       //用900毫秒時間將段落淡出

$("p").fadeToggle("900");     //用900毫秒時間將段落淡入,淡出
$("p").fadeTo("slow", 0.6);    //用900毫秒時間將段落的透明度調整到0.6
複製代碼

(4) animate() 方法-執行 CSS 屬性集的自定義動畫

該方法經過 CSS 樣式將元素從一個狀態改變爲另外一個狀態。CSS屬性值是逐漸改變的，這樣就能夠建立動畫效果。

只有數字值可建立動畫（好比 "margin:30px"）。字符串值沒法建立動畫（好比 "background-color:red"）。

提示：請使用 "+=" 或 "-=" 來建立相對動畫。

注意： 當與 animate() 方法一塊兒使用時，該屬性名稱必須是駝峯寫法： 您必須使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此類推。

$("button").click(function(){
    $("#box").animate({height:"300px"});
});

$(".btn1").click(function(){
	$("body").animate({
		backgroundPositionX:"+=100px", 
		backgroundPositionY:"+=200px"
	});
});
複製代碼

更多例子見這裏 $.trim(str)

5、jQuery 雜項方法

$.trim(str)   //去除字符串兩端的空格

$("li").each(function(){ // 輸出每一個 <li> 元素的文本
    alert($(this).text())
}); &emsp;&emsp;

$.inArray( "John", arr )  //返回值John在數組arr中的索引位置，不存在返回-1  
$.grep() &emsp; //返回數組中符合某種標準的元素
$.extend()  //將多個對象，合併到第一個對象
$.makeArray() //將對象轉化爲數組
$.type()    //判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等
$.isArray() //判斷某個參數是否爲數組
$.isEmptyObject() //判斷某個對象是否爲空(不含有任何屬性)
$.isFunction()    //判斷某個參數是否爲函數
$.isPlainObject() //判斷某個參數是否爲用"{}"或"new Object"創建的對象
$.support()       //判斷瀏覽器是否支持某個特性
複製代碼