溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Write less, do more, I like jQuery.
jQuery是最常用的js庫，整體來說非常輕量并易于擴展，對于移動應用可以使用其更輕量的孿生兄弟Zepto代替。其是由John Resig于2006創建的開源項目，極大的簡化了javascript開發人員遍歷HTML文檔、操作DOM、處理事件、開發Ajax等操作，最有特色的形式是$(document).ready(function() {});其省略形式為：$(function() {});。
在使用jQuery時，需要注意jQuery對象和DOM對象的區別，通常對于jQuery對象，會在變量前加$，如var $variable=jQuery對象;。可以通過如下方式對兩者進行轉化。
jQuery對象轉化為DOM對象: var $cr = $('#cr');var cr = $cr[0];
DOM對象轉化為jQuery對象: var cr = document.getElementById('cr');var $cr = $(cr);
此外，在使用多個不同的javascript庫時，有可能會出現庫之間的沖突，可以通過如下方式解決。
jQuery.noConflict();
jQuery(function() {
jQuery('p').click(function() {
alert(jQuery(this).text());});});//推薦下面的方式var $j = jQuery.noConflict();
$j(function() {});
在介紹jQuery選擇器之前，首先引入CSS選擇器，如下表所示。
| 選擇器類型 | 示例 |
| 標簽選擇器 | td{} |
| ID選擇器 | #note{} |
| 類選擇器 | div.classname{} |
| 群組選擇器 | 其實就是選擇器的組合 td,p,div,a{} |
| 后代選擇器 | #links a{} |
| 通配選擇器 | *{} |
| 其他選擇器 | 偽類選擇器、子選擇器、臨近選擇器和屬性選擇器 |
那么相應的jQuery也會提供對應的選擇器，并增加部分自定義的選擇器用于方便操作，主要包括基本選擇器、層次選擇器、過濾選擇器、表單選擇器等4類選擇器。
| jQuery選擇器 | 示例 |
| 基本選擇器 | |
| #id, .class, element | 最基本的id,類,元素選擇器 |
| * | 匹配所有元素, $("*") |
| selector1,selector2,… | 將每一個選擇器匹配到元素合并后一起返回 |
| 層次選擇器 | |
| $("ancestor descendant") | $('div span')選取<div>里所有的<span>元素 |
| $("parent>child") | $('div>span')選取<div>元素下的<span>子元素 |
| $("prev+next") | $('.one+div')選取class為one的下一個<div>元素 |
| $("prev~siblings") | $('#two~div')選取id為two的元素后面所有<div>兄弟元素 |
| 過濾選擇器 | |
| :first, :last | 選擇第一個/最后一個元素 |
| :not(selector) | 去除所有與給定選擇器匹配的元素 |
| :even, :odd | 選取索引為偶數/奇數所有的元素，初始索引為0開始 |
| :eq(index),gt(index),:lt(index) | 選取索引等于/大于/小于index的元素 |
| :header | 選取所有標題元素 |
| :animated | 選取當前正在執行動畫的元素 |
| :contains(text) | 選取含有文本內容的為text的元素 |
| :empty | 選取不包含子元素或者文本的空元素 |
| :has(selector) | 選取含有選擇器所匹配元素的元素 |
| :parent | 選取含有子元素或者文本的元素 |
| 表單選擇器 | |
| :input | 獲取所有<input>,<textarea>,<select>和<button>元素 |
| :text,:password,:hidden | 獲取所有單行文本框/密碼框/不可見元素 |
| :radio, :checkbox | 獲取所有單選框/多選框 |
| :submit,:reset,:button | 選取單選按鈕、多選按鈕、任意按鈕 |
| :p_w_picpath, :file | 選取所有圖像按鈕，所有上傳域 |
Tip：html元素的id包含#，（，]等特殊字符時，需要通過//進行轉義，例如：<div id='id[1]'></div>， $('#id\\[1\\]') //轉義特殊字符
DOM(Document Object Modal)文檔對象模型是一種與瀏覽器、平臺、語言無關的接口，通過該接口可以輕松的訪問瀏覽器中所有標準組件。一般來說，DOM操作可以分為3類：DOM Core，包含getElementById(),getAttribute()等方法；HTML_DOM，例如document.forms,element.src;CSS_DOM,例如element.style.color，對于jQuery來說，將會用更簡潔的方式實現這部分功能，如下表所示。
| DOM操作 | 示例 |
| 查找結點 | 獲取元素結點：var $li = $('ul li:eq(1)'); 獲取屬性結點：var p_txt = $li.attr('name'); |
| 創建結點 | jQuery工廠方法:$(html語句); var $li_1 = $('<li></li>');$('ul').append('$li_1'); 文本結點和屬性結點于此類似 |
| 插入結點 | 插入結點的方式很多： append(), appendTo(), prepend(),prependTo(),添加到內部 after(), insertAfter(),before(),insertBefore() |
| 刪除結點 | 刪除節點：$('ul li:eq(1)').remove(); 清空結點，即清空結點中的內容(子節點) $('ul li:eq(1)').empty(); |
| 復制結點 | $('#xionger').click(function(){$(this).clone().appendTo('ul'); }); |
| 替換結點 | $('p').replaceWith('<strong>fruit</strong>'); .replaceALl與其操作方向相反 |
| 包裹結點 | 包裹結點:$('strong').wrap('<b></b>'); 包裹結點內容：$('strong').wrapInner('<b></b>'); |
| 屬性操作 | 獲取屬性值：var p_txt = $('p').attr('title'); 設置屬性值：$('p').attr('title', 'title xionger'); 刪除屬性：$('p').removeAttr('title'); |
| 樣式操作 | 獲取樣式：var p_style = $('p').attr('class'); 設置樣式：$('p').attr('class', 'handsome'); 追加樣式：$('p').addClass('another'); |
| 設置和獲取HTML、文本和值 | .html(), .text(), .val() $('#address').focus(function() {var txt_value = $(this).val(); if (txt_value == '請輸入郵箱地址') { $(this).val(''); } }); |
| 遍歷結點 | .children(),獲取匹配元素的子元素集合 .next(), prev(),siblings()獲取前一個/后一個/所有兄弟 .closest(),獲取最近的匹配元素 $(document).bind('click', function(e) {$(e.target).closest('li').css('color', 'red'); }); |
| CSS-DOM操作 | var color_txt = $('p').css('color');$('p').css({'fontSize':'30px', 'backgroundColor':'#888888'}); |
在jQuery中，對Ajax方法進行了封裝，如下表所示。
Ajax方法 | 示例 |
.load() | 參數：url[,data][,callback] $('#resText').load('test.html'); |
$.get()/$.post() | 參數包括url,data,callback，以及返回內容的格式的type,包括xml,html,script,_default $.post('/tasks', $(#form01).serialize(), handler, 'json'); |
$.getScript() $.getJSON() | 動態加載js， $.getScript('/public/js/test.js'); $.getJSON('/public/resources/test.json'); JSONP形式加載其他網站JSON數據示例： $('#send').click(function() { $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?', function(data) { $.each(data.items, function(i, item) { $("<img class='para'/>").attr('src', item.media.m).appendTo('#resText'); if (i == 3) { return false; }});});}); |
$.ajax(); | 參數包括url,type, timeout（ms）,data, datatype(xml,html,sscript,json.jsonp,text) beforeSend, complete, success, error, global |
序列化元素 | $(#form01).serialize()序列化為字符串,其等價于: 'username' + encodeURIComponent($('#content').val())+'&'+ 'xxx'; .serializeArray()序列化為JSON數據 $.param(obj)將普通對象序列化 |
全局事件 | $('#loading').ajaxStart(function(){}); .ajaxStop(), .ajaxComplete(),.ajaxSend(),.ajaxSuccess() |
具體示例如下所示，這兒示例是form提交，而不是json提交，需要注意（通常調用接口，使用json提交；而頁面的ajax請求，推薦使用form提交，會比較簡單）。
View Code
fiddler截圖如下，比如對于java spring-mvc，該form報文可以直接序列化為對象，無需添加@RequestBody注解。
之前就介紹的$(document).ready()相信大家都不會陌生，其與window.onload實際上有一些區別的，前者是當DOM加載完成后觸發，而后者則是頁面中的所有元素(包括所有關聯元素)加載完成后執行。在jQuery中，通常事件綁定是通過bind(type[,data],fn)方法實現的，其第一個參數為事件類型，非常豐富，包括blur,focus,load,resize,unload,click,dblclick,mousedown/up/move/over/out/enter/leave,change,select,submit,keypress/down/up等。
還可以通過.unbind解綁事件，.trigger(eventType)來模擬觸發事件（包含默認行為），.triggerHandler()觸發事件且不執行默認行為。此外，jQuery提供了合成事件，比如.hover(enter,leave),toggle(fn1,fn2)。
對于jQuery中的事件來說，其均使用事件冒泡機制，而不支持時間捕獲機制(可以用原生js)。事件冒泡就是當頁面上有個元素時，其中一個嵌套在另一個中，如果均綁定了click事件，那么觸發內層元素的click事件時，會同時觸發外部的click事件。這樣的機制在有時是需要的，但有時卻不是期望的，那么就緒要通過event.stopPropagation()方法來禁止事件的冒泡了，
此外，在jQuery中，可以通過event.preventDefault()方法來阻止元素的默認行為，常用與a鏈接元素和submit表單提交行為。需要注意的，jQuery實際上對event進行了封裝，以屏蔽不同瀏覽器的差異，event.target用于獲取觸發事件的元素，.relatedTarget獲取相關元素(mouseover,mouseout)，.pageX/pageY獲取頁面坐標，.which獲取鼠標左中右鍵(值為1,2,3),.metaKey獲取Ctrl鍵，.originalEvent獲取原始事件對象。
接下來，將介紹jQuery庫非常吸引人的動畫操作，如下表所示。
| 方法 | 詮釋 |
| .show(),.hide(),.toggle() | 顯示和隱藏元素，$('element').show(1000); |
| .fadeIn(),fadeOut() .fadeTo() | 改變元素的不透明度 |
| .slideUp(), .slideDown().slideToggle() | 通過修改元素高度達到元素上下移動的效果 |
| .animate() | 自定義動畫方法,$('element').animate({left:'500px'},3000);.stop(param),停止動畫,param=true，可以清空動畫隊列 |
jQuery插件非常多，但最常用的要數驗證插件了，最后通過一個示例來了解validation插件。
$('#commentForm').validate({
rules: {
username: { required: true, minlength: 2 },
email: { require: true, email: true },
url: 'url',
comment: 'required'};});
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
