【前端基礎篇】JavaScript之jQuery介紹

文章目錄

  • 前言
  • JQuery基本介紹和使用方法
    • 引入依賴
  • jQuery語法
  • jQuery選擇器
  • jQuery事件
  • 操作元素
    • 獲取/設置元素內容
    • 獲取/設置元素屬性
    • 獲取/返回css屬性
    • 添加元素
    • 刪除元素
  • 總結：
    • 常用的jQuery方法 - 詳細解釋與示例
    • 事件處理拓展 - 詳細解釋與示例
  • 其他拓展內容

前言

在閱讀過程中可以把代碼片復制到vscode上去瀏覽器看實際效果，更易理解喔😘

JQuery基本介紹和使用方法

W3C 標準給我們提供了?系列的函數, 讓我們可以操作:

  • ??內容
  • ??結構
  • ??樣式

但是原?的JavaScript提供的API操作DOM元素時, 代碼?較繁瑣, 冗?. 我們可以使?JQuery來操作??對象.

jQuery是?個快速、簡潔且功能豐富的JavaScript框架, 于2006年發布. 它封裝JavaScript常?的功能代碼, 提供了簡潔?強?的選擇器和DOM操作?法. 使?JQuery可以輕松地選擇和操作HTML元素，從?減少了開發?員編寫的代碼量，提?了開發效率,

它提供的 API 易于使?且兼容眾多瀏覽器，這讓諸如 HTML ?檔遍歷和操作、事件處理、動畫和 Ajax 操作更加簡單. JQuery對于事件的處理也進?了簡化, 提供了?個簡單的API來綁定、觸發和處理事件，使開發?員能夠更?便地處理各種交互?為.

引入依賴

使?JQuery需要先引?對應的庫

在使?jQuery CDN時，只需要在HTML?檔中加?如下代碼

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

參考地址：jQuery CDN

在這里插入圖片描述

在這里插入圖片描述

Jquery官?共提供了4種類型的JQuery庫：

uncompressed : ?壓縮版本(易讀, 但是?件較?, 傳輸速度慢)

minified: 壓縮版(不易讀, ?件?, 性能?, 開發中推薦)

slim: 精簡瘦?版, 沒有Ajax和?些特效

slim minified : slim 的壓縮版

開發時, 建議把JQuery庫下載到本地, 放在當前項?中. 引?外部地址, 會有外部地址不能訪問的?險.

下載?式:

  1. 通過瀏覽器訪問上述連接
  2. 右鍵 -> 另存為… 保存到本地, 放在項?中即可.

也可以從其他CDN上下載引?JQuery

?如：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></scr

jQuery語法

jQuery 語法是通過選取 HTML 元素, 并對選取的元素執?某些操作

基礎語法：

 $(selector).action()

  • $() 是?個函數, 它是 jQuery 提供的?個全局函數, ?于選擇和操作 HTML 元素.

  • Selector 選擇器, ?來"查詢"和"查找" HTML 元素

  • action 操作, 執?對元素的操作

JQuery 的代碼通常都寫在 document ready 函數中

document：整個?檔對象, ?個??就是?個?檔對象, 使?document表?.

這是為了防??檔在完全加載（就緒）之前運? jQuery 代碼，即在?檔加載完成后才可以對??進?操作。

如果在?檔沒有完全加載之前就運?函數，操作可能失敗

$(document).ready(function(){// jQuery functions go here
})

示例：

<button type="button">點我消失</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>$(document).ready(function(){$('button').click(function(){$(this).hide();});
});</script>

給按鈕添加了click事件,點擊后元素消失.

簡潔寫法:

