JQuery 基本语法与实践

介绍

jQuery 用于选择 HTML 元素并对这些元素执行某些操作

推荐在以下 playground 操纵 jquery

1. [jQuery playground](https://playcode.io/jquery)

1. jQuery playground

2. [在 js playground 中使用 jQuery](https://playcode.io/javascript), 复制本文档中的代码到 playground 中 `index.html`

2. 在 js playground 中使用 jQuery, 复制本文档中的代码到 playground 中 index.html

一、基本语法：

一、 基本语法：

$(selector).action();

使用 $ 符号来定义/访问 jQuery
使用 (选择器 selector) 来查询或查找 HTML 元素
使用 .action() 在选定的元素上执行操作

例如：

$("p").hide();
// 隐藏所有的p元素

代码示例：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      p {
          color : white;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
    <p>This is the third paragraph.</p>
    <button id="hideButton">Hide Paragraphs</button>
    <button id="showButton">Show Paragraphs</button>

    <script>
      $(document).ready(function() {
          // When the button is clicked, hide all paragraph elements
          $("#hideButton").click(function() {
              $("p").hide();
          });

          $("#showButton").click(function() {
              $("p").show();
            });
      });
    </script>
  </body>
</html>

为什么要用 jquery

要做到同样的效果，如果使用原生 js 的代码：

var paragraphs = document.querySelectorAll("p");

paragraphs.forEach(function (paragraph) {
  paragraph.style.display = "none";
});

对比之下可以发现，使用原生 js 来实现对 DOM 元素的操纵非常冗长，往往还需要创建一个中间变量，不够简便。这样一来我们就可以理解为什么要在项目中引入 jQuery

二、 jQuery 的选择器：

二、 jQuery 的选择器：

jQuery 的选择器和 css 选择器以及 js 中 document.querySelector() 用几乎一致的语法来选择 HTML 元素

例如：

$("*"); // 选择所有元素
$(this); // 选择当前的 HTML 元素
$("div p"); // 选择所有在 <div> 里的 <p> 元素
$("#unique.highlight"); // 选择 id 为 "unique" 且 class 为 "highlight" 的元素
$("p.intro"); // 选择所有 class= "intro" 的 <p> 元素
$("p:first"); // 选择第一个 <p> 元素
$("ul li:first"); // 选择第一个 <ul> 内的第一个 <li> 元素
$("ul li:first-child"); // 选择每个 <ul> 内的第一个 <li> 元素
$("[href]"); // 选择所有具有 href 属性的元素
$("a[target='_blank']"); // 选择所有 target 属性值为 "_blank" 的 <a> 元素
$("a[target!='_blank']"); // 选择所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button"); // 选择所有 type="button" 的 <button> 元素和 <input>元素
$("tr:even"); // 选择所有偶数行的 <tr> 元素
$("tr:odd"); // 选择所有奇数行的 <tr> 元素

代码示例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Selectors Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
        }
        .intro {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div>
        <p class="intro">Paragraph 1 inside a div</p>
        <p>Paragraph 2 inside a div</p>
    </div>
    <div id="unique" class="highlight">
        This div has both the id "unique" and the class "highlight".
    </div>
    <div>
        <p class="intro">Another Paragraph inside another div</p>
    </div>
    <ul>
        <li>First item</li>
        <li>Second item</li>
    </ul>
    <ul>
        <li>First item in another list</li>
        <li>Second item in another list</li>
    </ul>
    <a href="https://example.com" target="_blank">Link 1</a>
    <a href="https://example.com" target="_self">Link 2</a>
    <a href="https://example.com">Link 3</a>

    <script>
        $(document).ready(function() {
            // Example 1: Select all <p> elements inside <div>
            $("div p").css("color", "blue");

            // Example 2: Select element with id "unique" and class "highlight"
            $("#unique.highlight").css("border", "2px solid red");

            // Example 3: Select all <p> elements with class "intro"
            $("p.intro").css("font-style", "italic");

            // Example 4: Select the first <p> element
            $("p:first").css("text-decoration", "underline");

            // Example 5: Select the first <li> in first <ul>
            $("ul li:first").css("background-color", "lightgray");

            // Example 6: Select the first <li> in each <ul> using :first-child
            $("ul li:first-child").css("font-size", "1.8em");

            // Example 7: Select all elements with href attribute
            $("[href]").css("color", "green");

            // Example 8: Select all <a> elements with target="_blank"
            $("a[target='_blank']").css("font-weight", "bold");

            // Example 9: Select all <a> elements where target is not equal to "_blank"
            $("a[target!='_blank']").css("text-decoration", "line-through");
        });
    </script>
</body>
</html>

三、 jQuery 的事件 (event 或 action)：

三、 jQuery 的事件 (event 或 action)：

在 jQuery 中，大多数 DOM 事件都有对应的 jQuery 方法要为页面上的所有 <p> 元素分配一个点击事件，可以这样做：

$("p").click();

下一步是定义在事件触发时应该发生什么。须将一个函数传递给事件处理器：

$("p").click(function () {
  // 在这里执行操作!!
});

其他常见的事件还有

鼠标事件	键盘事件	表单事件	Document/Window 事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

详情见这里

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Events Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
        }
        .scrollable {
            height: 150px;
            overflow-y: scroll;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 20px;
        }
        #resizable {
            width: 200px;
            height: 100px;
            border: 1px solid #333;
            resize: both;
            overflow: auto;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button id="clickButton">Click Me</button>
    <div id="mouseArea" style="width: 200px; height: 100px; border: 1px solid black;">Hover over me!</div>
    <div id="resizable">Resize me!</div>
    <div class="scrollable">
        <p>Scroll me to see the scroll event in action.</p>
        <p>Scroll down...</p>
        <p>More content...</p>
        <p>Keep scrolling...</p>
        <p>Almost there...</p>
        <p>And stop!</p>
    </div>

    <script>
        $(document).ready(function() {
            // Example 1: Click event
            $("#clickButton").click(function() {
                alert("Button was clicked!");
            });

            // Example 2: Mouseenter and Mouseleave events
            $("#mouseArea").mouseenter(function() {
                $(this).addClass("highlight");
            }).mouseleave(function() {
                $(this).removeClass("highlight");
            });

            // Example 3: Resize event
            $(window).resize(function() {
                console.log("Window resized to: " + $(window).width() + "x" + $(window).height());
            });

            // Example 4: Scroll event
            $(".scrollable").scroll(function() {
                console.log("Scrolled to: " + $(this).scrollTop() + "px");
            });
        });
    </script>
</body>
</html>

四、 jQuery 操纵 DOM 元素：

四、 jQuery 操纵 DOM 元素：

(1) `getter` 和 `setter`

(1) getter 和 setter

$("#test1").text(); // 返回 id 为 test1 的元素的内部文字
$("#test1").text("Hello world!"); // 使 id 为 test1 的元素内部文字变为 "Hello world"

类似的还有

html();
// 设置或返回选中元素的内容, 可以是其他 html 元素，例如：<p>New content with <strong>HTML</strong> tags.</p>
val(); // 设置或者返回选择元素的值, 主要用于表单，包括 `select`, `input` 和 `textarea`

(2) `add` 和 `remove`

(2) add 和 remove

append(); // 在选定元素的末尾插入内容
prepend(); // 在选定元素的开头插入内容
after(); // 在选定元素之后插入内容
before(); // 在选定元素之前插入内容
remove(); // 移除选定的元素（及其子元素）
empty(); // 移除选定元素的子元素

详情关于 add

详情关于 remove

(3) CSS

addClass(); // 为选定的元素添加一个或多个类
removeClass(); // 从选定的元素中移除一个或多个类
toggleClass(); // 在选定的元素上切换添加/移除类
css(); // 设置或返回样式属性

在项目中常用到的是 .css()

用法有三：

1) 返回一个 CSS 的属性

$("p").css("background-color");
// css("propertyname"); 返回 “red”, "blue" 等等

2) 设置一个 CSS 的属性

