jQuery 筆記

来源:https://www.cnblogs.com/risejl/archive/2022/09/25/16727208.html
-Advertisement-
Play Games

問題:【Chrome插件 Chrome extension 】報錯 Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist. 在看一個別人插件的時候發現一個如上所述的報錯,雖然 ...


jQuery

script 和 document.ready

首先,在頁面頂部添加 script 標簽, 記得添加結束標簽。

瀏覽器會運行 script 標簽所有的 JavaScript 腳本包括 jQuery。

script 標簽中添加代碼 $(document).ready(function() {。 然後在後面(仍在該 script 標簽內)用 }); 閉合它。只要瀏覽器載入頁面,function 中放入的代碼就會運行。

有一點很重要,如果沒有 document ready function,代碼將在 HTML 頁面呈現之前運行,這可能會導致錯誤。

$(document).ready(function() {
});

選擇器 Selector

所有的 jQuery 函數都以 $ 開頭,這個符號通常被稱為美元符號(dollar sign operator)或 bling。

jQuery 通常選取並操作帶有選擇器(selector)的 HTML 標簽。

標簽

比如,想要給 button 元素添加跳躍效果。 只需要在 document ready 函數內添加如下代碼:

$("button").addClass("animated bounce");

class

使用 $(".well") 選取類為 welldiv 標簽。

jQuery 的 .addClass() 方法用來給標簽添加類。

值得註意的是,和 CSS 聲明一樣,在類名前需要添加 .

$(".well").addClass("animated shake");

id

首先,用 $("#target3") 選擇器選取 id 為 target3button 標簽。

註意,和 CSS 聲明一樣,在 id 名前需要添加 #

$("#target3").addClass("animated fadeOut");

移除 class

利用 jQuery 的 removeClass() 方法移除。

 $("button").removeClass("btn-default");

css

用 jQuery 直接改變 HTML 標簽的 CSS。

jQuery 有一個 .css() 方法,能改變標簽的 CSS。

下麵的代碼效果是把顏色變藍:

$("#target1").css("color", "blue");

這與通常的 CSS 聲明略有不同,因為這個 CSS 屬性和值在英文引號里,並且它們用逗號而不是冒號間隔開。

$("#target1").css("color", "red");

禁用元素

用 jQuery 改變 HTML 標簽的非 CSS 屬性, 例如:禁用按鈕。

當禁用按鈕時,它將變成灰色並無法點擊。

jQuery 有一個 .prop() 方法,可以用其調整標簽的屬性。

下麵是禁用所有的按鈕的代碼:

$("button").prop("disabled", true);

更改文本

通過 jQuery 改變元素開始和結束標簽之間的文本。 甚至改變 HTML 標簽。

jQuery 有一個 .html() 函數,能用其在標簽里添加 HTML 標簽和文本, 函數提供的內容將完全替換之前標簽的內容。

下麵是重寫並強調標題文本的代碼:

$("h3").html("<em>jQuery Playground</em>");

jQuery 還有一個類似的函數 .text(),可以在不添加標簽的前提下改變標簽內的文本。

註意,<i> 標簽雖然傳統上用來強調文本,但此後常用作圖標(Font Awesome)的標簽。 <em> 標簽作為強調標簽現在已被廣泛接受。

$("#target4").html("<em>#target4</em>");

刪除元素

用 jQuery 從頁面移除 HTML 標簽。

jQuery 有一個 .remove() 方法,能完全移除 HTML 標簽。

$("#target4").remove();

移動元素

現在來把標簽從一個 div 移動到另一個裡。

jQuery 有一個 appendTo() 方法,可以選取 HTML 標簽並將其添加到另一個標簽裡面。

例如,如果要把 target4 從 right well 移到 left well,可以設置如下

$("#target4").appendTo("#left-well");

克隆元素

也可以把元素從一個地方複製到另一地方。

jQuery 有一個 clone() 方法,可以複製標簽。

例如,如果想把 target2left-well 複製到 right-well,可以設置如下:

