| jQuery 元素選擇器(根據標籤名/類名/id名選擇) jQuery 使用 CSS 選擇器來選取 HTML 元素。 $("p") 選取 <p> 元素。 $("p.intro") 選取所有 class="intro" 的 <p> 元素。 $("p#demo") 選取所有 id="demo" 的 <p> 元素。 jQuery 屬性選擇器(使用 XPath 表達式)(根據屬性名值選擇) jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。 $("[href]") 選取所有帶有 href 屬性的元素。 $("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。 $("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。 $("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。 jQuery CSS 選擇器(根據css屬性名值選擇) jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。 下面的例子把所有 p 元素的背景顏色更改爲紅色： $("p").css("background-color","red"); 常用選擇器實例 語法 描述 $(this) 當前 HTML 元素 $("p") 所有 <p> 元素 (根據標籤名選擇) $("p.intro") 所有 class="intro" 的 <p> 元素 (根據標籤名和類名選擇) $(".intro") 所有 class="intro" 的元素 (根據類名選擇) $("#intro") id="intro" 的元素 (根據id名選擇) $("ul li:first") 每個 <ul> 的第一個 <li> 元素 (根據標籤名/路徑/數學選擇) $("[href$='.jpg']") 所有帶有以 ".jpg" 結尾的屬性值的 href 屬性 (根據屬性選擇) $("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素 (根據標籤名和類名和id名選擇) 多個選擇器一起匹配 選擇器1,選擇器2,選擇器3 $("th,td,.intro") 所有帶有匹配選擇的元素 多個選擇器組合的並且/路徑關係 多個選擇器空格隔開是"並且"關係 多個選擇器逗號隔開是"並且"關係 多個選擇器">"號隔開是"路徑"關係 多個選擇器連在一起是"路徑"關係 #J-search-date-container > div > label //按路徑一級一級選擇到終點,可在瀏覽器F12開發工具中直接獲得 //*[@id="J-search-date-container"]/div/label //xpath選擇器表達式,用於根據屬性選擇,可在瀏覽器F12開發工具中直接獲得 $(":button") 表示匹配所有的按鈕。 $("input:checked")表示匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option)。 $("div.container")中的'.'號表示class， $("div #msg")中的'#'表示id。 那麼$(":button") 中的'：'表示類型(type),如$(":button") 表示類型爲button的控件，$("input:checked")表示所有類型爲選中的複選框元素。 讀值 1.var txt = xxx.value;//適用於有value的input標籤 2.var txt = $("#beginDate").val()// console.log(txt) 寫值 1.xxx.value = "123";//適用於有value的input標籤 2.var txt = $("#beginDate").val("0000")// console.log(txt) 一、jQuery 選擇器 技巧:比較簡單的辦法是在瀏覽器中F12調出開發工具然後選擇元素, 右鍵點selector可以得到JQ選擇器表達式(可直接用於JQ中) 右鍵點xpath,可以得到xpath選擇器表達式(用於JQ屬性選擇器中) 1.根據標籤名/類名/id名選擇 選擇器格式 實例 選取到的內容 * $("*") 所有元素 #id名 $("#lastname") id="lastname" 的元素 .類名 $(".intro") 所有 class="intro" 的元素 標籤名 $("p") 所有 <p> 元素 .類名.類名 $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素,"並且"關係 :標籤名 $(":input") 所有 <input> 元素 $(":button") 所有類型爲button的控件 $("input:checked") 所有類型爲選中的複選框元素。 冒號":"表示所有?類型(type)? 2.根據數學匹配 :first $("p:first") 第一個 <p> 元素 :last $("p:last") 最後一個 <p> 元素 :even $("tr:even") 所有偶數 <tr> 元素  dd $("trdd") 所有奇數 <tr> 元素:eq(下標) $("ul li:eq(3)") 列表中的第四個元素（index 從 0 開始） :gt(下標) $("ul li:gt(3)") 列出 index 大於 3 的元素 :lt(下標) $("ul li:lt(3)") 列出 index 小於 3 的元素 :not(選擇器) $("input:not(:empty)") 所有不爲空的 input 元素 :header $(":header") 所有標題元素 <h1> - <h6> :animated 所有動畫元素 :contains(字符串) $(":contains('W3School')") 包含指定字符串的所有元素 :empty $(":empty") 無子（元素）節點的所有元素 :hidden $("p:hidden") 所有隱藏的 <p> 元素 :visible $("table:visible") 所有可見的表格 3.根據屬性值來匹配 [屬性] $("[href]") 所有帶有 href 屬性的元素 [屬性=值] $("[href='#']") 所有 href 屬性的值等於 "#" 的元素 如<a tradetype="SHOPPING">購物</a>$("[tradetype='SHOPPING']").text()// [屬性!=值] $("[href!='#']") 所有 href 屬性的值不等於 "#" 的元素 [屬性$=值] $("[href$='.jpg']") 所有 href 屬性的值包含以 ".jpg" 結尾的元素 4.根據標籤裏的type屬性值來匹配 :text $(":text") 所有 type="text" 的 <input> 元素 :password $(":password") 所有 type="password" 的 <input> 元素 :radio $(":radio") 所有 type="radio" 的 <input> 元素 :checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素 :submit $(":submit") 所有 type="submit" 的 <input> 元素 :reset $(":reset") 所有 type="reset" 的 <input> 元素 :button $(":button") 所有 type="button" 的 <input> 元素 :image $(":image") 所有 type="image" 的 <input> 元素 :file $(":file") 所有 type="file" 的 <input> 元素 5.根據狀態來匹配 :enabled $(":enabled") 所有激活的 input 元素 :disabled $(":disabled") 所有禁用的 input 元素 :selected $(":selected") 所有被選取的 input 元素 :checked $(":checked") 所有被選中的 input 元素 參閱教程：jQuery 元素選擇器語法 來源:http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 二、jQuery 事件方法 事件方法會觸發匹配元素的事件，或將函數綁定到所有匹配元素的某個事件。 觸發實例1：$("button#demo").click() 上面的例子將觸發 id="demo" 的 button 元素的 click 事件。(筆記:就是模擬點擊) 綁定實例2：$("button#demo").click(function(){$("img").hide()}) 上面的例子會在點擊 id="demo" 的按鈕時隱藏所有圖像。(筆記:就是注入函數,如在提交按鈕裏注入,以便在點擊提交時獲取用戶的表單內容) 方法 描述 bind() 向匹配元素附加一個或更多事件處理器 blur() 觸發、或將函數綁定到指定元素的 blur 事件 change() 觸發、或將函數綁定到指定元素的 change 事件 click() 觸發、或將函數綁定到指定元素的 click 事件 dblclick() 觸發、或將函數綁定到指定元素的 double click 事件 delegate() 向匹配元素的當前或未來的子元素附加一個或多個事件處理器 die() 移除所有通過 live() 函數添加的事件處理程序。 error() 觸發、或將函數綁定到指定元素的 error 事件 event.isDefaultPrevented() 返回 event 對象上是否調用了 event.preventDefault()。 event.pageX 相對於文檔左邊緣的鼠標位置。 event.pageY 相對於文檔上邊緣的鼠標位置。 event.preventDefault() 阻止事件的默認動作。 event.result 包含由被指定事件觸發的事件處理器返回的最後一個值。 event.target 觸發該事件的 DOM 元素。 event.timeStamp 該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。 event.type 描述事件的類型。 event.which 指示按了哪個鍵或按鈕。 focus() 觸發、或將函數綁定到指定元素的 focus 事件 keydown() 觸發、或將函數綁定到指定元素的 key down 事件 keypress() 觸發、或將函數綁定到指定元素的 key press 事件 keyup() 觸發、或將函數綁定到指定元素的 key up 事件 live() 爲當前或未來的匹配元素添加一個或多個事件處理器 load() 觸發、或將函數綁定到指定元素的 load 事件 mousedown() 觸發、或將函數綁定到指定元素的 mouse down 事件 mouseenter() 觸發、或將函數綁定到指定元素的 mouse enter 事件 mouseleave() 觸發、或將函數綁定到指定元素的 mouse leave 事件 mousemove() 觸發、或將函數綁定到指定元素的 mouse move 事件 mouseout() 觸發、或將函數綁定到指定元素的 mouse out 事件 mouseover() 觸發、或將函數綁定到指定元素的 mouse over 事件 mouseup() 觸發、或將函數綁定到指定元素的 mouse up 事件 one() 向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。 ready() 文檔就緒事件（當 HTML 文檔就緒可用時） resize() 觸發、或將函數綁定到指定元素的 resize 事件 scroll() 觸發、或將函數綁定到指定元素的 scroll 事件 select() 觸發、或將函數綁定到指定元素的 select 事件 submit() 觸發、或將函數綁定到指定元素的 submit 事件 toggle() 綁定兩個或多個事件處理器函數，當發生輪流的 click 事件時執行。 trigger() 所有匹配元素的指定事件 triggerHandler() 第一個被匹配元素的指定事件 unbind() 從匹配元素移除一個被添加的事件處理器 undelegate() 從匹配元素移除一個被添加的事件處理器，現在或將來 unload() 觸發、或將函數綁定到指定元素的 unload 事件 三、jQuery 效果函數 方法 描述 animate() 對被選元素應用“自定義”的動畫 clearQueue() 對被選元素移除所有排隊的函數（仍未運行的） delay() 對被選元素的所有排隊函數（仍未運行）設置延遲 dequeue() 運行被選元素的下一個排隊函數 fadeIn() 逐漸改變被選元素的不透明度，從隱藏到可見 fadeOut() 逐漸改變被選元素的不透明度，從可見到隱藏 fadeTo() 把被選元素逐漸改變至給定的不透明度 hide() 隱藏被選的元素 queue() 顯示被選元素的排隊函數 show() 顯示被選的元素 slideDown() 通過調整高度來滑動顯示被選元素 slideToggle() 對被選元素進行滑動隱藏和滑動顯示的切換 slideUp() 通過調整高度來滑動隱藏被選元素 stop() 停止在被選元素上運行動畫 toggle() 對被選元素進行隱藏和顯示的切換 四、jQuery 文檔操作方法 這些方法對於 XML 文檔和 HTML 文檔均是適用的，除了：html()。 方法 描述 addClass() 向匹配的元素添加指定的類名。 after() 在匹配的元素之後插入內容。 append() 向匹配元素集合中的每個元素結尾插入由參數指定的內容。 appendTo() 向目標結尾插入匹配元素集合中的每個元素。 attr() 設置或返回匹配元素的屬性和值。 before() 在每個匹配的元素之前插入內容。 clone() 創建匹配元素集合的副本。 detach() 從 DOM 中移除匹配元素集合。 empty() 刪除匹配的元素集合中所有的子節點。 hasClass() 檢查匹配的元素是否擁有指定的類。 html() 設置或返回匹配的元素集合中的 HTML 內容。 insertAfter() 把匹配的元素插入到另一個指定的元素集合的後面。 insertBefore() 把匹配的元素插入到另一個指定的元素集合的前面。 prepend() 向匹配元素集合中的每個元素開頭插入由參數指定的內容。 prependTo() 向目標開頭插入匹配元素集合中的每個元素。 remove() 移除所有匹配的元素。 removeAttr() 從所有匹配的元素中移除指定的屬性。 removeClass() 從所有匹配的元素中刪除全部或者指定的類。 replaceAll() 用匹配的元素替換所有匹配到的元素。 replaceWith() 用新內容替換匹配的元素。 text() 設置或返回匹配元素的內容。 toggleClass() 從匹配的元素中添加或刪除一個類。 unwrap() 移除並替換指定元素的父元素。 val() 設置或返回匹配元素的值。 wrap() 把匹配的元素用指定的內容或元素包裹起來。 wrapAll() 把所有匹配的元素用指定的內容或元素包裹起來。 wrapinner() 將每一個匹配的元素的子內容用指定的內容或元素包裹起來。 五、jQuery 屬性操作方法 下面列出的這些方法獲得或設置元素的 DOM 屬性。 這些方法對於 XML 文檔和 HTML 文檔均是適用的，除了：html()。 方法 描述 addClass() 向匹配的元素添加指定的類名。 attr() 設置或返回匹配元素的屬性和值。 hasClass() 檢查匹配的元素是否擁有指定的類。 html() 設置或返回匹配的元素集合中的 HTML 內容。 removeAttr() 從所有匹配的元素中移除指定的屬性。 removeClass() 從所有匹配的元素中刪除全部或者指定的類。 toggleClass() 從匹配的元素中添加或刪除一個類。 val() 設置或返回匹配元素的值。 註釋：jQuery 文檔操作參考手冊中也列出了以上方法。本參考頁的作用是方便用戶單獨查閱有關屬性操作方面的方法。 六、jQuery CSS 操作函數 下面列出的這些方法設置或返回元素的 CSS 相關屬性。 CSS 屬性 描述 css() 設置或返回匹配元素的樣式屬性。 height() 設置或返回匹配元素的高度。 offset() 返回第一個匹配元素相對於文檔的位置。 offsetParent() 返回最近的定位祖先元素。 position() 返回第一個匹配元素相對於父元素的位置。 scrollLeft() 設置或返回匹配元素相對滾動條左側的偏移。 scrollTop() 設置或返回匹配元素相對滾動條頂部的偏移。 width() 設置或返回匹配元素的寬度。 七、jQuery Ajax 操作函數 jQuery 庫擁有完整的 Ajax 兼容套件。其中的函數和方法允許我們在不刷新瀏覽器的情況下從服務器加載數據。 函數 描述 jQuery.ajax() 執行異步 HTTP (Ajax) 請求。 .ajaxComplete() 當 Ajax 請求完成時註冊要調用的處理程序。這是一個 Ajax 事件。 .ajaxError() 當 Ajax 請求完成且出現錯誤時註冊要調用的處理程序。這是一個 Ajax 事件。 .ajaxSend() 在 Ajax 請求發送之前顯示一條消息。 jQuery.ajaxSetup() 設置將來的 Ajax 請求的默認值。 .ajaxStart() 當首個 Ajax 請求完成開始時註冊要調用的處理程序。這是一個 Ajax 事件。 .ajaxStop() 當所有 Ajax 請求完成時註冊要調用的處理程序。這是一個 Ajax 事件。 .ajaxSuccess() 當 Ajax 請求成功完成時顯示一條消息。 jQuery.get() 使用 HTTP GET 請求從服務器加載數據。 jQuery.getJSON() 使用 HTTP GET 請求從服務器加載 JSON 編碼數據。 jQuery.getScript() 使用 HTTP GET 請求從服務器加載 JavaScript 文件，然後執行該文件。 .load() 從服務器加載數據，然後把返回到 HTML 放入匹配元素。 jQuery.param() 創建數組或對象的序列化表示，適合在 URL 查詢字符串或 Ajax 請求中使用。 jQuery.post() 使用 HTTP POST 請求從服務器加載數據。 .serialize() 將表單內容序列化爲字符串。 .serializeArray() 序列化表單元素，返回 JSON 數據結構數據。 八、jQuery 遍歷函數 jQuery 遍歷函數包括了用於篩選、查找和串聯元素的方法。 函數 描述 .add() 將元素添加到匹配元素的集合中。 .andSelf() 把堆棧中之前的元素集添加到當前集合中。 .children() 獲得匹配元素集合中每個元素的所有子元素。 .closest() 從元素本身開始，逐級向上級元素匹配，並返回最先匹配的祖先元素。 .contents() 獲得匹配元素集合中每個元素的子元素，包括文本和註釋節點。 .each() 對 jQuery 對象進行迭代，爲每個匹配元素執行函數。 .end() 結束當前鏈中最近的一次篩選操作，並將匹配元素集合返回到前一次的狀態。 .eq() 將匹配元素集合縮減爲位於指定索引的新元素。 .filter() 將匹配元素集合縮減爲匹配選擇器或匹配函數返回值的新元素。 .find() 獲得當前匹配元素集合中每個元素的後代，由選擇器進行篩選。 .first() 將匹配元素集合縮減爲集合中的第一個元素。 .has() 將匹配元素集合縮減爲包含特定元素的後代的集合。 .is() 根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。 .last() 將匹配元素集合縮減爲集合中的最後一個元素。 .map() 把當前匹配集合中的每個元素傳遞給函數，產生包含返回值的新 jQuery 對象。 .next() 獲得匹配元素集合中每個元素緊鄰的同輩元素。 .nextAll() 獲得匹配元素集合中每個元素之後的所有同輩元素，由選擇器進行篩選（可選）。 .nextUntil() 獲得每個元素之後所有的同輩元素，直到遇到匹配選擇器的元素爲止。 .not() 從匹配元素集合中刪除元素。 .offsetParent() 獲得用於定位的第一個父元素。 .parent() 獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。 .parents() 獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。 .parentsUntil() 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素爲止。 .prev() 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。 .prevAll() 獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。 .prevUntil() 獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素爲止。 .siblings() 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。 .slice() 將匹配元素集合縮減爲指定範圍的子集。 九、jQuery 數據操作函數 這些方法允許我們將指定的 DOM 元素與任意數據相關聯。 函數 描述 .clearQueue() 從隊列中刪除所有未運行的項目。 .data() 存儲與匹配元素相關的任意數據。 jQuery.data() 存儲與指定元素相關的任意數據。 .dequeue() 從隊列最前端移除一個隊列函數，並執行它。 jQuery.dequeue() 從隊列最前端移除一個隊列函數，並執行它。 jQuery.hasData() 存儲與匹配元素相關的任意數據。 .queue() 顯示或操作匹配元素所執行函數的隊列。 jQuery.queue() 顯示或操作匹配元素所執行函數的隊列。 .removeData() 移除之前存放的數據。 jQuery.removeData() 移除之前存放的數據。 十、jQuery DOM 元素方法 函數 描述 .get() 獲得由選擇器指定的 DOM 元素。 .index() 返回指定元素相對於其他指定元素的 index 位置。 .size() 返回被 jQuery 選擇器匹配的元素的數量。 .toArray() 以數組的形式返回 jQuery 選擇器匹配的元素。 十一、jQuery 核心函數 函數 描述 jQuery() 接受一個字符串，其中包含了用於匹配元素集合的 CSS 選擇器。 jQuery.noConflict() 運行這個函數將變量 $ 的控制權讓渡給第一個實現它的那個庫。 十二、jQuery 屬性 下面列出的這些方法設置或返回元素的 CSS 相關屬性。 屬性 描述 context 在版本 1.10 中被棄用。包含傳遞給 jQuery() 的原始上下文。 jquery 包含 jQuery 版本號。 jQuery.fx.interval 改變以毫秒計的動畫速率。 jQuery.fx.off 全局禁用/啓用所有動畫。 jQuery.support 表示不同瀏覽器特性或漏洞的屬性集合（用於 jQuery 內部使用）。 length 包含 jQuery 對象中的元素數目。 筆記說明:綠色的爲常用的 |
jQuery網頁操作整理筆記
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章