$("p").css("background-color", "yellow");
// 将为所有匹配的元素设置背景颜色值

3) 设置多个 CSS 的属性

$("p").css({ "background-color": "yellow", "font-size": "200%" });
// 将会为所以匹配的元素设置背景颜色和字体大小
// css({"propertyname":"value","propertyname":"value",...});

五、 jQuery 遍历

五、 jQuery 遍历

通过 jQuery 遍历，可以轻松地在 DOM 树中上下（祖先和后代）以及左右（兄弟元素）移动，从选定（当前）元素开始。这种移动称为遍历，即在 DOM 树中移动

<div>
  └─ <ul>
       ├─ <li>
       │    └─ <span>
       └─ <li>
            └─ <b>

<div> 元素是 <ul> 的 parent，并且是其内部所有元素的 ancestor
<ul> 元素是两个 <li> 元素的 parent，并且是 <div> 的 child
上侧的 <li> 元素是 <span> 的 parent， <ul> 的 child，并且是 <div> 的 descendant (后代)
<span> 元素是上侧 <li> 元素的 parent， <ul> 和 <div> 的 descendant。
两个 <li> 元素是 siblings（它们共享相同的父元素）
下侧的 <li> 元素是 <b> 的 parent，<ul> 的 child，并且是 <div> 的 descendant
<b> 元素是下侧 <li> 元素的 child， <ul> 和 <div> 的 descendant

