jquery學習筆記

第一章 開始Jquery


在每個實例中需要領會解決問題的思路的步驟


1 資源


下載jquery源代碼 http://docs.jquery.com/Downloading_jQuery


                          http://d.download.csdn.net/down/976175/xb520hh


2 調用


使用<script type="text/javascript" src="lib/jquery.js"></script> 根據個人jquery.js文件的路徑不同改變 src的值

如果你使用外部文件custom.js調用jquery,使用<script type="text/javascript" src="lib/custom.js"></script>

同樣是根據路徑的不同更改src

使用$(document).ready(function(){ //your code });包含jquery代碼


3 jquery 官方網站 http://jquery.com/


4 jquery 中文社區 http://bbs.jquery.org.cn/frame.php?frameon=yes&referer=http%3A//bbs.jquery.org.cn/thread-8-1-1.html


http://bbs.51js.com/viewthread.php?tid=79244


5 $()函數是一個工廠即工廠函數,是一個基本的創建塊,選擇文檔的一部分,即得到的是一個元素

a tag name : $("p");

an ID : $("#some-id");

a class : $(".some-class");

獲得子節點元素: $("#some-id > li ");

給不含某個類名的其他的標籤付class :$("#some-id li:not(.some-class)").addClass("some-other-class");

就是給li標籤中class不是some-class的定義一個class some-other-class


當存在多個Js庫的時候$()標籤可能會產生誤解,因爲其是js通用的標籤,這時要使用jQuery代替$


6 添加類 $("").addClass("類名"); 刪除類$("").removeClass("類名");


7 jQuery 允許我們確定函數調用的時間,DOM 被加載後才調用。使用$(document).ready() 結構,不需要等圖像加

載。



8 如何學習


初學,動手要勤於動腦(光看).

以demo爲藍本,一點一點的改,確保每一部修改都能運行。 一段時間後,你就會逐步掌握了。

不要急,初學任何東西都是這樣的!


第二章 選擇器-得到你想要的


1 css選擇器

參見第一章中的 5


2 Xpath路徑選擇器

1)得到具有某個屬性的標籤:$('a[@title]'); 得到函數屬性title的a標籤

2)得到具有某個標籤的標籤:$('div[ol]'); 用來得到含有ol標籤的div標籤

3)正則表達式:

已知標籤的開頭:$('a[@href^="malito:"]'); 得到href屬性以mailto:開頭的a標籤

已知標籤的末尾:$('a[@href$=".pdf"]');得到href屬性以.pdf爲結束的a標籤

已知標籤中的任意位置含有的字符 :$('a[@href*="mysit.com"]');得到href屬性中含有mysite.com字符的a標籤

3 自定義選擇器

1)得到一個對象或數組中的第二項:$('div.horizontal:eq(1)');得到樣式class爲horizontal的所有標籤集合中的第二項

2) 得到任何div的父親的第一個孩子:$('div:nth-child(1)'); ??


4 樣式化交替的行

:odd 奇數行 $("tr:odd").addClass('some-class1') 給tr標籤中的奇數行賦予樣式some-class1

:even 偶數行 $("tr:even").addClass('some-class2') 給tr標籤中的偶數行賦予樣式some-class2

注意,在一個頁面中如果有超過一個表格的話,或許這不是我們想看到的結果。例如,既然
在這個表格的最後一行有一個灰藍的背景,那 麼在下一個表格的第一行將會有一個灰黃的背
景。在第7章我們會研究如何避免這類問題。


:contains("string") 得到含有的字符串的標籤的文本 $('td.contains("Henry")').addClass("some-class") 得到文本中含有Henry字符串的td標籤,然後將some-class對應的樣式賦給它


5 DOM遍歷方法


參見書上的示例

$("th").parent().addClass("heading_line");
$("tr:not([th]):odd").addClass('odd');
$("tr:not([th]):even").addClass('even');

$('td:contains("Henry")').next().addClass('highlight');


