mouseover()/mouserout()
當鼠標進入/離開某個元素或它的後代元素時觸發mouseover/mouseout事件。
mouseover事件大多數時候會與 mouseout 事件一起使用。
mouseover/mouserout事件由於冒泡機制，經常在不需要的時候不小心觸發，從而導致一些腳本問題。
mouseenter()/mouseleave()
mouseenter/mouseleave當且僅當鼠標進入被選元素時才觸發，當鼠標穿過任何子元素時不會觸發。它不關心目標元素是否有子元素。
focusin()和focusout()
.focusin()：一個元素或它的子元素得到焦點時觸發此事件
.focusout()：一個元素或它的子元素失去焦點時觸發此事件
與 focus() 方法不同的是，focusin() 方法在任意子元素獲得焦點時也會觸發。
代碼如下:
<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()： 通過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 代碼:
代碼如下:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
jQuery 代碼:
代碼如下:
$("p").filter(".selected, :first")
結果:
代碼如下:
<p>Hello</p>, <p class="selected">And Again</p>
再看一個function的例子，一個函數用來作為測試元素的集合。它接受一個參數index，這是元素在jQuery集合的索引。在函數， this指的是當前的DOM元素。
HTML 代碼:
代碼如下:
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
jQuery 代碼:
代碼如下:
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
結果:
代碼如下:
<p>How are you?</p>
.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');
});
});
<div class="container">
<div class="box"></div>
</div>
使用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() 方法結束當前鏈條中的最近的篩選操作，並將匹配元素集還原為之前的狀態。
代碼如下:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</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>
在上面的代碼例子中，我們只會看到item 1的字體顏色改變了，而背景顏色沒有改變。這是因為
第二個find()方法之前的狀態返回的是紅色字體的class值為two的對象，因此，第二次find()只會查找<ul class="one"> 中的.two，使用end()方法修改該鏈式操作的代碼如下：
代碼如下:
<script type="text/javascript">
$('ul.one').find(".two").css("color","red").end().find('.three').css("background","blue");
</script>
end()方法在這裡是 返回調用 find() 之前的狀態，也就是$('ul.one')
toggleClass()
`toggleClass()方法：`如果在元素中指定類名稱不存在，則添加指定類名稱；如果元素已經擁有指定
類名稱，則從元素中刪除指定類名稱。
css(name,value)方法：設定指定的值到每個已匹配元素的指定的css樣式屬性
wrap()和wrapInner()
`wrap()和wrapInner()：`前者把所有匹配的元素用其他元素的結構化標記包裹起來；
後者將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來。
看下面一個wrap()的例子：
用原先div的內容作為新div的class，並將每一個元素包裹起來
HTML 代碼:
代碼如下:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
jQuery 代碼:
代碼如下:
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
結果:
代碼如下:
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
接著再看下面一個wrapInner()的例子:
用原先div的內容作為新div的class，並將每一個元素包裹起來
HTML 代碼:
代碼如下:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
jQuery 代碼:
代碼如下:
$('.inner').wrapInner(function() {
return '<div class="' + $(this).text() + '" />';
});
結果:
代碼如下:
<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中去掉所有匹配的元素。當需要移走一個元素，不久又將該元素插入DOM時，就需要用到detach方法。
.empty()：這個方法不僅移除子元素（和其他後代元素），同樣移除元素裡的文本。因為，根據說明，元素裡任何文本字符串都被看做是該元素的子節點。
.remove( [selector ] )：將元素從DOM中移除，同時移除元素上的事件及 jQuery 數據
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 文本節點被移除，li的小圓點還在，證明li沒有被移除
</script>
看下面一個remove()例子：
描述：從DOM中把所有段落刪除
HTML 代碼:
代碼如下:
<p>Hello</p> how are <p>you?</p>
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()方法手動觸發
代碼如下:
<script type="text/javascript">
$(document).ready(function(){
$("input").select(function(){
$("input").after("文本被選中！");
})
$("button").click(function(){
$("input").trigger("select");
})
})
</script>
.attr()和.prop()
.attr()：獲取匹配的元素集合中的第一個元素的屬性的值 或 設置每一個匹配元素的一個或多個屬性。
.prop()：同上
jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值時，會返回 property 的值，這就導致了結果的不一致。從 jQuery 1.6 開始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。
例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 應使用.prop()方法進行取值或賦值。
他們沒有相應的屬性（attributes），只有特性(property)。
.after()和.insertAfter()
1.after()
描述:
在所有段落中後插入一個jQuery對象(類似於一個DOM元素數組)。
HTML 代碼:
代碼如下:
<b>Hello</b><p>I would like to say: </p>
jQuery 代碼:
代碼如下:
$("p").after( $("b") );
結果:
代碼如下:
<p>I would like to say: </p><b>Hello</b>
2.insertAfter()
描述:
把所有段落插入到一個元素之後。與 $("#foo").after("p")相同
HTML 代碼:
代碼如下:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代碼:
代碼如下:
$("p").insertAfter("#foo");
結果:
代碼如下:
<div id="foo">Hello</div><p>I would like to say: </p>
.before()和.insertBefore()
3.before()
描述:
在所有段落中前插入一個jQuery對象(類似於一個DOM元素數組)。
HTML 代碼:
代碼如下:
<p>I would like to say: </p><b>Hello</b>
jQuery 代碼:
代碼如下:
$("p").before( $("b") );
結果:
<b>Hello</b><p>I would like to say: </p>
.append()和.appendTo()
4.append()
描述：向所有段落中追加一些HTML標記。
HTML 代碼:
代碼如下:
<p>I would like to say: </p>
jQuery 代碼:
代碼如下:
$("p").append("<b>Hello</b>");
結果:
<p>I would like to say: <b>Hello</b></p>
5.appendTo()
描述：新建段落追加div中並加上一個class
HTML 代碼:
代碼如下:
<div></div><div></div>
jQuery 代碼:
代碼如下:
$("<p/>")
.appendTo("div")
.addClass("test")
.end()
.addClass("test2");
結果:
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>
.prepend()和.prependTo()
6.prepend()
描述：向所有段落中前置一個jQuery對象(類似於一個DOM元素數組)。
HTML 代碼:
<p>I would like to say: </p><b>Hello</b>
jQuery 代碼:
$("p").prepend( $("b") );
結果:
<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");
結果:
<div id="foo"><p>I would like to say: </p></div>
總結
1. .insertAfter()和.after()：在現存元素的外部，從後面插入元素
2. .insertBefore()和.before()：在現存元素的外部，從前面插入元素
3. .appendTo()和.append()：在現存元素的內部，從後面插入元素
4. .prependTo()和.prepend() ：在現存元素的內部，從前面插入元素