$(function(){  // jQuery functions go here  });

jQuery選擇器

我們通過JQuery選擇器來選擇?些HTML元素.然后對元素進?操作.

JQuery選擇器基于已經存在的CSS選擇器,除此之外,還有?些?定義的選擇器.

jQuery中所有選擇器都以$ 開頭：$().

語法描述
$(“*”)選取所有元素
$(this)選取當前 HTML 元素
$(“p”)所有

元素

$(“p:first”)選取第一個

元素

$(“p:last”)最后一個

元素

$(“.box”)所有 class=“box” 的元素
$(“#box”)id=“box” 的元素
$(“.intro.demo”)所有 class=“intro” 且 class=“demo” 的元素
$(“p.intro”)選取 class 為 intro 的

元素

$(“ul li:first”)選取第一個
  • 元素的第一個
  • 元素
$(“:input”)所有 元素
$(“:text”)所有 type=“text” 的 元素
$(“:checkbox”)所有 type=“checkbox” 的 元素

jQuery事件

JS要構建動態??,就需要感知到??的?為.

??對于??的?些操作(點擊,選擇,修改等)操作都會在瀏覽器中產??個個事件,被JS獲取到,從?進?更復雜的交互操作.

瀏覽器就是?個哨兵,在偵查敵情(???為).?旦??有反應(觸發具體動作),哨兵就會點燃烽?臺的狼煙(事件),后?就可以根據狼煙來決定下?步的對敵策略.

事件由三部分組成：

  1. 事件源:哪個元素觸發的
  2. 事件類型:是點擊,選中,還是修改?
  3. 事件處理程序:進?步如何處理.往往是?個回調函數.

例如:某個元素的點擊事件:

$("p").click(function(){//動作發?后執?的代碼 
});

常?的事件有:

事件代碼
文檔就緒事件(完成加載)$(document).ready(function)
點擊事件$(selector).click(function)
雙擊事件$(selector).dblclick(function)
元素的值發生改變$(selector).change(function)
鼠標懸停事件$(selector).mouseover(function)

操作元素

獲取/設置元素內容

三個簡單的獲取元素內容的JQuery?法：

JQuery方法說明
text()設置或返回所選元素的文本內容
html()設置或返回所選元素的內容（包括 HTML 標簽）
val()設置或返回表單字段的值

**這三個?法即可以獲取元素的內容,?可以設置元素的內容. **

  • 有參數時,就進?元素的值設置

  • 沒有參數時,就進?元素內容的獲取

代碼示例：

獲取元素內容：

<div id="test"><span>你好</span></div><input type="text" value="hello"><script>$(document).ready(function () {var html = $("#test").html();console.log("html內容為:"+html);var text = $("#test").text();console.log("?本內容為:"+text);var inputVal = $("input").val();console.log(inputVal);});
</script>

設置元素內容：

<div id="test"></div>
<div id="test2"></div>
<input type="text" value=""><script>$(document).ready(function () {$("#test").html('<h1>設置html</h1>');$("#test2").text('<h1>設置text</h1>');$("input").val("設置內容");
});
</script>

獲取/設置元素屬性

JQuery attr()?法?于獲取屬性值.

代碼示例：

獲取元素屬性：

<p><a href="https://www.bitejiuyeke.com/index" id="bite">小明</a></p><script>$(function(){var href = $("p a").attr("href")console.log(href);
});
</script>

設置元素屬性：

<p><a href="https://www.bitejiuyeke.com/index" id="bite">小明</a></p><script>$(function(){$("p a").attr("href","baidu.com")console.log($("p a").attr("href"));
});
</script>

獲取/返回css屬性

css()?法設置或返回被選元素的?個或多個樣式屬性

代碼?例：

獲取元素屬性

<div style="font-size: 36px;">我是?個?本</div><script>$(function(){var fontSize = $("div").css("font-size");console.log(fontSize);
});
</script>

設置元素屬性

<div style="font-size: 36px;">我是?個?本</div><script>$(function(){$("div").css("font-size","24px");
});
</script>

添加元素

添加HTML內容

  1. append():在被選元素的結尾插?內容
  2. prepend():在被選元素的開頭插?內容
  3. after():在被選元素之后插?內容
  4. before():在被選元素之前插?內容
<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol>
<img src="pic/rose.jpg"><script>$(function () {$("ol").append("<li>append</li>");$("ol").prepend("<li>prepend</li>");$("img").before("圖?前插?");$("img").after("圖?后插?");
});
</script>

刪除元素

刪除元素和內容，?般使?以下兩個jQuery?法：

  1. remove():刪除被選元素（及其?元素）
  2. empty():刪除被選元素的?元素。

代碼示例：

刪除被選元素（及其子元素）

<div id="div1">我是?個div</div>
<button>刪除 div 元素</button><script>$(function () {$('button').click(function(){$('#div1').remove();});
});
</script>

刪除被選元素的子元素

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol>
<button>刪除列表元素</button><script>$(function () {$('button').click(function(){$('ol').empty();});
});
</script>

總結：

常用的jQuery方法 - 詳細解釋與示例

  1. text(): 用于獲取或設置所選元素的文本內容。這是最常用的方法之一，特別是在動態更新頁面內容時。

    // 獲取文本
var text = $("#elementId").text();
console.log(text);  // 打印出元素的文本內容// 設置文本
$("#elementId").text("新的文本內容");
// 此時，頁面上的 #elementId 元素的文本內容會變為 "新的文本內容"

  2. html(): 用于獲取或設置所選元素的HTML內容。這對于更新包含HTML標簽的內容非常有用。

    // 獲取HTML內容
var htmlContent = $("#elementId").html();
console.log(htmlContent);  // 打印出元素的HTML內容// 設置HTML內容
$("#elementId").html("<strong>新的HTML內容</strong>");
// 此時，#elementId 的內容將被替換為粗體的“新的HTML內容”

  3. val(): 用于獲取或設置表單元素的值，特別是在表單交互過程中非常有用。

    // 獲取表單值
var inputValue = $("#inputId").val();
console.log(inputValue);  // 打印出輸入框的當前值// 設置表單值
$("#inputId").val("新值");
// 用戶在 inputId 輸入框中會看到值被更新為 "新值"

  4. css(): 獲取或設置CSS屬性，能夠動態地改變元素的樣式，是實現動態交互效果的重要工具。

    // 獲取CSS屬性
var backgroundColor = $("#elementId").css("background-color");
console.log(backgroundColor);  // 打印出背景顏色屬性的值// 設置CSS屬性
$("#elementId").css("background-color", "blue");
// 此時，#elementId 元素的背景顏色會變為藍色

  5. attr(): 獲取或設置HTML元素的屬性值，例如鏈接的href、圖片的src等。

    // 獲取屬性值
var hrefValue = $("#linkId").attr("href");
console.log(hrefValue);  // 打印出鏈接的 href 屬性值// 設置屬性值
$("#linkId").attr("href", "https://new-url.com");
// 鏈接的目標地址會被更新為 "https://new-url.com"

  6. addClass(): 為元素添加一個或多個類，通常用于動態控制樣式的應用。

    $("#elementId").addClass("newClass anotherClass");
// 現在，#elementId 元素上會有 "newClass" 和 "anotherClass" 兩個類

  7. removeClass(): 移除元素的一個或多個類，通常與addClass()配合使用，用于動態樣式切換。

    $("#elementId").removeClass("oldClass anotherOldClass");
// "oldClass" 和 "anotherOldClass" 類將被從 #elementId 元素上移除

  8. toggleClass(): 切換元素的類，即如果元素已經有該類，則移除；如果沒有，則添加。適合用于開關狀態的切換。

    $("#elementId").toggleClass("activeClass");
// 如果 #elementId 元素當前有 "activeClass" 類，則移除它，否則添加它

事件處理拓展 - 詳細解釋與示例

  1. focus(): 當元素獲得焦點時觸發，常用于輸入框的交互。

    $("#inputId").focus(function(){$(this).css("background-color", "yellow");
});
// 當用戶點擊或 Tab 鍵進入 #inputId 輸入框時，背景顏色會變為黃色

  2. blur(): 當元素失去焦點時觸發，通常用于驗證用戶輸入。

    $("#inputId").blur(function(){$(this).css("background-color", "white");
});
// 當用戶離開 #inputId 輸入框時，背景顏色會恢復為白色

  3. hover(): 當鼠標懸停在元素上時觸發兩個不同的函數，分別用于鼠標移入和移出。通常用于增強用戶體驗。

    $("#elementId").hover(function(){$(this).css("background-color", "lightblue");}, function(){$(this).css("background-color", "lightgrey");}
);
// 當鼠標進入 #elementId 元素時，背景顏色變為淺藍色；移出時，變為淺灰色

  4. keydown(): 當用戶按下鍵盤按鍵時觸發，適合處理鍵盤事件。

    $(document).keydown(function(event){alert("你按下了鍵盤上的按鍵: " + event.key);
});
// 當用戶按下任意鍵時，彈出一個包含按鍵字符的警告框

  5. submit(): 當表單提交時觸發，通常用于在提交前進行驗證或提交確認。

    $("form").submit(function(){alert("表單已提交!");
});
// 用戶提交表單時，彈出提示

  6. change(): 當表單元素的值發生變化時觸發，適用于下拉菜單或單選按鈕等。

    $("#selectElement").change(function(){alert("選擇的值是: " + $(this).val());
});
// 當用戶選擇不同的選項時，彈出當前選擇的值

其他拓展內容

除了這些基本功能外，jQuery還提供了一些高級功能，例如：

  1. animate(): 用于制作復雜動畫。

    $("#elementId").animate({opacity: 0.25,left: "+=50",height: "toggle"
}, 5000, function() {// 動畫完成后執行的回調函數alert("動畫完成");
});
// 此代碼將使 #elementId 漸漸變透明，同時向右移動50px，并在5秒內切換高度

  2. ajax(): 用于進行異步HTTP請求，可以加載數據而無需重新加載頁面。

    $.ajax({url: "https://api.example.com/data",type: "GET",success: function(response) {$("#elementId").html(response);},error: function(error) {console.log("請求失敗", error);}
});
// 使用GET方法從指定URL加載數據，并在成功時將其顯示在 #elementId 元素中

  3. fadeIn() / fadeOut(): 處理淡入淡出效果，常用于顯示或隱藏內容。

    $("#elementId").fadeIn(1000);  // 元素將在1秒內淡入
$("#elementId").fadeOut(1000); // 元素將在1秒內淡出

  4. slideUp() / slideDown(): 實現滑動隱藏和顯示效果。

    $("#elementId").slideUp(1000);   // 元素將在1秒內向上滑動隱藏
$("#elementId").slideDown(1000); // 元素將在1秒內向下滑動顯示

以上就是關于【前端基礎篇】JavaScript之jQuery介紹的內容啦，各位大佬有什么問題歡迎在評論區指正，您的支持是我創作的最大動力！??

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/91136.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/91136.shtml
英文地址，請注明出處：http://en.pswp.cn/web/91136.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Vue入門：vue項目的創建和基本概念

Vue入門：vue項目的創建和基本概念

一、vue的基本簡介1. 什么是vue?Vue (發音為 /vju?/&#xff0c;類似 view) 是一款用于構建用戶界面的 JavaScript 框架。它基于標準 HTML、CSS 和 JavaScript 構建&#xff0c;并提供了一套聲明式的、組件化的編程模型&#xff0c;幫助你高效地開發用戶界面。無論是簡單還是…
閱讀更多...
2.oracle保姆級安裝教程

2.oracle保姆級安裝教程

一、Oracle數據庫安裝1.找到軟件的位置 D:\學習軟件\Oracle&#xff0c;并解壓軟件2.雙擊setup.exe3.選擇 是4.去掉勾&#xff0c;下一步5.創建和配置數據庫&#xff0c;下一步6.桌面類&#xff0c;下一步7.配置安裝路徑地址和密碼8.點完成9.正在安裝&#xff0c;稍等片刻10.有…
閱讀更多...
STM32 軟件模擬 I2C 讀寫 MPU6050--實現加速度與陀螺儀數據采集

STM32 軟件模擬 I2C 讀寫 MPU6050--實現加速度與陀螺儀數據采集

演示視頻&#xff1a; https://www.bilibili.com/video/BV1iCQRYXEBb/?share_sourcecopy_web&vd_source0e4269581b0bc60d57a80c9a27c98905一、前言在嵌入式開發中&#xff0c;MPU6050 六軸傳感器因其集成加速度計和陀螺儀且成本低廉&#xff0c;廣泛應用于平衡小車、飛控、…
閱讀更多...
TFLOPs與TOPS的轉換關系詳解：如何衡量AI芯片的算力？

TFLOPs與TOPS的轉換關系詳解：如何衡量AI芯片的算力？

在評估AI芯片或計算硬件的性能時&#xff0c;我們經常會遇到TFLOPs和TOPS這兩個關鍵指標。很多開發者對它們的區別和轉換關系存在疑惑。本文將深入解析這兩個指標的含義、應用場景及轉換方法&#xff0c;并提供實際應用中的注意事項。 一、基本概念解析 1.1 TFLOPs&#xff08;…
閱讀更多...
C語言：第11天筆記

C語言：第11天筆記

C語言&#xff1a;第11天筆記 內容提要函數函數的概述函數的分類函數的定義形參和實參函數的返回值函數的調用函數的聲明函數 函數的概述 **函數&#xff1a;**實現一定功能的&#xff0c;獨立的代碼模塊&#xff0c;對于函數的使用&#xff0c;一定是先定義&#xff0c;后使 ?…
閱讀更多...
java導出pdf（使用html）

java導出pdf（使用html）

引入maven <dependencies><!-- Thymeleaf --><dependency><groupId>org.thymeleaf</groupId><artifactId>thymeleaf</artifactId><version>3.1.1.RELEASE</version> <!-- 或與 Spring Boot 匹配的版本 --></de…
閱讀更多...
Qt 遠程過程調用（RPC）實現方案

Qt 遠程過程調用（RPC）實現方案

在分布式系統開發中&#xff0c;遠程過程調用&#xff08;RPC&#xff09;是實現跨進程、跨機器通信的重要技術。Qt 作為一個強大的跨平臺框架&#xff0c;提供了多種 RPC 實現方案&#xff0c;能夠滿足不同場景下的通信需求。本文將深入探討 Qt 中 RPC 的各種實現方式&#xf…
閱讀更多...
攻防世界-引導-Web_php_unserialize

攻防世界-引導-Web_php_unserialize

題目內容&#xff1a;出現一段源代碼&#xff0c;分段分析第一部分如下<?php class Demo { private $file index.php;public function __construct($file) { $this->file $file; }function __destruct() { echo highlight_file($this->file, true); }function __w…
閱讀更多...
pytorch學習筆記-自定義卷積

pytorch學習筆記-自定義卷積

未完結的草稿———&#xff01;大概是準備整合一下常見的層&#xff0c;整合完感覺就可以進行搭建了&#xff08;還沒進行到這一步所以不太確定版&#xff09; &#xff08;ps我將在完結這一篇的時候刪除上面的小字and二編一下整篇文章的結構&#xff0c;如果看到了這部分文字…
閱讀更多...
[明道云]-基礎教學2-工作表字段 vs 控件：選哪種？

[明道云]-基礎教學2-工作表字段 vs 控件：選哪種？

本文深入解析“工作表字段”與“控件”的關系與差別，并從結構、功能、使用場景和選型建議等方面進行對比。 一、基礎概念厘清 ? 工作表字段 = 數據模型中的列 工作表字段相當于數據庫表中的列，是記錄每條業務對象（如訂單、客戶等）屬性的數據項，每個字段都有明確的名稱和…
閱讀更多...
C++-一篇文章入門coroutines協程

C++-一篇文章入門coroutines協程

文章目錄前言什么是協程協程實現原理C協程的最小例子12345協程等效代碼協程傳值的例子前言 最近學習了一下C協程&#xff0c;這篇文章將介紹協程的相關概念&#xff0c;以及在C中如何使用協程。 什么是協程 C中&#xff0c;協程&#xff08;coroutines&#xff09;可以理解為…
閱讀更多...
數字經濟專業的就業全景指南

數字經濟專業的就業全景指南

CDA數據分析師證書含金量高&#xff0c;適應了未來數字化經濟和AI發展趨勢&#xff0c;難度不高&#xff0c;行業認可度高&#xff0c;對于找工作很有幫助。一、數字經濟就業熱力圖二、核心崗位發展路徑1. 互聯網數字運營崗2. 金融科技崗崗位類型技能組合證書加持5年薪資范圍智…
閱讀更多...
PDF轉Word免費工具！批量處理PDF壓縮,合并, OCR識別, 去水印, 簽名等全功能詳解

PDF轉Word免費工具！批量處理PDF壓縮,合并, OCR識別, 去水印, 簽名等全功能詳解

大家好&#xff0c;歡迎來到程序視點&#xff01;我是你們的老朋友.小二&#xff01;前言PDF軟件我發的非常多&#xff0c;但今天這款工具是大家公認最值得推薦的&#xff0c;這款軟件就是PDF24PDF24幾乎包含了PDF的所有功能&#xff0c;目前是更新到了最新版本&#xff01;文末…
閱讀更多...
Flutter開發實戰之Widget體系與布局原理

Flutter開發實戰之Widget體系與布局原理

第3章：Widget體系與布局原理 在前面兩章中，我們已經搭建好了Flutter開發環境，并且了解了Dart語言的基礎知識。現在是時候深入Flutter的核心——Widget體系了。如果說Dart是Flutter的語言基礎，那么Widget就是Flutter的靈魂。理解Widget體系，是掌握Flutter開發的關鍵所在。…
閱讀更多...
C++:stack與queue的使用

C++:stack與queue的使用

stack與queue的使用一.stack與queuej基礎1.stack1.1基本認識1.2示例代碼代碼功能解析2.queue2.1基礎知識操作說明2.2示例代碼代碼分析 一.stack與queuej基礎 1.stack 1.1基本認識以上圖片展示了棧&#xff08;stack&#xff09;這種數據結構的基本操作示意。棧是一種遵循后進先…
閱讀更多...
Unity 編輯器開發 之 Excel導表工具

Unity 編輯器開發 之 Excel導表工具

一個簡單的Excel導表工具&#xff0c;可以用來熱更數據配置工具使用&#xff1a;&#xfeff;&#xfeff;執行菜單 SDGSupporter/Excel/1.Excel2Cs 生成c#腳本。&#xfeff;&#xfeff;等待C#類編譯完成&#xfeff;&#xfeff;執行菜單 SDGSupporter/Excel/2.Excel2Bytes …
閱讀更多...
【數據結構與算法】力扣 415. 字符串相加

【數據結構與算法】力扣 415. 字符串相加

題目描述 415. 字符串相加 給定兩個字符串形式的非負整數 num1 和num2 &#xff0c;計算它們的和并同樣以字符串形式返回。 你不能使用任何內建的用于處理大整數的庫&#xff08;比如 BigInteger&#xff09;&#xff0c; 也不能直接將輸入的字符串轉換為整數形式。 示例 1…
閱讀更多...
進階向:Manus AI與多語言手寫識別

進階向:Manus AI與多語言手寫識別

Manus AI與多語言手寫識別：從零開始理解 手寫識別技術作為人工智能領域的重要應用之一，近年來在智能設備、教育、金融等行業得到了廣泛運用。根據市場調研機構IDC的數據顯示，2022年全球手寫識別市場規模已達到45億美元，預計到2025年將突破70億美元。其中，多語言手寫識別技…
閱讀更多...
Javaweb————HTTP請求頭屬性講解

Javaweb————HTTP請求頭屬性講解

??????????????????????前面我們已經說過http請求分為三部分&#xff0c;請求行&#xff0c;請求頭和請求體 請求頭包含若干個屬性&#xff1a;格式為屬性名&#xff1a;屬性值&#xff0c;這篇文章我們就來介紹一下http請求頭中一些常見屬性的含義 我們…
閱讀更多...
9.c語言常用算法

9.c語言常用算法

查找順序查找&#xff08;線性查找&#xff09;算法思想&#xff1a;從數組的第一個元素開始&#xff0c;逐個與目標值進行比較&#xff0c;直到找到目標值或查找完整個數組。時間復雜度&#xff1a;最好情況&#xff1a;O(1)&#xff08;目標在第一個位置&#xff09;最壞情況…
閱讀更多...
最新文章

Copyright @ 2022~2023