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"
        }
    ]
}
相关推荐
gotoc丶1 小时前
堆排序：力扣215.数组中的第K个大元素
javascript·数据结构·算法·leetcode·排序算法
NaZiMeKiY2 小时前
HTML5前端第二章节
前端·html·html5
天若有情6732 小时前
深入浅出：HTML 中 ＜a＞ 标签嵌入链接教程
前端·html
烂蜻蜓2 小时前
HTML 样式之 CSS 全面解析
前端·css·html
冬冬小圆帽2 小时前
Webpack 优化深度解析：从构建性能到输出优化的全面指南
前端·webpack·node.js
大龄大专大前端4 小时前
JavaScript闭包的认识/应用/原理
前端·javascript·ecmascript 6
字节源流4 小时前
【SpringMVC】常用注解：@SessionAttributes
java·服务器·前端
肥肠可耐的西西公主4 小时前
前端（vue)学习笔记（CLASS 4）：组件组成部分与通信
前端·vue.js·学习
烛阴4 小时前
JavaScript 函数绑定：从入门到精通，解锁你的代码超能力！
前端·javascript
花椒和蕊4 小时前
【vue+excel】导出excel（目前是可以导出两个sheet）
javascript·vue.js·excel
热门推荐
01本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek各版本说明与优缺点分析04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05DeepSeek RAGFlow构建本地知识库系统06本地部署DeepSeek教程（Mac版本）07命令行方式将mysql数据库迁移到达梦数据库（全步骤）08如何本地部署AI智能体平台，带你手搓一个AI Agent09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10ICM20948 DMP代码详解（34）