$("#target2").clone().appendTo("#right-well");

是否註意到這兩個 jQuery 函數連在一起了? 這被稱為鏈式調用(function chaining),是一種用 jQuery 實現效果的簡便方法。

選擇父元素

每個 HTML 標簽都預設 inherits(繼承)其 parent(父標簽)的 CSS 屬性。

jQuery 有一個 parent() 方法,可以訪問被選取標簽的父標簽。

下麵的代碼展示了使用 parent() 方法把 left-well 標簽的父標簽背景色設置成藍色(blue):

$("#left-well").parent().css("background-color", "blue");

選擇子元素

把 HTML 標簽放到另一個級別的標簽里,這些 HTML 標簽被稱為該標簽的子標簽(children element)。

jQuery 有一個 children() 方法,可以訪問被選取標簽的子標簽。

下麵的代碼展示了用 children() 方法把 left-well 標簽的子標簽的顏色設置成 blue(藍色):

$("#left-well").children("color", "blue");

選擇特定子元素

jQuery 可以用 CSS 選擇器(CSS Selectors)選取標簽。 target:nth-child(n) CSS 選擇器可以選取指定 class 或者元素類型的的第 n 個標簽。

下麵的代碼展示了給每個區域(well)的第 3 個標簽設置彈跳(bounce)動畫效果:

$(".target:nth-child(3)").addClass("animated bounce");

選擇偶數元素

也可以用基於位置的奇 :odd 和偶 :even 選擇器選取標簽。

註意,jQuery 是零索引(zero-indexed)的,這意味著第 1 個標簽的位置編號是 0。 這有點混亂和反常——:odd 表示選擇第 2 個標簽(位置編號 1),第 4 個標簽(位置編號 3)……等等,以此類推。

下麵的代碼展示了選取所有 target class 元素的奇數元素並設置 sheke 效果:

$(".target:odd").addClass("animated shake");

。請記住, 偶數指的是基於零系統的元素的位置。

修改整個頁面

jQuery 也能選取 body 標簽。

$("body").addClass("animated hinge");

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

-Advertisement-
Play Games
更多相關文章
  • 主從複製 + 分庫分表 要講主從複製,首先來看看MySQL自帶的日誌文件。 日誌 錯誤日誌 錯誤日誌是 MySQL 中最重要的日誌之一,它記錄了當 mysqld 啟動和停止時,以及伺服器在運行過程中發生任何嚴重錯誤時的相關信息。當資料庫出現任何故障導致無法正常使用時,建議首先查看此日誌文件。 該日誌 ...
  • 聽不見、聽不清、聽不懂,這是全國上千萬聽障群體的真實寫照。由於聽力的局限,他們在求學、工作、就醫、出行等方面都面臨巨大挑戰。AI時代,全行業為信息無障礙建設形成強大合力,但聽障群體依然面臨著冷冰冰的現實:專業語言服務人員的稀缺、溝通輔助器具的不完備,甚至來自社會的偏見及誤解…… “聾人只要通過助聽設 ...
  • 如果有一天,周遭的世界突然變得很安靜,動聽美妙的音樂,在你看來只是沉寂;振奮人心的演講,對你而言只是默劇;大自然的千里鶯啼,於你來說也只是畫捲。你會不會感到害怕? 而有這麼一群人,每天都在與這世界無聲交流著,他們就是聽力障礙人士。據2006年第二次全國殘疾人抽樣調查顯示,我國的聽力殘疾人約2780萬 ...
  • 最基礎的指針如下: int a; int* p = &a; 答:p指向a的地址,&是取a的地址。*指的是指針中取內容的符號。 2.str[]和str*的區別: char str1[] = "abc"; char str2[] = "abc"; const char str3[] = "abc"; c ...
  • Array 對象 所有方法 concat() 方法 合併多個數組,返回一個新數組 join() 方法 將數組合併為字元串,用指定的字元分割 pop() 方法 刪除成員(從後) 並返回該被刪除的元素 shift() 方法 刪除成員(從前) 並返回該被刪除的元素 splice() 方法 刪除多個元素 並 ...
  • react腳手架創建幾種方式 node v16.17.0 npm 8.15.0 yarn 3.2.3 vite 3.1.3 配置less-loader npm 首先通過 npm 方式全局安裝 create-react-app npm install -g create-react-app 查看是否安 ...
  • ==面試題 ##1.vue2中的響應式原理簡述 響應式原理主要就是通過數據劫持,依賴收集,派發更新的方式來實現的 1.數據劫持,vue2是通過Object.defineProperty方法的get、set來將對對象進行遞歸劫持。 其中修改對象的屬性時 就會觸發set, 使用對象的屬性時就會觸發get ...
  • ES6 部分 Typescript 部分 前端工程面經(節流防抖、https、前端攻擊、性能優化...) https://juejin.cn/post/6844903734464495623 ES6面試 為什麼選擇 ES6 ? ES6是新一代的 JS 語言標準,規範了JS的使用標準(var標量提升) ...
