jQuery从入门到应用：选择器、DOM与Ajax综合指南

二哈喇子！2025-03-16 16:41

文章目录

前言

提示：这里可以添加本文要记录的大概内容：

jQuery对象

1、jQuery的使用

在需要使用jQuery的页面引入Js文件

在HTML文件中正确地引入jQuery库非常重要。以下是正确的做法：

html 复制代码 
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

注：如果在使用jQuery对象时未引入jQuery的核心JS文件，则会报错 ($ is not defined)。

使用jQuery选择页面元素并获取其文本内容

$符号是jQuery函数的别名，相当于用于jQuery对象的引用， 选择元素以及执行各种DOM操作、事件处理等。

html 复制代码 
<div id="mydiv">hello</div>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // 获取div元素
    var div = $("#mydiv"); // 正确的方式
    var div2 = jQuery("#mydiv"); // 也可以使用jQuery代替$，两者效果相同
    console.log(div.text()); // 输出div内的文本 "hello"
</script>

2、jQuery包装集与Dom对象

DOM与 jQuery对象转换

使用原生DOM方法以及 jQuery选择器来获取页面中的div元素。

DOM对象和jQuery对象的选择及互相转换

通过document.getElementById方法可以直接从DOM中选取元素。以下是正确的做法：

javascript 复制代码 
// 通过document获取div
var divDom = document.getElementById("mydiv");
console.log(divDom); // 输出的是一个原生的DOM元素对象

// jQuery包装集对象：通过jQuery选择器获取div
var divJquery = $("#mydiv");
console.log(divJquery);

console.log("==== jQuery包装集对象与DOM对象互相转换 ====");

// 将DOM对象转换成jQuery对象，使用$()将dom对象括起来
var domToJquery = $(divDom);  // 使用$(domObject)来包裹DOM对象
console.log(domToJquery);  // 输出转换后的jQuery对象

// 将jQuery对象转换成DOM对象，获取jQuery包装集对象的下标
var jqueryToDom = divJquery[0];   // 或者使用 divJquery.get(0)
console.log(jqueryToDom);   // 输出原始的DOM对象

当获取元素对象，元素不存在时，

通过document获取的值，返回null（通过判断返回值是否为null，来得知元素是否存在）

通过jQuery获取的值，返回空包装集（通过判断包装集的长度length，来得知元素是否存在，存在至少length为1）

jQuery对象

使用jQuery的选择器语法可以更方便地选取页面元素：

javascript 复制代码 
var divDom = document.getElementById("mydiv");
console.log(mydiv)

// 通过jQuery选择器获取div
var div = $("#mydiv"); // 注意这里的$符号两边没有空格，且字符串要用英文双引号或单引号
console.log(div); // 输出的是一个jQuery对象，包含了匹配到的所有元素

关键点说明：

  • 获取DOM对象 ：使用document.getElementById("mydiv")获取页面中id为"mydiv"的元素。
  • 获取jQuery对象 ：使用$("#mydiv")选取相同的元素，但这次是作为jQuery对象返回。
  • DOM对象转jQuery对象 ：使用$() 把DOM对象括起来：$(DOM对象)
  • jQuery对象转DOM对象 ：可以使用.get(0)方法从jQuery对象中提取出对应的DOM对象。

jQuery选择器

1、基础选择器

选择器类型 使用方法 描述
id选择器 $("#id属性值") 获取指定id属性值的元素。如果出现多个同名id，只会获取第1个
类选择器 $(".class属性值") 获取指定class属性值的元素
元素选择器 $("标签名/元素名") 获取指定标签名的元素
通用选择器 $("*") 获取所有的元素
组合选择器 $("选择器1，选择器2...") 获取指定选择器选中的元素，多个选择器之间用逗号隔开

【示例代码】

注意：在下面的代码示例中，变量名为clas而非class，以避免与JavaScript保留字冲突。

html 复制代码 
<script type="text/javascript">
    // ID选择器  $("#id属性值")
    var mydiv1 = $("#mydiv1");
    console.log("ID选择器:", mydiv1);

    // 类选择器  $(".class属性值")
    var clas = $(".blue");
    console.log("类选择器:", clas);

    // 元素选择器   $("标签名/元素名")
    var divs = $("div");
    console.log("元素选择器:", divs);

    // 通用选择器   $("*")
    var all = $("*");
    console.log("通用选择器:", all);

    // 组合选择器  $("选择器1,选择器2,...")
    var group = $("#mydiv1, .blue, div");
    console.log("组合选择器:", group);
</script>