例如：

1）`parents()` 返回选定元素的所有祖先元素，一直到文档的根元素 ``

1）parents() 返回选定元素的所有祖先元素，一直到文档的根元素 <html>

$("span").parents();
// 返回一个 jQuery 对象，包含所有 <span> 元素的祖先元素

2）`children()` 返回选定元素的所有直接子元素，该方法仅遍历 DOM 树中的第一级子元素

2）children() 返回选定元素的所有直接子元素，该方法仅遍历 DOM 树中的第一级子元素

$("div").children();
// 返回一个 jQuery 对象，包含所有 <span> 第一级子元素

3) `find()` 方法返回选定元素的所有后代元素，一直到最后一个子元素

3) find() 方法返回选定元素的所有后代元素，一直到最后一个子元素

$("div").find();
// 返回一个 jQuery 对象，包含所有 <span> 所有子元素

4) 因为这些遍历都返回一个 jQuery 对象，所以可以 chain 这些方法

例如：

$("ul").find("li").css("font-weight", "bold");

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Traversal Methods Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .ancestor {
            border: 1px solid blue;
            margin: 5px;
            padding: 5px;
        }
        .highlight {
            background-color: yellow;
        }
        .child {
            border: 1px solid green;
            margin: 5px;
            padding: 5px;
        }
        .descendant {
            border: 1px solid orange;
            margin: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <!-- HTML Structure -->
    <div class="ancestor">
        <div class="ancestor">
            <div class="ancestor">
                <p id="myPara">Hello World</p>
                <div id="parentDiv">
                    <p class="child">Child 1</p>
                    <p class="child highlight">Child 2</p>
                    <p class="child">Child 3</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 1. Highlight all ancestor elements of #myPara
            $("#myPara").parents().css("border", "2px solid red");
            // 2. Make all direct children of #parentDiv bold
            $("#parentDiv").children().css("font-weight", "bold");
            // 3. Change the font size of the direct child with class "highlight"
            $("#parentDiv").children(".highlight").css("font-size", "20px");
            // 4. Change color of all <p> elements inside #parentDiv
            $("#parentDiv").find("p").css("color", "blue");
        });
    </script>
</body>
</html>

更多的遍历用法

六、 jQuery Ajax

六、 jQuery Ajax

通过 jQuery AJAX 方法，可以使用 HTTP GET 和 HTTP POST 请求从远程服务器获取文本、HTML、XML 或 JSON 数据——并且可以将外部数据直接加载到网页上的选定 HTML 元素中

