本文详细介绍了jQuery的使用，包括如何引入jQuery库，$的含义，DOM与jQuery对象的相互转换。接着讲解了jQuery的选择器，如基本、层级、属性和表单选择器。此外，还涵盖了过滤器、文档处理（样式、属性、文本和元素操作）、函数、事件绑定及解绑、以及Ajax请求方法如$.ajax()、$.get()和$.post()。
1、jQuery
1.1 使用jQuery
- ① 需要在项目中加入jquery的文件
- ② 创建一个html文件或jsp都可以，在文件中使用
<script type="text/javascript" src="jquery-3.6.0.js"></script>
- ③ 在js代码中，调用jquery中函数
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
/*$: jQuery中的函数
document: 参数
$(document): 把js中的document对象变成jQuery可以使用的对象，然后调用ready()的函数，这个ready()是jquery中的函数
ready()的执行时间在页面dom对象加载后执行的，相当于js中onload事件
ready(函数)：表示在页面对象加载后执行这个函数
*/
// 方式一：
// $(document).ready(function() {
// alert('jQuery的第一个例子');
// });
// 方式二：
// $(document).ready(myinit())
// function myinit() {
// alert('====相当于οnlοad===');
// }
// 方式三：jQuery提供了简单的方式，使用ready()
$(function() {
alert('jQuery的第一个例子')
})
</script>
1.2 jQuery中$的含义
1.3 DOM对象和jQuery对象
1.3.1 DOM对象转换jQuery对象
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
// 通过js的函数，获取DOM对象
var dom = document.getElementById('t1');
// $(dom对象）得到的是一个jquery对象，可以调用jquery中提供的函数
// 把DOM转为jquery
var jqueryObj = $(dom);
// 调用jquery中的函数
jqueryObj.val(); // 获取dom对象的value属性的值
function btnClick() {
// 获取dom对象
var obj = document.getElementById('btn');
// 转为jquery类型的对象
var $jobj = $(obj); // $jojb是一个jquery对象
// 调用jquery中的函数
alert($jobj.val());
}
</script>
1.3.2 jQuery对象转换DOM对象
<input type="text" id="t1">
<input type="button" id="btn" value="计算平方" onclick="btnClick()">
<br>
<input type="text" id="txt1" value="请输入整数">
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
// 使用jquery的方式表示这个DOM对象
// $('#t1'): 获取id是t1的DOM对象
var obj = $("#t1"); // obj是一个jquery对象，是一个包含了一个成员的DOM数组，obj[0]就是DOM对象
var dom = obj[0]; // var dom = obj.get(0);
// 使用dom对象的函数或者属性
// alert(dom.value);
function btnClick() {
// 使用jquery语法，获取jquery对象
var obj = $("#txt1"); // obj是jquery对象
// 从数值中获取成员，成员是DOM对象
var dom = obj[0];
// 调用DOM的属性或者函数
alert(dom.value);
}
</script>
2、选择器
2.1 基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
function fun1() {
// id选择器
var obj = $('#one');
obj.css('background','red');
}
function fun2() {
// class 选择器（样式选择器）
$('.two').css('background','blue');
}
function fun3() {
// 标签选择器
var obj = $("div");
obj.css("background","pink");
}
function fun4() {
// 通配符选择器
var obj = $("*");
obj.css("background","pink");
}
function fun5() {
// 组合选择器
var obj = $("#one,.two,span");
obj.css("background","pink");
}
</script>
<style>
div {
background: gray;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id="one">id=one</div>
<br>
<div class="two">clas=two</div>
<br>
<div>没有id,class</div>
<br>
<span>span</span>
<br>
<input type="button" value="id=one" onclick="fun1()"><br>
<input type="button" value="class=one" onclick="fun2()"><br>
<input type="button" value="选取div" onclick="fun3()"><br>
<input type="button" value="获取所有的dom对象" onclick="fun4()"><br>
<input type="button" value="组合选择dom对象" onclick="fun5()"><br>
</body>
</html>
2.2 层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
div {
height: 200px;
border: 3px solid pink;
}
</style>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
// 后代选择器，表示div的所有后代span都会变色
// $("div span").css("background-color","red");
// 子代选择器，表示div的直接子代span都会变色
// $("div>span").css("background-color","pink");
// 与#sp1紧挨的标签才会变色（相邻兄弟选择器），它的紧挨标签是br，所以span不会变色
// $("#sp1 + span").css("background-color","green");
// 获得指定元素后面同级的元素（兄弟选择器）
$("#sp1~span").css("background-color","green");
});
</script>
</head>
<body>
<div>
<span id="sp1">我是div>span001</span><br>
<span>我是div>span002</span><br>
<span>我是div>span003</span><br>
<p>
<span>我是p>span001</span><br>
<span>我是p>span002</span><br>
<span>我是p>span003</span><br>
</p>
</div>
</body>
</html>
2.3 属性选择器
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
/*************属性选择器******************/
// type属性等于text
$("input[type=text]").css("background-color","pink");
// name属性以z开头
$("input[name^=z]").css("background-color","pink");
// name属性以z结尾
$("input[name$=d]").css("background-color","pink");
// name属性包含p
$("input[name*=p]").css("background-color","pink");
// name属性不等于attrvalue
$("input[name!=attrvalue]").css("background-color","pink");
// 复合属性选择器：两个属性要同时满足
$("input[type=text][name^=z]").css("backgroun-color","pink");
})
</script>
2.4 表单选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
function fun1() {
// 使用表单选择器,获取dom对象
var obj = $(":text");
alert(obj.val());
}
function fun2() {
// $(":radio")
var obj = $(":radio");
for (var i = 0; i < obj.length; i++) {
var dom = obj[i]; // dom 是DOM对象
alert("dom的属性=" + dom.value);
alert("jquery的函数=" + $(dom).val());
}
alert(obj.val());
}
function fun3() {
// 使用表单选择器
var obj = $(":checkbox");
for (var i = 0; i < obj.length; i++) {
alert($(obj[i]).val());
}
}
$(function() {
/*************表单选择器******************/
// 获得form表单中的所有的表单项
var inp = $(":input");
// 获取标签名是input的所有标签对象
var inp2 = $("input");
alert(inp.length + "------" + inp2.length); // 获取的长度不相同
// $("input[type=text]")与$(":text")是等价的
$(":text").css("background-color","green");
$(":password").css("background-color","red");
})
</script>
</head>
<body>
<p>文本框</p>
<input type="text" value="type=text"><br>
<p>radio</p>
<input type="radio" value="man">男 <br>
<input type="radio" value="woman">女 <br>
<br>
<p>checkbox</p>
<input type="checkbox" value="bike">骑行 <br>
<input type="checkbox" value="football">足球 <br>
<input type="checkbox" value="music">音乐 <br>
<br>
<br>
<p>功能按钮</p>
<input type="button" value="读取文本框的value值" onclick="fun1()"><br>
<input type="button" value="读取radio的value值" onclick="fun2()"><br>
<input type="button" value="读取checkbox的value值" onclick="fun3()"><br>
</body>
</html>
3、过滤器
3.1 基本过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
// 页面dom对象加载后执行，相当于onload事件
$(function() {
// btn1事件
$("#btn1").click(function() {
var obj = $("div:first");
obj.css("background","blue");
});
// btn2事件
$("#btn2").click(function() {
// var obj = $("div:last");
// obj.css("background","red");
$("div:last").css("background","red");
});
// btn3事件
$("#btn3").click(function() {
$("div:eq(3)").css("color","pink");
});
$("#btn4").click(function() {
$("div:gt(3)").css("background","pink");
});
$("#btn5").click(function() {
$("div:lt(3)").css("background","pink");
});
})
</script>
<style>
div {
background: gray;
}
</style>
</head>
<body>
<div id="one">我是div-1</div>
<div id="two">我是div-2</div>
<div>
我是div-2
<div>我是div-3</div>
<div>我是div-4</div>
</div>
<div>我是div-5</div>
<br>
<br>
<span>我是span</span>
<br>
<br>
<input type="button" id="btn1" value="获取数组中第一个dom对象"><br>
<input type="button" id="btn2" value="获取数组中最后一个dom对象"><br>
<input type="button" id="btn3" value="选择下标等于3的div"><br>
<input type="button" id="btn4" value="选择下标大于3的div"><br>
<input type="button" id="btn5" value="选择下标小于3的div"><br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
div {
height: 200px;
border: 3px solid red;
}
</style>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
// 会把 ul li 看成一个整体，只是第一个会变色
// $("ul li:first").css("background-color","red");
// 最后一个变色
// $("ul li:last").css("background-color","green");
// 奇数行变色
// $("ul li:odd").css("background-color","pink");
// 偶数行变色
// $("ul li:even").css("background-color","pink");
/****************子选择器********************/
// $("ul li:nth-child(1)").css("background-color","green");
$("ul li:first-child").css("background-color","pink");
})
</script>
</head>
<body>
<div>
<ul>
<li>List_Item1</li>
<li>List_Item2</li>
<li>List_Item3</li>
<li>List_Item4</li>
</ul>
<ul>
<li>List_Item1</li>
<li>List_Item2</li>
</ul>
</div>
</body>
</html>
3.2 表单对象属性过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
// 页面dom对象加载后执行，相当于onload事件
$(function() {
// btn1事件
$("#btn1").click(function() {
// 所有可用的文本框
var obj = $(":text:enabled");
obj.val("hello");
});
$("#btn2").click(function() {
// 选中的复选框
var obj = $(":checkbox:checked");
for (var i = 0; i < obj.length; i++) {
// console.log(obj[i].value); // DOM方式
console.log($(obj[i]).val()); // jQuery方式
}
});
$("#btn3").click(function() {
//下拉列表框架选中的值
// var obj = $("select>option:selected");
var obj = $("#lang>option:selected");
console.log(obj.val());
});
})
$(function() {
/*************表单属性选择器******************/
// 获得input标签含有disabled属性的对象
var but = $("input:disabled");
alert(but.val());
// 获取含有checked属性的对象
var ch = $("input:checked");
// 获取含有selected属性的对象
var se = $("select:option:selected");
// 获取所有不包含子元素或者文本为空元素
var em = $("td:empty");
})
</script>
<style>
div {
background: gray;
}
</style>
</head>
<body>
<input type="text" value="文本1"> <br>
<input type="text" value="文本2" disabled="true"> <br>
<input type="text" value="文本3"> <br>
<input type="text" value="文本4" disabled> <br>
<br>
<br>
<input type="checkbox" value="游泳"> 游泳 <br>
<input type="checkbox" value="健身" checked="true"> 健身 <br>
<input type="checkbox" value="电子游泳" checked> 电子游泳 <br>
<br>
<br>
<select id="lang">
<option value="java">java语言</option>
<option value="go" selected>go语言</option>
<option value="python">python语言</option>
</select>
<br>
<br>
<button id="btn1">给所有可用的文本设置value为hello</button>
<button id="btn2">显示选中的复选框的值</button>
<button id="btn3">显示选中的下拉列表框</button>
</body>
</html>
4、文档处理
4.1 操作页面的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
#div1 {
width: 200px;
height: 200px;
border: 2px solid green;
}
// 增加类的方式
.div {
background-color: blue;
}
</style>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#bu1").click(function() {
/************样式的操作的第一种方式**************/
// css样式比较少，用第一种方式即可
// 获得div对象
// var div = $("#div1");
// 获取css样式
// var wid = div.css("width");
// var hi = div.css("height");
// console.log(wid + "------" + hi);
// 操作元素对象的css
// div.css("width","300px");
// div.css("height","500px");
// 支持驼峰命名的属性操作
// div.css("background-color","pink");
// div.css("backgroundColor","pink");
// 复合写法, json格式
// div.css({'width':'300px' , 'height':'300px', 'background-color':'pink'});
/************样式的操作的第二种方式**************/
//获得div对象---通过添加类的方式添加css样式
// css样式多的法，使用第二种方式操作页面样式
// $('#div1').attr('class','div');
$("#div1").addClass("div");
});
});
</script>
</head>
<body>
<input type="button" value="样式的操作" id="bu1">
<div id="div1"></div>
</body>
</html>
4.2 操作元素对象的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
</style>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#bu1").click(function() {
/************获取元素对象的属性**************/
// 获取元素
var tex = $("#inp1");
//获取元素对象的属性值
var te = tex.attr("type");
var c1 = tex.attr("class");
// 获得value固有的属性值
var val = tex.attr("value");
console.log(te + '=====' + c1 + '+++++' + val);
// 获取元素对象的value的属性值，而且是文本框输入的实时值
var val2 = tex.val();
console.log(val2);
/************操作元素对象的属性**************/
// tex.attr("type","button");
// tex.attr("value","测试按钮");
// 复合写法 json格式数据
tex.attr({"type":"button","value":"测试按钮"});
// var ch = $("#fav").attr("checked"); // 获得的是checked的属性值
// 获取属性是否勾选的布尔值
var flag = $("#fav").prop("checked"); // 返回的是布尔值，勾选返回true
// 设置属性的值
var obj = $("#fav").prop("checked",true); // 返回的是jQuery的对象
});
})
</script>
</head>
<body>
<input type="button" id="bu1" value="元素属性的获取">
<hr>
<form>
账号：<input type="text" class="inp" id="inp1" value="AAA"> <br>
密码：<input type="password" class="pwd" id="pwd1" value="AAA"><br>
爱好：<input type="checkbox">抽烟
<input type="checkbox">喝酒
<input type="checkbox" checked="checked" id="fav">烫头
</form>
</body>
</html>
4.3 操作页面的文本和值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#bu1").click(function() {
/*********获取元素的内容和值***********/
// 获取div元素对象
var div = $("#div1");
// 获取元素的内容，含有html的标签
var ht = div.html();
console.log(ht); // 获取的是div的文本，并且含标签内容
// 获取元素的内容，不含html的标签
var te = div.text();
// 如果是单标签，获取的是文本框实时输入的值
var val = $("#bu1").val();
console.log(val);
/*************设置元素的内容和值***************/
// 会有覆盖现象，能识别html标签
// div.html("<b>我是b标签</b>");
// 会有覆盖现象，不能识别html标签
// div.text("<span>我是span标签</span>");
// 不覆盖原有内容的方法
// div.text(div.text() + "<span>我是span标签</span>");
// 给文本框赋值
// $("#bu1").val("设置元素的内容");
// 追加元素的值
$("#bu1").val($("#bu1").val() + "123");
});
});
</script>
</head>
<body>
<input type="button" id="bu1" value="操作元素的内容">
<hr>
<div id="div1">
<span>我是span</span>
</div>
</body>
</html>
4.4 操作页面的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
#div1 {
height: 300px;
border: 3px solid red;
}
p {
border: 2px solid pink;
}
</style>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
/***********添加节点*************/
// 创建了一个新的p节点
// var p = $("<p>List Item6</p>");
// 末尾的位置追加p节点；追加子结点
// p.appendTo("#div1");
// $("#div1").append(p);
// 开头的位置添加元素 ；追加子结点
// p.prependTo("#div1");
// $("#div1").prepend(p);
// 同级添加元素,开头位置添加；添加兄弟节点
// p.insertBefore("#div1");
// $("#div1").before(p);
// 同级添加元素，末尾位置添加；添加兄弟节点
// p.insertAfter("#div1");
// $("#div1").after(p);
/***********替换指定的节点*************/
// 创建新节点
var p = $("<p><b>List Item0</b></p>");
// 替换第一个节点
// p.replaceAll("#div1 p:nth-child(1)");
// $("div p:nth-child(1)").replaceWith(p);
/***********删除指定的节点*************/
// 删除指定节点
// $("#div1").remove(); // 删除div的节点
// $("div p:nth-child(3)").remove(); // 删除div的第三个子结点
// 清空节点内容
// $("#div1").empty(); // div标签还在，但div里的内容被清空了
// 清空某一个标签
// $("div p:nth-child(2)").empty(); // 子节点的标签还在，清空的是第二个子节点的内容，
})
function insertNode() {
// 创建节点对象
var p = $('<p>' +
'照片：<input type="file" name="" id="">' +
'<input type="button" value="删除" οnclick="removeNode(this)">' +
'</p>');
$("#last").before(p);
}
function removeNode(obj) {
// 获取obj的父节点,然后把这个父节点删除
$(obj).parent().remove();
}
</script>
</head>
<body>
<div id="div1">
<p>List Item1</p>
<p>List Item2</p>
<p>List Item3</p>
<p>List Item4</p>
<p>List Item5</p>
</div>
<form action="">
<p>
用户名：<input type="text">
</p>
<p>
照片：<input type="file" name="" id="">
<input type="button" value="添加" onclick="insertNode()">
</p>
<p id="last">
<input type="button" value="提交">
<input type="button" value="清空">
</p>
</form>
</body>
</html>
5、函数
5.1 第一组函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
// 页面dom对象加载后执行，相当于onload事件
$(function() {
$("#btn1").click(function() {
// 获取第一个dom对象的value值
// var txt = $(":text").val();
// alert("第一个文本框的value=" + txt);
var txt = $(":text:first").val();
alert("第一个文本框的value=" + txt);
});
$("#btn2").click(function() {
// 给所有的文本框赋值
$(":text").val("三国演义");
});
$("#btn3").click(function() {
// 使用text()函数，读取文本内容
alert($("div").text());
});
$("#btn4").click(function() {
// 设置文本值
$("div").text("我是div");
});
$("#btn5").click(function() {
// 读取src的属性中，使用attr()
var txt = $("img").attr("src");
alert("图片的地址：" + txt);
});
$("#btn6").click(function() {
// 设置src的属性值
$("#img2").attr("src","images/logo3.png");
});
})
</script>
</head>
<body>
<input type="text" value="刘备">
<input type="text" value="关羽">
<input type="text" value="张飞">
<br>
<div>我们学习的是开发语言</div>
<div>java语言</div>
<div>OOP开发语言</div>
<br>
<p>图片</p>
<img id="img1" src="images/logo1.png">
<img id="img2" src="images/logo2.png">
<br>
<br>
<button id="btn1">读取第一个文本框的value值</button>
<button id="btn2">给文本框的设置新值</button>
<button id="btn3">获取所有div的文本</button>
<button id="btn4">设置div的文本值</button>
<button id="btn5">读取src属性值</button>
<button id="btn6">设置src属性值，换一张图片</button>
</body>
</html>
5.2 第二组函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
// 页面dom对象加载后执行，相当于onload事件
$(function() {
$("#btn1").click(function() {
// 删除dom和子dom对象
$("select").remove();
});
$("#btn2").click(function() {
// 删除子dom对象
$("select").empty();
});
$("#btn3").click(function() {
// 添加dom对象
$("#mydiv").append("<button id='newbtn'>我是新加的按钮</button>");
});
$("#btn4").click(function() {
// dom数组中第一个dom的文本值，包含html标签的内容
alert($("span").html());
});
$("#btn5").click(function() {
// 设置值，包含html标签的内容
$("span").html("Hi <b>Hello</b>");
});
$("#btn6").click(function() {
var num = [10,20,30];
// 普通循环
for (var i = 0; i < num.length; i++) {
doArrayContent(i, num[i]);
}
});
$("#btn7").click(function() {
var arr = ["bac","hello","hi"];
// each循环
$.each(arr, function(index, element) {
console.log("index是循环变量=" + index + ", element是数组元素=" + element);
})
});
$("#btn8").click(function() {
var json = {"name": "lisi","age": 20,"sex": "man"};
// each循环json数据
$.each(json, function(key,value) {
console.log("key=" + key + ", value=" + value);
})
});
$("#btn9").click(function() {
var domArray = $(":text");
$.each(domArray, function(index, domObj) {
console.log("index是循环变量=" + index + ", domObj是DOM对象的属性=" + domObj.value);
});
});
$("#btn10").click(function() {
$(":text").each(function(index, domObj) {
console.log("index是循环变量=" + index + ", domObj是DOM对象=" + domObj);
console.log("index是循环变量=" + index + ", domObj是DOM对象的属性=" + $(domObj).val());
});
});
// 定义一个函数，处理数组中的每个内容
function doArrayContent(index, element) {
console.log("index是循环变量=" + index + ", element是数组元素=" + element);
}
})
</script>
</head>
<body>
<select>
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="豹">豹</option>
</select>
<br>
<br>
<br>
<select>
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="大洋洲">大洋洲</option>
</select>
<br>
<div id="mydiv" style="background:red;">
我是div
</div>
<br>
<br>
<span>我是<b>Mysql</b>数据库</span>
<br>
<br>
<span>学习sql语言</span>
<br>
<br>
<input type="text" value="刘备"><br>
<input type="text" value="关羽"><br>
<input type="text" value="张飞"><br>
<br>
<br>
<button id="btn1">使用remove删除dom对象</button> <br>
<button id="btn2">使用empty删除子dom对象</button><br>
<button id="btn3">使用append追加dom对象</button> <br>
<button id="btn4">获取dom数组中第一个dom对象的文本（innerHTML）</button> <br>
<button id="btn5">设置文本值（innerHTML）</button> <br>
<button id="btn6">手工循环</button> <br>
<button id="btn7">each循环普通数组</button> <br>
<button id="btn8">each循环json对象</button> <br>
<button id="btn9">each循环dom数组</button> <br>
<button id="btn10">each第二种语法格式</button> <br>
</body>
</html>
6、事件
6.1 第一种事件绑定语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
// 页面dom对象加载后执行，相当于onload事件
$(function() {
// 绑定事件,如果没有外层函数，点击事件是不能触发的，因代码是从上往下执行的
$("#btn").click(function() {
alert("button单击了，执行处理函数");
});
})
</script>
</head>
<body>
<input type="button" id="btn" value="绑定事件"><br>
</body>
</html>
6.2 第二种事件绑定语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
// 页面dom对象加载后执行，相当于onload事件
$(function() {
$("#btn").on("click", function() {
// alert("button click");
$("div").append("<button id='newbtn'>我是新增的按钮</button>");
// 给新增的按钮绑定事件
$("#newbtn").on("click", function() {
alert("我是新的按钮的单击事件");
});
});
})
</script>
</head>
<body>
<div id="mydiv" style="background-color: aliceblue;">
我是mydiv
</div>
<br>
<br>
<input type="button" id="btn" value="新增dom对象,绑定事件">
</body>
</html>
6.3 事件的解绑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
/**********bind事件绑定************/
// 可以绑定多个事件，可使用json格式
$("#bu1").bind({
'click': function(){},
'dbclick': function(){},
'blur': function() {}
});
/***********one一次事件绑定**************/
$("#bu2").one('click', function() {
alert("一次事件绑定");
});
/***********trigger事件操作**************/
$("#bu3").click(function() {
$("#bu1").trigger('dbclick');
$("#bu3").trigger('click');
});
/************事件解绑*******************/
$("#bu4").click(function() {
// 事件解绑，解绑指定对象上的所有事件
$("#bu1").unbind();
// 解绑的是单击事件
$("#bu1").unbind("click");
});
// $(".bu5").click(function() {
// alert("单击事件的绑定");
// });
$(".bu5").on("click", function() {
alert("单击事件的绑定");
});
$("body").append('<input type="button" name="" id="" class="bu5" value="事件操作2">');
})
</script>
</head>
<body>
<input type="button" name="bu1" id="bu1" value="bind事件绑定">
<input type="button" name="bu2" id="bu2" value="one事件绑定">
<input type="button" name="bu3" id="bu3" value="trigger事件操作">
<input type="button" name="bu4" id="bu4" value="事件解绑">
<input type="button" name="" id="" class="bu5" value="事件操作">
</body>
</html>
6.4 案例：表格的操作
$(function() {
// 确定全选和全不选
$("#chks").click(function() {
var flag = $(this).prop("checked");
$("input[name=chk]".prop("checked",flag));
})
// 判断是否全选
$("input[name=chk]").click(function() {
var flag = true;
var chk = $("input[name=chk]");
chk.each(function() {
if(!$(this).prop("checked")) {
flag = false;
return;
}
});
$("#chks").prop("checked",flag);
});
// 反选
$("#fx").click(function() {
var chx = $("input[type=checkbox]");
chx.each(function() {
// 获得多选框的初始状态
var flag = $(this).prop("checked");
$(this).prop("checked",!flag);
})
})
// 新添加一行的操作
$("#addRow").click(function() {
// 获取table对象
var tab = $("#ta");
tab.append('<tr>' + '<td><input type="checkbox" name="chk" value="2"></td>'
+ '<td>《Java编程之道》</td>' + '<td>wollo</td>' + '<td>10</td>'+ '
<td>' +
'<input type="button" name="aa" value="修改数量"> ' +
'<input type="button" value="删除">' +
'</td>');
})
// 删除行的操作
$("#delRow").click(function() {
var del = $("input[name=chk]:checked");
if (del.length == 0) {
alert("至少选择一行")
} else {
// 执行删除操作,删除tr
del.parent().parent().remove();
}
})
// 复制行
$("#copyRow").click(function() {
var copy = $("input[name=chk]:checked");
if (copy.length == 0) {
alert("至少选择一行");
} else {
// 执行复制操作
// 复制一行 tr
var tr = copy.parent().parent().clone();
// 粘贴
$("#ta").append(tr);
}
})
})
// 修改数量的操作
function change(th) {
// th是js对象，需要转化为jquery对象,获得tr节点
var par = $(th).parent().parent();
par.children().eq(3).html("<input type='text' size='3px' οnblur='bul(this)' />");
}
function bul(th) {
var par = $(th).parent().parent();
par.children().eq(3).html(th.value);
}
// 删除的操作
function del(th) {
var par = $(th).parent().parent();
par.remove();
}
7、效果（动画）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
#div1 {
height: 300px;
background-color: pink;
}
#div2 {
height: 300px;
background-color: blueviolet;
/* display: none; */
}
</style>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#bu1").click(function() {
var div1 = $("#div1");
// 3s隐藏动画
// div1.hide(3000);
// 3s显示
// div1.show(3000);
// 让隐藏的显示，显示的隐藏
// $("div").toggle(3000);
// 滑上
// div1.slideUp(3000);
// 滑下
// div1.slideDown(3000);
// 滑上--->滑下；滑下--->滑上
// $("div").slideToggle(3000);
// 淡出
// div1.fadeOut(3000);
// 淡入
// div1.fadeIn(3000);
});
})
</script>
</head>
<body>
<input type="button" id="bu1" value="动画触发">
<hr>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
8、jQuery封装原理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 无参数的匿名函数的执行
// (function() {
// alert("我是匿名函数");
// })()
// 有参数的匿名函数的执行
(function(aa, bb) {
// 局部变量，在js中很少会定义全局变量
var a = 100;
window.vv = a; // 在运行的时候把a挂载到window对象上,外面的函数就能使用局部变量a了
alert("我是有参匿名函数" + aa + "======" + bb);
})(11,22)
function testBB() {
alert(vv);
}
// 闭包原理
function testA() {
var a = 10;
function testB() {
alert(a);
var b = 100;
return b;
}
var c = testB();
alert(c);
}
testA();
</script>
</head>
<body>
<input type="button" value="测试值的操作" onclick="testBB()">
<h1>jQuery中的封装原理</h1>
<h3>匿名函数的自调用</h3>
<h3>闭包的原理</h3>
</body>
</html>
9、Ajax
9.1 $.ajax()
9.2 $.get()
9.3 $.post()
扫一扫
5183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