关键点说明

  • 正确示例：$("#id属性值")

  • 正确示例：var clas = $(".blue");

  • 选择器使用：

    • ID选择器 ：通过#加上元素的ID来选取特定的元素。
    • 类选择器 ：通过.加上类名来选取所有具有该类的元素。
    • 元素选择器：直接使用标签名来选取页面上所有的该类型的元素。
    • 通用选择器 ：使用*来选取页面上的所有元素。
    • 组合选择器：通过逗号分隔不同的选择器，可以同时选取多个不同条件的元素。

2、层次选择器

选择器类型 连接符号 使用方法 描述
后代选择器 空格 $("指定元素 元素名") 获取指定元素的所有指定子元素（包含子元素及子元素的子元素）
子代选择器 大于号 > $("指定元素 > 元素名") 获取指定元素的所有指定第一代子元素（只会选择第一级子元素）
相邻选择器 加号 + $("指定元素 + 元素名") 获取指定元素的下一个指定元素（只会找一个元素）
同辈选择器 波浪号 ~ $("指定元素 ~ 元素名") 获取指定元素后面的所有指定元素
javascript 复制代码 
$(document).ready(function(){
    // 后代选择器（空格）
    var hd = $("#food li");
    console.log("后代选择器选中的元素：", hd);

    // 子代选择器（大于号 `>`）
    var zd = $("#food > li"); 
    console.log("子代选择器选中的元素：", zd);

    // 相邻选择器（加号 `+`）
    var xl = $("#mydiv + div"); // 选择紧跟在#mydiv之后的div
    console.log("相邻选择器选中的元素：", xl);

    // 同辈选择器（波浪号 `~`）
    var tb = $("#mydiv ~ div"); // 选择#mydiv之后的所有同级div
    console.log("同辈选择器选中的元素：", tb);
});

关键点说明

  • 后代选择器 ：使用空格 来表示后代选择器，它会选择指定元素内的所有匹配的后代元素。
javascript 复制代码 
  var hd = $("#food li");
  • 子代选择器 ：使用大于号 > 来表示子代选择器，它只会选择直接子元素。
javascript 复制代码 
  var zd = $("#food > li");
  • 相邻选择器 ：使用加号 + 来表示相邻选择器，它会选择紧接在另一个元素之后的某个元素。
javascript 复制代码 
  var xl = $("#mydiv + div");
  • 同辈选择器 ：使用波浪号 ~ 来表示同辈选择器，它会选择位于同一个父元素下，并且在目标元素之后的所有匹配的兄弟元素。
javascript 复制代码 
  var tb = $("#mydiv ~ div");

3、表单选择器

jQuery提供了一些特殊的选择器用于选取表单内的特定元素。这里是一些常用的表单选择器：

  • :input：匹配所有输入元素，包括<input>，<textarea>，<select>和<button>。
  • :radio：匹配所有单选按钮。
  • :checkbox：匹配所有复选框。
  • :checked：匹配所有被选中的元素（适用于单选按钮和复选框）。
  • :selected：匹配所有被选中的<option>元素。

格式：$(":类型")

javascript 复制代码 
<script type="text/javascript">
    // 选择所有输入元素
    var forms = $(":input");
    console.log(forms);

    // 仅选择<input>标签元素
    var inputs = $("input");
    console.log(inputs);

    // 获取所有的单选框
    var radios = $(":radio");
    console.log(radios);
</script>

4、选择器类型对比表