$.ajax({
  url: "url", // 请求发送的 URL。这是一个必需的参数。
  type: "GET", // Optional 使用的 HTTP 方法（例如，GET、POST、PUT、DELETE）。默认值是 GET。
  data: {}, // Optional 发送到服务器的数据。这可以是查询字符串、对象或数组。
  dataType: "json", // Optional.期望从服务器返回的数据类型（例如，json、html、xml）。如果未指定，jQuery 会从响应的 MIME 类型推断出数据类型。
  success: function (data, textStatus, jqXHR) {}, // Optional. 请求成功时执行的回调函数。该函数接收三个参数：从服务器返回的数据、描述状态的字符串和 jqXHR 对象。
  error: function (jqXHR, textStatus, errorThrown) {}, // Optional. 请求失败时执行的回调函数。该函数接收三个参数：jqXHR 对象、描述错误类型的字符串和一个可选的异常对象。
  complete: function (jqXHR, textStatus) {}, // Optional. 请求完成时执行的回调函数，无论成功还是失败。该函数接收两个参数：jqXHR 对象和描述状态的字符串。
});

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery AJAX Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="fetchData">Fetch User Data</button>
    <div id="userData"></div>

    <script>
        $(document).ready(function() {
            $("#fetchData").on("click", function() {
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/users/1", // URL of the API
                    type: "GET", // HTTP method
                    dataType: "json", // Expected response data type

                    // Optional parameters
                    data: {
                        // Query parameters if needed
                        param1: "value1",
                        param2: "value2"
                    },

                    // Success callback
                    success: function(data, textStatus, jqXHR) {
                        console.log("Success:", textStatus);
                        console.log("Data received:", data);
                        // Display data on the page
                        $("#userData").html(`<h2>${data.name}</h2><p>Email: ${data.email}</p>`);
                    },

                    // Error callback
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error("Error:", textStatus);
                        console.error("Error details:", errorThrown);
                        // Display error message on the page
                        $("#userData").html(`<p>Error fetching data. Please try again later.</p>`);
                    },

                    // Complete callback
                    complete: function(jqXHR, textStatus) {
                        console.log("Request complete:", textStatus);
                        // Optional: Show a message indicating the request is complete
                        // $("#userData").append("<p>Request completed.</p>");
                    }
                });
            });
        });
    </script>
</body>
</html>

项目中 StjQueryExtend 中的 doAjax 对这个方法进行了封装

七、 $.extend()

七、 $.extend()

项目中出现了一个常见的对象 $.st 来自 StJqueryExtend.js, 这个对象定义了许多方法在其他组件中复用，而 $.st 就是通过 $.extend() 定义的

用法：

$.extend(true, target, object1, object2, ...)

这个方法将 object1, object2…拷贝到 target 中。其中，第一个参数为 optional，默认为 false，如果不指定 true 作为第一个参数，$.extend() 方法将进行浅拷贝。仅拷贝源对象的属性到目标对象。如果源对象包含嵌套的对象，目标对象和源对象将共享这些嵌套对象的引用，而不是拷贝这些嵌套对象的实际内容。

示例：

var target = {};
var source = { a: { b: 1 } };
$.extend(target, source);
source.a.b = 2;
console.log(target.a.b); // 输出: 2

要进行深拷贝，需要将 true 作为第一个参数传递给 $.extend() 方法：

$.extend(true, target, source);

该方法会递归地拷贝属性，包括嵌套的对象，确保目标对象拥有源对象的完整拷贝，而不是仅仅引用

示例：

var target = {};
var source = { a: { b: 1 } };
$.extend(true, target, source);
source.a.b = 2;
console.log(target.a.b); // 输出: 1

在这个例子中，target 拥有源对象的嵌套对象的独立拷贝，因此对 source.a.b 的修改不会影响到 target.a.b, 要注意的是, 与之前提到的 selector 方法不同，这个 .extend() 会返回一个 object 而不是一个 jQuery 对象，因此不能像之前那样 chain 这个方法

八、 $(document).ready()

八、 $(document).ready()

