jQuery 操作大全

来源:https://www.cnblogs.com/G921123/archive/2019/01/04/10219389.html
-Advertisement-
Play Games

jQuery 選擇器 jQuery 效果函數 jQuery 文檔操作方法 這些方法對於 XML 文檔和 HTML 文檔均是適用的,除了:html()。 jQuery 屬性操作方法 下麵列出的這些方法獲得或設置元素的 DOM 屬性。 這些方法對於 XML 文檔和 HTML 文檔均是適用的,除了:htm ...


jQuery 選擇器

選擇器實例選取
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
     
:first $("p:first") 第一個 <p> 元素
:last $("p:last") 最後一個 <p> 元素
:even $("tr:even") 所有偶數 <tr> 元素
:odd $("tr:odd") 所有奇數 <tr> 元素
     
:eq(index) $("ul li:eq(3)") 列表中的第四個元素(index 從 0 開始)
:gt(no) $("ul li:gt(3)") 列出 index 大於 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小於 3 的元素
:not(selector) $("input:not(:empty)") 所有不為空的 input 元素
     
:header $(":header") 所有標題元素 <h1> - <h6>
:animated   所有動畫元素
     
:contains(text) $(":contains('W3School')") 包含指定字元串的所有元素
:empty $(":empty") 無子(元素)節點的所有元素
:hidden $("p:hidden") 所有隱藏的 <p> 元素
:visible $("table:visible") 所有可見的表格
     
s1,s2,s3 $("th,td,.intro") 所有帶有匹配選擇的元素
     
[attribute] $("[href]") 所有帶有 href 屬性的元素
[attribute=value] $("[href='#']") 所有 href 屬性的值等於 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 屬性的值不等於 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 屬性的值包含以 ".jpg" 結尾的元素
     
:input $(":input") 所有 <input> 元素
: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> 元素
     
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被選取的 input 元素
:checked $(":checked") 所有被選中的 input 元素
方法描述
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 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 屬性

下麵列出的這些方法設置或返回元素的 CSS 相關屬性。

屬性描述
context 在版本 1.10 中被棄用。包含傳遞給 jQuery() 的原始上下文。
jquery 包含 jQuery 版本號。
jQuery.fx.interval 改變以毫秒計的動畫速率。
jQuery.fx.off 全局禁用/啟用所有動畫。
jQuery.support 表示不同瀏覽器特性或漏洞的屬性集合(用於 jQuery 內部使用)。
length 包含 jQuery 對象中的元素數目。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 事件流 事件冒泡 IE的事件流叫做事件冒泡,即事件開始時由最具體的元素接收,然後逐級向上傳播到較為不具體的節點(文檔)。如下代碼: 如果你點擊了上面的div元素,那麼這個click事件會按照如下順序傳播: (1)<div> (2)<body> (3)<html> (4)document 所有現代瀏覽 ...
  • 項目是拿 echarts + 百度地圖 來做可視化界面,現在到收尾階段慢慢優化。 先附代碼: 如下圖,預設圓點顏色為紅色: 其中item列印出如下圖: 發現marker(小圓點)即為html片段,要改變小圓點顏色只需自定義html即可。 附代碼: 效果圖: 同理,要改變小圓點形狀,重寫html片段即 ...
  • 跨域請求域有兩種常用解決方案,jsonp和cors, 因為jsonp只能解決get請求問題,我這裡用的是cors方法。 js前端ajax請求: $.ajax({ url: "http://192.168.0.43:9030/Home/GetTextValue", //需要請求的路徑(註意,部署的時候 ...
  • 一、類的理論 1、類的核心概念:多態 是說父類的通用行為可以被子類用更特殊的行為重寫 二、類的機制 1、構造函數 類實例是有一個特殊的類方法構造的,這個方法名通常和類名一致; 類構造函數屬於類,構造函數大多需要用new來調。 2、類的多態 其實就是子類可以改寫父類的同名方法也可以調用繼承自父類的同名 ...
  • lastIndexOf() 方法可返回一個指定的字元串值最後出現的位置,在一個字元串中的指定位置從後向前搜索 var str = 'Hello World' str.lastIndexOf('Hello') 如果能匹配到 --> 返回一個指定的字元串值最後出現的位置 str.lastIndexOf( ...
  • //組件引入import pager from '../../component/pager/pager.vue' //組件調用聲明components:{ pager} //參數data () { return { pageSize: 30, //總頁數 -- 後臺傳值 pageNo: 2 //當 ...
  • 個人認為:margin是用來隔開元素與元素的間距;padding是用來隔開元素與內容的間隔。margin用於佈局分開元素使元素與元素互不相干;padding用於元素與內容之間的間隔,讓內容(文字)與(包裹)元素之間有一段“呼吸距離”。 ...
  • 總結了一些常見的http的狀態碼,以及常見的解決方案。 一.各範圍內狀態碼大致含義 1xx:臨時響應(Informational),需要請求者繼續執行操作的狀態代碼,表示伺服器正在接受請求。 2xx:成功狀態碼(Success),已成功接受客戶端請求。 3xx:重定向狀態碼(Redirection) ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...