Chapter 2 : Selecting the elements upon which to act
1.
$
和jQuery
是等價的雕拼。為了消除$
與同名變量的沖突乒躺,可以調用jQuery.noConflict()
來消解。
2.
對于jQuery中的包裝方法而言,它們會返回相同的元素組争涌,以便可以調用鏈式方法:
$("div.notLongForThisWorld").hide().addClass("removed");
3.
當頁面加載完成在調用某種方法時可以寫成
window.onload=function(){ //調用邏輯 }
但是,只有在DOM樹全部加載完成以及外部鏈接文件(如圖片辣恋、QuickTime插件等)也加載完成時才會調用該方法亮垫。這顯然是不合理的。
如果希望僅當DOM樹加載完成就立刻調用某種方法伟骨,使用:
jQuery(document).ready(function() { //調用邏輯 });
或簡寫形式:
jQuery(function(){ //調用邏輯 }
4.
想要在給定的結點之上開始按照選擇選選擇對應結點:
$(selector, yourNode)......
例如
$('div','div#sampleDOM')
表示在id為sampleDOM的div之上饮潦,尋找后代tag為div的結點。
5.
基本CSS選擇器說明:
說明:
E+F
表示選擇出所有這樣的F元素:E是它的前一個(previous)兄弟節(jié)點携狭。E,F
(逗號分隔)表示選出E和F$("img[title]")
表示選出所有具有title屬性的img元素A^=V继蜡、A!=V、A$=V、A*=V
分別表示選擇出某些結點稀并,它的具有屬性A仅颇,且A的值以V:開頭、不等于碘举、結尾忘瓦、包含。其中“不等于”不僅表示A的值不等于V引颈,也包括根本連A都沒有的元素政冻。此外,用時注意V要用引號:img[src^='abc']
线欲。
6.
位置選擇:
- a:first 選出第一個a元素
- p:odd 選出所有單數(shù)的p元素 明场、
- ul li:last-child 選出所有ul元素的后代元素中,最后一個li元素李丰。
以上是常用的位置選擇器苦锨。由其注意如格式
li:nth-child(even)
表示選出所有這樣的li:li是偶數(shù)的子節(jié)點。而不是選出li的偶數(shù)子節(jié)點趴泌。區(qū)別是舟舒,前者是在以li為子元素的父元素角度而言(通常是ul);后者直接把li當成父元素在其下搜索嗜憔,這是錯誤的秃励。另外,nth-child是從1開始算起吉捶,而其他選擇從0開始算起夺鲜。
7.
狀態(tài)選擇器(CSS偽類及jQuery定制偽類):
使用方法如:
$(":checkbox:checked:enabled")
,即選出所有在使能狀態(tài)下呐舔,被選中的checkbox币励。當然還有如:$("input[name='radioGroup']:radio:checked")
表示選出所有被選中的name為radioGroup的radio按鈕。注意珊拼!:謹慎使用:not食呻。
$(':not(img[src*="dog"])')
和$('img:not([src*="dog"])')
表達的意思完全不同!
-
$(':not(img[src*="dog"])')
表示選出所有src不包含dog的img結點澎现,包括那些img的src為cat的結點仅胞,也包括如input、p剑辫、a等不相干結點干旧; -
$('img:not([src*="dog"])')
表示選出所有的img結點,它的src不包括dog揭斧,如那些img的src為cat的結點莱革,但沒有p峻堰、a等其他不相干結點。
8.
div:has(span)
表示篩選出所有包含span子節(jié)點的div結點盅视。:has()方法捐名。
9.
創(chuàng)建元素
-
$("<div>Hello</div>")
∧只鳎或者$("<div>")
镶蹋,這等價于$("<div></div>")
和$("<div/>")
。創(chuàng)建完成之后赏半,使用attr()贺归、css()方法來添加屬性和樣式。 - 創(chuàng)建元素的另一種辦法:
創(chuàng)建了一個img元素及其屬性断箫,后面追加css樣式拂酣,再加入到body元素中去。$('<img>', { src: 'images/little.bear.png', alt: 'Little Bear', title:'I woof in your general direction', click: function(){ alert($(this).attr('title')); } }) .css({ //css()函數(shù)的另一種用法:傳入對象 cursor: 'pointer', border: '1px solid black', padding: '12px 12px 20px 12px', backgroundColor: 'white' }) .appendTo('body');
10.
jQuery使用選擇器將返回一個元素集合(行為類似數(shù)組)仲义,以下方法可以在其上使用婶熬,如$("a").size()
或者$("a").first()
。
size()
返回該集合的大小-
get(index)
- 如果index指定值埃撵,則返回這個DOM元素赵颅。
- 如果沒有指定index,則返回一個JavaScript數(shù)組暂刘,里面是所有的DOM元素饺谬。
- 如果index=-1,代表返回倒數(shù)第一個元素谣拣,以此類推募寨。
- 如果沒有這個元素,返回undefined芝发。
.get(index)
可以用[index]
來代替绪商。
eq(index)
苛谷。其行為和下面代碼等價:$( $(selector).get(index) )
辅鲸。即返回index位置上的指定DOM元素再封裝為jQuery對象。first()腹殿、last()
返回集合中第一個/最后一個DOM元素并包裝為jQuery對象独悴,如果沒有,則是空對象(是指length===0锣尉,而不是null)刻炒。toArray()
。它的行為和下面相當:get()
自沧,即以JavaScript數(shù)組形式坟奥,返回所集合中所有DOM元素。-
index(element|selector)
參數(shù)可以是一個jQuery對象,也可以是一個選擇簸淀,返回第一個該元素的index索引愚争,如果沒有則返回-1。
例如:var n = $('img').index($('img#findMe')[0]); //或 var n = $('img').index('img#findMe');
-
add(expr,context)
访敌,創(chuàng)建集合的一個副本凉敲,往里面添加元素,并返回這個新集合寺旺。-
expr
:可以是:< 選擇器 |單個DOM對象 | DOM對象數(shù)組 | HTML代碼片段 >爷抓。- 如果是選擇器,則在context指定結點之下開始查找對應元素(若沒有指定context阻塑,則從全文查找)蓝撇,并添加進入原集合副本中。
- 如果是DOM對象或DOM對象數(shù)組陈莽,則直接添加唉地。
- 如果是HTML代碼片段,則先創(chuàng)建元素传透,再添加進入集合(而不是進入DOM樹耘沼,若想要進入DOM樹,還要后續(xù)使用
appendTo
方法)朱盐。
-
context
上下文參數(shù)群嗤,指定從哪個地方(結點)開始查找。它可以是< 選擇器 | 當個DOM對象 | DOM對象數(shù)組 | jQuery >
根據(jù)
add
方法會返回一個副本的情況兵琳,它可以被用于以下場景:假定我們想要為所有具有alt屬性的img添加thickBorder類狂秘,并且同時具有alt和titl屬性的img添加seeThrough類,我們可以寫為:
$('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough')
-
-
not(expr)
給出原集合的一個副本躯肌,從中移除expr指定的元素并且返回這個新集合者春。-
expr
:可以是:< 選擇器 |單個DOM對象 | DOM對象數(shù)組 | 函數(shù) >。- 如果是選擇器清女、DOM對象或DOM對象數(shù)組钱烟,則與上面相同。
- 如果是函數(shù)嫡丙,則對于結合中每一項都應用這個函數(shù)拴袭,在函數(shù)中使用
this
來訪問當前對象元素。如果返回true
則代表移除://移除所有img元素集合中曙博,不具有類'keepMe'的項拥刻。 //注意 $(this) 的使用 $('img').not(function(){ return !$(this).hasClass('keepMe'); })
-
-
filter(expr)
與not(expr)
剛好相反,它是篩選函數(shù)父泳,是保留符合要求的項般哼,當傳入函數(shù)時吴汪,如果函數(shù)返回true,則保留當前項蒸眠,否則移除這個項浇坐。-
expr
:可以是:< 選擇器 |單個DOM對象 | DOM對象數(shù)組 | 函數(shù) >。
-
-
slice(beg,end)
分割方法黔宛,返回一個集合∈[beg,end )近刘。-
beg
開始點,以0位第一個臀晃。 -
end
結束點觉渴,不包括該點。
注意徽惋,
.slice(2,3)
和.get(2)
都能得到第3個元素案淋。不同的是,前者返回的是集合,而后者但單個的DOM元素险绘。 -
-
has(expr)
踢京,返回一個新集合,其內元素具有滿足expr條件的子元素宦棺。-
expr
可以是:< 選擇器 |單個DOM對象 >瓣距。- 如果是選擇器,則只有當元素具有匹配該選擇器的子元素時代咸,該元素才在集合中蹈丸。
- 如果是單個DOM對象,則只有當元素具有匹配該DOM對象的子元素時呐芥,該元素才在集合中逻杖。
-
-
map(callback)
映射函數(shù),對每一項應用callback思瘟,并將返回的值放入新集合中荸百,返回該新集合。-
callback
具有:function ( index, element){...}
的形式滨攻。index
是該元素的索引下標够话,而element
是指其本身(DOM對象),在函數(shù)中铡买,也可以調用this
來引用element
更鲁。 -
【注意!】如果
callback
返回null
奇钞,則它不會被加入到新集合中。var allIds = $('div').map(function(){ return (this.id==undefined) ? null : this.id; }).get();
-
-
each(callback)
遍歷方法漂坏。對每一項執(zhí)行callback
函數(shù)景埃,返回原集合媒至。callback
具有:function(index,element){...}
形式。element
也可以用this
來引用(綁定了上下文)谷徙。返回原集合拒啰,所以可以進行鏈式使用。
each
也可以對JavaScript數(shù)組進行遍歷完慧,只要將其封裝為jQuery即可:
$([1,2,3]).each(function(){ alert(this); });
11.
對鏈式的處理:
-
end()
函數(shù)谋旦。
觀察代碼:$('img').filter('[title]').hide()
,代表先找出所有的img結點(這個集合為S1)屈尼,而后在S1之上調用filter方法篩選出具有title屬性的結點集合(記為S2)册着,之后調用hide方法將S2中所有結點隱藏。
此時脾歧,如果我們仍要按照鏈式寫法往后面掛鏈甲捏,想要為S1中結點都添加一個class類就會出現(xiàn)問題:我們找不到S1了,此時僅能找到S2鞭执,那么如何調用S1呢司顿?
答案是調用end()
方法。這個方法會返回調用它的集合(S2)的上一個產生集合(S1)兄纺,所以:$('img').filter('[title]').hide().end().addClass('anImage');
Used within a chain of jQuery methods to back up the current wrapped set to a previously returned
set. -
andSelf()
方法大溜。
該方法會將上個例子中的S1和S2兩個集合糅合起來并返回。Merges the two previous wrapped sets in a method chain.
12.
-
find(selector)
方法估脆。
該方法會在集合中尋找出滿足selector的所有元素并返回這個集合猎提。 -
is(selector)
方法。
該方法會返回true旁蔼,當且僅當調用的結合中至少具有一個滿足selector選擇器的元素锨苏;否則,返回false棺聊。
===================================================== -
closest(selector)
方法伞租。- 該方法返回集合中每一個元素的最近的祖先元素(包括它本身)。
- 如果selector指定為
"*"
限佩,則返回該元素本身葵诈,也就是從自身算起向上尋找。 - 如果多個元素的最近一個祖先元素是同一個祟同,那么返回的集合中這個祖先元素就只會出現(xiàn)一次作喘。
-
parent( [selector] )
方法。它與closest(selector)
方法很相似晕城,不同的是泞坦,它會去尋找集合中每個元素的直接父節(jié)點,并且將匹配selector的直接父節(jié)點放入返回的新集合中砖顷。 -
parents( [selector] )
方法贰锁。它又與parent
很像赃梧,不過它會找尋所有祖先節(jié)點,并且篩選出匹配selector的豌熄。 -
parentsUntil( [selector] )
方法授嘀。找到節(jié)點的所有祖先節(jié)點,直到搜索到滿足selector的結點(不包括)停止锣险,返回蹄皱。 -
offsetParent()
方法。允許我們搜索 DOM 樹中元素的祖先芯肤,并構造一個由最近的定位祖先元素包圍的 jQuery 對象巷折。定位元素指的是,元素的 CSS position 屬性設置為 relative纷妆、absolute 或 fixed盔几。在為表演動畫計算偏移或在頁面上放置對象時,該信息會很有用處掩幢。
===================================================== -
children( [selector] )
方法逊拍。返回結點的直接孩子結點(即兒子節(jié)點,而不是孫子節(jié)點曾孫結點等等)际邻。selector
參數(shù)可選芯丧。 -
contents()
方法。獲得匹配元素集合中每個元素的子節(jié)點(應當區(qū)分子節(jié)點和后代結點兩個術語的差異)世曾,包括文本和注釋節(jié)點缨恒。 -
next( [selector] )
方法。返回集合中每個結點的下一個兄弟節(jié)點所組成的新集合轮听。 -
nextAll( [selector] )
方法骗露。返回集合中每個結點的后面所有兄弟節(jié)點所組成的新集合。 -
nextUntil([selector])
方法血巍。返回結合中每個結點的后面所有直到(不包括)符合selector的兄弟節(jié)點萧锉。Returns a wrapped set of all the following siblings of the elements
of the wrapped elements until, but not including, the element
matched by the selector. If no matches are made to the selector, or
if the selector is omitted, all following siblings are selected. -
siblings( [selector] )
方法。返回結點的所有滿足selector的兄弟節(jié)點述寡。 -
prev([selector])
方法柿隙。獲得集合中每個元素緊鄰的前一個兄弟元素,通過選擇器進行篩選是可選的鲫凶。 -
prevAll([selector])
方法禀崖。獲得集合中每個元素之前的所有兄弟元素(滿足selector),通過選擇器進行篩選是可選的螟炫。 -
prevUntil([selector])
方法波附。返回結合中每個結點的前面所有直到(不包括)符合selector的兄弟節(jié)點。
Chapter 3 : Bringing pages to life with jQuery
1.
屬性(Attribute)和特性(Property)。
…… the tag name is img, and the markup for id, src, alt, class,
and title represents the element’s attributes, each of which consists of a name and a value.……. The attributes are gathered into a list, and this list is stored as a property named, reasonably enough, attributes on the DOM element instance.
In addition to storing the attributes in this
list, the object is given a number of properties, including some that represent the attributes of the element’s markup.
假若有如下一個HTML標簽:
![](image.gif)
其中叶雹,標簽名是img财饥,而像id换吧、src等便是它的屬性(attribute)折晦,屬性是名值對,如名為id沾瓦,值為myImage满着。
它們被存在一個名為“attributes”的列表(NodeList)中,而這個列表正是作為該元素的一個特性(property)而存在的贯莺。所以风喇,想要訪問如alt,可以使用:document.getElementById("myImage").attributes.alt
來獲得(注意.attributes.
是特性名)缕探。
然而除此之外魂莫,還有一些特性,它們的值與某些屬性值關聯(lián)爹耗,例如耙考,使用document.getElementById("myImage").alt
也能訪問到值,只是此處alt是作為特性出現(xiàn)潭兽,又如倦始,document.getElementById("myImage").className
的值和document.getElementById("myImage").attributes.class
是相同的。
2.
獲取或設置屬性值
-
attr(name)
返回元素集合中第一個元素的名為name的屬性值山卦。如果元素集合為空或者不存在name屬性鞋邑,則返回undefined
。對于用戶自定義屬性也能訪問到账蓉。此處枚碗,屬性名不分大小寫。 -
attr(name,value)
設置名為name的屬性值為value铸本。value可以是一個函數(shù)肮雨,會被每一個集合元素調用。有兩個參數(shù)归敬,一個是該元素的index酷含,一個是該元素name屬性值,其返回值將作為該元素name的新屬性值汪茧。另外椅亚,函數(shù)中this
綁定為當前元素本身。 -
attr(object)
設置屬性值舱污,參數(shù)是一個對象呀舔,里面提供屬性名和屬性值的名值對。注意到如果一個值是函數(shù),那么該函數(shù)返回值為屬性值媚赖。 -
removeAttr(name)
移除名為name的屬性霜瘪。注意,移除了name屬性但卻不會移除與之相關的的特性惧磺,但是值會發(fā)生一些變化颖对。例如,移除readonly屬性磨隘,就會使得名為readonly的特性值由true自動變?yōu)閒alse缤底。Note that removing an attribute doesn’t remove any corresponding property from the JavaScript DOM element, though it may cause its value to change.
For example, removing areadonly
attribute from an element would cause the value of the element’s readOnly property to flip fromtrue
tofalse
, but the property itself isn’t removed from the element. - 對于具有
disabled
狀態(tài)的元素,不能通過諸如$(whatever).attr("disabled","enabled");
的方式將其變?yōu)榭捎脿顟B(tài)番捂,這是因為只要disabled出現(xiàn)个唧,無論它的值是什么都沒有關系,它就是不可以狀態(tài)设预。為了使之可用徙歼,可以將該屬性直接移除,或者使用jQuery方法鳖枕,給它設置為false
即可魄梯。 -
data(name,value)
為元素設置數(shù)據(jù),數(shù)據(jù)名是name耕魄,值是value画恰。若value是函數(shù),則以其返回值為值(函數(shù)的this綁定為當前元素)吸奴。 -
data(name)
根據(jù)提供的name獲取之前存儲的數(shù)據(jù)允扇。不過,沒有必要移除data數(shù)據(jù)则奥,因為只要通過jQuery方法移除DOM結點考润,則與之相關的data數(shù)據(jù)也會自動移除。 -
addClass(names)
為該元素添加類读处,如果names是函數(shù)糊治,則以函數(shù)返回值作為類名,添加進去罚舱。 -
removeClass(names)
移除names指定的類井辜,如果names是函數(shù),則其返回值就是要移除的類管闷。 -
toggleClass(names)
如果存在names指定的類粥脚,則移除;否則添加names包个。names也可以是一個函數(shù)刷允。 -
toggleClass(names,switch)
此時指定switch是true還是false。如果是true,則添加names類树灶,否則移除names類纤怒。 -
hasClass(names)
判斷集合中是否存在元素具有names類,如果有則返回true天通,否則為false泊窘。實際上它和is(".className")
功能一樣,不過該方法效率更高土砂。 -
css(name,value)
方法州既。設置name為value的Css值谜洽,value是函數(shù)的話萝映,則以其返回值為CSS值。 -
css(object)
方法阐虚。批量設置CSS值序臂,傳入的是對象。 -
css(name)
方法实束。獲得名為name的Css值奥秆。 -
width() height()
方法,用于獲取集合中第一個元素的寬高咸灿。 -
width(value) height(value)
方法构订,用于設置集合中元素的寬高。注意避矢,雖然也可以通過.css("width",500)悼瘾、css("width")
來達到同樣效果。但是审胸,如果在元素沒有設置css的寬高時亥宿,css方法無法獲取,但是width和height方法仍然可以獲取寬高值砂沛。 -
offset()
返回集合中第一個元素相對于文檔(document)的偏移(位置)烫扼。返回的是一個JavaScript對象,有l(wèi)eft和top的屬性(pixel)碍庵。 -
position()
返回集合中第一個元素相對于它最近的具有相對位置(position:relative或position:absolute)的父級元素的距離映企,如果找不到這樣的元素,則返回相對于瀏覽器的距離静浴。返回的是一個JavaScript對象堰氓,有l(wèi)eft和top的屬性(pixel)。只對可見元素生效 -
scrollLeft()
方法返回或設置匹配元素的滾動條的水平位置马绝。滾動條的水平位置指的是從其左側滾動過的像素數(shù)豆赏。當滾動條位于最左側時,位置是 0。
-
html()掷邦、html(contents)
獲得或設置原生JavaScript中的innerHTML屬性值白胀。contents也可以是函數(shù),函數(shù)返回值作為設置內容抚岗。 -
text()或杠、text(contents)
獲得集合中所有元素的text并且連接起來作為字符串返回,或者設置文本內容為contents向抢。設置為contents時和html(contents)
方法差不多,只不過挟鸠,會將<亩冬、>等將轉為html實體字符,即照原樣打印出來硅急。
比如,有如下:
則<table> <tr> <td>張三</td> <td>工程師</td> </tr> <tr> <td>李四</td> <td>教師</td> </tr> </table>
$("tr").text()
將返回字符串:張三工程師李四教師
营袜。
3.
DOM結點操縱
-
prepend(ele)撒顿、append(ele)、before(ele)荚板、after(ele)
方法凤壁,會將ele插入到集合中每一個元素中作為最后一個孩子節(jié)點/第一個孩子節(jié)點/前一個兄弟節(jié)點/后一個兄弟節(jié)點(如果ele插入到很多個元素中去則會調用克隆方法)。ele可以是HTML字符串啸驯、jquery元素客扎、DOM對象、函數(shù)罚斗。如果是DOM對象徙鱼,則會從原來位置移除。 -
appendTo(ele)针姿、prependTo(ele)袱吆、insertBefore(ele)、insertAfter(ele)
是和上面相反的方法距淫。會將集合中元素依次都插入到ele中作為最后一個孩子節(jié)點/第一個孩子節(jié)點/前一個兄弟節(jié)點/后一個兄弟節(jié)點绞绒。ele可以是一個選擇器字符串或者DOM對象。 -
wrap(ele)
包裝方法榕暇。A.wrap(B)
表示將創(chuàng)建B元素(如果B是一個html格式的字符串)或者克隆一個B元素(如果B是DOM結點對象)蓬衡,然后喻杈,將A這個jquery集合的元素包裹分別在B中。即如原來文檔結構是:C(A1 A2 A3...An)則現(xiàn)在是:C(B1(A1) B2(A2) .... Bn(An))狰晚,它會在原來基礎上對DOM樹做改動筒饰。 -
wrapAll(ele)
包裝方法。A.wrapAll(B)
表示將創(chuàng)建B元素(如果B是一個html格式的字符串)或者克隆一個B元素(如果B是DOM結點對象)壁晒,然后瓷们,將A這個jquery集合的元素包裹全部包裹在一個B中。即如原來文檔結構是:C(A1 A2 A3...An)則現(xiàn)在是:C(B(A1 A2 .... An))秒咐,它會在原來基礎上對DOM樹做改動谬晕。 -
wrapInner(wraper:[String|DOMElement])
包裹文本節(jié)點。A.wrapInner(B)攒钳,B代表參數(shù)wraper中的第一個元素夕玩,然后,用B的克隆代替A中的每一個元素尸昧,并將A元素的text結點追加到B節(jié)點中烹俗。即:C( A(textA))變?yōu)镃(B(textB textA)) -
unwrap()
去掉父元素(即去掉元素外面包裹的元素)幢妄。即若原來是<tr><td><div>inner</div></td></tr>
蕉鸳,則對于其中的div使用unwrap()方法就會變?yōu)椋?code><tr><div>inner</div></tr>潮尝。 -
remove(selector:[String])
刪除結點勉失。如果沒有參數(shù)顽素,則會將該節(jié)點以及后代結點全部移除戈抄。返回被刪除的結點划鸽。該方法不會把匹配的元素從 jQuery 對象中刪除裸诽,因而可以在將來再使用這些匹配的元素丈冬。但除了這個元素本身得以保留之外埂蕊,remove() 不會保留元素的 jQuery 數(shù)據(jù)蓄氧。其他的比如綁定的事件喉童、附加的數(shù)據(jù)等都會被移除堂氯。這一點與 detach() 不同咽白。
而參數(shù)selector表示從集合中篩選出要刪除的,比如$("tr").remove(":even")
表示刪除表格中的偶數(shù)行叁扫,也就是從tr集合中使用:even
篩選出偶數(shù)行畴蒲,然后移除模燥。 -
detach(selector:[String])
和 remove方法類似,只是它返回被刪除的元素么翰,會保留他們的事件以及jQuery如data綁定的數(shù)據(jù)等等浩嫌,以后可以再插回去使用码耐。 -
empty()
清空子元素以及后代元素(只保留個空殼)骚腥。所以想要清除本元素束铭,需要在父元素上調用,這樣父元素就剩下一個空殼代芜。這個方法是沒有返回值的,所以會徹底刪除贷掖。 -
clone(copyHandlers:[Boolean])
克隆方法昆咽。后代元素也會被拷貝掷酗。參數(shù)如果為真泻轰,則綁定事件也會被拷貝浮声。 -
replaceWith(content:[HTMLString|Element|Function])
置換方法。用content參數(shù)指定的元素來替換原元素然痊。如果是函數(shù)剧浸,則函數(shù)返回值作為內容,這個函數(shù)沒有參數(shù)真仲,可用this秸应。返回被替換的元素集合。- 如果代替值是一個已存在的DOM元素節(jié)點桑谍,那么會將該元素從原位置移出锣披,并用它來代替被代替結點雹仿;
- 如果有多個結點要被同一個結點所代替胧辽,后者會進行克乱厣獭(綁定事件也會被克氯硕稀)恶迈,然后分別代替蝉绷,(并且仍然會被移出)
-
replaceAll(selector:[String])
替換方法熔吗,和上面不同的是替換順序不一樣桅狠,表示將用集合元素去替換頁面中匹配selector的元素中跌,相當于append
和appendTo
的關系漩符。具體為嗜暴,假設A={a1,a2},而selector匹配一眾元素B={b1,b2,...,bn}闷沥,則A.replaceAll(selector)表示蚂维,將a1路狮、a2從原位置移出孝鹊、克隆,并且使用A去替換b1锰悼、b2箕般、....丝里、bn。值得注意的是臼婆,返回值不是返回B颁褂,而是返回A颁独。
4.
操作表單元素誓酒。
-
val()
元素靠柑,返回表單元素的value值病往。值得注意的是停巷,有多個元素畔勤,它值返回第一個元素的val庆揪。比如有如下復選框:<input type="checkbox" name="checkbox" value="1">One <input type="checkbox" name="checkbox" value="2">Two
它們盡管name相同,但是可以多選(和radio不同)内颗。將二者都選中均澳,然后使用
$("input[type='checkbox']:checked").val()
只能返回1而得不到第二個值糟袁。但是项戴,使用下列代碼可以變通得到:$("input[type='checkbox']:checked").map(function(){ return $(this).val() }).toArray()
可以得到value值數(shù)組肯尺。
val(value)
設置value。這是常規(guī)用法氓仲。另一種有用的用法是敬扛,它可以使得checkbox或radio被選中啥箭。將給val傳入一個數(shù)組,那么坏怪,元素集合中铝宵,checkbox或radio鹏秋,只要value和數(shù)組中的值匹配,它就能被選中。例如:$("input[type='checkbox']").val([2,3,4])
在上面例子中绝骚,值為1的復選框由于不在這個數(shù)組中粪牲,所以自動撤選,而value為2的復選框穿香,因為在這個數(shù)組中焙蚓,所以被選中。