1) 得到父節點:$("th").parent() 例:設置單獨的行,利用單獨行的子標籤的找到其標籤 即 $("th").parent().

addClass("some-class");增加類名到達樣式特殊化的效果

2) 得到特殊行以外的兄弟節點:使用not([]) 例 :排除統一標籤的特殊行 $("tr:not([th])");

3) 得到下一個兄弟節點 :使用.next() 例 :參見上面

取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。

使用.next(expr) : 這個函數只返回後面那個緊鄰的同輩元素,而不是後面所有的同輩元 素。 可以用一個可選的表達式進行篩選。

4) .prev() :取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。

.prev(expr) :可以用一個可選的表達式進行篩選。 這個函數只返回前一個緊鄰的同輩元素,而不是前面所有的同輩元 素。

5) 得到一個標籤後面的兄弟節點:使用.sibling(); 例 :$('td:contains("Henry")').siblings().addClass('highlight');

6) gt()和eq(); 例 :$('td').parent().find('td:gt(0)') .addClass('highlight'); 得到td父標籤,然後找到父標籤的td

子標籤,並過濾掉第一個td子標籤,$('td:contains("Henry")').parent().find('td:eq(1)').addClass( 'highlight')

這個是得到上面所描述的第二個td子標籤


6 訪問DOM元素


1) get():得到元素,相當於document.getElementById() 如果要訪問第一個元素用.get(0),如果有多個元素的話使用.

get(index)來選擇,如果我們想知道 id 爲#myelement 的元素的 tag name 的話,可以用:$('#myelement').

get(0).tagName,爲了方便可以使用如下的方式$('#myelement')[0],同上面是一樣的


第三章 事件——扣動扳機

3.1 在頁面加載後執行任務

1 $(document).ready(function(){}); 使用這個在頁面加載的時候執行js語句,相當於window.onload,可執行多個

函數 function aa(){} function bb(){} $(document).ready(function(){aa();bb()})是有效的


3.2 簡單的事件

1 對於JS的綜合的考慮:遵循漸進增強的原則,頁面的樣式轉換器應該能夠在javascript無效時隱藏起來,甚至跟好的是,

能夠通過鏈接,到當前頁面的替代版本而能起到應有的作用


2 書上是通過一個改變樣式的示例來闡述如何執行一個事件,具體的請參考書


3 .bind() : 執行事件的函數 示例:$(document).ready(function(){$(#id).bind('click',function(){

$('body'.addClass('some-class');)});});

可以捆綁多個觸發事件,這個示例是通過事件來改變不同的樣式,可以添加也可以刪除removeClass('some-class');

jquery有簡寫的方法,就是不用.bind直接接事件 ,$('#id').click(function(){});這種方式是比較常用的


4 環境關鍵字this :當觸發任何事件的時候(這裏是onclick事件),關鍵字this引用的都是攜帶相應行爲的dom元素,這個

就相當於,我們在html中使用的<a id="alist" onclikc="change('this')">的效果是相同的


5 書上通過環境關鍵字this, 簡化了jquery代碼 ,並使用多個函數中具有相同功能的代碼歸併在一個函數中,具體的流程參

見書上29-32頁


3.3 複合事件


1 Jquery中自定義的事件處理程序.ready() , .toggle() , .hover() 後兩個成爲複合事件處理程序


3.3.1 顯示和隱藏內容特性


1 兩個函數 .toggle()和toggleClass() ,toggle()可以執行兩種交替的樣式變換,如果只是隱藏最好的方法是使用後者

示例:$('#id').toggle(function(){$('#id/.class').addClass('hidden')},function(){$('#id/.class').removeClass('hidden')};,)


$('#id').click(function(){$('#id/class').toggleClass('hidden')};) toggleClass方法是自動檢查該類是否存在,存在刪除,不存在添加,這個方法是很好用的


3.3.2


1 jquery實現的點擊觸發事件的標籤可以不被限制在a標籤和button按鈕的範圍,也就是說div標籤也是可以執行.

