包裝元素

wrap() 將每個被選元素分別用指定的HTML內(nèi)容或元素包裹。wrapAll() 將所有被選元素用指定的HTML內(nèi)容或元素包裹起來。wrapInner() 將每個被選元素的內(nèi)部內(nèi)容用指定的HTML內(nèi)容或元素包裹。

// 使用 wrap() 方法

$("#myElement").wrap("

// 使用 wrapAll() 方法

$("p").wrapAll("

// 使用 wrapInner() 方法

$("#myElement").wrapInner("

對元素樣式的操作

獲取元素的樣式

/ 假設(shè)你有一個元素，其HTML如下：

//

// 使用jQuery獲取該元素的color樣式屬性值

var color = $("#myDiv").css("color");

console.log(color); // 輸出: rgb(255, 0, 0) 或者 #ff0000，取決于瀏覽器實(shí)現(xiàn)

設(shè)置元素的樣式

ID為myElement的標(biāo)簽之前有樣式則為設(shè)置。

// 設(shè)置單個樣式屬性

$("#myElement").css("color", "red"); // 將ID為myElement的元素的文本顏色設(shè)置為紅色

// 設(shè)置多個樣式屬性

$("#myElement").css({

"color": "red",

"background-color": "yellow",

"font-size": "20px"

}); // 同時設(shè)置多個樣式屬性

添加元素的樣式

ID為myElement的標(biāo)簽之前沒有樣式則為添加。

// 添加單個樣式屬性

$("#myElement").css("color", "red"); // 將ID為myElement的元素的文本顏色設(shè)置為紅色

// 添加多個樣式屬性

$("#myElement").css({

"color": "red",

"background-color": "yellow",

"font-size": "20px"

}); // 同時添加多個樣式屬性

刪除元素的樣式

將ID為myElement的標(biāo)簽的樣式設(shè)為空則為刪除。

$("#myElement").css("color", ""); // 將顏色樣式重置為默認(rèn)值或繼承值

使用樣式類修改元素樣式

使用場景：當(dāng)你有一組預(yù)定義的CSS類，并希望根據(jù)條件動態(tài)地添加或刪除或切換這些類時。

//添加樣式

$("#myElement").addClass("highlight"); // 為ID為myElement的元素添加highlight類

//刪除樣式

$("#myElement").removeClass("highlight"); // 移除ID為myElement的元素上的highlight類

//切換樣式類（如果類存在則刪除，如果不存在則添加）

$("#myElement").toggleClass("highlight");

//根據(jù)條件添加或刪除樣式類

// 假設(shè)有一個條件變量condition，如果為true則添加類，如果為false則移除類

var condition = true; // 或者 false

$("#myElement").toggleClass("highlight", condition);

事件處理

頁面加載完成后事件

// 當(dāng)頁面加載完成后執(zhí)行

$(document).ready(function() {

alert('頁面加載完成！');

});

//可簡寫為

$(function() {

// 這里的代碼同樣會在DOM加載完成后執(zhí)行

console.log('DOM加載完成');

});

添加事件

on方法用于綁定一個或多個事件處理函數(shù)到選定的元素上。

// 當(dāng)按鈕被點(diǎn)擊時，執(zhí)行函數(shù)

$("#myButton").on("click", function() {

alert("按鈕被點(diǎn)擊了！");

});

刪除事件

off方法用于移除一個或多個事件處理函數(shù)。

// 先綁定一個點(diǎn)擊事件處理函數(shù)

$("#myButton").on("click", function() {

alert("按鈕被點(diǎn)擊了！");

});

// 然后移除它

$("#myButton").off("click");

提交事件

用于綁定表單提交時的事件處理函數(shù)，或者提交表單。

//綁定事件處理函數(shù)

$("#myForm").submit(function(event) {

// 阻止表單的默認(rèn)提交行為（即不跳轉(zhuǎn)到新頁面）

event.preventDefault();

alert("表單已提交，但頁面不會跳轉(zhuǎn)。");

});

//觸發(fā)事件

// 假設(shè)有一個表單，當(dāng)某個按鈕被點(diǎn)擊時自動提交表單

$("#mySubmitButton").click(function() {

$("#myForm").submit();

});

點(diǎn)擊事件

// 綁定事件處理函數(shù)

$("#myButton").click(function() {

alert("按鈕被點(diǎn)擊了！");

});

// 觸發(fā)事件

// 假設(shè)有一個按鈕，當(dāng)頁面加載完成后自動觸發(fā)點(diǎn)擊事件

$(document).ready(function() {

$("#myButton").click();

});

懸停事件

$("#myElement").hover(

function() {

// 鼠標(biāo)指針進(jìn)入元素時執(zhí)行的函數(shù)

$(this).css("background-color", "yellow");

}, function() {

// 鼠標(biāo)指針離開元素時執(zhí)行的函數(shù)

$(this).css("background-color", "white");

}

);

鍵盤按鍵事件

綁定鍵盤按鍵按下時的事件。

$(document).keydown(function(event) {

if (event.keyCode == 13) { // 如果按下的是回車鍵（鍵碼為13）

alert("你按下了回車鍵！");

}

});

動畫效果

// 隱藏一個元素，帶有滑動效果

$('#myElement').slideUp();

// 顯示一個元素，帶有淡入效果

$('#myElement').fadeIn();

// 自定義動畫

$('#myElement').animate({

opacity: 0.5,

left: '+=50',

height: 'toggle'

}, 5000, function() {

alert('動畫完成！');

});

相關(guān)疑問

text方法疑問

獲取內(nèi)容，它會返回被選元素（包括其后代元素）的文本內(nèi)容。

設(shè)置內(nèi)容，它會替換被選元素（包括其后代元素）的文本內(nèi)容。

text方法處理的是純文本內(nèi)容，不會解析 HTML 標(biāo)簽。

html方法疑問

獲取內(nèi)容時，不僅可以獲取純文本內(nèi)容，還可以獲取包含 HTML 標(biāo)簽的內(nèi)容。

設(shè)置內(nèi)容時，jQuery 會將傳入的字符串解析為 HTML，并更新元素的內(nèi)部 HTML 結(jié)構(gòu)。因此，如果你傳入的字符串包含 HTML 標(biāo)簽，它們將被解析并作為元素的子元素插入。

html方法處理的是 HTML 內(nèi)容，可以包含 HTML 標(biāo)簽。

Ajax

是什么?

Ajax（Asynchronous JavaScript and XML）是一種用于創(chuàng)建異步 web 請求的技術(shù)，它允許在不重新加載整個頁面的情況下，從服務(wù)器加載數(shù)據(jù)，并在網(wǎng)頁上更新部分內(nèi)容。

jQuery中的Ajax

jQuery中的Ajax方法是封裝后的。jQuery對原生的JavaScript Ajax功能進(jìn)行了封裝，提供了簡單易用的 Ajax 方法，使得開發(fā)者能夠輕松實(shí)現(xiàn)復(fù)雜的 web 應(yīng)用。

ajax方法

$.ajax({

url: 'example.com/api/data', // 請求的 URL

type: 'GET', // 請求類型：GET、POST 等

dataType: 'json', // 預(yù)期服務(wù)器返回的數(shù)據(jù)類型

success: function(data, textStatus, jqXHR) {

// 請求成功時調(diào)用的函數(shù)

console.log(data);

},

error: function(jqXHR, textStatus, errorThrown) {

// 請求失敗時調(diào)用的函數(shù)

console.error("請求失敗: " + textStatus);

}

});

get和post方法

$.get() 和?$.post()?是 $.ajax() 的簡化版本，分別用于發(fā)送 GET 和 POST 請求。

// 使用$.get發(fā)送GET請求

$.get('example.com/api/data', function(data) {

console.log(data);

});

// 使用$.post發(fā)送POST請求

$.post('example.com/api/submit', { key: 'value' }, function(response) {

console.log(response);

});

getJSON方法

加載 JSON 格式的數(shù)據(jù)。

$.getJSON('example.com/api/data', function(data) {

console.log(data);

});

getScript方法

加載并執(zhí)行 JavaScript 文件。

$.getScript('path/to/script.js', function() {

console.log('腳本已加載并執(zhí)行');

});

load方法

用于將服務(wù)器響應(yīng)直接加載到選定的元素中。

$('#result').load('example.com/api/content #someElement');

/*說明：

#result 是要填充內(nèi)容的元素

'example.com/api/content #someElement' 是請求的 URL

只加載 #someElement 的內(nèi)容。*/

PS：當(dāng)你需要發(fā)送表單數(shù)據(jù)時，可以使用 $.param()來序列化表單數(shù)據(jù)，或者 serialize() 方法來序列化表單元素本身。

//$.param() 序列化 JavaScript 對象

var data = { key1: 'value1', key2: 'value2' };

var paramString = $.param(data);

$.post('example.com/api/submit', paramString, function(response) {

// 處理響應(yīng)

});

//serialize() 方法來序列化表單元素

var formData = $('#myForm').serialize();

$.post('example.com/api/submit', formData, function(response) {

// 處理響應(yīng)

});

與原生JavaScript在功能、性能、易用性等方面的差異

一、功能

JavaScript是一種編程語言，用于在瀏覽器中實(shí)現(xiàn)交互效果，包括動態(tài)更新頁面內(nèi)容、響應(yīng)用戶操作等。它提供了豐富的API，可以操作DOM、處理事件、發(fā)送網(wǎng)絡(luò)請求等。

jQuery是一個快速、小巧且功能豐富的JavaScript庫。它封裝了JavaScript常用的功能和代碼，使得開發(fā)者可以更方便地操作DOM、處理事件、發(fā)送Ajax請求等。此外，jQuery還提供了一些JavaScript沒有的高級功能，比如動畫效果和鏈?zhǔn)讲僮鞯取?/p>

示例：

假設(shè)我們有一個id為"myButton"的按鈕，當(dāng)點(diǎn)擊這個按鈕時，我們想要改變一個id為"myText"的元素的文本內(nèi)容。

使用原生JavaScript，代碼可能如下：

document.getElementById('myButton').addEventListener('click', function() {

document.getElementById('myText').innerHTML = 'Hello, jQuery!';

});

而使用jQuery，代碼可以簡化為：

$('#myButton').click(function() {

$('#myText').text('Hello, jQuery!');

});

從這個例子中可以看出，jQuery通過簡潔的語法和強(qiáng)大的選擇器，使得開發(fā)者可以更方便地操作DOM和處理事件。

二、性能

在性能方面，原生JavaScript通常會比jQuery更快，因?yàn)樗苯硬僮鳛g覽器提供的API，沒有額外的封裝和抽象。而jQuery雖然提供了很多方便的功能，但也因此增加了一些額外的開銷。

然而，這種性能差異在大多數(shù)情況下并不明顯，除非是在處理大量DOM元素或進(jìn)行復(fù)雜的計算時。在大多數(shù)情況下，開發(fā)者更關(guān)注的是代碼的易用性和可維護(hù)性，而不是微小的性能差異。

三、易用性

在易用性方面，jQuery無疑優(yōu)于原生JavaScript。jQuery的語法簡潔明了，易于學(xué)習(xí)和使用。它還提供了一套完整的API和文檔，使得開發(fā)者可以快速地查找和使用需要的功能。

此外，jQuery還具有良好的兼容性，可以在不同的瀏覽器上運(yùn)行。開發(fā)者能夠更專注于實(shí)現(xiàn)功能，而不是處理瀏覽器差異。

PS：jQuery和JavaScript各有其優(yōu)勢和適用場景。對于簡單的頁面交互和效果，原生JavaScript可能就足夠了。而對于更復(fù)雜的Web應(yīng)用和開發(fā)任務(wù)，使用jQuery可能會更加高效和便捷。

柚子快報邀請碼778899分享：前端 JQuery

http://yzkb.51969.com/

文章鏈接