选择器 jQuery 描述
[属性名] $([属性名]") 获取所有设置过指定属性名的元素
[属性名='属性值'] $([属性名='属性值']") 获取所有设置过指定属性名为指定值的元素
:checked $("checked") 获取选中状态为选中的元素（单选框与复选框）
:selected $("selected") 获取选中状态为选中的元素（下拉框）
:gt(index) $(":gt(index)") 获取下标大于指定值的元素
:eq(index) $(":eq(index)") 获取下标等于指定值的元素
:odd $(":odd ") 获取所有奇数下标
:even $(":even") 获取所有偶数下标

【示例代码】

javascript 复制代码 
<script type="text/javascript">
    // [属性名]  $("[属性值]")
    var test = $("[name]");  //选择所有设置了name属性的元素
    console.log(test);

    // [属性名='属性值']   $([属性名='属性值']")
    var test2 = $("[name='ufav']");  //选择所有设置了name属性且值为'ufav'的元素
    console.log(test2);

    /* 获取name为'usex'的被选中的单选框 */
    // 注意此处应该是:checked
    var test3 = $(":radio[name='usex']:checked");
    console.log(test3);
</script>

Dom操作

1、操作元素的属性

关于attr()和prop()方法的描述：

分类 描述 attr() 方法 prop() 方法
设置属性 给元素设置属性值 对象.attr("属性名", "属性值"); 对象.prop("属性名", "属性值");
获取属性 获取元素的属性值 var 属性值 = 对象.attr("属性名"); var 属性值 = 对象.prop("属性名");
区别 固有属性 可以操作元素本身就拥有的固有属性 可以操作元素本身就拥有的固有属性
布尔类型属性 如 checked, selected, disabled 可以操作，但不推荐用于布尔类型的属性 推荐使用，特别适合处理返回布尔值的属性
自定义属性 用户自己定义的属性 可以操作用户自定义的属性 不能操作用户自定义的属性

获取和设置固有属性

ck1和ck2代表复选框的id

javascript 复制代码 
// 获取属性 - 使用 attr()
var name1 = $("#ck1").attr("name");
console.log(name1); // 输出 ck1 的 name 属性值

// 设置属性 - 使用 prop() 推荐用于布尔类型的属性
$("#ck2").prop("checked", true); // 设置为选中状态


// 获取属性 - 使用 prop()
var name2 = $("#ck1").prop("name");
console.log(name2); // 输出 ck1 的 name 属性值

// 设置属性 - 使用 attr()
$("#ck2").attr("checked", "checked"); // 不推荐用于布尔类型的属性

// 设置属性 - 使用 prop()
$("#ck2").prop("checked", true); // 推荐用于布尔类型的属性

获取布尔类型的属性

javascript 复制代码 
// 获取布尔类型属性 - 使用 attr() （不推荐）
var cked1 = $("#ck1").attr("checked");
console.log(cked1); // 可能返回 'checked' 或 undefined，取决于是否选中

// 获取布尔类型属性 - 使用 prop() （推荐）
var cked2 = $("#ck1").prop("checked");
console.log(cked2); // 返回 true 或 false

区别：

  1. 固有属性：元素本身就拥有的属性，attr()和prop()都可以操作固有属性
  2. 返回值是布尔类型的属性checked、selected、disabled、prop()操作返回值是布尔类型的属性
  3. 自定义属性：用户自己定义的属性，attr()可以操作，prop()不可以操作

总结：如果属性的返回值是布尔类型，选择prop方法，否则使用attr方法

补充说明：attr() vs prop()

  • 固有属性 ：指的是HTML标签本身所具备的属性，例如input标签的type、value等属性。对于这些属性，虽然attr()和prop()都可以操作，但对于布尔类型的属性（如checked），使用prop()更为合适。

  • 布尔类型属性 ：这些属性反映了一个状态（真或假）。对于这类属性，使用prop()通常能得到更准确的结果，一个复选框是否被选中应该用prop('checked')来判断。

  • 自定义属性 ：指用户通过data-*等方式添加到HTML标签上的额外属性。这类属性只能通过attr()方法来获取或设置。

  • 固有属性 ：HTML标签本身具备的属性，如input的type、value等。对于布尔类型的属性（例如checked, selected, disabled），推荐使用prop()方法。

  • 布尔类型属性 ：反映状态（真或假）。复选框是否被选中应使用prop('checked')来判断。

  • 自定义属性 ：用户通过data-*方式添加的额外属性，这类属性只能通过attr()方法来获取或设置。

2、使用jQuery操作元素样式

  1. 获取元素的样式类名

使用attr("class")可以获取元素的所有类名。

javascript 复制代码 
var classList = $("#elementId").attr("class");
console.log(classList); // 输出元素的所有类名
  1. 设置元素的样式（覆盖原有样式）attr("class","样式名")

直接设置CSS属性会覆盖原有的样式值。

javascript 复制代码 
$("#elementId").css("color", "red"); // 将文本颜色设置为红色
  1. 添加元素的样式（在原有基础上追加新的样式类）

使用addClass("样式名")方法可以在不移除原有类的情况下添加新的类。

javascript 复制代码 
$("#elementId").addClass("newClass"); // 添加一个名为 'newClass' 的新类
  1. 添加具体的样式

添加一个或多个具体的样式规则。对于多个样式规则，可以传递一个对象给.css()方法。

  1. 添加一个具体的样式：css("样式名","样式值")
javascript 复制代码 
  $("#elementId").css("background-color", "blue"); // 设置背景色为蓝色
  1. 添加多个具体的样式：css({"样式名":"样式值","样式名":"样式值"})
javascript 复制代码 
  $("#elementId").css({
      "font-size": "20px", // 设置字体大小为20px
      "border": "1px solid black" // 设置边框样式
  });
  1. 移除样式

使用removeClass("样式名")方法可以从元素中移除指定的类。

javascript 复制代码 
$("#elementId").removeClass("oldClass"); // 移除名为 'oldClass' 的类

如果要移除所有类，可以直接调用removeClass()而无需参数：

javascript 复制代码 
$("#elementId").removeClass(); // 移除所有类

这些方法提供了灵活的方式来操作HTML元素的样式，无论是通过直接修改样式属性还是通过添加、移除样式类。根据具体的需求选择合适的方法可以有效地控制页面元素的外观。

方法 说明
html() 获取元素的 html 内容
html("html,内容") 设置元素的 html 内容
text() 获取元素的 文本 内容，不包含 html
text("text,内容") 设置元素的 文本 内容，不包含 html
val() 获取元素的 value 值
val("值") 设定元素的 value 值

操作元素的内容：
val()操作表单元素的值

取值：var值=表单元素对象.val()；

赋值：表单元素对象.val(值)；

html()操作非表单元素的内容（包含html标签）

取值：var内容 = 对象.html()；

赋值：对象.html(内容)；

text()操作非表单元素的文本内容（不包含html标签）

取值：var内容=对象.text()；

赋值：对象.text(内容)；

获取元素的样式类名

javascript 复制代码 
var classList = $("#elementId").attr("class");
console.log(classList); // 输出元素的所有类名

设置元素的样式

直接设置CSS属性会覆盖原有的样式值：

javascript 复制代码 
$("#elementId").css("color", "red"); // 将文本颜色设置为红色

添加元素的样式

在不移除原有类的情况下添加新的类：

javascript 复制代码 
$("#elementId").addClass("newClass"); // 添加一个名为 'newClass' 的新类

移除样式

从元素中移除指定的类：

javascript 复制代码 
$("#elementId").removeClass("oldClass"); // 移除名为 'oldClass' 的类

如果想要移除所有类：

javascript 复制代码 
$("#elementId").removeClass(); // 移除所有类

3、操作元素的内容

方法 说明
html() 获取或设置元素的HTML内容
text() 获取或设置元素的文本内容，不包含HTML
val() 获取或设置表单元素的值

【示例代码】

javascript 复制代码 
<input type="text" name="uname" id="uname" value="oop" />
<div id="html"></div>
<div id="text"></div>

<script type="text/javascript">
    /* val() 操作表单元素的值 */
    
    // 通过原生 JavaScript 获取值
    console.log(document.getElementById("uname").value);
    // 使用原生 JavaScript 赋值
    document.getElementById("uname").value = "面向对象";
    
    // 通过 val 方式获取值
    console.log($("#uname").val());
    // 通过 val 方式获赋值
    $("#uname").val("面向对象");
    
    /* html() 操作非表单元素的内容（包含 HTML 标签） */
    // 赋值
    $("#html").html("Hello");
    $("#html").html("<h2>Hello</h2>");
    // 取值
    console.log($("#html").html());

	/* text()操作非表单元素的文本内容 (不包含html标签) */
    // 赋值
    $("#text").html("Hello");
    $("#text").html("<h2>Hello</h2>");
    // 取值
    console.log($("#html").text());
</script>

4、创建元素和添加元素

创建元素：$("元素标签")

javascript 复制代码 
// 定义html字符串
var htmlTxt = "<p>这是一个段落</p>"; 
console.log(htmlTxt); // 输出原始的HTML字符串

// 将html字符串转换成jQuery对象
var htmlJquery = $(htmlTxt); 
console.log(htmlJquery); // 输出jQuery对象

// 输出html字符串中的内容（即<p>标签内的文本）
console.log(htmlJquery.html()); // 输出<p>标签内的文本内容

添加元素

对象.before("内容")：前追加，在元素的同级追加，内容可以是对象、html或字符串
对象.after("内容")：后追加，在元素的同级追加，内容可以是对象、html或字符串
对象.prepend("内容")：在元素的内部最前面追加子元素，内容可以是对象、html或字符串
对象.append("内容")：在元素的内部最后面追加子元素，内容可以是对象、html或字符串
$("内容").prependTo(对象)：在元素的内部最前面追加子元素，内容可以是对象、html或字符串
$("内容").appendTo(对象)：在元素的内部最后面追加子元素，内容可以是对象、html或字符串

javascript 复制代码 
<span class="red">泰山</span>
<span class="blue">偶像</span>
<script type="text/javascript">
console.log("----- 同级追加 -----");
    // 得到目标对象
    var ts = $(".red");

    // 准备要追加的内容
    var span = "<span class='pink'>女神</span>";

    // 将内容追加到指定元素前面
    ts.before(span);

    // 将内容追加到指定元素后面
    ts.after(span);

    // 得到要追加的元素（已存在的元素）
    var blue = $(".blue");

    // 追加已有元素
    ts.before(blue);  // 在 .red 元素之前插入 .blue 元素
    ts.after(blue);   // 在 .red 元素之后插入 .blue 元素

    // 如果需要打印日志来确认操作结果
    console.log(ts);
    console.log($(".pink")); // 打印新添加的 span 元素
    console.log(blue);       // 打印 .blue 元素
</script>

添加元素时（同级添加和子元素添加）

如果元素不存在，则创建元素，并添加

如果元素存在，则会获取已存在的元素，并剪切到新的位置

javascript 复制代码 
<script type="text/javascript">
console.log("----- 子元素追加 -----");
    // 准备要追加的元素
    var sp = "<span>老腊肉</span>";
    var sp2 = "<span>小奶狗</span>";

    // prepend()：在选定元素的最前面追加子元素
    $(".green").prepend(sp);

    // append()：在选定元素的最后面追加子元素
    $(".green").append(sp2);

    // prependTo()：将新元素插入到选定元素的最前面
    $(sp).prependTo($(".green"));

    // appendTo()：将新元素插入到选定元素的最后面
    $(sp2).appendTo($(".green"));

    // 追加已存在的元素（例如带有 .blue 类的元素）
    $(".green").append($(".blue"));

    // 打印日志来确认操作结果
    console.log($(".green"));
</script>

5、删除元素

remove()：删除所选元素或指定的子元素，包括整个标签和内容一起删
empty()：清空所选元素的内容

javascript 复制代码 
// 删除class属性为green的元素
$(".green").remove(); 

// 清空元素（移除class属性为blue的元素内部的所有内容）
$(".blue").empty();

6、遍历元素each()

$(selector).each(function(index, element) ：遍历元素

参数function为遍历时的回调函数
index为遍历元素的下标，从0开始。
element是当前的元素，此时是dom元素。

javascript 复制代码 
$(".green").each(function(index, element) {
    // 'this' 是当前遍历到的DOM对象
    console.log(this); // 输出当前的DOM对象

    // 输出当前DOM对象的innerHTML属性，显示其内部HTML内容
    console.log(this.innerHTML);

    // 使用$(this)将DOM对象包装成一个jQuery对象，并输出其html内容
    console.log($(this).html());

    // 输出当前元素的下标（索引）
    console.log("下标：" + index);

    // 输出当前遍历到的DOM对象
    console.log(element);

    // 将当前的DOM对象转换为jQuery对象并输出
    console.log($(element));
});

jQuery事件

1、ready加载事件

javascript 复制代码 
ready()类似于onLoad()事件
ready()可以写多个，按顺序执行

$(document).ready(function(){}) 
等价于 
$(function(){})

ready 加载事件（预加载事件），当HTML的文档结构加载完毕后执行

只有引入了JS文件才能用

格式：

javascript 复制代码 
$(document).ready(function(){

});

简略版：

javascript 复制代码 
$(document).ready(function(){
    console.log("ready加载事件...");
});

$(function(){
    console.log("ready加载事件2...");
});

onload加载事件（JS中提供的方法），当HTML的文档结构及引入的资源加载完毕后执行

javascript 复制代码 
window.onload=function() {
}

加载慢

javascript 复制代码 
window.onload = function() {
    console.log("load加载事件...");
};

2、绑定事件

  • eventType：是一个对应的事件类型的字符串

  1. 事件类型：

    • 点击事件：click
    • 聚焦事件：focus
    • 失去焦点事件（通常称为失效事件）：blur
    • 改变事件：change
    • 鼠标悬停事件：应为 mouseover 而不是 moueseover
    • 鼠标移开事件：mouseout

  2. eventData ：需要传递给事件处理程序的数据，参数格式是一个 JSON 对象，例如 {键: 值, 键: 值...}。

  3. handler：当事件触发时执行的回调函数。

  4. bind绑定事件（单个）：

javascript 复制代码 
    $(选择器).bind("事件名", function() {
        // 事件处理代码
    });

bind() 绑定事件语法：

javascript 复制代码 
$(selector).bind(eventType[,eventData],handler);
  1. 绑定事件（多个）：
javascript 复制代码 
方式一：为某一个元素绑定不同的事件，执行不同的函数
$(选择器).bind("事件名1", function() {
    // 事件处理函数1
}).bind("事件名2", function() {
    // 事件处理函数2
});
方式二：为某一个元素绑定不同的事件，执行相同的函数（多个事件用空格隔开）
$(选择器).bind("事件名1 事件名2", function(event) {
    // 共享的事件处理逻辑
    console.log('触发了 ' + event.type + ' 事件');
});
方式三：为某一个元素绑定不同的事件，执行不同的函数（使用JSON对象格式）
$(选择器).bind({
    "事件名1": function() {
        // 事件处理函数1
    },
    "事件名2": function() {
        // 事件处理函数2
    }
});

如何绑定事件

1.事件源：确认给什么元素绑定事件，通过不同的选择获取对应的元素

2.事件类型：给元素绑定什么事件，常用的事件名

3.执行函数：当事件触发时需要执行的函数，匿名函数·或·自定义函数

  1. on绑定事件（单个）

推荐使用 .on() 方法来绑定事件，而不是 .bind()。下面是使用 .on() 方法的示例：

javascript 复制代码 
$(选择器).on('事件名', [eventData], function(event) {
    // 事件处理代码
});

示例代码：

javascript 复制代码 
// 绑定点击事件
$('#myButton').on('click', function() {
    console.log('按钮被点击了');
});

// 使用 eventData 传递额外数据
var eventData = { message: 'Hello World' };
$('#myButton').on('click', eventData, function(event) {
    console.log(event.data.message);  // 输出 "Hello World"
});

这样不仅使描述更加准确，还提升了文档的可读性和美观性。它更灵活且是较新版本的标准做法。

3、jQuery的.click()

方法1：直接在JavaScript中使用jQuery的.click()方法绑定事件

这种方法通过外部JavaScript代码为HTML元素绑定事件处理器。它不仅有助于保持代码的整洁性，还能使HTML页面更加简洁，不包含任何内联JavaScript代码。

html 复制代码 
<!-- HTML部分 -->
<button id="btnA">按钮A</button>
<button id="btn6">按钮B</button>

<!-- 确保正确引入jQuery库 -->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // 绑定单个点击事件到按钮A
    $("#btnA").click(function(){
        console.log("按钮A被点击了...");
    });

    // 为按钮B同时绑定多个事件（点击和鼠标移出）
    $("#btnB")
        .click(function(){
            console.log("按钮B被点击了...");
        })
        .mouseout(function(){
            console.log("鼠标从按钮B移开了...");
        });
</script>

详细解释：

  • $("#btnA")：首先通过jQuery选择器选中id为btnA的元素。
  • .click(function(){...})：为该元素添加一个点击事件监听器。当用户点击按钮时，控制台会打印"按钮A被点击了..."。
  • 对于#btnB，我们使用了链式调用的方式同时绑定了两个事件处理程序（点击和鼠标移出），这使得代码更加紧凑和易于阅读。

方法2：在HTML标记中直接使用内联事件处理程序

尽管这种方法简单直接，但它混合了内容与行为，不利于维护和扩展，因此通常不推荐用于大型项目或复杂的Web应用。

html 复制代码 
<!-- HTML部分 -->
<button onclick="console.log('按钮C被点击了...')">按钮C</button>

详细解释：

  • onclick="console.log('按钮C被点击了...')"：直接在HTML标签中定义了一个点击事件处理器。这意味着每当用户点击这个按钮时，都会执行console.log('按钮C被点击了...')这段JavaScript代码。

额外提示：

  1. 事件委托：如果需要对动态加载的内容进行事件绑定，可以考虑使用事件委托。
javascript 复制代码 
   $(document).on('click', '#dynamicBtn', function(){
       console.log('动态加载的按钮被点击了...');
   });

  1. 避免重复绑定 ：确保不会多次绑定相同的事件处理函数给同一个元素，以免触发多次相同的行为。可以通过.off()方法解除之前的绑定，或者在绑定之前检查是否已经存在相应的事件处理器。

  2. 使用.on()代替.bind()、.click()等 ：从jQuery 1.7开始，推荐使用.on()方法作为统一的事件绑定机制。

javascript 复制代码 
   $('#element').on('click', function() {
       console.log('元素被点击');
   });

Ajax

异步无刷新技术

原生Ajax的实现流程

  1. 得到XMLHttpRequest对象

    javascript 复制代码 
    var xhr = new XMLHttpRequest();

  2. 打开请求

    javascript 复制代码 
    xhr.open(method, uri, async);
    • method：请求方式，通常是GET或POST。
    • uri：请求地址。
    • async：是否异步。如果是true表示异步（推荐），false表示同步。

  3. 发送请求

    javascript 复制代码 
    xhr.send(params);
    • params：请求时需要传递的参数。
      • 如果是GET请求，则设置为null（GET请求的参数应包含在URL中）。
      • 如果是POST请求，没有参数时设置为null，有参数则设置为参数内容（例如："name=value&name2=value2"）。

  4. 接收响应

  • xhr.status ：响应状态
    • 200：表示请求成功。
    • 404：表示资源未找到。
    • 500：表示服务器内部错误或其他服务器端错误。

xhr.responseText：得到响应结果

同步请求：

javascript 复制代码 
<script type="text/javascript">
    /**
     * 同步请求
     */
    function test01() {
        // 得到XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        // 打开请求
        xhr.open("GET", "js/data.json", false); // 第三个参数设为false表示同步请求
        // 发送请求
        xhr.send(null);
        // 判断响应状态
        if (xhr.status == 200) {
            console.log(xhr.responseText);
        } else {
            console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText);
        }
    }
</script>

异步请求：

javascript 复制代码 
/**
 * 异步请求
 */
function test02() {
    // 得到XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    // 打开请求
    xhr.open("GET", "js/data.json", true); // 第三个参数设为true表示异步请求
    // 发送请求
	xhr.send(null);
	// 判断响应状态
	if(xhr.ststus == 200){
            // 获取响应结果
            console.log(xhr.responseText);
        } else {
            console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText);
        }
    }
}

