AJAX
- 概念：异步的 JavaScript 和 XML
- 作用：ajax 就是用来做局部刷新的一种方法
- PS：现在基本不用 xml 这种数据交换格式，都是用 js + json 实现 ajax 异步请求
注意：前端页面发送的请求地址，可以带项目名，也可以不带！
- 原生 js 实现异步请求四步：
- 创建异步请求对象
- 绑定事件（事件中接收数据并局部刷新展示）
- 初始化请求数据
- 发送请求
<script type="text/javascript">
function show() {
// 1.创建异步对象
var xmlHttp = new XMLHttpRequest();
// 2.绑定事件
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("mspan").innerText = xmlHttp.responseText;
}
}
// 3.初始化请求数据
var w = document.getElementById("weight").value
var h = document.getElementById("height").value
var param = "weight=" + w + "&height=" + h;
xmlHttp.open("GET", "calBmi22?" + param, true);
// 4.发送请求
xmlHttp.send();
}
</script>
jQuery
- 介绍：jQuery 就是一套 js 库
开篇基础
- html 中引入 jQuery 库文件方式
<!---->
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
- 类似 window.onload = function() {} 用法
// 以下和 js 中 window.onload = function() {} 作用相同，dom 对象加载成功后执行函数体中内容
// 标准写法
$(document).ready(function() {})
// 可简写
$(function() {})
- dom 对象和 jQuery 对象
// dom 对象：js 语法创建的对象
var domObj = document.getElementById("mBtn");
// jQuery 对象：jQuery 语法创建的对象，要注意 jQuery 对象都是数组，数组中存储着 dom 对象
var $obj = $("#mBtn");
// dom 对象和 jQuery 对象相互转换是为了方便各自函数的调用
// dom 对象转为 jQuery 对象：
$(dom对象)
// jQuery 对象转为 dom 对象：从数组中获取第一个元素就是 dom 对象，就完成了转换
$("mBtn")[0] // 方式一
$("mBtn").get(0) // 方式二
- dom 对象操作 css 样式示例
$("div").css("background","red") // 操作的所有 div
选择器（掌握）
基本选择器
基本选择器作用：定位 dom 对象
// jQuery 中对象的三种基本选择器
$("#mBtn") // id 选择器
$(".class") // class 选择器（也称样式选择器）
$("span") // 标签选择器
$("*") // 所有选择器
$("#mBtn,.class,span") // 组合选择器
表单选择器
含有 type 属性的组件，才能用表单选择器定位。
// 语法
$(":type类型")
// 举例
$(":text") // 选取所有单行文本框
$(":password") // 选取所有密码框
$(":radio") // 选取所有单选框
$(":checkbox") // 选取所有多选框
过滤器
过滤器作用：对定位的dom对象进行筛选
注意：过滤器需要和选择器联合使用
基本过滤器
// 选择第一个dom对象
$("选择器:first")
// 选择最后一个dom对象
$("选择器:last")
// 选择数组中指定对象
$("选择器:eq(数组索引)")
// 选择数组中小于指定索引的所有dom对象
$("选择器:lt(数组索引)")
// 选择数组中大于指定索引的所有dom对象
$("选择器:gt(数组索引)")
表单属性过滤器
作用：根据表单中dom对象状态进行定位
例如：
启用状态：enabled
不可用状态：disabled
选中状态：checked、selected
// 选择所有可用的文本框
$(":text:enabled")
// 选择所有不可用的文本框
$(":text:disabled")
// 选择复选框中选中的元素
$(":checkbox:checked")
// 获取指定下拉列表中被选中的元素
// 语法：选择器>option:selected
$("#mOption>option:selected")
事件
定义元素监听事件
注意：
监听事件名就是js中事件去掉on的部分。
绑定事件时，一般是需要在页面中dom对象加载成功后再进行。
// 语法
$("选择器").监听事件名(处理函数)
// 例如
$("#mBtn").click(function() {})
on() 绑定事件
event：事件一个或多个，多个之间用空格分开。
function：可选；规定当事件发生时运行的函数。
// 语法
${"选择器"}.on(event,function)
// 例如
${"#btn"}.on("click", function() {})
函数
val（常用）
操作数组中DOM对象的value属性
// 无参调用，读取数组中第一个DOM对象的value属性值
$("选择器").val()
// 有参调用，对数组中所有DOM对象的value属性进行统一赋值
$("选择器").val(值)
text
// 无参调用，读取数组中所有DOM对象的文字内容，并拼接成一个字符串进行返回
$("选择器").text()
// 有参调用，对数组中所有DOM对象的文字显示内容进行统一赋值
$("选择器").text(值)
attr
对val，text之外的其他属性进行操作
// 获取DOM数组中第一个对象的指定属性值
$("选择器").attr("属性名")
// 对DOM数组中所有对象的指定属性设置新值
$("选择器").attr("属性名","值")
remove
// 将数组中所有DOM对象及其子对象一并删除
$("选择器").remove()
empty
// 将数组中所有DOM对象的子对象删除
$("选择器").empty()
append（常用）
// 为数组中所有DOM对象添加子对象
$("选择器").append("<div>我是动态添加的div</div>")
html
设置或返回被选元素的内容（innerHTML）
// 无参调用，获取数组第一个元素的内容
$("选择器").html()
// 有参调用，设置DOM数组中所有元素的内容
$("选择器").html(值)
each（常用）
对数组，json和dom等的遍历，对每个元素调用一次函数。
index：数组的下标
element：数组的对象
// 语法1
$.each(要遍历的对象,function(index,element){处理程序})
// 语法2
jQuery对象.each(function(index,element){处理程序})
AJAX（重点）
jQuery中使用三个函数实现了ajax请求的处理，封装了原生js实现ajax的四步。
$.ajax()
jquer中实现ajax的核心函数。
// 示例：
$.ajax({
url: "calBmi22",
data: {
"weight": weight,
"height": height
},
dataType: "json",
success: function (resp) {
$("#mspan").html(resp)
}
})
$.get()
get请求做ajax请求；内部调用了$.ajax()
// 语法：
$.get(url,data,function(resp),dataType)
$.post()
post请求做ajax请求；内部调用了$.ajax()
// 语法：
$.post(url,data,function(resp),dataType)
Ajax 实现级联查询练习
标签：jQuery,function,dom,对象,AJAX,数组,小结,选择器 From： https://www.cnblogs.com/luisblog/p/16849516.html