一壶硅、簡介

定義

jQuery創(chuàng)始人是美國John Resig瘾境，是優(yōu)秀的Javascript框架颅崩；

jQuery是一個輕量級巩螃、快速簡潔的javaScript庫。

jQuery對象

jQuery產生的對象時jQuery獨有的娃磺，只能自己調用

書寫規(guī)則

支持鏈式操作嗜价；

在變量前加””符號（var”符號（varvariable = jQuery 對象）田度；

注：此規(guī)定并不是強制要求湾宙。

二樟氢、尋找元素

選擇器

基本選擇器、層級選擇器侠鳄、屬性選擇器 與CSS類似埠啃，這里不再細說，詳細猛戳這里伟恶。

基本篩選器

$('li:first')//第一個元素

$('li:last')//最后一個元素

$("tr:even")//索引為偶數(shù)的元素碴开，從 0 開始

$("tr:odd")//索引為奇數(shù)的元素，從 0 開始

$("tr:eq(1)")//給定索引值的元素

$("tr:gt(0)")//大于給定索引值的元素

$("tr:lt(2)")//小于給定索引值的元素

$(":focus")//當前獲取焦點的元素

$(":animated")//正在執(zhí)行動畫效果的元素

內容選擇器

$("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()//所有的同輩元素,不包括自己

三博秫、屬性操作

基本屬性操作

$("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' 類

//只需要通過空格來間隔 class 值即可一次性清除掉多個 class

$('.xx').removeClass('a b c');

$("p").toggleClass("selected");//如果存在就刪除,否則就添加

HTML代碼/文本/值

$('p').html();//返回p元素的html內容

$("p").html("Hello nick!");//設置p元素的html內容

$('p').text();//返回p元素的文本內容

$("p").text("nick");//設置p元素的文本內容

$("input").val();//獲取文本框中的值

$("input").val("nick");//設置文本框中的內容

四潦牛、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()//獲取第一個匹配元素內部區(qū)域高度(包括補白罢绽、不包括邊框)

$("p:first").innerWidth()//獲取第一個匹配元素內部區(qū)域寬度(包括補白、不包括邊框)

$("p:first").outerHeight()//匹配元素外部高度(默認包括補白和邊框)

$("p:first").outerWidth()//匹配元素外部寬度(默認包括補白和邊框)

$("p:first").outerHeight(true)//為true時包括邊距

五静盅、文檔處理

內部插入

$("p").append("nick");//每個p元素內后面追加內容

$("p").appendTo("div");//p元素追加到div內后

$("p").prepend("Hello");//每個p元素內前面追加內容

$("p").prependTo("div");//p元素追加到div內前

外部插入

$("p").after("nick");//每個p元素同級之后插入內容

$("p").before("nick");//在每個p元素同級之前插入內容

$("p").insertAfter("#test");//所有p元素插入到id為test元素的后面

$("p").insertBefore("#test");//所有p元素插入到id為test元素的前面

替換

$("p").replaceWith("Paragraph. ");//將所有匹配的元素替換成指定的HTML或DOM元素

$("Paragraph. ").replaceAll("p");//用匹配的元素替換掉所有 selector匹配到的元素

刪除

$("p").empty();//刪除匹配的元素集合中所有的子節(jié)點，不包括本身

$("p").remove();//刪除所有匹配的元素,包括本身

$("p").detach();//刪除所有匹配的元素(和remove()不同的是:所有綁定的事件寝殴、附加的數(shù)據(jù)會保留下來)

復制

$("p").clone()//克隆元素并選中克隆的副本

$("p").clone(true)//布爾值指事件處理函數(shù)是否會被復制

六蒿叠、事件

頁面載入

當頁面載入成功后再運行的函數(shù)事件

$(document).ready(function(){

dosomething...

});

//簡寫

$(function($){

dosomething...

});

頁面處理

//bind 為每個匹配元素綁定事件處理函數(shù)，綁定多個用{}蚣常。

$("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 綁定一個一次性的事件處理函數(shù)

$("p").unbind("click")//解綁一個事件

頁面委派

// 與bind 不同的是當時間發(fā)生時才去臨時綁定市咽。

$("p").delegate("click",function(){

dosomething...

});

$("p").undelegate();//p元素刪除由 delegate() 方法添加的所有事件

$("p").undelegate("click")//從p元素刪除由 delegate() 方法添加的所有click事件

事件

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

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

$("input[type=text]").focus()//元素獲得焦點時,觸發(fā) focus 事件

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

$("button").mousedown()//當按下鼠標時觸發(fā)事件

$("button").mouseup()//元素上放松鼠標按鈕時觸發(fā)事件

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

$("p").mouseover()//當鼠標指針位于元素上方時觸發(fā)事件

$("p").mouseout()//當鼠標指針從元素上移開時觸發(fā)事件

$(window).keydown()//當鍵盤或按鈕被按下時觸發(fā)事件

$(window).keypress()//當鍵盤或按鈕被按下時觸發(fā)事件,每輸入一個字符都觸發(fā)一次

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

$(window).scroll()//當用戶滾動時觸發(fā)事件

$(window).resize()//當調整瀏覽器窗口的大小時觸發(fā)事件

$("input[type='text']").change()//當元素的值發(fā)生改變時觸發(fā)事件

$("input").select()//當input 元素中的文本被選擇時觸發(fā)事件

$("form").submit()//當提交表單時觸發(fā)事件

$(window).unload()//用戶離開頁面時

(event object) 對象

所有的事件函數(shù)都可以傳入event參數(shù)方便處理事件

$("p").click(function(event){

alert(event.type);//"click"

});

(evnetobject)屬性方法：

event.pageX//事件發(fā)生時，鼠標距離網(wǎng)頁左上角的水平距離

event.pageY//事件發(fā)生時抵蚊，鼠標距離網(wǎng)頁左上角的垂直距離

event.type//事件的類型

event.which//按下了哪一個鍵

event.data//在事件對象上綁定數(shù)據(jù)施绎，然后傳入事件處理函數(shù)

event.target//事件針對的網(wǎng)頁元素

event.preventDefault()//阻止事件的默認行為(比如點擊鏈接溯革，會自動打開新頁面)

event.stopPropagation()//停止事件向上層元素冒泡

七、效果

基本

$("p").show()//顯示隱藏的匹配元素

$("p").show("slow");//參數(shù)表示速度,("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

八致稀、對象訪問

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

$.each()//遍歷一個數(shù)組或對象，for循環(huán)

$.inArray()//返回一個值在數(shù)組中的索引位置俱尼，不存在返回-1

$.grep()//返回數(shù)組中符合某種標準的元素

$.extend()//將多個對象抖单，合并到第一個對象

$.makeArray()//將對象轉化為數(shù)組

$.type()//判斷對象的類別（函數(shù)對象、日期對象遇八、數(shù)組對象矛绘、正則對象等等

$.isArray()//判斷某個參數(shù)是否為數(shù)組

$.isEmptyObject()//判斷某個對象是否為空(不含有任何屬性)

$.isFunction()//判斷某個參數(shù)是否為函數(shù)

$.isPlainObject()//判斷某個參數(shù)是否為用"{}"或"new Object"建立的對象

$.support()//判斷瀏覽器是否支持某個特性

模擬each()內部實現(xiàn)機制

九、插件拓展機制

//方式一

jQuery.fn.extend({

check:function(){

returnthis.each(function(){this.checked=true;});

},

uncheck:function(){

returnthis.each(function(){this.checked=false;});

}

});

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

//方式二

jQuery.extend({

min:function(a,b){returna

max:function(a,b){returna>b?a:b;}

});

jQuery.min(2,3);//2

jQuery.max(4,5);//5

Title

111

222

jQuery.fn.extend({

show1:function(){

varval=this.text();

val=val+"sb";

returnval;

},

show2:function(){

}

});

varret=$(".title").show1();

console.log(ret);

jQuery.extend({

s1:function(arg){

varval=$(arg).text();

returnval+"sb";

},

s2:function(){

}

});

varret2=$.s1(".title");

console.log(ret2);