十分鐘玩轉 jQuery（絕對的乾貨）

1、簡介

定義 
　　jQuery創始人是美國John Resig，是優秀的Javascript框架；
　　jQuery是一個輕量級、快速簡潔的javaScript庫。

jQuery對象 
　　jQuery產生的對象時jQuery獨有的，只能本身調用

書寫規則 
　　支持鏈式操做；
　　在變量前加」」符號（var
var variable = jQuery 對象）；
　　注：此規定並非強制要求。

2、尋找元素

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

$('li:first')    //第一個元素
$('li:last')     //最後一個元素
 
$("tr:even")     //索引爲偶數的元素，從 0 開始
$("tr:odd")      //索引爲奇數的元素，從 0 開始
 
$("tr:eq(1)")    //給定索引值的元素
$("tr:gt(0)")    //大於給定索引值的元素
$("tr:lt(2)")    //小於給定索引值的元素
 
$(":focus")      //當前獲取焦點的元素
$(":animated")   //正在執行動畫效果的元素

內容選擇器

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

表單選擇器

$(":input")      //匹配全部 input, textarea, select 和 button 元素
$(":text")       //全部的單行文本框
$(":password")   //全部密碼框
$(":radio")      //全部單選按鈕
$(":checkbox")   //全部複選框
$(":submit")     //全部提交按鈕
$(":reset")      //全部重置按鈕
$(":button")     //全部button按鈕
$(":file")       //全部文件域
 
$("input:checked")    //全部選中的元素
$("select option:selected")    //select中全部選中的option元素

篩選器 
過濾