toggle()方法的,還可以執行toggleClass();和.hover(),就像是鼠標劃過一樣


2 .hover() 示例:類似.toggle() 也是有兩個函數 $('#id').hover(function(){$('#id/.class').addClass('class')},function(){$('#id/.class').removeClasss('class')});


3.3.3 事件撲獲和事件冒泡機制,jquery會在事件冒泡階段註冊事件處理程序,首先相應事件的是最具體的元素,然後會向上冒泡到最外層的父元素。


3.3.4 .hover()可以解決事件冒泡機制帶來的錯誤,所以使用.hover來代替mouseout();mouseover();


3.4 限制和終止事件


1 當使用onclick處理事件時,有必要對事件的作用範圍進行限制.這時就要給事件函數傳遞一個參素就是event事件類


2 event.target:事件目標。這個事件的目標可以確定點擊事件賦予的元素即$('#id')...中的id,而不會產生冒泡的事件,

避免其他的元素相應這個事件

實例:$('#div-id').click(function(event){if(event.target==this){(摺疊的效果)}})就是說在沒有 這個判讀的時候,div-id代表的標籤下的所有的元素標籤都可以執行摺疊的效果,加上這個就可以控制只 有點擊id爲div-di的標籤是才能執行摺疊的的效果


3 event.stopPropagation():避免所有的元素都相應這個事件


4 阻止默認事件操作,使用preventDefault();和返回false:,默認事件操作是指比如,點擊a按鈕轉到相應的鏈接,提交表

單submint,轉向到action指定的頁面


5 事件傳播和默認操作是相互獨立的兩套機制,stopPropagation();是阻止事件傳播,而preventDefault()是阻止默認

操作的執行,而返回false是兩者的結合;


6 unbind:反綁定,即接觸事件操作,有利於控制冒泡。反綁定簡寫的方式現在不在使用


7 .one()函數不好用


8 .trigger():程序加載是執行的事件處理程序,在這裏就是,當頁面信息加載完成後執行摺疊頁面的效果

示例:$('#id').trigger('click');這裏的id要和事件加載的id值保持一致$('#id').click();

簡寫:事件觸發函數沒有任何的參數,即$('#id').click();


第四章 效果—爲操作添加藝術性


4.1 修改內聯css


1 .css:讀取已經存在的樣式和添加樣式,如果不是動態的改變樣式的值的情況下,添加固定的樣式類則和使用.addClass

是一樣的,如果需要添加不斷更新的類的屬性的時候需要使用.css

示例:$('#id').css('property','value'); 多個屬性$('#id').css({'property':'value','property1','vlaue1'})

以後每章具體的示例參見手冊 .css('cursor','pointer')


2 parseFloat():從字符串中讀取數字

paresFloat("a2355",10)這種情況返回的是NaN,如果字符串的首字符不能被轉換爲數字,也就是說不 是數字則返回NaN。

示例 paresFloat("2355aa",10)= 2355;這裏面的10含義是確保爲十進制數


3 slice():從指定的位置開始讀取字符串


4 $('#id')[0].id:得到的是指定元素的id的值,因爲使用$('#id')是創建一個jquery對象,所以要使用下標值


5 書上的示例在ie中是無效的??


4.2 基本的隱藏和顯示


1 .hide():隱藏元素下的內容

示例 $('#id').hide();

2 .show():顯示內容

示例 $('#id').show();


4.3 速度和效果


1 速度參數:.show('slow') .show('normal') .show('fast') 速度分別是0.6 0.4 0.2 秒,也可以使用具體的秒數,但 要注意不能加引號,.show(850) , show和hide會同事修改多個樣式,包括高度,寬度和不透明度


2 淡入淡出:.fadeIn('slow') 淡入 fadeOut(2000) 淡出


4.4 多重效果


1 fadeIn和fadeOut:不透明度


2 fadeTo:不透明度 示例fadeTo('slow',0.5),將不透明減退到0.5


3 slideDown()和slideUp():高度,slideUp('slow');向上摺疊