由于是异步请求，所以需要知道后台已经将请求处理完毕，才能获取响应结果

通过监听readyState的变化来得知后面的处理状态 4= 完全处理
xhr.onreadystatechange = function(){ }

Ajax使用

jquery调用ajax方法：

格式：$.ajax({});

参数：

  • type：请求方GET/POST
    *url:请求地址url
    async：是否异步，默认是true表示异步，false=同步
    data：发送到服务器的数据
    dataType：预期服务器返回的数据类型。"JSON"表示将得到的JSON字符串自动封装成JSON对象
    contentType：设置请求头
    *success：请求成功时调用的函数（回调函数）
    error：请求失败时调用此函数
javascript 复制代码 
$.ajax({
    type: "GET", // 请求类型，例如："POST"、"GET"
    url: "js/data.json", // 请求路径
    data: {
        "paramName1": "value1", // 参数名：值
        "paramName2": "value2"  // 另一个参数名：值
    },
    async: true, // 默认是true，可以省略
    dataType: "json",
    // dataType: "json", // 文本，字符串

    success: function(response) { // 形参名可以任意 函数的形参：响应结果
        // 在这里处理成功获取的数据
        console.log(response);
    }
});

发送请求方式为GET的ajax请求

  1. 发送请求，无参数，无返回值：
