jQuery是一個輕量級、快速簡潔的javaScript庫。
參考：http://www.php100.com/manual/jquery/
尋找元素
表單選擇器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的單行文本框
$(":password") //所有密碼框
$(":radio") //所有單選按鈕
$(":checkbox") //所有複選框
$(":submit") //所有提交按鈕
$(":reset") //所有重置按鈕
$(":button") //所有button按鈕
$(":file") //所有文件域
$("input:checked") //所有選中的元素
$("select option:selected") //select中所有選中的option元素查找
$("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' 類
$("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"); //設置文本框中的內容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時包括邊距文檔處理
內部插入
$("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) //布爾值指事件處理函數是否會被複制事件
頁面載入
當頁面載入成功後再運行的函數事件
$(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() //停止事件向上層元素冒泡效果
基本
$("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對象訪問
$.trim() //去除字符串兩端的空格
$.each() //遍歷一個數組或對象，for循環
$.inArray() //返回一個值在數組中的索引位置，不存在返回-1
$.grep() //返回數組中符合某種標準的元素
$.extend() //將多個對象，合併到第一個對象
$.makeArray() //將對象轉化爲數組
$.type() //判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等
$.isArray() //判斷某個參數是否爲數組
$.isEmptyObject() //判斷某個對象是否爲空(不含有任何屬性)
$.isFunction() //判斷某個參數是否爲函數
$.isPlainObject() //判斷某個參數是否爲用"{}"或"new Object"建立的對象
$.support() //判斷瀏覽器是否支持某個特性 插件拓展機制
//方式一
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