常用選擇器

$('#div1') //id為div1的節(jié)點车伞，如<div id='div1'></div>

$('.red') //使用樣式red的節(jié)點刘陶，如<span class="red"></span>

$('span') //所有的span結(jié)點轧钓，一個包裝集

$('p span') //p標簽下的所有span節(jié)點舀武，后代節(jié)點

$('p>span') //p標簽下的所有span子節(jié)點，子代節(jié)點

$('*') //所有節(jié)點

$("div,span,p.cls") //選取所有<div>猿棉，<span>和擁有class為cls的<p>標簽的一組元素

1、基本篩選器

$('span:first') //第一個節(jié)點

$('span:last') //最后一個節(jié)點

$("td:even") //索引為偶數(shù)的節(jié)點屑咳，從 0 開始

$("td:odd") //索引為奇數(shù)的節(jié)點萨赁，從 0 開始

$("td:eq(1)") //給定索引值的節(jié)點

$("td:gt(0)") //大于給定索引值的節(jié)點

$("td:lt(2)") //小于給定索引值的節(jié)點

$(":focus") //當前獲取焦點的節(jié)點

$(":animated") //正在執(zhí)行動畫效果的節(jié)點

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

$("div:contains('hello')") //包含hello文本的節(jié)點

$("td:empty") //不包含子節(jié)點或者文本的空節(jié)點

$("div:has(p)") //含有選擇器所匹配的節(jié)點

$("td:parent") //含有子節(jié)點或者文本的節(jié)點

3兆龙、表單選擇器

$("input:checked") //所有選中的節(jié)點

$("select option:selected") //select中所有選中的option節(jié)點

$(":input") //匹配所有 input, textarea, select 和 button 節(jié)點

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

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

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

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

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

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

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

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

4杖爽、篩選與查找

$("p").eq(0) //當前操作中第N個jQuery對象,類似索引

$('li').first() //第一個節(jié)點

$('li').last() //最后一個節(jié)點

$(this).hasClass("node") //節(jié)點是否含有某個特定的類,返回布爾值

$('li').has('ul') //包含特定后代的節(jié)點

$("div").children() //div中的每個子節(jié)點,第一層

$("div").find("span") //查找div下的所有span節(jié)點

$("p").next() 　　　//緊鄰p節(jié)點后的一個同輩節(jié)點

$("p").nextAll() //p節(jié)點之后所有的同輩節(jié)點

$("#node").nextUntil("#node2") //id為"#node"節(jié)點之后到id為'#node2'之間所有的同輩節(jié)點,掐頭去尾

$("p").prev() //緊鄰p節(jié)點前的一個同輩節(jié)點

$("p").prevAll() //p節(jié)點之前所有的同輩節(jié)點

$("#node").prevUntil("#node2") //id為"#node"節(jié)點之前到id為'#node2'之間所有的同輩節(jié)點,掐頭去尾

$("p").parent() //每個p節(jié)點的父節(jié)點

$("p").parents() //每個p節(jié)點的所有祖先節(jié)點,body,html

$("#node").parentsUntil("#node2") //id為"#node"節(jié)點到id為'#node2'之間所有的父級節(jié)點,掐頭去尾

$("div").siblings() //所有的同輩節(jié)點,不包括自己

5、屬性操作

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

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

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

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

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

$("img").removeProp("src"); 　　 //刪除img的src屬性

6紫皇、樣式操作

$("p").addClass("selected"); 　　//為p節(jié)點加上 'selected' 類

$("p").removeClass("selected"); //從p節(jié)點中刪除 'selected' 類

$("p").toggleClass("selected"); //如果存在就刪除,否則就添加HTML代碼/文本/值

7掂林、內(nèi)容操作

$('p').html(); 　　//返回p節(jié)點的html內(nèi)容

$("p").html("Hello <b>hello</b>!"); //設置p節(jié)點的html內(nèi)容

$('p').text(); 　　　 //返回p節(jié)點的文本內(nèi)容

$("p").text("hello"); 　　　　　　　//設置p節(jié)點的文本內(nèi)容

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

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

8、CSS操作

$("p").css("color"); //訪問查看p節(jié)點的color屬性

$("p").css("color","red"); //設置p節(jié)點的color屬性為red

$("p").css({ "color": "red", "background": "yellow" }); //設置p節(jié)點的color為red坝橡，background屬性為yellow（設置多個屬性要用{}字典形式）

9泻帮、定位與偏移

$('p').offset() //節(jié)點在當前視口的相對偏移,對象 {top: 5, left: 9}

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

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

$("p").position() //節(jié)點相對父節(jié)點的偏移,對可見節(jié)點有效，Object {top: 5, left: 8}

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

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

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