4 animate():多重效果的自定義動畫,包含四個參數,a:屬性和樣式映射,類似.css(),b:速度參數,c:可選的緩動類型

d:可選的回調函數,參數可以是任意的組合


5 通過CSS設置定位:在沒有設置position的值時,所有的塊級元素默認的css定位屬性都是static,這個屬性明確的告訴我 們在改變元素的定位屬性,即使用position:定義位置,之前試圖移動他們是沒有作用的

參見示例


6 w3c中的css規範中的盒模型可以在http://www.w3.org/TR/REC-CSS2/box.html 中找到

7 獲得各種寬度:.width(),按鈕的寬度:$button.width(),邊界的寬度:.css('paddingLeft'),.css('paddingRight'),

邊的寬度:.css('borderRightWidth'),.css('borderLeftWidth');


4.5 併發和排隊


1 排隊效果就是使用.鏈接各種效果 :示例 .padeTo('slow',0.5).slideUp('slow')


2 對於非效果方法,排隊的效果並不適用於他們,如.css('backgroundColor','#f00');無論放在哪都會先執行


3 對於非效果方法,是同時發生的


4 回調函數:可以使用回調函數來排列非效果方法


5 得到一個元素的兄弟節點,$(this).next();


6 在使用$(this).next.slideShow('slow',function(){ 在這裏面再次使用$(this)時就是代表的是兄弟節點}),如果不想

是兄弟節點,那麼就要在外面將$(this)賦予一個變量後再使用,var $thisPara =

$(this)( 如果要想在ie中好用 ,就要現定義$thisPara=Object();,後在賦值就好用了),$thisPara.next.slideShow

('slow',function(){這時使用$thisPara就不是兄弟節點了})


第五章 DOM操作——基於命令改變頁面


1 在網頁中創建元素,屬性和文本


5.1 操作屬性


1 .each():類似for循環,方法帶有index參數,類似循環計數器,以每一個匹配的元素作爲上下文來執行一個函數,這樣

就意味着每次執行傳遞進來的函數的時候,this的關鍵字都是指向不同的元素

示例:$('#id').each(function(index){$(this).attr({'id','id'+index})})


2 .text():獲取文本屬性的值

示例:$('#id a').text();


3 $('div.chapter a[@href*=wikipedia]').each():這個是更確定作用的範圍,具體的含義參看第二章


4 .attr():添加屬性,示例 $('td').attr({'rel','external'}) .前面是需要添加屬性的元素標籤


5.2 插入新元素


1 $():這個工廠方法的用處是在括號中的元素如果存在則,讀取,如果不存在則創建新的元素。

如:$(<a href="http://www.sina.com">aa</a>)


2 .insertAfter(),after(),insertBefore(),before() :用於插入新元素,insertAfter()和after()的不同之處是

$('<a href="#top">back to top </a>').insertAfter('div.chapter p');

$('div.chapter p').after('<a href="#top">back to top </a>');

可以看到只是位置的不同,但就是這個不同在實現連綴其他方法的操作中,前者是對a元素做更多的操作,後者是對所選

擇的元素進行連綴操作,所以方便還是前者。


3 eq()和gt():gt和eq的區別是gt作用於給定位置之後的元素,eq作用於當前元素


5.3 移動元素


1 什麼叫隱式迭代


2 使用insertAfter和insertBefore插入,移動元素,那麼註腳的次序就會被顛倒 參見示例,這兩個插入都是在div標籤之

外,即<div></div>+insertAfter之後


3 $A.appendTo('#id'):將內容插入到指定的元素中,即在div標籤裏面

$A.append('B'):也是將內容插入到指定的元素中,兩者的區別是前者是把A追加到#id中,後者是相反,把B追加到A

中,實際上執行的是appendChild操作, 添加爲最後一個子結點


4 $a.prependTo($b):將a的內容移動到b標籤中

$a.prepend($b) :將b的內容移動到a標籤中,相當於appendChild(); 添加爲第一個子節點


5.4 包裝元素


