常用的JQuery函數(shù)及功能小結(jié)_

1、常用的JQuery函數(shù)及功能小結(jié)_ 這篇文章主要介紹了常用的JQuery函數(shù)及功能小結(jié) 的相關(guān)資料,需要的伴侶可以參考下 1.文檔加載完成執(zhí)行函數(shù) $(document).ready(function() alert(開頭了); ); 2.添加/刪除CSS類 $(#some-id).addClass(NewClassName); $(#some-id).removeClass(ClassNameToBeRemoved); 3.選擇符 利用了CSS和Xpath（XML Path Language）選擇符的力量，以及jQuery獨(dú)有的選擇符 3.1常用的： 1.依據(jù)標(biāo)簽名： $(p) 選擇文檔中的

2、全部段落 2. 依據(jù)ID： $(#some-id) 3.類： $(.some-class) 3.2用法CSS選擇符： $(#some-id li) 選擇特定id下的全部子li元素 $(#some-id li:not(.horizontal) 偽類選擇，特定id下全部沒有.horizontal 類的li元素 3.3用法XPath選擇符： 屬性選擇：$(atitle) 選擇全部帶title屬性的鏈接 $(divol) 選擇包含一個(gè)ol元素的全部div元素 $(ahref=mailto:%22) 選擇全部帶href屬性href且該屬性值以mailto開頭=mailto（標(biāo)識(shí)字符串開頭，$標(biāo)識(shí)字符串結(jié)

3、 尾，*表示字符串中任意位置） $(ahref$=.pdf) 選擇帶有href屬性且該屬性值以.pdf結(jié)尾的全部鏈接 $(ahref*=) 選擇消失在href任意位置(包含)的全部鏈接 3.4JQuery自定義選擇符（過濾器，從已選擇的結(jié)果集中過濾出符合某一條件的全部元素），與CSS的偽類選擇符相像，用法“:”開頭 1.$(div.horizontal:eq(1) 選擇帶有類horizontal的div集合中的第2個(gè)項(xiàng) $(div:nth-child(1) 選擇作為其父元素第1個(gè)子元素的全部div 2.自定義選擇符:odd和:even選擇奇偶行 $(tr:odd).addClass(odd);

4、 /過濾選擇結(jié)果集中的奇數(shù)元素 $(tr:even).addClass(even); /過濾選擇結(jié)果集中的偶數(shù)元素 3.自定義選擇符:contains() $(td:contains(Henry) 選擇包含Henry字符串的全部表格 3.5JQuery選擇函數(shù) 1.$(#some-id).parent() 選擇特定元素的父元素 2.$(#some-id).next() 選擇特定元素最近的下一個(gè)同級(jí)元素 3.$(#some-id).siblings() 選擇特定元素的全部同級(jí)元素 4.$(#some-id).find(.some-class) 選擇特定元素下全部包含特定類的元素 5.$(#som

5、e-id).find(td).not(:contains(Henry) 選擇特定元素下表格內(nèi)容不包含Henry的全部元素 5.$(#some-id).find(td).not(:contains(Henry).end() .end()表示回到最終一次.find()的元素處 3.6訪問DOM元素，用法get()方法從選擇后的JQuery對(duì)象中獲得，去掉JQuery的包裝 var myTag = $(#some-id).get(0).tagName; var myTag = $(#some-id)0.tagName; /與上面的等效 4.大事（都是給某一元素綁定大事） 4.1綁定大事 $(#som

6、e-id).bind(click, function() ) $(#some-id).unbind(click, bindedFunctionName); /移除已綁定的大事，前提是綁定的函數(shù)著名稱（不是匿名函數(shù)） $(#some-id).click(function() ) 4.2復(fù)合函數(shù)綁定大事 $(#some-id).toggle(function() ,function() ); /交替執(zhí)行 $(“#some-id”).toggleClass(hidden); / 添加/刪除類交替進(jìn)行 $(#some-id).hover(function() , function() ); /鼠標(biāo)進(jìn)入

7、元素時(shí)執(zhí)行第一個(gè)函數(shù)，離開元素時(shí)執(zhí)行其次個(gè)函數(shù) $(#some-id).one(click, functionName); /只需觸發(fā)一次，隨后便立刻解除綁定 4.3仿照用戶觸發(fā)某一大事 $(#some-id).trigger(click); /觸發(fā)特定元素的click大事 5.為元素添加效果 5.1讀取或設(shè)置CSS樣式屬性 $(#some-id).css(property) /讀取樣式值 $(#some-id).css(property, value) /設(shè)置一個(gè)樣式值 $(#some-id).css(property1: value1, property2: value2) /設(shè)置多個(gè)樣式

8、屬性 5.2轉(zhuǎn)變字體大小 $(document).ready( $(#button-id).click(function() var currentSize = $(#text-id).css(fontSize); /獵取字體大小，如30px var num = parseFloat(currentSize, 10); /將值轉(zhuǎn)為浮點(diǎn)數(shù)，.parseFloat( , )為javascript內(nèi)置函數(shù)，這里是轉(zhuǎn)為10進(jìn)制的浮點(diǎn)數(shù) var unit = currentSize.slice(-2); /獵取單位名稱，如px，.slice()是javascript內(nèi)置函數(shù)，獵取字符串指從定位置開頭的子

9、字符串，-2表示倒數(shù)兩個(gè)字符 num *= 1.5; $(text-id).css(fontSize, num + unit); /設(shè)置字體大小樣式 ); ); 5.3隱蔽和顯示 $(#some-id).show(); /無效果，會(huì)自動(dòng)記錄原來的display屬性值（如：block, inline），再回復(fù)display值 $(#some-id).hide(); /無效果，等效于：$(#some-id).css(display, none); 隱蔽元素，不保留物理位置 大小、透亮度漸漸改變的顯示或隱蔽 $(#some-id).show(slow); /指定顯示速度，在指定時(shí)間內(nèi)元素的高、寬、不

10、透亮度漸漸增加到屬性值，有：slow是0.6秒，normal是0.4秒，fast是0.2秒，或者挺直填入毫秒數(shù) $(#some-id).hide(800); /與.show()指定速度顯示一樣，指定時(shí)間內(nèi)高、寬、不透亮度漸漸減小到0 淡入淡出： $(some-id).fadeIn(slow); /指定時(shí)間內(nèi)不透亮度屬性值由0增加到1 $(some-id).fadeOut(slow); /指定時(shí)間內(nèi)不透亮度值由1減小到0 5.4構(gòu)建具有動(dòng)畫效果的show 主要調(diào)用.animate()方法，其有4個(gè)參數(shù)：包含樣式屬性及值的映射；可選的速度參數(shù)；可選的緩動(dòng)類型；可選的回調(diào)函數(shù)； 1.并發(fā)顯示多個(gè)效果

11、 $(#some-id).animate(height: show, width: show, opacity: show, slow, function() alert(動(dòng)畫顯示元素);); $(div .button).animate(left:600, height:44, slow); /水平位置從0移動(dòng)到600，高度由0增加到44 2.排隊(duì)顯示多個(gè)效果，級(jí)聯(lián)多個(gè).animate()，一個(gè)效果顯示完了再顯示下一個(gè)效果 $(#some-id).animate(left:600, slow).animate(height: 44, slow); 6DOM操作 6.1屬性操作 $(#some

12、-id).attr(property); /獵取屬性 $(#some-id).attr(property,value); /設(shè)置屬性 $(#some-id).attr(property1: value1, property2: value2); /設(shè)置多個(gè)屬性 修改一個(gè)段落中全部鏈接，并給每個(gè)鏈接附上新的id號(hào) $(div p .content a).each(function(index) $(this).attr( rel: external, id: link_ + index ); ); / * JQuery的.each()類似一個(gè)迭代器，給其傳遞的參數(shù)index類似一個(gè)計(jì)數(shù)器 * 6

13、.2插入新元素 1.將元素插入到其他元素前面：.insertBefore()和.before() 2.將元素插入到其他元素后面：.insertAfter()和after() 3.將元素插入到其他元素內(nèi)部或后面（相當(dāng)于追加一個(gè)元素）：appendTo()和append() 4.將元素插入到其他元素內(nèi)部或前面（相當(dāng)于追加一個(gè)元素）：prependTo()和prepend() 6.3包裝元素，將元素包裝到其他元素中 .wrap(); $(#some-id).wrap(li/li); / 將某一特定元素包裝到li中，即在特定元素外圍添加一個(gè)包圍元素 6.4復(fù)制元素 .clone() 1.$(#some-id).clone().appendTo($(body); 2.復(fù)制深度，當(dāng)傳入fa