JQuery的查詢手冊 : 一, JQuery的用法 1. 首先要下載Jquery的js文件,併在需要使用JQuery的html文件的<head>標簽載入該js文件 : <script type="text/javascript" src="js/jquery.js"></script> 併在下一行 ...
JQuery的查詢手冊 :
一, JQuery的用法
1. 首先要下載Jquery的js文件,併在需要使用JQuery的html文件的<head>標簽載入該js文件 :
<script type="text/javascript" src="js/jquery.js"></script>
併在下一行輸入JQuery代碼 : <script>JQuery代碼 </script>
2. JQuery代碼都要從如下代碼開始 :
完整寫法 : $(document).ready(function(){ JQuery代碼 })
簡略寫法 : $(function(){ JQuery代碼 })
3. JQuery代碼中 "$" 符號的四種應用
(1) $(function(){}) : JQuery代碼的開始
(2) $(selector) : 在html中查找標簽和屬性(JQuery選擇器)
(3) $(dom element) : 將javascript中通過documentElementById()方法得到的DOM對象轉換成JQuery對象,
這樣才能繼續使用JQuery的各種方法
(4) $(html) : 將html轉換成JQuery對象. 例: $("<p>i love you</p>")
4. JQuery中最重要的用法 , $(selector).action() : 給查找到的html元素添加事件 .
(1) 其中的 selector 選擇器包括以下四大類內容 :
①基本選擇器 :
a. 標簽選擇器("div"): 選擇所有的div標簽
b. id選擇器("#123"): 選擇屬性中 id的值等於123的標簽
c. class選擇器(".123"): 選擇屬性中 class的值等於123的標簽
d. 並集選擇器("p,div"): 選擇所有的p標簽和div標簽
e. 交集選擇器("div.123") : 選擇標簽的class屬性等於123的div標簽,
f. 全局選擇器("*"), 選擇所有的標簽
②層次選擇器 :
a. 後代選擇器("ul li"): 選擇ul下的所有li (包括指定標簽下的所有標簽,包括兒子和孫子等等)
b. 子選擇器("ul>li"): 選擇ul標簽的兒子標簽li(只包括指定標簽的兒子層,不包括孫子等)
c. 相鄰選擇器("ul+p"): 選擇ul標簽其後的相鄰的同輩p標簽(必須是其後並緊挨相鄰的同輩標簽)
d. 同輩選擇器("ul~p"): 選擇ul標簽其後的所有同輩p標簽(ul後面的所有同輩的p標簽)
③屬性選擇器 ([ ]) :
a. 選取含有該屬性的標簽("div[id]"): 選取包含id屬性的div標簽
b. 選取屬性值等於給定值的標簽("div[id='123']"): 選取屬性值等於123的div標簽
c. 選取屬性值不等於給定值的標簽("div[id!='123']"): 選取屬性值不等於123的div標簽
d. 選取屬性值以給定值開頭的標簽("div[id^='123']"): 選取屬性值以123開頭的div標簽
e. 選取屬性值以給定值結尾的標簽("div[id$='123']"): 選取屬性值以123結尾的div標簽
f. 選取屬性值包含給定值的標簽("div[id*='123']"):選取屬性值包含123的div標簽
g. 選取多個屬性都符合給定值的標簽("div[id][class='123']"): 選取包含id屬性並且class屬性等於123的div標簽
④過濾選擇器 ( : ) :
a. 選取選擇的第一個標簽("ul li:first"): 選取ul下的第一個li標簽
b. 選取選擇的最後一個標簽("ul li:last"): 選取ul下的最後一個li標簽
c. 選取選擇的奇數標簽("ul li:odd"): 選取ul下的所有奇數li標簽(標簽從零開始,所以第一個標簽是偶數)
d. 選取選擇的奇數標簽("ul li:even"): 選取ul下的所有偶數li標簽(標簽從零開始,所以第一個標簽是偶數)
e: 反選標簽("p:not(.a)"): 選取class屬性為a的p標簽以外的其餘p標簽
f: 標題標簽(":header"): 選取所有的h1--h6的標題標簽
g: 選取獲得焦點的標簽("input:focus"): 選取獲得焦點的所有input標簽
h: 選取索引等於給定值的標簽("ul li:eq(0)"): 選取ul標簽下的索引為0的li標簽,即第一個li標簽
i: 選取索引大於給定值的標簽("ul li:gt(1)"): 選取ul標簽下的索引大於1的li標簽, 即從第三個以後的li標簽
j: 選取索引小於給定值的標簽("ul li:lt(2)"): 選取ul標簽下的索引小於1的li標簽, 即前兩個li標簽
k: 選取所有的隱藏標簽(":hidden"): 選取所有的隱藏的標簽 (即type="hidden")
l: 選取所有的可見的元素(":visible"): 選取所有可見的元素 (即沒有type="hidden")
(2)action中包含的內容
①. 滑鼠事件
a. click(): 滑鼠的點擊事件
b. mouseover(): 滑鼠的滑過事件
c. mouseout(): 滑鼠的離開事件
d. hover(): mouseover和mouseout的複合事件, 這時會有兩個function(){}參數
②.鍵盤事件
a. keypress(): 會在敲擊按鍵時觸發,我們可以理解為按下並抬起同一個按鍵
b. keydown(): 鍵盤按下時觸發. (keyCode==13時代表按下 Enter 鍵)
例: $(document).keydown(function(event){
//判斷當event.keyCode 為37時（即左方面鍵），執行函數to_left();
//判斷當event.keyCode 為39時（即右方面鍵），執行函數to_right();
if(event.keyCode == 37){
to_left();
}else if (event.keyCode == 39){
to_right();
}
});
c. keyup(): 鍵盤釋放時觸發
③.動畫事件
a. show(), hide() : 參數是響應事件, 毫秒為單位
b. toogle(): 複合事件, show和hide的複合事件
b. fadein(), fadeout(): 參數是響應事件, 毫秒為單位
c. slidedown(), slideup(): 參數是響應事件, 毫秒為單位
④. DOM操作
a. val(), val("") : 不帶參數表示獲取標簽的value屬性值, 帶參數表示設置該值
b. text(), text("") : 設置或獲取被選元素的文本內容(innerText)
c. html(), html("") : 返回或設置被選元素的內容(innerHTML)
d. css(""), css("", "") : 返回或者設置元素的樣式
e. addClass(""), removeClass(""), toogleClass("") : 添加樣式; 移除樣式; 複合操作(添加或移除)
f. append(), appendTo(), prepend(), prependTo() : 在被選元素的結尾(仍然在內部)插入指定內容(append,appendTo); 在被選元素的開頭(仍然在內部)插入指定內容(prepend, prependTo); 帶To和不帶To的區別: 如果是A append B 和 A appendTo B, 前者是B插入A內部的尾部, 後者是A插入B內部的尾部.
g. after(), insertafter(), before(), insertbefore() : A insertafter B 表示將A插入到B(selector)之後; A after B 表示將B插入A(selector)之後
h. replaceWith(), replaceAll() : A(selector) replaceWith B, B替換A; A replaceAll B(selector), A替換B
i. clone() : 生成被選元素的副本, 包括子節點, 文本和屬性. 參數為boolean, 意思是是否複製事件
j. attr(""), attr("", "") : 獲取或者設置屬性的值.
k. empty() : 將指定元素中的所有內容全部清除,包括文本和子元素
l. remove(), detach() : 都是刪除指定元素, 刪除之後開可以還原. 還原的內容不同: remove()只能還原元素本身,不能還原JQuery數據,事件和附加的數據等; detach()不但可以還原標簽,還可以還原事件和附加的數據等
m. childern() : 只能查找兒子元素
n. find() : 能查找所有的後代元素
o. next(), nextAll(), nextUtil(4) : 同輩元素的查找, 下一個, 後面的所有, 後面直到第4個.
p. prev(), prevAll(), prevUtil(4) : 同輩元素的查找, 上一個, 前面的所有, 前面直到第4個.
q. parent() : 只能查找父親節點
r. parents() : 查找所有的前輩節點
5.使用JQuery完成非同步請求 :
(1) 書寫形式 : $.ajax({ 參數 })
(2) 詳細描述 : $.ajax({ 參數 })是JQuery提供的一個函數,這個函數實現了對ajax的請求,並且幫助開發者完成了具體細節的工作, 比如瀏覽器的相容性, post請求頭部的設置等. 開發者只需要把所有的參數組裝成一個對象當做這個函數的一個參數傳入即可.
(3) 參數 :
a. type : get 或者 post
b. url : 請求鏈接地址
c. async : 是否非同步
d. success(function(data){}) : 請求成功後伺服器給客戶端傳遞的數據, 通過data變數傳遞.
e. error : 出錯後的處理方式
f. data : post請求的時候才有, 是瀏覽器給伺服器傳遞的參數
g. beforesend : 發出請求之前執行的內容
h. complete : 完成請求之後執行的內容
(4)註意 : 若發生ajax請求的資源和url指向的網路資源不再同一個伺服器中, 直接訪問, 請求能夠到達,但是伺服器的安全機製造成會在客戶端報錯,無法正常獲取數據, 我們需要的伺服器端設置兩個響應頭:
response.setHeader("Access-Control-Allow-Origin", "*"); 表示其他域下的ajax請求都能訪問本伺服器
response.setHeader("Access-Control-Allow-Methods", "POST, GET"); 允許的請求方式
