文章目录
- 前言
- jQuery对象
- jQuery选择器
- Dom操作
-
- 1、操作元素的属性
- 2、使用jQuery操作元素样式
- 3、操作元素的内容
- 4、创建元素和添加元素
-
- [创建元素:`("元素标签")\`](#创建元素:`("元素标签")`)
- 添加元素
- 5、删除元素
- 6、遍历元素`each()`
- jQuery事件
- Ajax
前言
提示:这里可以添加本文要记录的大概内容:
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来选取特定的元素。 - 类选择器 :通过
.
加上类名来选取所有具有该类的元素。 - 元素选择器:直接使用标签名来选取页面上所有的该类型的元素。
- 通用选择器 :使用
*
来选取页面上的所有元素。 - 组合选择器:通过逗号分隔不同的选择器,可以同时选取多个不同条件的元素。
- 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
区别:
- 固有属性:元素本身就拥有的属性,
attr()
和prop()
都可以操作固有属性 - 返回值是布尔类型的属性
checked
、selected
、disabled
、prop()
操作返回值是布尔类型的属性 - 自定义属性:用户自己定义的属性,
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操作元素样式
- 获取元素的样式类名
使用attr("class")
可以获取元素的所有类名。
javascript
var classList = $("#elementId").attr("class");
console.log(classList); // 输出元素的所有类名
- 设置元素的样式(覆盖原有样式)
attr("class","样式名")
直接设置CSS属性会覆盖原有的样式值。
javascript
$("#elementId").css("color", "red"); // 将文本颜色设置为红色
- 添加元素的样式(在原有基础上追加新的样式类)
使用addClass("样式名")
方法可以在不移除原有类的情况下添加新的类。
javascript
$("#elementId").addClass("newClass"); // 添加一个名为 'newClass' 的新类
- 添加具体的样式
添加一个或多个具体的样式规则。对于多个样式规则,可以传递一个对象给.css()
方法。
- 添加一个具体的样式:
css("样式名","样式值")
javascript
$("#elementId").css("background-color", "blue"); // 设置背景色为蓝色
- 添加多个具体的样式:
css({"样式名":"样式值","样式名":"样式值"})
javascript
$("#elementId").css({
"font-size": "20px", // 设置字体大小为20px
"border": "1px solid black" // 设置边框样式
});
- 移除样式
使用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
:是一个对应的事件类型的字符串
-
事件类型:
- 点击事件:
click
- 聚焦事件:
focus
- 失去焦点事件(通常称为失效事件):
blur
- 改变事件:
change
- 鼠标悬停事件:应为
mouseover
而不是moueseover
- 鼠标移开事件:
mouseout
- 点击事件:
-
eventData
:需要传递给事件处理程序的数据,参数格式是一个 JSON 对象,例如{键: 值, 键: 值...}
。 -
handler
:当事件触发时执行的回调函数。 -
bind绑定事件(单个):
javascript
$(选择器).bind("事件名", function() {
// 事件处理代码
});
bind()
绑定事件语法:
javascript
$(selector).bind(eventType[,eventData],handler);
- 绑定事件(多个):
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.执行函数:当事件触发时需要执行的函数,匿名函数·或·自定义函数
- 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代码。
额外提示:
- 事件委托:如果需要对动态加载的内容进行事件绑定,可以考虑使用事件委托。
javascript
$(document).on('click', '#dynamicBtn', function(){
console.log('动态加载的按钮被点击了...');
});
-
避免重复绑定 :确保不会多次绑定相同的事件处理函数给同一个元素,以免触发多次相同的行为。可以通过
.off()
方法解除之前的绑定,或者在绑定之前检查是否已经存在相应的事件处理器。 -
使用
.on()
代替.bind()
、.click()
等 :从jQuery 1.7开始,推荐使用.on()
方法作为统一的事件绑定机制。
javascript
$('#element').on('click', function() {
console.log('元素被点击');
});
Ajax
异步无刷新技术
原生Ajax的实现流程
-
得到XMLHttpRequest对象
javascriptvar xhr = new XMLHttpRequest();
-
打开请求
javascriptxhr.open(method, uri, async);
method
:请求方式,通常是GET
或POST
。uri
:请求地址。async
:是否异步。如果是true
表示异步(推荐),false
表示同步。
-
发送请求
javascriptxhr.send(params);
params
:请求时需要传递的参数。- 如果是
GET
请求,则设置为null
(GET请求的参数应包含在URL中)。 - 如果是
POST
请求,没有参数时设置为null
,有参数则设置为参数内容(例如:"name=value&name2=value2"
)。
- 如果是
-
接收响应
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请求
- 发送请求,无参数,无返回值:
javascript
$.get("请求路径");
- 发送请求,有参数,无返回值:
javascript
$.get("请求路径", "请求参数");
- 发送请求,无参数,有返回值:
javascript
$.get("请求路径", function(返回结果) {
// 处理返回结果
});
- 发送请求,有返回值,有参数
javascript
$.get("请求路径", "请求参数",function(返回结果) {
// 处理返回结果
});
- 使用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请求
- 发送请求,无参数,无返回值:
javascript
$.post("请求路径");
- 发送请求,有参数,无返回值:
javascript
$.post("请求路径", "请求参数");
- 发送请求,无参数,有返回值:
javascript
$.post("请求路径", function(返回结果) {
// 处理返回结果
});
- 发送请求,有返回值,有参数
javascript
$.post("请求路径", "请求参数",function(返回结果) {
// 处理返回结果
});
- 使用
$.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"
}
]
}