我喜歡在本子上面寫(xiě)日記就轧，今天頭一次在簡(jiǎn)書(shū)上寫(xiě)搀捷，但不是日記茂装，算是復(fù)習(xí)jq摘抄吧怎诫。

一.選擇器

1.基本選擇器

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

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

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

$("tr:odd")? ? ? //索引為奇數(shù)的元素蓝晒，從 0 開(kāi)始

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

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

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

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

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

2.內(nèi)容選擇器

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

3.表單選擇器

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

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

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

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

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

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

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

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

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

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

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

4.篩選器

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

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

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

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

$('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屬性

$("p").addClass("selected");//為p元素加上 'selected' 類(lèi)

$("p").removeClass("selected");//從p元素中刪除 'selected' 類(lèi)

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

$('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操作

1.樣式

$("p").css("color");//訪(fǎng)問(wèn)查看p元素的color屬性

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

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

2.位置

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

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

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

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

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

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

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

3.尺寸

$("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í)包括邊距

四.文檔處理

1.內(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)前

2.外部插入

$("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元素的前面

3.替換

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

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

4.刪除

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

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

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

5.復(fù)制

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

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

五.事件

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

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

//簡(jiǎn)寫(xiě)$(function($) { do something...});

2.事件觸發(fā)

$("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)指針從元素上移開(kāi)時(shí)觸發(fā)事件

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

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

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

$(window).scroll()? ? //當(dāng)用戶(hù)滾動(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()? ? //用戶(hù)離開(kāi)頁(yè)面時(shí)

3.(event object)?對(duì)象? ? 所有的事件函數(shù)都可以傳入event參數(shù)方便處理事件

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

(evnet object)屬性方法：

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

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

event.type 　　//事件的類(lèi)型

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

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

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

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

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

六.效果及對(duì)象訪(fǎng)問(wèn)

1.基本，滑動(dòng)变擒，淡入淡出

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

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

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

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

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

2.對(duì)象訪(fǎng)問(wèn)

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

$.each() 　　//遍歷一個(gè)數(shù)組或?qū)ο笄拗荆琭or循環(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ì)象的類(lèi)別（函數(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è)特性

七.插件拓展機(jī)制

//方式一

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; },? ? //三元運(yùn)算

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

});

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

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

八.實(shí)例展示

1.返回頂部 2.菜單切換 3.滾動(dòng)菜單 4.淡入淡出 5.滑動(dòng) 6.隱藏與顯示

7.添加與刪除標(biāo)簽 8.商城商品放大鏡? 9.商城菜單 10.拖動(dòng)面板?

11.模態(tài)對(duì)話(huà)框 12.輪播圖? 13.編輯框 14.左側(cè)菜單

實(shí)例展示例子整理了乐导，就是不知道怎么展示呢苦丁，如果展示代碼的話(huà)很很拉雜，求大家給點(diǎn)建議物臂。