jquery常用方法及使用示例匯總
mouseover()/mouserout()
當(dāng)鼠標(biāo)進(jìn)入/離開(kāi)某個(gè)元素或它的后代元素時(shí)觸發(fā)mouseover/mouseout事件。
mouseover事件大多數(shù)時(shí)候會(huì)與 mouseout 事件一起使用。
mouseover/mouserout事件由于冒泡機(jī)制，經(jīng)常在不需要的時(shí)候不小心觸發(fā)，從而導(dǎo)致一些腳本問(wèn)題。
mouseenter()/mouseleave()
mouseenter/mouseleave當(dāng)且僅當(dāng)鼠標(biāo)進(jìn)入被選元素時(shí)才觸發(fā)，當(dāng)鼠標(biāo)穿過(guò)任何子元素時(shí)不會(huì)觸發(fā)。它不關(guān)心目標(biāo)元素是否有子元素。
focusin()和focusout()
.focusin()：一個(gè)元素或它的子元素得到焦點(diǎn)時(shí)觸發(fā)此事件
.focusout()：一個(gè)元素或它的子元素失去焦點(diǎn)時(shí)觸發(fā)此事件
與 focus() 方法不同的是，focusin() 方法在任意子元素獲得焦點(diǎn)時(shí)也會(huì)觸發(fā)。
<body>
<p><input type="text"> <span>focusin fire</span></p>
<p><input type="password"> <span>focusin fire</span></p>
<script>
$( "p" ).focusin(function() {
$( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
});
</script>
</body>
eq()和get()
.get()： 通過(guò)jQuery對(duì)象獲取一個(gè)對(duì)應(yīng)的DOM元素。
.eq()：從集合的一個(gè)元素中構(gòu)造新的jQuery對(duì)象
eq返回的是一個(gè)jQuery對(duì)象，get返回的是一個(gè)DOM對(duì)象。舉個(gè)例子：
$( "li" ).get( 0 ).css("color", "red"); //錯(cuò)誤
$( "li" ).eq( 0 ).css("color", "red"); //正確
那么，什么是DOM對(duì)象，什么又是jQuery對(duì)象呢？
DOM對(duì)象就是用js獲得的對(duì)象，而juqery對(duì)象是用jQuery類(lèi)庫(kù)的選擇器獲得的對(duì)象。
如：var $obj = $("div");//jQuery對(duì)象
get方法本質(zhì)上是把jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象，但是css屬于jQuery構(gòu)造器的，DOM是不存在這個(gè)方法的，如果需要用jQuery的方法，我們必須這樣寫(xiě)：
var li = $("li").get(0);
$(li).css("color","black");//用$包裝
filter()
filter()方法:篩選出與指定表達(dá)式匹配的元素集合。
這個(gè)方法用于縮小匹配的范圍。用逗號(hào)分隔多個(gè)表達(dá)式。
filter(expression)：（字符串|函數(shù)）如果參數(shù)是字符串，則制定jQuery選擇器，用于從包裝集里刪除所有與選擇器不匹配的元素，最后留下與選擇器匹配的元素；如果參數(shù)是函數(shù)，則用于確定篩選條件。為包裝集里的每一個(gè)元素各調(diào)用一次該函數(shù)，函數(shù)調(diào)用返回值為false的任何元素都會(huì)從包裝集里刪除。
以下代碼意為：保留第一個(gè)以及帶有select類(lèi)的元素
HTML 代碼:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
jQuery 代碼:
$("p").filter(".selected, :first")
結(jié)果:
<p>Hello</p>, <p class="selected">And Again</p>
再看一個(gè)function的例子，一個(gè)函數(shù)用來(lái)作為測(cè)試元素的集合。它接受一個(gè)參數(shù)index，這是元素在jQuery集合的索引。在函數(shù)， this指的是當(dāng)前的DOM元素。
HTML 代碼:
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
jQuery 代碼:
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
結(jié)果:
<p>How are you?</p>
.bind()、.live()和.delegate()方法
.bind()：綁定事件處理函數(shù)的最基本方式是使用.bind()方法。它和live()方法一樣，接受兩個(gè)參數(shù)：
.bind(event type, event handler)
兩種綁定事件處理函數(shù)的方法：
$(document).ready(function(){
$('.mydiv').bind('click',test);
function test(){
alert("Hello World!");
}
});
事件處理函數(shù)也可以使用匿名函數(shù)，如下所示：
$(document).ready(function(){
$("#mydiv").bind("click",function(){
alert("Hello World!");
})
});
.live()：live方法和bind方法的唯一區(qū)別在于.live()不僅作用于DOM中當(dāng)前存在的元素，還作用于將來(lái)可能存在（動(dòng)態(tài)生成）的元素
$(document).ready(function(){
$('.box').live('click',function(){
$(this).clone().appendTo('.container');
});
});
<div class="container">
<div class="box"></div>
</div>
使用live方法綁定事件的缺點(diǎn)在于它無(wú)法使用鏈?zhǔn)秸{(diào)用，那有沒(méi)有既可以像live方法那樣綁定事件，又可以支持鏈?zhǔn)秸{(diào)用的方法呢？答案就是下面的delegate方法。
delegate()方法：為指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，
并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。從jQuery 1.7開(kāi)始，.delegate()已經(jīng)被.on()方法取代。
語(yǔ)法：
$(selector).delegate(childSelector,event type,function)
參數(shù)說(shuō)明：
childSelector 必需。規(guī)定要附加事件處理程序的一個(gè)或多個(gè)子元素。
event 必需。規(guī)定附加到元素的一個(gè)或多個(gè)事件。由空格分隔多個(gè)事件值。必須是有效的事件。
function 必需。規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。
$(document).ready(function(){
$('.container').delegate('.box','click',function(){
$(this).clone().appendTo('.container');
});
});
delegate()會(huì)在以下兩個(gè)情況下使用到：
1、如果你有一個(gè)父元素，需要給其下的子元素添加事件，這時(shí)你可以使用delegate()了，代碼如下：
$("ul").delegate("li", "click", function(){
$(this).hide();
});
2、當(dāng)元素在當(dāng)前頁(yè)面中不可用時(shí)，可以使用delegate()
end()方法
end()方法：在jquery命令鏈內(nèi)調(diào)用，以便退回到前一個(gè)包裝集。
每次過(guò)濾方法都會(huì)被壓入棧中。當(dāng)我們需要返回到前一個(gè)狀態(tài)時(shí)，我們可以使用end() 進(jìn)行出棧操作，來(lái)返回棧中的前一個(gè)狀態(tài)。
end() 方法結(jié)束當(dāng)前鏈條中的最近的篩選操作，并將匹配元素集還原為之前的狀態(tài)。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script src=">
</head>
<body>
<ul class="one">
<li class="two">item 1</li>
<li>item 2</li>
<li class="three">item 3</li>
</ul>
<script type="text/javascript">
$('ul.one').find(".two").css("color","red").find('.three').css("background","blue");
</script>
在上面的代碼例子中，我們只會(huì)看到item 1的字體顏色改變了，而背景顏色沒(méi)有改變。這是因?yàn)?br /> 第二個(gè)find()方法之前的狀態(tài)返回的是紅色字體的class值為two的對(duì)象，因此，第二次find()只會(huì)查找<ul class="one"> 中的.two，使用end()方法修改該鏈?zhǔn)讲僮鞯拇a如下：
<script type="text/javascript">
$('ul.one').find(".two").css("color","red").end().find('.three').css("background","blue");
</script>
end()方法在這里是 返回調(diào)用 find() 之前的狀態(tài)，也就是$('ul.one')
toggleClass()
`toggleClass()方法：`如果在元素中指定類(lèi)名稱(chēng)不存在，則添加指定類(lèi)名稱(chēng)；如果元素已經(jīng)擁有指定
類(lèi)名稱(chēng)，則從元素中刪除指定類(lèi)名稱(chēng)。
css(name,value)方法：設(shè)定指定的值到每個(gè)已匹配元素的指定的css樣式屬性
wrap()和wrapInner()
`wrap()和wrapInner()：`前者把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裹起來(lái)；
后者將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用一個(gè)HTML結(jié)構(gòu)包裹起來(lái)。
看下面一個(gè)wrap()的例子：
用原先div的內(nèi)容作為新div的class，并將每一個(gè)元素包裹起來(lái)
HTML 代碼:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
jQuery 代碼:
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
結(jié)果:
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
接著再看下面一個(gè)wrapInner()的例子:
用原先div的內(nèi)容作為新div的class，并將每一個(gè)元素包裹起來(lái)
HTML 代碼:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
jQuery 代碼:
$('.inner').wrapInner(function() {
return '<div class="' + $(this).text() + '" />';
});
結(jié)果:
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>
detach、empty和remove方法
.detach( [selector ] )：從DOM中去掉所有匹配的元素。當(dāng)需要移走一個(gè)元素，不久又將該元素插入DOM時(shí)，就需要用到detach方法。
.empty()：這個(gè)方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本。因?yàn)?，根?jù)說(shuō)明，元素里任何文本字符串都被看做是該元素的子節(jié)點(diǎn)。
.remove( [selector ] )：將元素從DOM中移除，同時(shí)移除元素上的事件及 jQuery 數(shù)據(jù)
empty()的例子：
<ul class="one">
<li class="two">item 1</li>
<li>item 2</li>
<li class="three">item 3</li>
</ul>
<script type="text/javascript">
$(".two").empty();//item 1 文本節(jié)點(diǎn)被移除，li的小圓點(diǎn)還在，證明li沒(méi)有被移除
</script>
看下面一個(gè)remove()例子：
描述：從DOM中把所有段落刪除
HTML 代碼:
<p>Hello</p> how are <p>you?</p>
jQuery 代碼:
$("p").remove();
結(jié)果:
how are
val()方法
val()：獲得匹配元素的當(dāng)前值。
描述:獲取文本框中的值
jQuery 代碼:
$("input").val();
jQuery 代碼:
$("input").val("hello world!");
each()和map()
each()和map()方法：each返回的是原來(lái)的數(shù)組，并不會(huì)新創(chuàng)建一個(gè)數(shù)組。而map方法會(huì)返回一個(gè)
新的數(shù)組。如果在沒(méi)有必要的情況下使用map，則有可能造成內(nèi)存浪費(fèi)。
each方法：
定義一個(gè)空數(shù)組，通過(guò)each方法，往數(shù)組添加ID值；最后將數(shù)組轉(zhuǎn)換成字符串后，alert這個(gè)值；
$(function(){
var arr = [];
$(":checkbox").each(function(index){
arr.push(this.id);
});
var str = arr.join(",");
alert(str);
})
map方法:
將每個(gè):checkbox執(zhí)行return this.id；并將這些返回值，自動(dòng)的保存為jQuery對(duì)象，然后用get方法將其轉(zhuǎn)換成原生Javascript數(shù)組，再使用join方法轉(zhuǎn)換成字符串，最后alert這個(gè)值；
$(function(){
var str = $(":checkbox").map(function() {
return this.id;
}).get().join();
alert(str);
})
當(dāng)有需一個(gè)數(shù)組的值的時(shí)候，用map方法，很方便。
更加詳細(xì)的討論，請(qǐng)點(diǎn)擊我的另一篇文章：詳解jQuery內(nèi)置函數(shù)map()和each()的使用
$.each()
jQuery的$(selector).each()函數(shù)可以遍歷循環(huán)選中的子元素，而jQuery的$.each()函數(shù)則可以遍歷任何集合，包括對(duì)象和數(shù)組，它接收要遍歷的集合以及一個(gè)回調(diào)函數(shù)，回調(diào)函數(shù)每次傳遞一個(gè)數(shù)組的下標(biāo)和這個(gè)下標(biāo)所對(duì)應(yīng)的數(shù)組的值。
$.each(array,callback);
$.each(object,callback);
數(shù)組實(shí)例
$.each( [ "one", "two", "three" ], function( i, l ){
alert( "index #" + i + ": " + l );
});
callback(索引,索引值)
DEMO：
index 0: one
index 1: two;
index 2: three
對(duì)象實(shí)例
$.each({ name: "John", lang: "JS" }, function( k, v ) {
alert( "Key: " + k + ", Value: " + v );
});
callback(鍵,值)
Demo:
Key: name, Value: trigkit4
Key: ages, Value: 21
.trigger()
描述: 根據(jù)綁定到匹配元素的給定的事件類(lèi)型執(zhí)行所有的處理程序和行為。
當(dāng)相應(yīng)的事件發(fā)生時(shí)，任何通過(guò).on()或一個(gè)快捷方法綁定的事件處理程序?qū)⒈挥|發(fā)。但是，它們可以用.trigger()方法手動(dòng)觸發(fā)
<script type="text/javascript">
$(document).ready(function(){
$("input").select(function(){
$("input").after("文本被選中！");
})
$("button").click(function(){
$("input").trigger("select");
})
})
</script>
.attr()和.prop()
.attr()：獲取匹配的元素集合中的第一個(gè)元素的屬性的值 或 設(shè)置每一個(gè)匹配元素的一個(gè)或多個(gè)屬性。
.prop()：同上
jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值時(shí)，會(huì)返回 property 的值，這就導(dǎo)致了結(jié)果的不一致。從 jQuery 1.6 開(kāi)始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。
例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 應(yīng)使用.prop()方法進(jìn)行取值或賦值。
他們沒(méi)有相應(yīng)的屬性（attributes），只有特性(property)。
.after()和.insertAfter()
1.after()
描述:
在所有段落中后插入一個(gè)jQuery對(duì)象(類(lèi)似于一個(gè)DOM元素?cái)?shù)組)。
HTML 代碼:
<b>Hello</b><p>I would like to say: </p>
jQuery 代碼:
$("p").after( $("b") );
結(jié)果:
<p>I would like to say: </p><b>Hello</b>
2.insertAfter()
描述:
把所有段落插入到一個(gè)元素之后。與 $("#foo").after("p")相同
HTML 代碼:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代碼:
$("p").insertAfter("#foo");
結(jié)果:
<div id="foo">Hello</div><p>I would like to say: </p>
.before()和.insertBefore()
3.before()
描述:
在所有段落中前插入一個(gè)jQuery對(duì)象(類(lèi)似于一個(gè)DOM元素?cái)?shù)組)。
HTML 代碼:
<p>I would like to say: </p><b>Hello</b>
jQuery 代碼:
$("p").before( $("b") );
結(jié)果:
<b>Hello</b><p>I would like to say: </p>
.append()和.appendTo()
4.append()
描述：向所有段落中追加一些HTML標(biāo)記。
HTML 代碼:
<p>I would like to say: </p>
jQuery 代碼:
$("p").append("<b>Hello</b>");
結(jié)果:
<p>I would like to say: <b>Hello</b></p>
5.appendTo()
描述：新建段落追加div中并加上一個(gè)class
HTML 代碼:
<div></div><div></div>
jQuery 代碼:
$("<p/>")
.appendTo("div")
.addClass("test")
.end()
.addClass("test2");
結(jié)果:
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>
.prepend()和.prependTo()
6.prepend()
描述：向所有段落中前置一個(gè)jQuery對(duì)象(類(lèi)似于一個(gè)DOM元素?cái)?shù)組)。
HTML 代碼:
<p>I would like to say: </p><b>Hello</b>
jQuery 代碼:
$("p").prepend( $("b") );
結(jié)果:
<p><b>Hello</b>I would like to say: </p>
7.prependTo()
描述：把所有段落追加到ID值為foo的元素中。
HTML 代碼:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代碼:
$("p").prependTo("#foo");
結(jié)果:
<div id="foo"><p>I would like to say: </p></div>
總結(jié)
1. .insertAfter()和.after()：在現(xiàn)存元素的外部，從后面插入元素
2. .insertBefore()和.before()：在現(xiàn)存元素的外部，從前面插入元素
3. .appendTo()和.append()：在現(xiàn)存元素的內(nèi)部，從后面插入元素
4. .prependTo()和.prepend() ：在現(xiàn)存元素的內(nèi)部，從前面插入元素
相關(guān)文章
jQuery.cookie.js實(shí)現(xiàn)記錄最近瀏覽過(guò)的商品功能示例
這篇文章主要介紹了jQuery.cookie.js實(shí)現(xiàn)記錄最近瀏覽過(guò)的商品功能,結(jié)合實(shí)例形式分析了基于jQuery.cookie.js插件創(chuàng)建cookie及保存瀏覽記錄的操作技巧,需要的朋友可以參考下2017-01-01
jquery插件之信息彈出框showInfoDialog(成功/錯(cuò)誤/警告/通知/背景遮罩)
某某同學(xué)最近寫(xiě)了個(gè)基于jquery的信息彈出插件showInfoDialog，該插件對(duì)背景進(jìn)行遮罩，然后彈出信息顯示框，信息顯示種類(lèi)包括(操作成功/錯(cuò)誤信息/警告信息/通知信息)感興趣的朋友可以了解下2013-01-01
JQuery手速測(cè)試小游戲?qū)崿F(xiàn)思路詳解
這篇文章主要介紹了JQuery手速測(cè)試小游戲?qū)崿F(xiàn)思路詳解,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
使用jQuery 操作table 完成單元格合并的實(shí)例
下面小編就為大家分享一篇使用jQuery 操作table 完成單元格合并的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Jquery異步請(qǐng)求數(shù)據(jù)實(shí)例代碼
Jquery異步請(qǐng)求數(shù)據(jù)實(shí)例代碼，需要的朋友可以參考下。2011-12-12
基于JQuery的一句話搞定手風(fēng)琴菜單效果代碼，需要的朋友可以參考下2012-09-09
ajax jquery實(shí)現(xiàn)頁(yè)面某一個(gè)div的刷新效果
這篇文章主要給大家介紹了關(guān)于ajax jquery實(shí)現(xiàn)頁(yè)面某一個(gè)div的刷新效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
jQuery取得設(shè)置清空select選擇的文本與值
這篇文章主要介紹了jQuery如何取得設(shè)置清空select選擇的文本與值,下面有個(gè)不錯(cuò)的示例，需要的朋友可以參考下2014-07-07
這篇文章主要為大家詳細(xì)介紹了easyUI下拉列表點(diǎn)擊事件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
“元素拖拽”顧名思義：拖動(dòng)，移動(dòng)，拽放。有很多的解釋?zhuān)以诰W(wǎng)上相關(guān)資料非常之多，本人在開(kāi)發(fā) AsyncBox 當(dāng)中也用到此效果，借此分享，同時(shí)也是一種技術(shù)積累。2011-04-04