jQuery學習筆記
【新增】jquery.tmpl.js筆記：
http://www.365mini.com/ [jQuery方法講解很詳細]
http://www.rzrgm.cn/zhuzhiyuan/p/3510175.html
http://www.rzrgm.cn/think8848/archive/2011/07/17/2108570.html
1： $ = jQuery $() = jQuery()
【新增】
1、多條件選擇器
用途：使用多個條件同時選擇多個標簽
用法：$(“條件1，條件2，條件3，……，條件n “);
特征：多個條件在“”內用逗號隔開；
用例：$(“div#id,span.tip,p”); //同時選擇id為“id”的div標簽,class為“tip”的span標簽和p標簽；
用途：使用第二個參數選出相對元素，從而不影響其他具有相同條件的元素
用法：$(“條件1”,條件2)；
特征：兩個參數
相對選擇器
只要在$()指定第二個參數，第二個參數為相對的元素。比如html代碼如下代碼如下:<table id="table1"> <tr><td>dsds</td><td>dsfdef</td></tr> <tr><td>dsds</td><td>dsfdef</td></tr> <tr><td>dsds</td><td>dsfdef</td></tr> <tr><td>dsds</td><td>dsfdef</td></tr> <tr><td>dsds</td><td>dsfdef</td></tr> </table>那么可以用如下的js代碼操作td的背景色
$("td", $(this)).css("background", "red"),//這里也可以是$("td", this).css('background','red');這句代碼用的就是相對選擇器，選擇出的td是以當前的tr為相對的元素。選擇的td元素是當前的tr元素下的所有td元素，沒有涉及到其他行的td元素
代碼如下:<script type="text/javascript"> $(function () { $("#table1 tr").click(function () { $("td", $(this)).css("background", "red"); }); }); </script>用途：選擇后代節點
用法：$(“條件1 條件2 條件3”);
特征：雙引號之內，條件之間用空格隔開；
用例：$(“#com ul li”);
//選擇Id為com的元素中的UL里面的所有li節點；
- <element class="a b">
1. 交集選擇： $(".a.b") --選擇同時包含a和b的元素。
2. 并集選擇：$(".a, .b") --選擇包含a或者包含b的元素。
- $("div[title='ttt'][class='aaaa']").click()
所有div元素下所有屬性title值是等于ttt并且屬性class等于aaaa的元素
二： 選擇元素
0：訪問DOM元素。即由jquery對象得到DOM元素，使用.get(n)方法,從0開始。簡寫方式為$()[n],類似數組用法
1：CSS選擇符（多個選擇器組合用”,"隔開）
①，屬性選擇符 $('a[href^="mailto:"]')表示href以“mailto:”開頭的a元素。同樣$表示結尾，*表示通配符。屬性可以寫多個，如$('a[href$=".pdf"][href*="strive"]')表示href以.pdf結束且含有strive的a元素
②，層次選擇器
1，祖先后代選擇器（空格）。$(“ancestor descendant”). 返回符合條件的所有的后代元素。
2，父子選擇器（ > ）。$(“parent > child”)。返回所有符合條件的子元素。（子元素只有一輩，后代元素有很多輩）。
3，隔壁選擇器 （+）（后向）。$(“prev + next”)。返回同輩中 緊鄰在prev元素之后的next元素。注意：只返回一個next,且要求prev和next同輩。 【效果類似next()方法】
4，鄰居選擇器（~）(后向)。$(“prev ~ siblings”)。返回在prev元素之后所有同輩元素。 【效果類似nextAll()方法】
2： 在1中CSS選擇符基礎上進一步過濾
用在CSS選擇器后面，進一步篩選，語法類似CSS中的偽類，以冒號（:）開頭。
①, :eq(n) 第n個，從0開始計數
②, :even/:odd 偶/奇
③, :nth-child(),參數可為數字或者odd/even，這是jQuery中唯一從1開始計數的選擇器。（注意：瀏覽器選擇時是從右向左的）
④, :contains() 參數為字符串，可以不加引號，也可以加引號，區分大小寫
⑤, :not() 否定式偽類選擇符. 參數為選擇符，可以不加引號，也可以加引號。如:not(.classname)。
⑥, :has()。參數為選擇符，可以不加引號，也可以加引號。匹配含有選擇器所匹配的元素的元素。如
$("div:has('p')").返回包含p標簽的div標簽
⑦,:hidden 這個選擇器可以單獨使用,$(':hidden')，也可以在css選擇符之后之后,$('p:hidden')。
:hidden 選擇器選取隱藏的元素。
以下幾種情況的元素是隱藏元素：
-
-
- 設置為 display:none
- 帶有 type="hidden" 的表單元素
- width 和 height 設置為 0
- 隱藏的父元素（這也會隱藏子元素）
-
注釋：該選擇器對 visibility:hidden 和 opacity: 0 的元素不起作用。
⑧，:input 獲取表單，不只是input表單，還包括<select><textarea><button>。而input標簽選擇器只獲取input表單。
⑨，:text,:password,:checkbox,:radio,:submit,:file,:image,:reset,:button,等等，獲取input標簽中的特定類型的表單
⑩, :checked; :selected.匹配所有選中的被選中元素(復選框、單選框，select中的option)，對于select元素來說，獲取選中推薦使用:selected
3: DOM遍歷方法(篩選)
① filter()方法。篩選出與指定表達式匹配的元素集合。這個方法用于縮小匹配的范圍。用逗號分隔多個表達式(同多個CSS選擇器).參數可接受函數
② next()方法。返回下一個緊鄰的同輩元素，(效果類似于CSS選擇符中的隔壁選擇器)
nextAll()方法。返回后面所有的同輩元素，(效果類似于CSS選擇符中的鄰居選擇器)
prev()方法。返回前一個緊鄰的同輩元素，
prevAll()方法。返回前面所有的同輩元素，
siblings()方法。返回所有的同輩元素。
parent()方法。返回唯一的父元素，
parents()方法。返回所有的直系祖先元素，（父元素只有一個，祖先元素可有很多）。沿 DOM 樹向上遍歷，直到文檔的根元素為止，將每個祖先元素添加到一個臨時的集合；如果應用了選擇器，則會基于該選擇器對這個集合進行篩選。
closest(‘selector’)方法。獲得匹配選擇器的第一個直系祖先元素。
closest和parents的主要區別是：1，前者從當前元素開始匹配尋找，后者從父元素開始匹配尋找；2，前者逐級向上查找，直到發現匹配的元素后就停止了，后者一直向上查找直到根元素，然后把這些元素放進一個臨時集合中，再用給定的選擇器表達式去過濾；3，前者返回0或1個元素，后者可能包含0個，1個，或者多個元素。
children()方法。返回所有的子元素。（注意：只返回子元素，子元素之后的后代元素不選擇【可用CSS選擇符中的后代選擇器】）
.find() 和 .children() 方法類似，不過后者只沿著 DOM 樹向下遍歷單一層級。
③ addBack()方法。jQuery對象維護一個堆棧內部來跟蹤匹配的元素集合的變化。當一個DOM遍歷方法被調用時，新的元素集合推入到堆棧中。
如果還需要包含先前的元素集合，.addBack() 可以提供幫助。考慮一個頁面，一個簡單的列表就可以了：
下面的代碼的返回結果是后面3，4和5項是一個紅色的背景：
首先，初始選擇位于第3項，初始化堆棧集合只包含這項。調用.nextAll() 后將第4和第5項推入堆棧。
最后，調用.addBack() 合并這兩個組元素在一起，創建一個jQuery對象，指向所有三個項元素（按照
文檔中的順序）：{[<li.third-item>,<li>,<li> ]}
④：end()方法。回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變為前一次的狀態。
如果之前沒有破壞性操作，則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。
這包括在 Traversing 中任何返回一個jQuery對象的函數--'add', 'andSelf','children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent','parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。
例子：
$('td:contains(Henry)') //取得包含Henry的所有單元格
.parent() //取得它的父元素
.find('td:eq(1)') //在父元素中查找第2個單元格
.addClass('highlight') //為該單元格添加hightlight類
.end() //恢復到包含Henry的單元格的父元素
.find('td:eq(2)') //在父元素中查找第3個單元格
.addClass('highlight'); //為該單元格添加hightlight類
⑤：find()方法。搜索所有與指定表達式匹配的元素,返回后代元素。這個函數是找出正在處理的元素的后代元素的好方法。.find() 和 .children() 方法類似，不過后者只沿著 DOM 樹向下遍歷單一層級。
⑥：hasClass()方法。
參數為類名，必須加引號。檢查選擇的元素集合中是否含有某個特定的類，如果有(至少有一個就可以)，則返回
true，否則返回false. 注意如果查找到的元素是父元素,那么只在父元素中查找是否含有類，不涉及它的子元素。
⑦：is()方法。這個也可以代替hasClass()方法，它比hasClass()方法更靈活，可以接受任何選擇符表達式。
根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的表達式就
返回true,否則返回false。【單個元素就是 是不是，元素集合就是 包不包含】。
注意（同上）：如果查找到的元素是父元素,那么只在父元素中查找是否含有參數表達式，不涉及它的子元素。
經驗：要加引號。多個選擇器可以用逗號隔開。
三：事件,
1，為了保證JavaScript代碼執行以前頁面已經應用了樣式,最好是在 <head>元素中把 <link rel="stylesheet"> 標簽
和 <style> 標簽放在 <script> 標簽前面。
2，每次調用$(document).ready()都會向內部的行為隊列中添加一個新函數,當頁面加載完成后,所有函數都會被執行。
而且,這些函數會按照注冊它們的順序依次執行。通過window.onload雖然也可以注冊多個函數,但卻不能保證按順序執行。
3，向.ready()回調函數中傳入參數
在某些情況下,可能有必要在同一個頁面中使用多個JavaScript庫。由于很多庫都使用$標識
符(因為它簡短方便)
,因此就需要一種方式來避免名稱沖突。
為解決這個問題,jQuery提供了一個jQuery.noConflict()方法,調用該方法可以把對$
標識符的控制權讓渡還給其他庫。使用jQuery.noConflict()方法的一般模式如下:
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
</script>
<script src="myscript.js"></script>
首先,包含jQuery之外的庫(這里是Prototype)
。然后,包含jQuery庫,取得對$的使用權。
接著,調用.noConflict()方法讓出$,以便將控制權交還給最先包含的庫(Prototype)
。這樣
就可以在自定義腳本中使用兩個庫了——但是,
在需要使用jQuery方法時,
必須記住要用jQuery
而不是$來調用。
在這種情況下,
還有一個在.ready()方法中使用$的技巧。
我們傳遞給它的回調函數可以接
收一個參數——jQuery對象本身。利用這個參數,可以重新命名jQuery為$,而不必擔心造成沖
突,如下面的代碼所示:
jQuery(document).ready(function($) {
//在這里,可以正常使用!
});
或者,也可以使用剛剛介紹的簡寫語法:
jQuery(function($) {
//使用$的代碼
});
4，toggleClass(class|fn [,switch])方法。
如果存在（不存在）就刪除（添加）一個類。
有兩個參數，第一個參數是類名（必須加引號），同時也可以一個返回類名的回調函數。第二個參數是可選的，其返回值是true 或者 false。
如果是true，則為選中的元素添加指定的類；如果是false，則為選中的元素去除指定的類。
一個例子：此例當count的值為3的倍數時，第二個參數返回true，將會添加參數一中返回的類；不是3的倍數時，移除參數一中的類
var count = 0;
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
},count++ % 3 == 0);
5，事件目標。
事件處理程序中的變量event保存著事件對象。而event.target屬性保存著發生事件的目標元素（屬于DOM元素）。通俗理解就是實際被點擊的具體元素。
關于this：當觸發任何事件處理程序時,關鍵字this引用的都是處理事件的DOM元素，也就是代碼中事件前的DOM元素，而且有兩點要說明：①如果事件前的
元素是一個父元素，那么this具體就只指代這個元素，它的子元素是不包含在this里的。②如果事件前的是元素集合，那么this實際指代的是其中真正執行事
件的那一個元素
6，阻止事件傳播；阻止默認行為。event.stopPropagation();event.preventDefault();
如果想要同時停止事件傳播和默認操作,可以在事件處理程序中返回false,這是對在事件對象(event)上同時調用 .stopPropagation() 和 .preventDefault()的一種簡寫方式。
7，事件委托
原理；在DOM中的一個祖先元素上指定一個單擊處理程序。由于事件會冒泡，未遭攔截的單擊事件最終會
到達這個祖先元素，而我們可以在此時再作出相應處理（通過條件語句
【如$(event.target).is('button')=>返回真或假】過濾出需要進行行為的子元素）。
jquery內置事件委托方法：on()方法。詳細請點擊此鏈接 off()方法詳情點擊此鏈接
on()簡單介紹：（總共可以傳四個參數）
如果給.on()方法傳入的第二個參數是一個選擇符表達式,jQuery會把click事件處理程序
綁定到#switcher對象,同時比較event.target和選擇符表達式(這里的'button')。如果匹
配,jQuery會把this關鍵字映射到匹配的元素,否則不會執行事件處理程序。
off()簡單介紹：（總共可以傳三個參數）,理解為on()方法的反方法，解除(符合條件的)事件綁定
事件綁定一點說明： 當在jQuery中把處理程序綁定到事件時,之前綁定的處理程序仍然有效，事件會有個累加效果。注意區分
事件個數的累加和 每個事件次數的累加。 one()方法表示事件觸發一次，隨后立即解除綁定。
8，模擬用戶操作：
trigger()方法：$().trigger('click')觸發click事件，簡寫方式為$().click(),不加參數表示觸發事件而不是綁定行為
9，響應鍵盤事件： 1 對按鍵響應keyup keydown（keyCode），按了哪個鍵
對文本輸入響應keypress(charCode), 輸入了什么內容
2 event.which(which屬性對DOM原生的event.keyCode和event.charCode進行了標準化。)
3 which: http://www.365mini.com/page/jquery-event-which.htm
4 String.fromCharCode()；參數為Unicode字符值，返回字符串。沒有傳入參數則返回空字符串
此函數屬于靜態函數，而且只能夠通過全局String對象進行調用，不能通過String對象的實例進行調用。
5：鼠標位置：event.pageX event.clientX event.offsetX event.originalEvent.x
詳情參見： http://www.rzrgm.cn/everest33Tong/p/5951200.html
6：mousedown、mouseup、click 執行順序是從左到右的，更重要的是一旦mousedown事件激活，
正常情況下后面兩個事件也肯定會被激活。mousemove 事件在是一直在元素上運行的。
一個例子：使用.mousedown()和.mouseup()跟蹤頁面中的鼠標事件。如果鼠標按鍵在按下 它的地方被釋放,
則為所有段落添加hidden類。如果是在按下它的地方之下被釋放的, 刪除所有段落的hidden類。
var u_Y, d_Y;
$(document).mousedown(function (e) {
d_Y = e.pageY;
})
.mouseup(function (e) {
u_Y = e.pageY;
if (u_Y < d_Y) {
$("p").removeClass('hidden');
}; //按下后在下面釋放
if (u_Y == d_Y) {
$('p').addClass('hidden');
}
});
10，獲取元素綁定了那些事件
在1.8.0版本之前，我們要想獲取某個DOM綁定的事件處理程序可以這樣：$.data(domObj,'events');//或者$('selector').data('events')而從1.8.0版本開始，jQuery突然不支持這樣使用了，而是改到了一個叫'_data'的函數功能上了，即，1.8.0及以后的版本你可以這么用：$._data(domObj,'events');//注意，這里不能像$('selector')._data('events')這樣用了。要想寫出兼容兼容各個jQuery版本的方式，這樣獲取即可：var eventsData = $.data(domObj,'events') || $._data(domObj,'events');//這個改變在easyui 1.3.1的源碼中也有體ps：1.接受的domObj節點必須為dom節點對象，不能為jquery對象，如果是獲取的jquery對象，要用get(0)或者[0]轉為dom對象2.只能獲取到使用jquery方法綁定的參數 on ,live 等。如果是直接寫到元素上的事件是不能獲取的，使用其他非jquery設置的事件也是無法獲取的
四：樣式與動畫
1，以下方法都是通過設置display屬性實現的。
前者,display: none； 后者,display: 上一個display屬性值。
對于jQuery提供的任何效果,都可以指定兩種預設的速度參數: 'slow' 和 'fast' 。使
用.show('slow')會在600毫秒(0.6秒)內完成效果,而.show('fast')則是200毫秒(0.2秒)。
如果傳入的是其他字符串( 一般是normal ),jQuery就會在默認的400毫秒內完成效果。
要指定更精確的速度,可以使用毫秒數值,例如.show(850)。注意,與字符串表示的速度
參數名稱不同,數值不需要使用引號。
hide(),show() ========== jQuery復合效果方法 toggle()
例如.hide('duration')【duration可以為 slow 或 fast 或 normal】方法,會同時減少元素的
高度、寬度和不透明度,直至這3個屬性的值都達到0,與此同時會為該元素應用CSS規則display:none。
而.show(' duration ')方法則會從上到下增大元素的高度,從左到右增大元素的寬度,
同時從0到1增加元素的不透明度,直至其內容完全可見。
fadeOut(),fadeIn() =========== jQuery復合效果方法 fadeToggle()
逐漸地增大其不透明度。會在一開始就設置元素尺寸
slideUp(),slideDown() =========== jQuery復合效果方法 slideToggle()
這兩個動畫方法僅改變元素的高度 , 實現垂直滑入的效果
2，fadeTo()方法： $(selector).fadeTo( speed,opacity[,easing,callback] )，
經測試，speed和opacity參數是必須的。
把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，并在動畫完成后可選地觸發一個回調函數。
這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
3，創建自定義動畫
①.animate()方法（測試瀏覽器 chromium）：點此查看.animate()更詳細的用法
①除非你為屬性值指定了單位(例如：px、em、%)，否則默認的數值單位為像素(px)。
②對于border等一些屬性，只有原來設置了初始值，動畫才能生效 。
③對于left top等屬性，和在css中一樣，要設置pisition屬性為 非static(即默認的position值) 的時候動畫才生效
所有塊級元素默認的CSS定位屬性都是static,這個值精確地表明:在改變元素的定位屬性之前試圖移動它們,它們只會保持靜止不動。
④color,background-color等屬性無法用于動畫(除非使用jQuery.Color()插件)
⑤fontSize 或者 font-size都可以。
⑥還可以將css屬性值設為一些特定的字符串，例如："show"、"hide"、"toggle"，則jQuery會調用該屬性默認的動畫形式。
⑦css屬性值也可以是相對的，你可以為屬性值加上前綴"+="或"-="，以便于在原來的屬性值上增加或減少指定的數值。
例如：{ "height": "+=100" }【省略了單位，默認為px】，表示在原有高度的基礎上增加100px。
因為涉及特殊字符問題,所以必須以字符串形式指定相對值,也就是說必須把值放到一對括號內
② 并發效果：效果同時發生，把所有屬性都放在animate()的第一個對象參數里即可實現并發效果
排隊效果：即讓效果一個接一個地發生
(1) 一組元素上的效果:
? 當在一個.animate()方法中以多個屬性的方式應用時,是同時發生的;
? 當以方法連綴的形式應用時,是按順序發生的(排隊效果)——除非queue選項值為false。
但是排隊不能自動應用到其他的非效果方法,如.css()。可使用queue()方法加入排隊，例如：
.queue(function(next) {
$switcher.css({backgroundColor: '#f00'});
next();
})
其中的next參數可以為任何其他參數，如aaaa，保持一致即可，如aaaa()。如果不加這個參數
動畫到這里就會中斷，queue()方法后面連綴的方法都將無法實現。
(2) 多組元素上的效果:
? 默認情況下是同時發生的;
? 當在另一個效果方法或者在.queue()方法的回調函數中應用時,是按順序發生的(排隊效果)。
五：操作DOM
1，attr(),removeAttr() 獲取、設置、移除 HTML文檔屬性.例 attr('placeholder','xxx')注意placeholder時val()要為空
2，prop(),removeProp() 獲取、設置、移除 DOM屬性
3，val() 獲取、設置表單控件的值。 三者用法區別與聯系，點此鏈接
4，創建元素
$()除了可以選擇DOM，還可以創建DOM,如$('<a href="#top">back to top</a>')將會創建一個dom元素
5，插入新元素。
insertBefore(),insertAfter(),prependTo(),appendTo() ///
\\\ before(),after(),prepend(),append()
$(A).insertBefore(B) 在B元素外部、之前添加$(A)；
如果$(A)是當前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這相當于一個移動操作，而不是復制操作,以下都一樣。
$(A) .prependTo(B) 在B元素內部、之前添加$(A)；
$(A) .appendTo(B) 在B元素內部、之后添加$(A)；
$(A) .insertAfter(B) 在B元素外部、之后添加$(A)。
$(A).before(B) 在$(A)外部、前面添加B;
$(A).after(B) 在$(A)外部、后面添加B；
$(A).prepend(B) 在$(A)內部、前面添加B;
$(A).append(B) 在$(B)內部、后面添加B;
6，包裝元素
wrap(),wrapAll(),unwrap().在匹配元素外層添加指定的DOM。詳細用法點此鏈接
7，顯示迭代
.each()。----> 詳細用法點此鏈接 <----注意與另一個全局$.each()函數區分
8, 復制元素
.clone()。返回當前jQuery對象的一個克隆副本點此查看詳細用法
9, 要用新元素或文本替換每個匹配的元素，使用：
? .html()
? .text()
? .replaceAll()
? .replaceWith()
- jQuery.text() 函數詳解 【注】text()設置后 只有文字內容，其他所有的html標簽都沒有了
- jQuery.html() 函數詳解
設置操作返回當前jquery對象，讀取操作返回讀取的字符串
10，要移除每個匹配的元素中的元素，使用：
? .empty() jQuery.empty() 函數詳解
$().empty() 等價于 $().html('')
11，要從文檔中移除每個匹配的元素及其后代元素，但不實際刪除它們，使用：
? .remove() jQuery.remove() 函數詳解
? .detach() jQuery.detach() 函數詳解
浙公網安備 33010602011771號