jquery常用方法及使用範例匯總_jquery
- WBOY原創
- 2016-05-16 16:31:581399瀏覽
mouseover()/mouserout()
當滑鼠進入/離開某個元素或它的後代元素時觸發mouseover/mouseout事件。
mouseover事件大多時候會與 mouseout 事件一起使用。
mouseover/mouserout事件由於冒泡機制，經常在不需要的時候不小心觸發，從而導致一些腳本問題。
mouseenter()/mouseleave()
mouseenter/mouseleave當且僅當滑鼠進入被選元素時才觸發，當滑鼠穿過任何子元素時不會觸發。它不關心目標元素是否有子元素。
focusin()和focusout()
.focusin()：當一個元素或它的子元素得到焦點時觸發此事件
.focusout()：當一個元素或它的子元素失去焦點時觸發此事件
與 focus() 方法不同的是，focusin() 方法在任意子元素獲得焦點時也會觸發。
focusin fire
focusin fire
<script><br /> $( "p" ).focusin(function() {<br /> $( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );<br /> });<br /> </script>
eq()和get()
.get()： 透過jQuery物件取得一個對應的DOM元素。
.eq()：從集合的一個元素中建構新的jQuery物件
eq回傳的是一個jQuery對象，get回傳的是一個DOM物件。舉例：
$( "li" ).get( 0 ).css("color", "red"); //錯誤
$( "li" ).eq( 0 ).css("color", "red"); //正確
那麼，什麼是DOM對象，什麼又是jQuery對象呢？
DOM物件就是用js取得的對象，而juqery物件是用jQuery類別函式庫的選擇器所獲得的物件。
如：var $obj = $("div");//jQuery物件
get方法本質上是把jQuery物件轉換成DOM對象，但是css屬於jQuery建構器的，DOM是不存在這個方法的，如果需要用jQuery的方法，我們必須這樣寫：
var li = $("li").get(0);
$(li).css("color","black");//用$包裝
filter()
filter()方法:篩選出與指定表達式相符的元素集合。
這個方法用來縮小匹配的範圍。用逗號分隔多個表達式。
filter(expression)：（字串|函數）如果參數是字串，則制定jQuery選擇器，用於從包裝集中刪除所有與選擇器不匹配的元素，最後留下與選擇器匹配的元素；如果參數是函數，則用於確定篩選條件。為包裝集裡的每一個元素各呼叫一次函數，函數呼叫傳回值為false的任何元素都會從包裝集中刪除。
以下程式碼意為：保留第一個以及帶有select類別的元素
HTML 代碼:
Hello
Hello Again
And Again
jQuery 程式碼:
$("p").filter(".selected, :first")
結果:
Hello
,And Again
再看一個function的例子，一個函數用來作為測試元素的集合。它接受一個參數index，這是元素在jQuery集合的索引。在函數， this指的是當前的DOM元素。
HTML 代碼:
- Hello
How are you?
jQuery 程式碼:
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
結果:
How are you?
.bind()、.live()和.delegate()方法
.bind()：綁定事件處理函數最基本的方式是使用.bind()方法。它和live()方法一樣，接受兩個參數：
.bind(event type, event handler)
兩種綁定事件處理函數的方法：
$(document).ready(function(){
$('.mydiv').bind('click',test);
function test(){
alert("Hello World!");
}
});
事件處理函數也可以使用匿名函數，如下所示：
$(document).ready(function(){
$("#mydiv").bind("click",function(){
alert("Hello World!");
})
});
.live()：live方法和bind方法的唯一區別在於.live()不僅作用於DOM中目前存在的元素，也作用於將來可能存在（動態生成）的元素
$(document).ready(function(){
$('.box').live('click',function(){
$(this).clone().appendTo('.container');
});
});
使用live方法綁定事件的缺點在於它無法使用鍊式調用，那有沒有既可以像live方法那樣綁定事件，又可以支援鍊式調用的方法呢？答案就是下面的delegate方法。
delegate()方法：為指定的元素（屬於被選元素的子元素）新增一個或多個事件處理程序，
並規定當這些事件發生時運行的函數。從jQuery 1.7開始，.delegate()已經被.on()方法取代。
語法：
$(selector).delegate(childSelector,event type,function)
參數說明：
childSelector 必需。規定要附加事件處理程序的一個或多個子元素。
event 必需。規定附加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效的事件。
function 必需。規定當事件發生時運行的函數。
$(document).ready(function(){
$('.container').delegate('.box','click',function(){
$(this).clone().appendTo('.container');
});
});
delegate()會在以下兩種情況下使用：
1、如果你有一個父元素，需要在其下的子元素中加入事件，這時你可以使用delegate()了，程式碼如下：
$("ul").delegate("li", "click", function(){
$(this).hide();
});
2、當元素在目前頁面中不可用時，可以使用delegate()
end()方法
end()方法：在jquery指令鏈內調用，以便退回到前一個包裝集。
每次過濾方法都會被壓入堆疊中。當我們需要回到前一個狀態時，我們可以使用end() 進行出棧操作，來傳回堆疊中的前一個狀態。
end() 方法結束目前鏈條中的最近的篩選操作，並將匹配元素集還原為先前的狀態。
>
- item 1
- item 2
- item 3
在上面的程式碼範例中，我們只會看到item 1的字體顏色改變了，而背景顏色沒有改變。這是因為
第二個find()方法之前的狀態回傳的是紅色字體的class值為two的對象，因此，第二次find()只會找出
- 中的.two，使用end( )方法修改此鍊式操作的程式碼如下：
- item 1
- item 2
- item 3
end()方法在這裡是 回傳呼叫 find() 之前的狀態，也就是$('ul.one')
toggleClass()
`toggleClass()方法：`如果在元素中指定類別名稱不存在，則新增指定類別名稱；如果元素已經擁有指定
類別名稱，則從元素中刪除指定類別名稱。
css(name,value)方法：設定指定的值到每個已符合元素的指定的css樣式屬性
wrap()和wrapInner()
`wrap()和wrapInner()：`前者把所有相符的元素用其他元素的結構化標記包裹起來；
後者將每一個相符的元素的子內容(包括文字節點)用一個HTML結構包裹起來。
看下面一個wrap()的範例：
以原先div的內容作為新div的class，並將每個元素包裹起來
HTML 代碼:
jQuery 程式碼:
$('.inner').wrap(function() {
return '';
});
結果:
接著再看下面一個wrapInner()的例子:
用原先div的內容作為新div的class，並將每個元素包裹起來
HTML 代碼:
jQuery 程式碼:
$('.inner').wrapInner(function() {
return '';
});
結果:
detach、empty和remove方法
.detach( [selector ] )：從DOM中去掉所有符合的元素。當需要移走一個元素，不久後又將元素插入DOM時，就需要用到detach方法。
.empty()：這個方法不只移除子元素（和其他後代元素），同樣移除元素裡的文字。因為，根據說明，元素裡任何文字字串都被看做是該元素的子節點。
.remove( [selector ] )：將元素從DOM移除，同時移除元素上的事件及 jQuery 資料
empty()的例子：
看下面一個remove()範例：
描述：從DOM中刪除所有段落
HTML 代碼:
Hello
how areyou?
jQuery 程式碼:
$("p").remove();
結果:
how are
val()方法
val()：獲得匹配元素的當前值。
描述:取得文字方塊中的值
jQuery 程式碼:
$("input").val();
jQuery 程式碼:
$("input").val("hello world!");
each()和map()
each()和map()方法：each回傳的是原來的數組，並不會新建立一個數組。而map方法會回傳一個
新的數組。如果在沒有必要的情況下使用map，則有可能造成記憶體浪費。
each方法：
定義一個空數組，透過each方法，往數組添加ID值；最後將數組轉換成字串後，alert這個值；
$(function(){
var arr = [];
$(":checkbox").each(function(index){
arr.push(this.id);
});
var str = arr.join(",");
alert(str);
})
map方法:
將每個:checkbox執行return this.id；並將這些返回值，自動的保存為jQuery對象，然後用get方法將其轉換成原生Javascript數組，再使用join方法轉換成字串，最後alert這個值；
$(function(){
var str = $(":checkbox").map(function() {
return this.id;
}).get().join();
alert(str);
})
當有需一個陣列的值的時候，用map方法，很方便。
更詳細的討論，請點選我的另一篇文章：詳解jQuery內建函數map()和each()的使用
$.each()
jQuery的$(selector).each()函數可以遍歷循環選取的子元素，而jQuery的$.each()函數則可以遍歷任何集合，包括物件和數組，它接收要遍歷的集合以及一個回調函數，回呼函數每次傳遞一個陣列的下標和這個下標所對應的陣列的值。
$.each(array,callback);
$.each(object,callback);
數組實例
$.each( [ "one", "two", "three" ], function( i, l ){
alert( "index #" i ": " l );
});
callback(索引,索引值)
DEMO：
index 0: one
index 1: two;
index 2: three
物件實例
$.each({ name: "John", lang: "JS" }, function( k, v ) {
alert( "Key: " k ", Value: " v );
});
callback(鍵,值)
Demo:
Key: name, Value: trigkit4
Key: ages, Value: 21
.trigger()
描述: 根據綁定到匹配元素的給定的事件類型執行所有的處理程序和行為。
當對應的事件發生時，任何透過.on()或一個快速方法綁定的事件處理程序將會被觸發。但是，它們可以用.trigger()方法手動觸發
.attr()和.prop()
.attr()：取得符合的元素集合中的第一個元素的屬性的值 或 設定每一個符合元素的一個或多個屬性。
.prop()：同上
jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值時，會傳回 property 的值，這就導致了結果的不一致。從 jQuery 1.6 開始， .prop()方法 方法傳回 property 的值,而 .attr() 方法傳回 attributes 的值。
例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected 應使用.prop()方法進行取值或賦值。
他們沒有對應的屬性（attributes），只有特性(property)。
.after()和.insertAfter()
1.after()
描述:
在所有段落中後插入一個jQuery物件(類似於一個DOM元素數組)。
HTML 代碼:
Hello
I would like to say:
jQuery 程式碼:
$("p").after( $("b") );
結果:
I would like to say:
Hello2.insertAfter()
描述:
把所有段落插入一個元素之後。與 $("#foo").after("p")相同
HTML 代碼:
I would like to say:
jQuery 程式碼:
$("p").insertAfter("#foo");
結果:
I would like to say:
.before()和.insertBefore()
3.before()
描述:
在所有段落中前插入一個jQuery物件(類似於一個DOM元素數組)。
HTML 代碼:
I would like to say:
HellojQuery 程式碼:
$("p").before( $("b") );
結果:
Hello
I would like to say:
.append()和.appendTo()
4.append()
說明：在所有段落中追加一些HTML標記。
HTML 代碼:
I would like to say:
jQuery 程式碼:
$("p").append("Hello");
結果:
I would like to say: Hello
5.appendTo()
描述：新建段落追加div中並加上一個class
HTML 代碼:
jQuery 程式碼:
$("")
.appendTo("div")
.addClass("test")
.end()
.addClass("test2");
結果:
.prepend()和.prependTo()
6.prepend()
描述：向所有段落中前置一個jQuery物件(類似於一個DOM元素數組)。
HTML 代碼:
I would like to say:
HellojQuery 程式碼:
$("p").prepend( $("b") );
結果:
HelloI would like to say:
7.prependTo()
描述：把所有段落追加到ID值為foo的元素中。
HTML 代碼:
I would like to say:
jQuery 程式碼:
$("p").prependTo("#foo");
結果:
I would like to say:
總結
1. .insertAfter()和.after()：在現存元素的外部，從後面插入元素
2. .insertBefore()和.before()：在現存元素的外部，從前面插入元素
3. .appendTo()和.append()：在現存元素的內部，從後面插入元素
4. .prependTo()和.prepend() ：在現存元素的內部，從前面插入元素