$("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()      //全部的同輩元素,不包括本身

3、屬性操做

基本屬性操做

$("img").attr("src");    　　　　　　 //返回文檔中全部圖像的src屬性值
$("img").attr("src","test.jpg");    //設置全部圖像的src屬性
$("img").removeAttr("src");    　　　//將文檔中圖像的src屬性刪除
 
$("input[type='checkbox']").prop("checked", true);    //選中複選框
$("input[type='checkbox']").prop("checked", false);
$("img").removeProp("src");    　　 //刪除img的src屬性

CSS類

$("p").addClass("selected");    　　//爲p元素加上 'selected' 類
$("p").removeClass("selected");    //從p元素中刪除 'selected' 類
$("p").toggleClass("selected");    //若是存在就刪除,不然就添加

HTML代碼/文本/值

$('p').html();    　　　　　　　　　　 //返回p元素的html內容
$("p").html("Hello <b>nick</b>!");  //設置p元素的html內容
$('p').text();    　　　　　　　　　　 //返回p元素的文本內容
$("p").text("nick");    　　　　　　　//設置p元素的文本內容
$("input").val();    　　　　　　　　 //獲取文本框中的值
$("input").val("nick");     　　　　 //設置文本框中的內容

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
$('p').offset().left
$("p").position()   //元素相對父元素的偏移,對可見元素有效，Object {top: 117, left: 250}
 
$(window).scrollTop()    //獲取滾輪滑的高度
$(window).scrollLeft()   //獲取滾輪滑的寬度
$(window).scrollTop('100')    //設置滾輪滑的高度爲100

尺寸

$("p").height();    //獲取p元素的高度
$("p").width();     //獲取p元素的寬度
 
$("p:first").innerHeight()    //獲取第一個匹配元素內部區域高度(包括補白、不包括邊框)
$("p:first").innerWidth()     //獲取第一個匹配元素內部區域寬度(包括補白、不包括邊框)
 
$("p:first").outerHeight()    //匹配元素外部高度(默認包括補白和邊框)
$("p:first").outerWidth()     //匹配元素外部寬度(默認包括補白和邊框)
$("p:first").outerHeight(true)    //爲true時包括邊距

5、文檔處理

內部插入

$("p").append("<b>nick</b>");    //每一個p元素內後面追加內容
$("p").appendTo("div");    　　　 //p元素追加到div內後
$("p").prepend("<b>Hello</b>");  //每一個p元素內前面追加內容
$("p").prependTo("div");    　   //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)   //布爾值指事件處理函數是否會被複制

6、事件

頁面載入 
　　當頁面載入成功後再運行的函數事件

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

頁面處理

//bind 爲每一個匹配元素綁定事件處理函數，綁定多個用{}。
$("p").bind("click", function(){
  alert( $(this).text() );
});
$(menuF).bind({
    "mouseover":function () {
     $(menuS).parent().removeClass("hide");
     },"mouseout":function () {
     $(menuS).parent().addClass("hide");
}
});         
 
 
$("p").one( "click", fun...)    //one 綁定一個一次性的事件處理函數
$("p").unbind( "click" )        //解綁一個事件

頁面委派

// 與bind 不一樣的是當時間發生時纔去臨時綁定。
$("p").delegate("click",function(){
  do something...
});
 
$("p").undelegate();    　　　//p元素刪除由 delegate() 方法添加的全部事件
$("p").undelegate("click")   //從p元素刪除由 delegate() 方法添加的全部click事件

事件

$("p").click();    　　//單擊事件
$("p").dblclick();    //雙擊事件
$("input[type=text]").focus()  //元素得到焦點時,觸發 focus 事件
$("input[type=text]").blur()   //元素失去焦點時,觸發 blur事件
$("button").mousedown()//當按下鼠標時觸發事件
$("button").mouseup()  //元素上放鬆鼠標按鈕時觸發事件
$("p").mousemove()     //當鼠標指針在指定的元素中移動時觸發事件
$("p").mouseover()     //當鼠標指針位於元素上方時觸發事件
$("p").mouseout()    　//當鼠標指針從元素上移開時觸發事件
$(window).keydown()    //當鍵盤或按鈕被按下時觸發事件
$(window).keypress()   //當鍵盤或按鈕被按下時觸發事件,每輸入一個字符都觸發一次
$("input").keyup()     //當按鈕被鬆開時觸發事件
$(window).scroll()     //當用戶滾動時觸發事件
$(window).resize()     //當調整瀏覽器窗口的大小時觸發事件
$("input[type='text']").change()    //當元素的值發生改變時觸發事件
$("input").select()    //當input 元素中的文本被選擇時觸發事件
$("form").submit()     //當提交表單時觸發事件
$(window).unload()     //用戶離開頁面時

(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 　//事件針對的網頁元素
event.preventDefault() 　//阻止事件的默認行爲(好比點擊連接，會自動打開新頁面)
event.stopPropagation()  //中止事件向上層元素冒泡

7、效果

基本

$("p").show()    　　　　//顯示隱藏的匹配元素
$("p").show("slow");    //參數表示速度,("slow","normal","fast"),也可爲900毫秒
$("p").hide()    　　　　//隱藏顯示的元素
$("p").toggle();   　　 //切換 顯示/隱藏

滑動

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

淡入淡出

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

8、對象訪問

$.trim() 　　//去除字符串兩端的空格
$.each() 　　//遍歷一個數組或對象，for循環
$.inArray() //返回一個值在數組中的索引位置，不存在返回-1  
$.grep() 　 //返回數組中符合某種標準的元素
$.extend()  //將多個對象，合併到第一個對象
$.makeArray() //將對象轉化爲數組
$.type()    //判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等
$.isArray() //判斷某個參數是否爲數組
$.isEmptyObject() //判斷某個對象是否爲空(不含有任何屬性)
$.isFunction()    //判斷某個參數是否爲函數
$.isPlainObject() //判斷某個參數是否爲用"{}"或"new Object"創建的對象
$.support()       //判斷瀏覽器是否支持某個特性

模擬each()內部實現機制

9、插件拓展機制

//方式一 jQuery.fn.extend({   check: function() {     return this.each(function() { this.checked = true; });   },   uncheck: function() {     return this.each(function() { this.checked = false; });   } });   $("input[type=checkbox]").check(); $("input[type=radio]").uncheck(); //方式二 jQuery.extend({   min: function(a, b) { return a < b ? a : b; },    //三元運算   max: function(a, b) { return a > b ? a : b; } });   jQuery.min(2,3);     //2 jQuery.max(4,5);    //5 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body>     <div class="title">111</div>     <div class="title">222</div>       <script src="../../jquery-1.12.4.js"></script>     <script>         jQuery.fn.extend({             show1: function () {                 var val = this.text();                 val = val + "sb";                 return val;             },             show2: function () {               }         });         var ret = $(".title").show1();         console.log(ret);             jQuery.extend({             s1: function (arg) {                 var val = $(arg).text();                 return val + "sb";             },             s2: function () {               }         });         var ret2 = $.s1(".title");         console.log(ret2);     </script> </body> </html>