一周排行
    -Advertisement-
    Play Games
  • C#.Net的BCL提供了豐富的類型,最基礎的是值類型、引用類型,而他們的共同(隱私)祖先是 System.Object(萬物之源),所以任何類型都可以轉換為Object。 ...
  • 最近有群友咨詢C#如何調用Python?小編嘗試Python.NET過程中遭遇的版本相容性和環境配置難題,小編決定尋找一個更為簡單、穩定且對初學者友好的解決方案。小編搜索一番,除了Python.NET之外,還有其他途徑能夠幫助我們輕鬆地在C#項目調用Python腳本,那就是通過命令行調用,使用 Sy ...
  • .NET中特性+反射 實現數據校驗 在.NET中,我們可以使用特性+反射來實現數據校驗。特性是一種用於為程式中的代碼添加元數據的機制。元數據是與程式中的代碼相關聯的數據,但不直接成為代碼的一部分。通過特性,我們可以為類、方法、屬性等添加額外的信息,這些信息可以在運行時通過反射獲取和使用。 對反射不太 ...
  • Biwen.Settings 是一個簡易的配置項管理模塊,主要的作用就是可以校驗並持久化配置項,比如將自己的配置存儲到資料庫中,JSON文件中等 使用上也是很簡單,只需要在服務中註入配置, 比如我們有一個GithubSetting的配置項,我們只需要定義好對象然後註入到Service中即可: [De ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 前言 VB.NET,全名Visual Basic .NET,是Microsoft .NET框架的一部分,是一種面向對象的編程語言。它繼承了Visual Basic的易用性,同時增加了對面向對象編程的支持。VB.NET提供了大量的內置函數,使得開發者可以更容易地處理字元串、數學計算、文件和目錄訪問等任 ...
  • 自定義可移動點二維坐標軸控制項 目錄 路由參數 坐標軸控制項定義 Demo 路由參數 X_YResultCollection為當前X軸對應Y軸值存儲字典 public class ResultCollectionChangedEventArgs(RoutedEvent routedEvent, obje ...
  • 自定義分頁控制項 tip: 該控制項的樣式用的是materialDesign庫,需要下載Nuget包 Code Xaml <UserControl x:Class="TestTool.CustomControls.PagingControl" xmlns="http://schemas.microsof ...
  • 最近群里有個小伙伴把Dapper遷移SqlSugar幾個不能解決的問題進行一個彙總,我正好寫一篇文章來講解一下 一、sql where in傳參問題: SELECT * FROM users where id IN @ids 答: SqlSugar中應該是 var sql="SELECT * FRO ...
  • 安裝nuget包 Wesky.Net.OpenTools 1.0.8或以上版本。支持.net framework 4.6以上版本,以及所有.net core以及以上版本引用。 開發一個簡單的Winform界面,用來測試使用。如需該winform的demo,可以在公眾號【Dotnet Dancer】後 ...