此教程注重理论知识部分,实践部分后期会更新(结合我的毕业设计!!!)
Dom对象
jQuery对象
使用jQuery时一定要在首部先引入jQuery文件
Dom对象转jQuery对象
只需用$包括起来即可
var Domdiv=document.getElementById("div");
var divjQuery=$(Domdiv);
jQuery对象转Dom对象
获取包装集指定下标的元素即可
var div=divjQuery[0];
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("属性名","属性值");
removeAttr("属性名");
attr("class");//获取元素的样式名
attr("class","样式名");//设置元素的样式,原本的样式会被覆盖
addClass("样式名");//添加样式,原本样式保留,出现相同样式,以后定义的为准
css();//添加具体的样式(行内样式)
//css("具体样式名","样式值")
//css({"具体样式名":"样式值","具体样式名":"样式值"})
removeClass("样式名");//移除样式
html()//获取元素的内容,包含html标签(非表单元素)
html("内容")//设置元素的内容,包含html标签(非表单元素)
text()//获取元素的纯文本内容,不识别HTML标签(非表单元素)
text("内容")//设置元素的纯文本内容,不识别HTML标签(非表单元素)
val()// 获取元素的值(表单元素)
val("值")// 设置元素的值(表单元素)
$("添加元素
");
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>1span>
<span>2span>
<span>3span>
<span>4span>
<script>
$("span").each(function(index,element){
console.log(index);
console.log(element);
console.log(this);
})
script>
主要为了解决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>Documenttitle>
<script>
console.log($("div"));//此处会报错
script>
head>
<body>
<div id="mydiv">文本div>
body>
html>
$(document).ready(fuction(){
console.log($("div"));
});
//简写
$(function(){
console.log($("div"));
});
为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
$(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(){
});
一种异步无刷新技术
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, . p o s t 等。 .post 等。 .post等。.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。
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>Documenttitle>
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 = $("
");
for (var i = 0; i < data.length; i++) {
var user = data[i];
var li = "" + user.userName + "";
ul.append(li);
}
console.log(ul);
$("body").append(ul);
},
});
});
script>
html>
简单的GET请求功能以取代复杂$.ajax
失败时没有调回函数
$.get(“请求地址”,“请求参数”,function(形参){
});
$.get("data.json",{},function(data){
console.log(data);
})
$.post(“请求地址”,“请求参数”,function(形参){
});
$.post("data.json",{},function(data){
console.log(data);
})
$.getJSON(“请求地址”,“请求参数”,function(形参){
});
getJSON方式要求返回的数据格式满足json格式(json字符串)如果返回的数据不是json格式的,则无法获取
$.getJSON("data.json",{},function(data){
console.log(data);
})