1 $a.wrap(<li></li>):將內容a裝入標籤li中,即在$a的外層添加一個標籤,例如可以是div,參見示例


5.5 複製元素


1 $a.clone().$b:將a複製到b處


2 $a.clone(false).$b:只會複製標籤元素a裏面的文本內容將不會複製


3 5.5.2 1 :使用樣式定位元素內容


4 .prependTo()和.prepend()參見5.3


5 $a.find('b'):找到正在處理的元素a的後代元素的好方法,b可以是標籤,id,class值,如果是id或class值的格式是

find('#id'),find('.class'),如果是元素標籤的話find('input'),如果是type的話find(':checkbox'),如果是

元素中的元素的話find(a b),元素之前使用空格


6 $a.html('b'):使用b替換a標籤中的所有的內容,或者是新增一個文檔的內容,不能用於xml文檔


7 $a.b.end().appendTo(c):end()是結束所有的進階,回到最原始的處理元素,a,一般用作將a元素處理一系列操作

後,插入到c的子元素中


8 $a.text() :得到元素a中所有的文本,取出html標籤


5.6 DOM操作方法的歸納


1 $('p').empty():刪除元素中所有的子節點,就是只剩下<p></p>


2 $a.text('b') :使用文本b替換a元素中的內容, 更換文本的內容


3 $a.remove():刪除a標籤及其所有的子結點,$a.remove('.class'):刪除a標籤中類是class的元素及其所有的子結點


第六章 AJAX 讓網站與時俱進

6.1 基於請求加載數據


1 $a.load('b'):加載數據,引入html文件片段,b可以是函數,是一個Html文件的ur,a是引入的標籤


2 $.each():這個和$a.each()的區別是後者只能迭代和執行jquery對象的函數,前者可以用於迭代任何對象和數組,也就

是說可以用於json和xml數據,這裏面有兩個參數,第一個是要遍歷的數據,第二個是要執行的函數


3 $.getJSON():讀取json文件,產生一個回調函數得到Json文件裏面的數據,然後使用$.each()來取得輸出的內容,只

是有一個問題在文件當中得到的始終不是一個json格式,而是把其當作字符串來處理,就是沒有實現書上

面的示例


4 $.getScript('b'):得到調用的b.js文件


5 $.get():用get方式請求裝入頁面.主要是讀取xml文件和向php文件中傳遞值和讀取回調函數


6.2 選擇數據格式


1 數據格式共有四種:就是6.1 中的 1 3 4 5具體採用何種方式要符合你的應用


2 應用:

html 片段:是最簡單的,在不需要與其他應用程序共享數據的情況下使用

json:在性能和文件的大小上具有優勢,易於重用。

javascript:對數是不推薦使用的,優勢是可以將很少用到的行爲提取到外本文件中去,減少加載的頁面的代碼量

xml:具有非常強大的可移植性,如果未知遠程應用程序的時候,XML可提供很好的互操作性,缺點是過於龐大


6.3 向服務器傳遞數據


1 執行GET請求,就是在按鈕或鏈接處,調用目標php文件的時候,在url的後面添加上?para參數,然後通過$.get()方法 傳遞參數給php文件,示例中使用的是$.get()方法,也可以把結果組織成json使用$.getJSON()的方法


2 執行post請求:1)可以與$.get()互換 2)使用$.load()方法簡化,因爲其默認的傳遞方式就是post,示例中的.load

()方法沒有解決 rerurn false的問題


3 關於form的操作

1) $a.submit():對提交表單的事件進行操作,類似於$a.click()

2) .val():獲取input標籤中的value的值,如果裏面有參數那麼就是替換input中的value的值

3) .serialize():將input元素的內容連接成一個請求字符串, 示例中還是有些問題

對form的操作還是選用form.js插件


6.4 關注請求


1 $a.ajaxStart():在AJAX開始執行是調用的函數


2 $a.ajaxStop():在AJAX最後一次請求活動結束時調用的函數