javascript 复制代码 
$.get("请求路径");
  1. 发送请求，有参数，无返回值：
javascript 复制代码 
$.get("请求路径", "请求参数");
  1. 发送请求，无参数，有返回值：
javascript 复制代码 
$.get("请求路径", function(返回结果) {
    // 处理返回结果
});
  1. 发送请求，有返回值，有参数
javascript 复制代码 
$.get("请求路径", "请求参数",function(返回结果) {
    // 处理返回结果
});
  1. 使用jQuery的$.get()方法发起一个GET类型的Ajax请求，以加载远程数据
javascript 复制代码 
$.get("js/data.json", {"uname": "zs", "upwd": "123"}, function(data) {
    console.log(data);
});

确保使用标准的英文双引号"而不是中文引号或任何其他特殊字符。这段代码将向js/data.json发送一个GET请求，传递uname和upwd作为查询参数，并在请求成功后通过console.log(data)打印服务器返回的数据。

发送请求方式为POST的ajax请求

  1. 发送请求，无参数，无返回值：
javascript 复制代码 
$.post("请求路径");
  1. 发送请求，有参数，无返回值：
javascript 复制代码 
$.post("请求路径", "请求参数");
  1. 发送请求，无参数，有返回值：
javascript 复制代码 
$.post("请求路径", function(返回结果) {
    // 处理返回结果
});
  1. 发送请求，有返回值，有参数
