jQuery、執行個體大全
中文文檔：http://www.php100.com/manual/jquery/
一、簡介
定義
jQuery創始人是美國John Resig，是優秀的Javascript架構；
jQuery是一個輕量級、快速簡潔的javaScript庫。源碼戳這
jQuery對象
jQuery産生的對象時jQuery獨有的，隻能自己調用
書寫規則
支援鍊式操作；
在變量前加"$"符号（var $variable = jQuery 對象）；
注：此規定并不是強制要求。
二、尋找元素
基本選擇器、層級選擇器、屬性選擇器
1、基本選擇器：
#id
element
.class
* 2、層級選擇器
$("form input") //找到form标簽裡面的input
$("form .className") //找到form标簽裡面包含class等于className的節點
$("#c1 > div") //找到id為c1的字标簽div
$("label + input") //比對所有跟在 label 後面的 input 元素（在同一個父級标簽内）
$("form ~ input") //找到所有與表單同輩的 input 元素 3、屬性選擇器
$("div[id]") //有id屬性的div标簽
$("div[id='ID1']") //id屬性等于ID1的div标簽
$("div[id!='ID1']") //id屬性不等于ID1的div标簽
$("div[name^='NAME1']") //name屬性的開頭為NAME1的div标簽
$("div[name$='NAME1']") //name屬性的結尾為NAME1的div标簽
$("div[name*='NAME1']") //name屬性的包含NAME1的div标簽
$("input[id][name$='man']") //可以多層屬性選擇
$("[data='data_name']") //擷取data屬性為“data_name”的标簽，data為自定義 例子：
HTML
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form> JQuery
$("form input") //找到表單中所有的 input 元素：[ <input name="name" />, <input name="newsletter" /> ]
$("form > input") //比對表單中所有的子級input元素：[ <input name="name" /> ]
$("label + input") //比對所有跟在 label 後面的 input 元素:[ <input name="name" />, <input name="newsletter" /> ]
$("form ~ input") //找到所有與表單同輩的 input 元素:[ <input name="none" /> ] 4、内容選擇器
$("div:contains('nick')") //包含nick文本的元素
$("td:empty") //不包含子元素或者文本的空元素
$("div:has(p)") //含有選擇器所比對的元素
$("td:parent") //含有子元素或者文本的元素 5、表單選擇器
$(":input") //比對所有 input, textarea, select 和 button 元素
$(":text") //所有的單行文本框
$(":password") //所有密碼框
$(":radio") //所有單選按鈕
$(":checkbox") //所有複選框
$(":submit") //所有送出按鈕
$(":reset") //所有重置按鈕
$(":button") //所有button按鈕
$(":file") //所有檔案域
$("input:checked") //所有選中的元素
$("select option:selected") //select中所有選中的option元素 6、索引選擇
$("input:not(:checked)") //input标簽裡面屬性的值沒有checked
$('li:first') //第一個元素
$('li:last') //最後一個元素
$("tr:even") //索引為偶數的元素，從 0 開始
$("tr:odd") //索引為奇數的元素，從 0 開始
$("tr:eq(1)") //給定索引值的元素
$("tr:gt(0)") //大于給定索引值的元素
$("tr:lt(2)") //小于給定索引值的元素
$(":focus") //目前擷取焦點的元素
$(":animated") //正在執行動畫效果的元素 二、篩選器
1、過濾
$("p").eq(0) //目前操作中第N個jQuery對象,類似索引
$('li').first() //第一個元素
$('li').last() //最後一個元素
$(this).hasClass("test") //元素是否含有某個特定的類,傳回布爾值
$('li').has('ul') //包含特定後代的元素 2、查找
$("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() //所有的同輩元素,不包括自己 三、屬性操作
1、基本屬性操作
$("img").attr("src"); //傳回文檔中所有圖像的src屬性值
$("img").attr("src","test.jpg"); //設定所有圖像的src屬性
$("img").attr({'NAME':'name','id':'no'}) //設定多個屬性
$("img").removeAttr("src"); //将文檔中圖像的src屬性删除
$("input[type='checkbox']").prop("checked", true); //選中複選框
$("input[type='checkbox']").prop("checked", false);
$("img").removeProp("src"); //删除img的src屬性 2、CSS類
$("p").addClass("selected"); //為p元素加上 'selected' 類
$("p").removeClass("selected"); //從p元素中删除 'selected' 類
$("p").toggleClass("selected"); //如果存在就删除,否則就添加 3、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操作
1、樣式
$("p").css("color"); //通路檢視p元素的color屬性
$("p").css("color","red"); //設定p元素的color屬性為red
$("p").css({ "color": "red", "background": "yellow" }); //設定p元素的color為red，background屬性為yellow（設定多個屬性要用{}字典形式） 2、位置
$('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 3、尺寸
$("p").height(); //擷取p元素的高度
$("p").width(); //擷取p元素的寬度
$("p:first").innerHeight() //擷取第一個比對元素内部區域高度(包括補白、不包括邊框)
$("p:first").innerWidth() //擷取第一個比對元素内部區域寬度(包括補白、不包括邊框)
$("p:first").outerHeight() //比對元素外部高度(預設包括補白和邊框)
$("p:first").outerWidth() //比對元素外部寬度(預設包括補白和邊框)
$("p:first").outerHeight(true) //為true時包括邊距 五、文檔處理
1、内部插入
$("p").append("<b>nick</b>"); //每個p元素内後面追加内容
$("p").appendTo("div"); //p元素追加到div内後
$("p").prepend("<b>Hello</b>"); //每個p元素内前面追加内容
$("p").prependTo("div"); //p元素追加到div内前 2、外部插入
$("p").after("<b>nick</b>"); //每個p元素同級之後插入内容
$("p").before("<b>nick</b>"); //在每個p元素同級之前插入内容
$("p").insertAfter("#test"); //所有p元素插入到id為test元素的後面
$("p").insertBefore("#test"); //所有p元素插入到id為test元素的前面 3、替換
$("p").replaceWith("<b>Paragraph. </b>"); //将所有比對的元素替換成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p"); //用比對的元素替換掉所有 selector比對到的元素 4、删除
$("p").empty(); //删除比對的元素集合中所有的子節點，不包括本身
$("p").remove(); //删除所有比對的元素,包括本身
$("p").detach(); //删除所有比對的元素(和remove()不同的是:所有綁定的事件、附加的資料會保留下來) 5、複制
$("p").clone() //克隆元素并選中克隆的副本
$("p").clone(true) //布爾值指事件處理函數是否會被複制 六、事件
1、頁面載入
當頁面載入成功後再運作的函數事件
$(document).ready(function(){
do something...
});
//簡寫
$(function($) {
do something...
}); 2、頁面處理
（1）綁定單個事件
$("p").bind("click", function(){
alert( $(this).text() );
}); （2）綁定多個事件
//bind 為每個比對元素綁定事件處理函數，綁定多個用{}。
$(menuF).bind({
"mouseover":function () {
$(menuS).parent().removeClass("hide");
},
"mouseout":function () {
$(menuS).parent().addClass("hide");
}
}); （3）綁定一個一次性的事件處理函數
$("p").one( "click", fun...) （4）解綁一個事件
$("p").unbind( "click" ) $(document).ready(
function(){
$(window).bind(
"scroll",function(){
console.log($(window).scrollTop())
}
)
var foo = function () {
// 處理某個事件的代碼
};
$("p").bind("click", foo); // ... 當點選段落的時候會觸發 foo
$("p").unbind("click", foo); // ... 再也不會被觸發 foo 3、頁面委派
// 與bind 不同的是當時間發生時才去臨時綁定。
$("p").delegate("click",function(){
do something...
});
$("p").undelegate(); //p元素删除由 delegate() 方法添加的所有事件
$("p").undelegate("click") //從p元素删除由 delegate() 方法添加的所有click事件 4、事件
$("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() //使用者離開頁面時 5、(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() //停止事件向上層元素冒泡 七、效果
1、基本
$("p").show() //顯示隐藏的比對元素
$("p").show("slow"); //參數表示速度,("slow","normal","fast"),也可為900毫秒
$("p").hide() //隐藏顯示的元素
$("p").toggle(); //切換 顯示/隐藏 2、滑動
$("p").slideDown("900"); //用900毫秒時間将段落滑下
$("p").slideUp("900"); //用900毫秒時間将段落滑上
$("p").slideToggle("900"); //用900毫秒時間将段落滑上，滑下 3、淡入淡出
$("p").fadeIn("900"); //用900毫秒時間将段落淡入
$("p").fadeOut("900"); //用900毫秒時間将段落淡出
$("p").fadeToggle("900"); //用900毫秒時間将段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用900毫秒時間将段落的透明度調整到0.6 補充：兩種循環的方法
方法一：
$.each([11,22,33,46],function(x,y)
{
console.log(x,y)
});
方法二：
$('div').each(function(){
console.log($(this))
}); 八、對象通路
$.trim() //去除字元串兩端的空格
$.each() //周遊一個數組或對象，for循環
$.inArray() //傳回一個值在數組中的索引位置，不存在傳回-1
$.grep() //傳回數組中符合某種标準的元素
$.extend() //将多個對象，合并到第一個對象
$.makeArray() //将對象轉化為數組
$.type() //判斷對象的類别（函數對象、日期對象、數組對象、正則對象等等
$.isArray() //判斷某個參數是否為數組
$.isEmptyObject() //判斷某個對象是否為空(不含有任何屬性)
$.isFunction() //判斷某個參數是否為函數
$.isPlainObject() //判斷某個參數是否為用"{}"或"new Object"建立的對象
$.support() //判斷浏覽器是否支援某個特性 九、插件拓展機制
//JQuery的兩種擴充：建立和使用是配套的
//擴充一
jQuery.fn.extend({
fun1:function(){
var Text = this.text(); //this是傳進來的參數,這個會實作循環
var Text = Text+'ADD';
return Text;
},
fun2:function(){
i = 0;
b = [];
this.each(function(){
console.log(this.text());
var Test = this.text()+'SB';
b[i++]=Test
}),
return b
}
});
var result = $('div[name="D1"]').fun2();
console.log(result);
//拓展二
jQuery.extend({
fun3:function(Dom){
var val =$(Dom).text();
return val + 'fun3';
}
});
var F3 = $.fun3("div[name='D1']");
console.log(F3); ![用js實作的一個加載中狀态的動态效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)