3 頁面加載緩慢時候的處理,即先顯示一個加載信息的圖示,還有加載過後的顯示信息的效果見示例


6.5 AJAX和事件


1 當再給頁面中的h3 標籤設置點擊高亮的時候,由加載產生的字典標題的標籤也是h3,但點擊時並不會產生高亮的效果,

這是因爲在加載時字典的詞條還不是DOM的一部分,因此不會爲他們綁定事件處理程序,解決,綁定的元素單獨綁定自

己的事件處理函數,也就是說將事件處理函數設置成一個獨立的函數,在頁面顯示和頁面加載的內容裏面都調用這個函數

就可以了


2 以上說明了如果只是給頁面的時間單獨增加事件的話,頁面加載的內容在相同的情況下是不會執行此事件的。


3 雙觸發情況,就是有時在點擊h3標籤的時候會兩次觸發綁定事件這樣就不會有效果產生,具體的解釋參見書92頁,解決

見4


4 限定事件綁定函數的作用域:$()函數可以接收兩個參數,第二個用於限定搜索範圍的dom節點,在綁定事件中使用這一

特性,就可以避免多事件綁定問題具體參見示例


5 利用事件冒泡來解決3的問題:就是在他們的父標籤中加入綁定事件程序,然後在限制可以使用這個事件的子元素,利用

的是if($(event.target).is('h3')){} 來操作, 注意$(event.target)和.is();


6.6 安全限制:沒有看


第七章 表格操作


1 tr:odd和tr:even:前者代表第偶數個tr標籤,後者代表第奇數個tr標籤,可以用來設置具有交替效果的實現,不一定就

是tr標籤,其他的任何標籤都可以,這樣很方面產生交替的效果


2 排序一般的是使用.sort()函數,比較複雜沒有做完,包括很多的效果比如分頁等等


3 如果tr是不規則的排列的話就要使用a:not([d])了將不規則的a元素的子元素d排除在外,a元素的其他子元素正常應用類


4 三種背景色

1) $a.not('[b]'):a元素中除去子元素b的其他子元素

2) .each(function(index){}):使用each內建的索引,就是遍歷所有符合條件的元素,然後給每一個元素都賦予下標索

3) 將三種背景色的class寫成數組,然後使用index % 3 取模的方式,作爲數組的下標,在交替的時候都會採用索引除以

基數取模的方式,來實現效果


5 三行一組的交替背景色

1) 如果不是規則的使用索引,就要自定義一個索引控制標籤,來產生效果

2) 同樣是使用取模的方式來實現效果


6 行的高亮

1)主要是使用的標籤排除,和toggleClass,removeClass,each 有問題效果沒有實現,只是第一行出現了效果


7 提示信息

1)鼠標點擊的位置成手掌狀,只需在.click()之前加上$a.addClass('pointer').click()即可,充分利用.符號式


2) var dd=function(event){} event代表的是事件執行的元素


3)event.pageX:是元素當前x軸的位置,event.pageY是元素當前y軸的位置,xm=event.pageX-5就是代表在鼠標

左邊5像素,ym=event.pageY+20,就是代表在鼠標下方20像素, 注意在ie和firfox下的兼容問題 ,參見示例,另外一點也很重要,同樣是參見示例。


4)$("<div class="tooltip">Click from d echi </div>")appendTo('body'); 可以使用這個語句直接把內容添加到body的最後面


5).hover(over,our):這個函數是鼠標的事件,前一個是鼠標懸停在對象上面執行的函數,後一個函數是鼠標移出這個對

象執行的函數


6).mousemove(function):當鼠標移動時觸發的事件,function代表的是觸發的函數,執行的效果就是當鼠標移動的時

候,效果也是隨之移動


7)a.call('object,para'):a可以是函數對象也可以是類對象,此方法是把a賦予對象object,如果a是函數對象,那麼在

類object中執行函數a,如果a是類對象,那麼a中所有的方法在object中都是可以調用的,就相當於object是類a的繼

承,para是a中需要用到的參數