在上述的示例代码中，所以的 jquery 方法都被包含在 $(document).ready() 里

.ready() 方法确保 JavaScript 代码仅在完全加载后与 DOM 进行交互，避免了在尚未渲染的元素上进行操作的潜在问题

$(document).ready(function () {
  // 在dom装载完成后执行的代码
});

除了 $(document).ready() 之外，还提供了另一个更加简便的表示方法可以达到同样的效果

$(function () {
  // 在dom装载完成后执行的代码
});

九、 jQuery 操作与数据管理

九、 jQuery 操作与数据管理

1)元素遍历与操作 `each()` 和 `map()`:

1)元素遍历与操作 each() 和 map():

和 js 的语法类似，each() 和 map() 分别用与遍历操作和元素转换 each(): 用于遍历和操作一组匹配的元素，适合进行批量处理或修改每个元素的内容。 map(): 用于对匹配的元素进行转换，并生成一个新的 jQuery 对象或数组，适合需要将每个元素转换为某种形式的情况。

jQuery 动画方法

在 jQuery 中，.fadeIn()、.fadeOut() 和 .fadeTo() 方法用于创建元素的渐隐渐现动画。常用于平滑地显示或隐藏元素。

`.fadeIn()`

.fadeIn()

目的： 渐渐增加元素的透明度，使其变得可见。

语法：

$(selector).fadeIn(speed, easing, callback);

speed（可选）：定义动画的持续时间，可以是字符串（“slow” 或 “fast”）或表示毫秒的数字。
easing（可选）：指定过渡时使用的缓动函数。可以是 “swing”、“linear” 等，通常可以不指定。
callback（可选）：动画完成后执行的回调函数。

`.fadeOut()`

.fadeOut()

目的： 渐渐减少元素的透明度，使其变得不可见

语法：

$(selector).fadeOut(speed, easing, callback);

.fadeTo()

目的： 将元素的透明度调整到指定的值，从而创建渐隐渐现效果。

语法：

$(selector).fadeTo(speed, opacity, easing, callback);

speed（可选）：动画的持续时间。
opacity：目标透明度（范围从 0.0 到 1.0）。
easing（可选）：缓动函数。
callback（可选）：动画完成后执行的回调函数。

$("#myElement").fadeTo(500, 0.5); // 500 毫秒内将元素的透明度调整到 50%

JQuery 基本语法与实践

JQuery 基本语法与实践

目录

介绍

1. [jQuery playground](https://playcode.io/jquery)

2. [在 js playground 中使用 jQuery](https://playcode.io/javascript), 复制本文档中的代码到 playground 中 `index.html`

一、 **基本语法：**

为什么要用 jquery

二、 **jQuery 的选择器：**

三、 **jQuery 的事件 (event 或 action)：**

四、 **jQuery 操纵 DOM 元素：**

(1) `getter` 和 `setter`

(2) `add` 和 `remove`

(3) CSS

1) 返回一个 CSS 的属性

2) 设置一个 CSS 的属性

3) 设置多个 CSS 的属性

五、 **jQuery 遍历**

1）`parents()` 返回选定元素的所有祖先元素，一直到文档的根元素 ``

2）`children()` 返回选定元素的所有直接子元素，该方法仅遍历 DOM 树中的第一级子元素

3) `find()` 方法返回选定元素的所有后代元素，一直到最后一个子元素

4) 因为这些遍历都返回一个 jQuery 对象，所以可以 chain 这些方法

六、 **jQuery Ajax**

七、 **$.extend()**

八、 **$(document).ready()**

九、 **jQuery 操作与数据管理**

1)元素遍历与操作 `each()` 和 `map()`:

jQuery 动画方法

`.fadeIn()`

`.fadeOut()`

.fadeTo()

一、基本语法：

二、 jQuery 的选择器：

三、 jQuery 的事件 (event 或 action)：

四、 jQuery 操纵 DOM 元素：

五、 jQuery 遍历

六、 jQuery Ajax

七、 $.extend()

八、 $(document).ready()

九、 jQuery 操作与数据管理