一小时快速上手jQuery
此教程注重理论知识部分，实践部分后期会更新（结合我的毕业设计！！！）
jQuery对象
Dom对象
- 通过js方式获取的元素对象
jQuery对象
- 通过jQuery方法获取的元素对象，返回的是jQuery的包装集
使用jQuery时一定要在首部先引入jQuery文件
Dom对象转jQuery对象
-
只需用$包括起来即可
var Domdiv=document.getElementById("div"); var divjQuery=$(Domdiv);
jQuery对象转Dom对象
-
获取包装集指定下标的元素即可
var div=divjQuery[0];
jQuery选择器
基础选择器
id选择器
var div=$("#div");//选择指定id的元素对象
元素名称选择器
var div=$("div");//选择指定标签的元素对象
类选择器
var div=$(".div");//选择指定class的元素对象
通用选择器
var all=$("*");//选择所有元素对象
组合选择器
var divs=$("#div1,#div2,#div3");//选择指定选择器的元素对象
层次选择器
后代选择器
var div=$("#parent div");//选择id为parent的父元素的所有（包含第一代，第二代等）div元素
子代选择器
var div=$("#parent>div");//选择id为parent的直接（第一代）div子元素
相邻选择器
var div=$(".parent+div");//选择css类为parent的下一个div元素（只会查找下一个元素，如果元素不存在，则获取不到）
同辈选择器
var div=$(".parent~div");//选择css类为parent的之后的div元素（选择元素下面的所有指定元素）
表单选择器
表单选择器
$(":input");//查找所有input元素
文本选择器
$(":text");//查找所有文本框
密码框选择器
$(":password");//查找所有密码框
单选按钮选择器
$(":radio");//查找所有单选按钮
复选框选择器
$(":checkbox");//查找所有复选按钮
提交按钮选择器
$(":submit");//查找所有提交按钮
图像域选择器
$(":image");//查找所有图像域
重置按钮选择器
$(":reset");//查找所有重置按钮
按扭选择器
$(":button");//查找所有按钮
文件域选择器
$(":file");//查找所有文件域
操作元素的属性
属性的分类
固有属性:id,name,class,style
返回值时boolean的属性:checked,selected,disabled
自定义属性:用户自己定义的属性
如果属性的类型是boolean，则使用prop()方法，否则使用attr()方法
获取属性
attr("属性名");
prop("属性名");
区别
- 如果是固有属性，attr()和prop()方法均可获取
- 如果是自定义属性，attr()可获取，prop()不可获取
- 如果是返回值是boolean类型的属性
- 若设置了属性，attr()返回具体的值，prop()返回true
- 若未设置属性，attr()返回undefined，prop()返回false
设置属性
attr("属性名","属性值");
prop("属性名","属性值");
移除属性
removeAttr("属性名");
操作元素的样式
attr("class");//获取元素的样式名
attr("class","样式名");//设置元素的样式,原本的样式会被覆盖
addClass("样式名");//添加样式,原本样式保留，出现相同样式，以后定义的为准
css();//添加具体的样式(行内样式)
//css("具体样式名","样式值")
//css({"具体样式名":"样式值","具体样式名":"样式值"})
removeClass("样式名");//移除样式
操作元素的内容
html()//获取元素的内容，包含html标签（非表单元素）
html("内容")//设置元素的内容，包含html标签（非表单元素）
text()//获取元素的纯文本内容，不识别HTML标签（非表单元素）
text("内容")//设置元素的纯文本内容，不识别HTML标签（非表单元素）
val()// 获取元素的值(表单元素)
val("值")// 设置元素的值(表单元素)
创建元素
$("<p>添加元素</p>");
添加元素
prepend(content);//在被选元素内部的开头插入元素或内容，被追加的content参数。可以是字符，HTML元素标记
$(content).prependTo(selector);//把content元素或内容加入selector元素内部开头
append(content);//在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符，HTML元素标记
$(content).appendTo(selector);//把content元素或内容插入selector元素内，默认是在尾部
before();//在元素前插入指定的元素或内容:$(selector).before(content)
after();//在元素后插入指定的元素或内容:$(selector).after(content)
在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置
如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置
删除元素
var div=$("div");
div.remove();//删除所选元素或指定的子元素，包括整个标签和内容一起删
div.empty();//清空所选元素的内容,保留标签
遍历元素
$(selector).each(function(index,element));//遍历元素
参数function为遍历时的回调函数
index为遍历元素的序列号，从0开始
element时当前的元素，此时是dom元素
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<script>
$("span").each(function(index,element){
console.log(index);
console.log(element);
console.log(this);
})
</script>
jQuery事件
ready加载事件
- 预加载事件
- 当页面的dom结构加载完毕后执行
- 类似于js中的load事件
- ready事件可以写多个
主要为了解决HTML顺序执行的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./jquery-3.6.3.js" type="text/javascript"></script>
<title>Document</title>
<script>
console.log($("div"));//此处会报错
</script>
</head>
<body>
<div id="mydiv">文本</div>
</body>
</html>
$(document).ready(fuction(){
console.log($("div"));
});
//简写
$(function(){
console.log($("div"));
});
bind()绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
$(selector).bind(eventType [, eventData], handler(eventObject));
eventType:一个字符串类型的事件类型，就是你所需要绑定的事件
[, eventData]：传递的参数，格式：{名：值，名2：值2}
handler(eventObject)：该事件触发执行的函数
-
绑定单个事件
-
bind绑定
$(“元素”).bind(“事件类型”,function(){
});
-
直接绑定
$(“元素”).事件名(function(){
});
-
-
绑定多个事件
-
bind绑定
-
同时为多个事件绑定同一个函数
指定元素.bind(“事件类型1 事件类型2 事件类型3”,function(){
});
-
为元素绑定多个事件，并设置对应的函数
指定元素.bind(“事件类型1”,function(){
}).bind(“事件类型2”,function(){
});
-
为元素绑定多个事件，并设置对应的函数
指定元素.bind({
“事件类型”:function(){
},
“事件类型”:function(){
}
});
-
-
直接绑定
指定元素.事件名(function(){
}).事件名(function(){
});
-
jQuery Ajax
一种异步无刷新技术
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, . p o s t 等。 .post 等。 .post等。.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
$.ajax
jquery调用ajax用法：
格式：$.ajax({});
参数：
type:请求方式GET/POST
url:请求地址url
async:是否异步，默认是true表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
contentType:设置请求开头
success:请求成功时调用此函数
error:请求失败时调用此函数
data.json
[
{
"userId":1,
"userName":"zhangsan",
"userAge":18
},
{
"userId":2,
"userName":"lisi",
"userAge":19
},
{
"userId":3,
"userName":"wangwu",
"userAge":20
},
{
"userId":4,
"userName":"zhaoliu",
"userAge":21
}
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./jquery-3.6.3.js"></script>
<title>Document</title>
</head>
<body>
<button type="button" id="btn">查询数据</button>
</body>
<script>
//点击按钮，发送Ajax请求，将数据显示到页面上
$("#btn").click(function () {
$.ajax({
url: "data.json",
type: "GET",
dataType: "json", //将返回值自动封装成json对象
//请求成功时调用的函数
success: function (data) {
console.log(data);
//将字符串转化为json对象
// var obj = JSON.parse(data);
// console.log(obj);
//Dom节点操作
var ul = $("<ul></ul>");
for (var i = 0; i < data.length; i++) {
var user = data[i];
var li = "<li>" + user.userName + "</li>";
ul.append(li);
}
console.log(ul);
$("body").append(ul);
},
});
});
</script>
</html>
$.get
简单的GET请求功能以取代复杂$.ajax
失败时没有调回函数
$.get(“请求地址”,“请求参数”,function(形参){
});
$.get("data.json",{
},function(data){
console.log(data);
})
$.post
$.post(“请求地址”,“请求参数”,function(形参){
});
$.post("data.json",{
},function(data){
console.log(data);
})
$.getJSON
$.getJSON(“请求地址”,“请求参数”,function(形参){
});
getJSON方式要求返回的数据格式满足json格式(json字符串)如果返回的数据不是json格式的，则无法获取
$.getJSON("data.json",{
},function(data){
console.log(data);
})