10计寇、尺寸

$("p").height(); //獲取p節(jié)點的高度

$("p").width(); //獲取p節(jié)點的寬度

$("p:first").innerHeight() //獲取第一個匹配節(jié)點內(nèi)部區(qū)域高度(包括補白锣杂、不包括邊框)

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

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

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

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

11番宁、DOM內(nèi)部插入

$("p").append("<b>hello</b>"); //每個p節(jié)點內(nèi)后面追加內(nèi)容

$("p").appendTo("div"); 　　　 //p節(jié)點追加到div內(nèi)后

$("p").prepend("<b>Hello</b>"); //每個p節(jié)點內(nèi)前面追加內(nèi)容

$("p").prependTo("div"); 　 //p節(jié)點追加到div內(nèi)前

12元莫、DOM外部插入

$("p").after("<b>hello</b>"); //每個p節(jié)點同級之后插入內(nèi)容

$("p").before("<b>hello</b>"); //在每個p節(jié)點同級之前插入內(nèi)容

$("p").insertAfter("#node"); //所有p節(jié)點插入到id為node節(jié)點的后面

$("p").insertBefore("#node"); //所有p節(jié)點插入到id為node節(jié)點的前面

13、DOM替換

$("p").replaceWith("<b>Paragraph. </b>"); //將所有匹配的節(jié)點替換成指定的HTML或DOM節(jié)點

$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的節(jié)點替換掉所有 selector匹配到的節(jié)點

14、DOM刪除

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

$("p").remove(); //刪除所有匹配的節(jié)點,包括本身

$("p").detach(); //刪除所有匹配的節(jié)點(和remove()不同的是:所有綁定的事件曹质、附加的數(shù)據(jù)會保留下來)

15唱矛、DOM復制

$("p").clone() 　　//克隆節(jié)點并選中克隆的副本

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

16、DOM加載完成事件

(function($) { 您的代碼... });

17瞧掺、綁定事件

//bind 為每個匹配節(jié)點綁定事件處理函數(shù)，綁定多個用{}。

$("p").bind("click", function(){ alert( $(this).text() ); });

$('#div1').bind({ "mouseover":function () {

$('#div1').parent().removeClass("hide");

},"mouseout":function () {

$('#div1').parent().addClass("hide");

}

});

$("p").one( "click", function(){}) //事件綁定后只會執(zhí)行一次

$("p").unbind( "click" ) //反綁一個事件 // 與bind 不同的是當時間發(fā)生時才去臨時綁定企锌。

$("p").delegate("click",function(){ 您的代碼 });

$("p").undelegate(); 　　　//p節(jié)點刪除由 delegate() 方法添加的所有事件

$("p").undelegate("click") //從p節(jié)點刪除由 delegate() 方法添加的所有click事件

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

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

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

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

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

$("button").mouseup() //節(jié)點上放松鼠標按鈕時觸發(fā)事件

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

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

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

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

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

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

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

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

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

$("input").select() //當input 節(jié)點中的文本被選擇時觸發(fā)事件

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

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

18、事件對象

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

(evnet object)屬性方法：

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

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

event.type 　　//事件的類型

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

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

event.target 　//事件針對的網(wǎng)頁節(jié)點

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

event.stopPropagation() //停止事件向上層節(jié)點冒泡

19抖坪、動態(tài)事件綁定

$("p").on("click", function(){ 
    alert( $(this).text() ); 
});  //當p中增加span時仍然有效

20萍鲸、動畫效果

$("p").show() 　　　　//顯示隱藏的匹配節(jié)點

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

$("p").hide() 　　　　//隱藏顯示的節(jié)點

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

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

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

$("p").slideToggle("600"); //用600毫秒時間將段落滑上，滑下淡入淡出

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

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

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

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

21擦俐、工具方法

$("#form1").serialize() //序列表表格內(nèi)容為字符串猿推。

$("select, :radio").serializeArray(); //序列化表單元素為數(shù)組返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)

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

$.each() 　　//遍歷一個數(shù)組或?qū)ο螅?/p>

  $.each(data,function(i,obj){})

for循環(huán)

 for(var i = 0; i < 5; i++){

 }

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

$.grep() 　 //返回數(shù)組中符合某種標準的節(jié)點

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

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

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

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

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

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

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

22秽五、AJAX

//保存數(shù)據(jù)到服務器，成功時顯示信息

$.ajax({
        type: "POST",
        url: "xxxx",
        data: {},
        success: function(data){
                console.log(data);
       }饥悴，
      error:function(data){
               console.log(data);
      }
});