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"); 允許的請求方式
總結
以上是生活随笔為你收集整理的Jquery实用笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 颜色搭配表
- 下一篇： express中res.json方法