一、簡(jiǎn)介

定義

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

jQuery是一個(gè)輕量級(jí)、快速簡(jiǎn)潔的javaScript庫(kù)。

jQuery對(duì)象

jQuery產(chǎn)生的對(duì)象時(shí)jQuery獨(dú)有的，只能自己調(diào)用

書寫規(guī)則

支持鏈?zhǔn)讲僮鳎?/p>

在變量前加””符號(hào)（var”符號(hào)（varvariable = jQuery 對(duì)象）；

注：此規(guī)定并不是強(qiáng)制要求。

二、尋找元素

選擇器

基本選擇器、層級(jí)選擇器、屬性選擇器 與CSS類似，這里不再細(xì)說，詳細(xì)猛戳這里。

基本篩選器

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

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

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

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

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

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

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

$(":focus")//當(dāng)前獲取焦點(diǎn)的元素

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

內(nèi)容選擇器

$("div:contains('nick')")//包含nick文本的元素

$("td:empty")//不包含子元素或者文本的空元素

$("div:has(p)")//含有選擇器所匹配的元素

$("td:parent")//含有子元素或者文本的元素

表單選擇器

$(":input")//匹配所有 input, textarea, select 和 button 元素

$(":text")//所有的單行文本框

$(":password")//所有密碼框

$(":radio")//所有單選按鈕

$(":checkbox")//所有復(fù)選框

$(":submit")//所有提交按鈕

$(":reset")//所有重置按鈕

$(":button")//所有button按鈕

$(":file")//所有文件域

$("input:checked")//所有選中的元素

$("select option:selected")//select中所有選中的option元素

篩選器

過濾

$("p").eq(0)//當(dāng)前操作中第N個(gè)jQuery對(duì)象,類似索引

$('li').first()//第一個(gè)元素

$('li').last()//最后一個(gè)元素

$(this).hasClass("test")//元素是否含有某個(gè)特定的類,返回布爾值

$('li').has('ul')//包含特定后代的元素

查找

$("div").children()//div中的每個(gè)子元素,第一層

$("div").find("span")//div中的包含的所有span元素,子子孫孫

$("p").next()//緊鄰p元素后的一個(gè)同輩元素

$("p").nextAll()//p元素之后所有的同輩元素

$("#test").nextUntil("#test2")//id為"#test"元素之后到id為'#test2'之間所有的同輩元素,掐頭去尾

$("p").prev()//緊鄰p元素前的一個(gè)同輩元素

$("p").prevAll()//p元素之前所有的同輩元素

$("#test").prevUntil("#test2")//id為"#test"元素之前到id為'#test2'之間所有的同輩元素,掐頭去尾

$("p").parent()//每個(gè)p元素的父元素

$("p").parents()//每個(gè)p元素的所有祖先元素,body,html

$("#test").parentsUntil("#test2")//id為"#test"元素到id為'#test2'之間所有的父級(jí)元素,掐頭去尾

$("div").siblings()//所有的同輩元素,不包括自己

三、屬性操作

基本屬性操作

$("img").attr("src");//返回文檔中所有圖像的src屬性值

$("img").attr("src","test.jpg");//設(shè)置所有圖像的src屬性

$("img").removeAttr("src");//將文檔中圖像的src屬性刪除

$("input[type='checkbox']").prop("checked",true);//選中復(fù)選框

$("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內(nèi)容

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

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

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

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

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

四、CSS操作

樣式

$("p").css("color");//訪問查看p元素的color屬性

$("p").css("color","red");//設(shè)置p元素的color屬性為red

$("p").css({"color":"red","background":"yellow"});//設(shè)置p元素的color為red，background屬性為yellow（設(shè)置多個(gè)屬性要用{}字典形式）

位置

$('p').offset()//元素在當(dāng)前視口的相對(duì)偏移,Object {top: 122, left: 260}

$('p').offset().top

$('p').offset().left

$("p").position()//元素相對(duì)父元素的偏移,對(duì)可見元素有效，Object {top: 117, left: 250}

$(window).scrollTop()//獲取滾輪滑的高度

$(window).scrollLeft()//獲取滾輪滑的寬度

$(window).scrollTop('100')//設(shè)置滾輪滑的高度為100

尺寸

$("p").height();//獲取p元素的高度

$("p").width();//獲取p元素的寬度

$("p:first").innerHeight()//獲取第一個(gè)匹配元素內(nèi)部區(qū)域高度(包括補(bǔ)白、不包括邊框)

$("p:first").innerWidth()//獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾?包括補(bǔ)白、不包括邊框)

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

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

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

五、文檔處理

內(nèi)部插入

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

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

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

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

外部插入

$("p").after("nick");//每個(gè)p元素同級(jí)之后插入內(nèi)容

$("p").before("nick");//在每個(gè)p元素同級(jí)之前插入內(nèi)容

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

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

替換

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

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

刪除

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

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

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

復(fù)制

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

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

六、事件

頁(yè)面載入

當(dāng)頁(yè)面載入成功后再運(yùn)行的函數(shù)事件

$(document).ready(function(){

dosomething...

});

//簡(jiǎn)寫

$(function($){

dosomething...

});

頁(yè)面處理

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

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

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

頁(yè)面委派

// 與bind 不同的是當(dāng)時(shí)間發(fā)生時(shí)才去臨時(shí)綁定。

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

dosomething...

});

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

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

事件

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

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

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

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

$("button").mousedown()//當(dāng)按下鼠標(biāo)時(shí)觸發(fā)事件

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

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

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

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

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

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

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

$(window).scroll()//當(dāng)用戶滾動(dòng)時(shí)觸發(fā)事件

$(window).resize()//當(dāng)調(diào)整瀏覽器窗口的大小時(shí)觸發(fā)事件

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

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

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

$(window).unload()//用戶離開頁(yè)面時(shí)

(event object) 對(duì)象

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

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

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

});

(evnetobject)屬性方法：

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

event.pageY//事件發(fā)生時(shí)，鼠標(biāo)距離網(wǎng)頁(yè)左上角的垂直距離

event.type//事件的類型

event.which//按下了哪一個(gè)鍵

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

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

event.preventDefault()//阻止事件的默認(rèn)行為(比如點(diǎn)擊鏈接，會(huì)自動(dòng)打開新頁(yè)面)

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

七、效果

基本

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

$("p").show("slow");//參數(shù)表示速度,("slow","normal","fast"),也可為900毫秒

$("p").hide()//隱藏顯示的元素

$("p").toggle();//切換 顯示/隱藏

滑動(dòng)

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

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

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

淡入淡出

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

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

$("p").fadeToggle("900");//用900毫秒時(shí)間將段落淡入,淡出

$("p").fadeTo("slow",0.6);//用900毫秒時(shí)間將段落的透明度調(diào)整到0.6

八、對(duì)象訪問

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

$.each()//遍歷一個(gè)數(shù)組或?qū)ο?，for循環(huán)

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

$.grep()//返回?cái)?shù)組中符合某種標(biāo)準(zhǔn)的元素

$.extend()//將多個(gè)對(duì)象，合并到第一個(gè)對(duì)象

$.makeArray()//將對(duì)象轉(zhuǎn)化為數(shù)組

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

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

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

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

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

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

模擬each()內(nèi)部實(shí)現(xiàn)機(jī)制

九、插件拓展機(jī)制

//方式一

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

轉(zhuǎn)自：http://www.cnblogs.com/suoning/p/5683047.html