javascript 复制代码 
$.post("请求路径", "请求参数",function(返回结果) {
    // 处理返回结果
});
  1. 使用$.getJSON()方法来得到返回结果是JSON格式数据
javascript 复制代码 
$.getJSON("js/data.json", {"uname": "zs", "upwd": "123"}, function(data) {
    console.log(data);
});

这段代码将会：

  • 向js/data.json发送一个GET请求。
  • 传递uname和upwd作为查询参数。
  • 如果请求成功并且服务器返回的是JSON格式的数据，则自动解析这个JSON数据。
  • 使用console.log(data)打印解析后的对象或数组（即返回的JSON数据）。

请确保：

  • URL "js/data.json" 和 参数 {"uname": "zs", "upwd": "123"} 根据实际情况进行替换。
  • 使用英文状态下的双引号和括号，以避免语法错误。

这样就可以正确地利用$.getJSON()来获取JSON格式的数据了。

案例

以下是补充完整的 AJAX 案例代码，包含必要的 HTML 结构、错误处理：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>AJAX 数据表格示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        table {
            width: 80%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div id="result"></div>

    <script>
        // 发送 AJAX 请求，获取数据
        $.ajax({
            type: "GET",
            url: "js/user.json",
            dataType: "json", // 明确指定响应类型
            data: {
                "name": "aa",
                "pwd": "123"
            },
            success: function(result) {
                console.log("请求成功:", result);
                testData(result);
            },
            error: function(xhr, status, error) { // 新增错误处理
                console.error("请求失败:", status, error);
                $('#result').html('<p style="color: red">数据加载失败，请稍后重试</p>');
            }
        });

        // 数据处理函数
        function testData(data) {
            // 增强数据校验
            if (!data || data.code !== 1 || !Array.isArray(data.list)) {
                console.error("数据格式异常:", data);
                $('#result').html('<p style="color: orange">数据格式异常或为空</p>');
                return;
            }

            try {
                // 创建表格对象
                const table = $('<table>').addClass('data-table');
                
                // 创建表头
                const headerRow = $('<tr>').append(
                    $('<th>').text('用户编号'),
                    $('<th>').text('用户姓名'),
                    $('<th>').text('注册时间') // 新增列示例
                );
                $('<thead>').append(headerRow).appendTo(table);
                
                // 创建表格体
                const tbody = $('<tbody>');
                data.list.forEach(function(user) {
                    const row = $('<tr>').append(
                        $('<td>').text(user.id),
                        $('<td>').text(user.name),
                        $('<td>').text(user.registerDate || 'N/A') // 处理可能不存在的字段
                    );
                    tbody.append(row);
                });
                table.append(tbody);

                // 渲染到页面
                $('#result').empty().append(table);
            } catch (e) {
                console.error("表格渲染失败:", e);
                $('#result').html('<p style="color: red">数据处理异常</p>');
            }
        }
    </script>
</body>
</html>

JSON 数据示例 (js/user.json)：

json 复制代码 
{
    "code": 1,
    "message": "success",
    "list": [
        {
            "id": 1001,
            "name": "张三",
            "registerDate": "2023-01-15"
        },
        {
            "id": 1002,
            "name": "李四",
            "registerDate": "2023-02-20"
        }
    ]
}
相关推荐
随风九天6 分钟前
使用 Nginx 进行前端灰度发布的策略与实践
运维·前端·nginx·前端灰度发布
黄Java19 分钟前
SVG中linearGradient的id冲突的显隐问题深度解析
前端·svg
蜗牛快跑1231 小时前
通过尤大“围绕Vite的前端统一框架”分享，看未来前端发展趋势
前端
skywalk81631 小时前
Mac下安装Zed以及Zed对MCP（模型上下文协议）的支持
服务器·前端·macos
陈龙龙的陈龙龙1 小时前
macOS 安装 Homebrew、nvm 及安装切换 node 版本
前端·macos·bash
asphyxia1 小时前
老龄化项目问题解决
前端
SaebaRyo1 小时前
作为一个前端er如何了解LLM(大语言模型)
前端·llm
悬炫1 小时前
深入解析浏览器渲染原理与性能优化策略
前端·javascript
鸡血园地1 小时前
前端性能优化
前端
铠文1 小时前
垃圾回收机制核心知识点
javascript
热门推荐
01从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek各版本说明与优缺点分析04Unity图形学之法线贴图原理05DeepSeek RAGFlow构建本地知识库系统06本地部署DeepSeek教程（Mac版本）07Windows 11 安装 Dify 完整指南 非docker环境08如何本地部署AI智能体平台，带你手搓一个AI Agent09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10KGG转MP3工具|非KGM文件|解密音频