wordpress近期更新,去掉了默認加載的jquery

分享和讨论Javascript相关的话题
回复
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5232
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 175 次
被圈友点赞: 204 次
联系:

wordpress近期更新,去掉了默認加載的jquery

帖子 ejsoon »

如有需要仍然可以手動加載:

wp_enqueue_script('jquery');

這在網上幾乎找不到有人在講這件事。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5232
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 175 次
被圈友点赞: 204 次
联系:

Re: wordpress近期更新,去掉了默認加載的jquery

帖子 ejsoon »

把以下的jquery轉換成純js:

代码: 全选

		jQuery(document).ready(function($){
			var data = {
				action: 'json_post', 
				jsondata: jutxt,
				id: $juid
			}
			$.post("$admin_url", data, function(response) {
				$(".jud").text(response);
				$(".jud").removeClass("hide");
				setTimeout(function () {
					$(".jud").addClass("hide");
				}, 1200);
			});
		});
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5232
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 175 次
被圈友点赞: 204 次
联系:

Re: wordpress近期更新,去掉了默認加載的jquery

帖子 ejsoon »

gemini fast:

代码: 全选

這段代碼的主要邏輯是使用 **AJAX** 發送一個 POST 請求,並在成功後操作 DOM 元素的 Class 和文字。

以下是將其轉換為現代純 JavaScript(ES6+)的寫法,使用了 `fetch` API 代替 `$.post`:

```javascript
document.addEventListener('DOMContentLoaded', () => {
    // 準備資料
    const data = new URLSearchParams({
        action: 'json_post',
        jsondata: jutxt, // 假設此變數已在外部定義
        id: $juid        // 假設此變數已在外部定義
    });

    // 發送 POST 請求
    fetch("$admin_url", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: data
    })
    .then(response => response.text()) // 取得回傳文字
    .then(responseText => {
        // 選取所有 class 為 .jud 的元素
        const judElements = document.querySelectorAll('.jud');

        judElements.forEach(el => {
            // 設置文字並移除 hide class
            el.textContent = responseText;
            el.classList.remove('hide');

            // 1.2 秒後重新加上 hide class
            setTimeout(() => {
                el.classList.add('hide');
            }, 1200);
        });
    })
    .catch(error => console.error('Error:', error));
});
```

---

### 主要轉換細節說明:

1.  **jQuery Ready → `DOMContentLoaded`**:
    * `jQuery(document).ready()` 轉換為原生事件監聽器,確保 HTML 解析完成後再執行代碼。
2.  **$.post → `fetch()`**:
    * `fetch` 是現代瀏覽器內建處理異步請求的標準方式。
    * 因為 jQuery 的 `$.post` 預設發送格式通常是 `application/x-www-form-urlencoded`,所以我們使用 `URLSearchParams` 來包裝資料。
3.  **Selector & Class 操作**:
    * `$(".jud")` 轉換為 `document.querySelectorAll('.jud')`。
    * `.removeClass("hide")` 轉換為 `.classList.remove('hide')`。
    * `.text(response)` 轉換為 `.textContent = responseText`。
4.  **遍歷處理**:
    * jQuery 的優點之一是可以一次對所有符合選取器的元素做操作,但在純 JS 中,`querySelectorAll` 會回傳一個 NodeList,我們需要用 `.forEach()` 來手動遍歷每個元素。

### 小提醒:
如果你的 `$admin_url`、`jutxt` 或 `$juid` 是來自 PHP 輸出的變數(例如 `"$admin_url"`),請確保在轉換後的 JavaScript 環境中這些變數依然正確定義且可被訪問。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5232
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 175 次
被圈友点赞: 204 次
联系:

Re: wordpress近期更新,去掉了默認加載的jquery

帖子 ejsoon »

值得注意的是,

jQuery(document).ready(function($){

並不等同於

document.addEventListener('DOMContentLoaded', () => {
https://ejsoon.vip/
弈趣極光:享受思維樂趣
回复

在线用户

正浏览此版面之用户: 没有注册用户 和 2 访客