8 收縮與展開


1)$a.prepend(b):想匹配的元素a標籤裏面插入前置內容,即:first-child


9 過濾


1)過濾就是用戶給定一個條件,就只會顯示出符合條件的數據行,過濾掉那些不需要的行


2)jquery過濾功能的函數實現還是找別的教程比較好,因爲這裏面有錯誤,看到96頁


第八章 構建功能型表單


8.1.1 圖標符號


1)html標籤中 label 和 input 標籤 :如果Input的類型是文本字段,label放在input前面,如果input的類型是複選框,

lavel包含Input


2)實例中使用$('legend',this),this是作用域的意思確保每次只取得一次legend中的文本,否則第一次迭代的時候就會

取得全部的legend文本,而其他循環就會取不到值


3)在示例中注意一下prependTo的格式,讀取元素是使用$('p'), 追加元素是使用$('<p></p>').


8.1.2 必填字段的提示信息


1)$a.filter()b:在a的元素中下過濾掉不符合條件b的選項,是循環選擇的。


2)如果選擇一個元素裏面包含的元素使用(:)這個符號標誌,示例 $('form:input').text();


3)$('input.classname:first'):得到符合條件的第一個元素


4)c.replace(a,b):使用正則表達式,可以將c中的a用b代替,還有另外一種用法,這是一個javascript函數具體的用法

查手冊,對於分組這個概念還沒有能明白


8.1.3 根據條件顯示的字段


1)使用.append(a)要注意對添加的字符串a中的特殊的html字符要進行轉義處理,不過這個步驟一般都會在text()中執行

所以添加文本最好是使用text()這個函數


2)可以使用$(this).+屬性名稱的方式來獲取對應元素中的屬性的值,比如在表單的input中,使用this.value可以得

到value的值,還有this.checked來得到checked屬性的值


3)注意.parent()和.parents()的區別


4)示例中的兩個刪除很好的解決了很多的判斷語句,這個技術應該是經常使用的技術


5).bulr():失去焦點是觸發的事件


8.2 表單驗證


1)a.test(b):a是一個正則表達式,測試b是否存在 js語法,主要驗證正則表達式


8.2.2 最終檢查


1).trigger():實際上就是綁定一個觸發的事件,如果此事件在之前已經定義過的話


2)a.join(b):將數組轉化成用b鏈接的字符串


3)a.push(b):將b字符串添加到數組a中,並返回數組的新的長度值,這是構建數組的一個方法,合併兩個或多個數組使

用concat方法


4)a.removeAttr('b'):刪除a中b的屬性 //8.3


5)有很多靈活的表單的插件可以在 http://plugins.jquery.com/中找到


8.5 字段的佔位符文本


1).remove( ):remove並不是真正的刪除而是隱藏,所以在其後可以使用.text()得到文本內容


2).focus():當頁面獲得焦點時觸發的事件


3).removeClass('a'):移除class爲a的樣式


8.6 ajax自動完成


1)在有關鍵盤輸入的信息.keyup()是與鍵盤的輸入同步的,而keydown和keypress都是落後鍵盤一個字符的


2) 清楚瀏覽器中自動記憶功能,ie中是在工具-》選項->內容-》自動完成,使用腳本控制就是設置autocomplete的屬性如在示例中,$('#id').attr('autocomplete','off'),如果想要整個表單都不執行記憶功能那麼<form autocomplete='off'


3) 8.6.4 中主要是體現瞭如何有效的利用索引


4).mouseover():鼠標劃過時的樣式的設定,注意與hover()的區別,hover是當鼠標移動到上面的時候執行一個函數,

當鼠標移出時執行另外一個函數


5)event.preventDefault():js函數,取消事件相關的默認事件的執行


6)event.keyCode:是event對象的屬性,表示輸出的鍵盤的值對應的數值,例如向上鍵的event.keyCode = 38


7)自動完成與實時搜索的功能



發佈了20 篇原創文章 · 獲贊 0 · 訪問量 1301
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章