介绍
jQuery就是js函数库，使用这些函数操作dom对象，做事件、动画、ajax处理
下载地址：https://jquery.com/download/
压缩版：文件体积小适合项目线上后使用。jquery-3.6.0.min.js
未压缩：体积比较大，可读性较好，适合开发阶段使用。jquery-3.6.0.js
需要在你的项目加入jquery的文件，idea中是把jquery放在webapp目录，一般创建js目录，存放js文件的。在js代码中调用jquery中函数
<script type="text/javascript" src="xxx/jquery-3.6.0.js jquery的文件的相对路径"></script>
基础
<!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">
<title>Document</title>
</head>
<script>
function fun1(){
var obj=$("txt1")
alert (obj.value);
}
function $(id){
var obj=document.getElementById(id);
return obj;
}
</script>
<body>
<input type="text" name="mytext" id="txt1" value="我是本文框">
<input type="text" id="txt2" value="我是文本框2"><br>
<input type="button" value="单击" onclick="fun1()" >
</body>
</html>
jq
<!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">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script>
$(function () {
alert("简单的方式使用ready")
})
</script>
</head>
<body>
</body>
</html>
dom对象转为jquery对象
语法：$(dom对象)得到的是一个jQuery对象，可以调用jQuery中提供的函数
<!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">
<title>dom对象转为jquery对象</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script >
function btnClick(){
var obj =document.getElementById("btn");
var $jobj=$(obj);
alert($jobj.val());
}
</script>
</head>
<body>
<input type="button" value="我是按钮" id="btn" onclick="btnClick()">
</body>
</html>
jquery转为dom对象
语法：jQuery对象是一个数组，数组成员是dom对象。使用[下标]或get(下标)
<!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">
<title>jquery转为dom对象</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script>
function btnClick(){
var obj=$("#txt1");
alert("array length ="+obj.length);
var dom=obj[0];
var num=dom.value;
dom.value=num*num;
}
</script>
</head>
<body>
<input type="button" value="计算评分" onclick="btnClick()">
<input type="text" name="" id="txt1" >
</body>
</html>
选择器
选择器就是一个字符串，是一个定位dom对象的字符串。使用这个字符串作为条件定位dom对象。可以使用id，class样式名称，标签名称等作为选择器使用，定位dom对象
基础选择器
使用dom对象的id，class名称，标签名称等作为条件定位dom对象
1.使用dom对象的id作为条件
语法：$ ("#id")
2.class选择器，使用对象的class名称定位dom对象
语法：$ (".class名称")
3.标签选择器，使用标签名称作为条件定位dom对象
语法：$ (“标签名称”)
4.所有选择器
语法：$ ("*")
5.组合选择器
语法：$ ("#id,.class,标签名称")
组合选择器使用id或class名称或者标签名称定位dom对象，id，class，标签名称可以任意组合
<!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">
<title>基础选择器</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<style type="text/css">
div{
background: greenyellow;
width: 200px;
height: 200px;
}
.two{
font-size: 20pt;
color: aqua;
}
</style>
<script>
function fun1(){
var obj=$("#one");
obj.css("background","red");
}
function fun2(){
var obj=$(".two");
obj.css("background","blue");
}
function fun3(){
var obj=$("div");
obj.css("background","yellow");
}
function fun4(){
var obj =$("*");
obj.css("width","400px");
}
function fun5(){
var obj=$("#one,span");
obj.css("background","blue")
}
</script>
</head>
<body>
<div id="one">我是id=one的div</div>
<br>
<div class="two">我是class=two的div</div>
<br>
<div class="two">没有id</div>
<br>
<span>我是span</span>
<br>
<br>
<input type="button" value="获取id=one的dom对象" onclick="fun1()">
<input type="button" value="获取class=two的dom对象" onclick="fun2()">
<input type="button" value="获取标签div的dom对象" onclick="fun3()">
<input type="button" value="获取所以的dom对象" onclick="fun4()">
<input type="button" value="组合选择dom对象" onclick="fun5()">
</body>
</html>
表单选择器
表单选择器使用dom对象的type属性值定位dom对象，和form标签无关
语法： $ (":type属性值")
<!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">
<title>表单选择器</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script>
function fun1() {
var obj=$(":text");
alert(obj.val());
}
function fun2(){
var obj=$(":radio")
for(var i=0;i<obj.length;i++){
var dom=obj[i];
alert("dom的属性="+dom.value+",使用jQuery的函数="+$(dom).val());
}
}
function fun3(){
var obj=$(":checkbox");
for(var i=0;i<obj.length;i++){
alert( $(obj[i]).val() )
}
}
</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>
<input type="button" value="读取文本框的value的值"onclick=fun1()>
<input type="button" value="读取radio的value的值"onclick=fun2()>
<input type="button" value="读取checkbox的value的值"onclick=fun3()>
</body>
</html>
过滤器
过滤器是一个字符串，用了筛选dom对象的，过滤器是和选择器一起使用的。在选择了dom对象后，在进行过滤筛选
基本过滤器
使用dom对象在数组中的位置，作为过滤条件的
1.选择数组中第一个dom成员
语法：$ (“选择器:first”)
2.选择数组中最后一个成员
语法：$ (“选择器:last”)
3.选择等于指定下标的dom成员
语法：$ (“选择器:eq(下标)”)
4.选择大于某个下标的所有成员
语法：$ (“选择器gt(下标)”)
2.选择小于某个下标的所有成员
语法：$ (“选择器lt(下标)”)
<!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">
<title>过滤器</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<style>
div{
background-color: aquamarine;
}
</style>
<script>
$(function(){
$("#btn").click(function(){
alert("==button单击了，执行处理函数==")
})
$("#btn1").click(function(){
var obj=$("div:first");
obj.css("background","blue");
})
$("#btn2").click(function(){
$("div:last").css("background","red");
})
$("#btn3").click(function(){
$("div:eq(3)").css("background","orange");
})
$("#btn4").click(function(){
$("div:lt(3)").css("background","green");
})
$("#btn5").click(function(){
$("div:gt(3)").css("background","pink");
})
})
</script>
</head>
<body>
<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div>
我是第三个div-2
<div class="son">我是div-3</div>
<div class="son">我是div-4</div>
</div>
<div>我是div-5</div>
<br>
<span>我是span</span>
<br>
<p>功能按钮</p>
<input type="button" id="btn" value="绑定事件" >
<input type="button" id="btn1" value="选择第一个div" >
<input type="button" id="btn2" value="选择最后一个div">
<input type="button" id="btn3" value="选择索引等于3的div">
<input type="button" id="btn4" value="选择索引小于3的div">
<input type="button" id="btn5" value="选择索引大于3的div">
</body>
</html>
表单过滤器
根据对象的状态作为条件，筛选dom对象
1.获取可用的文本框
语法：$ (":text:enabled")
2.获取不可用的文本框
语法：$ (":text:disabled")
3.获取选中的复选框
语法：$ (":checkbox:checked")
4.获取选中下拉列表框
语法：$ (“选择器>option:selected”)
<!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">
<title>过滤器表单</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#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+",jquery"+$(obj[i]).val());
}
})
$("#btn3").click(function(){
var obj=$("#lang>option:selected")
console.log(obj.val());
})
})
</script>
</head>
<body>
<p>文本框</p>
<input type="text" id="text1" value="text1"><br>
<input type="text" id="text2" value="text2" disabled><br>
<input type="text" id="text3" value="text3"><br>
<input type="text" id="text4" value="text4" disabled><br>
<br>
<p>复选框</p>
<input type="checkbox" value="游泳">游泳<br>
<input type="checkbox" value="健身" checked>健身<br>
<input type="checkbox" value="电子游戏" checked>电子游戏<br>
<br>
<p>下拉框</p>
<select id="lang">
<option value="java">java语言</option>
<option value="go"selected>go语言</option>
<option value="sql">SQL语言</option>
</select>
<p>功能按钮</p>
<button id="btn1">所有可用的text设置hello</button>
<button id="btn2">显示被选中的复选框的值</button>
<button id="btn3">显示下拉列表选中的值</button>
</body>
</html>
函数
第一组函数
1.val()：操作dom对象的value值
val()：没有参数，获取dom数组中第一个dom对象的value值
val(参数)：有参数，给dom数组中所以dom对象的value属性赋值
2.text()：操作标签的本文内容，标签开始和结束之间的内容
text()：没有参数，把dom数组中所以dom对象的文本内容链接起来。形成一个字符串，并返回这个字符串
text(参数)：给dom数组中的所以成员统一赋予新的本文
3.attr()：操作value，文本以外的属性时
attr(“属性名”)：获取dom数组中第一个dom成员的此属性值
attr(“属性名”,“属性值”)：给dom数组中所以dom成员此属性赋值
<!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">
<title>函数</title>
<style>
div{
background-color: aqua;
}
img{
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script>
$(function () {
$("#btn1").click(function(){
var txt=$(":text").val();
alert("第一个文本框的value"+txt);
})
$("#btn2").click(function(){
$(":text").val("三国演义");
})
$("#btn3").click(function(){
alert($("div").text());
})
$("#btn4").click(function () {
$("div").text("我是div");
})
$("#btn5").click(function(){
var txt=$("img").attr("src");
alert("图片的地址："+txt);
})
$("#btn6").click(function(){
$("#img1").attr("src","img/02.jpg");
})
})
</script>
</head>
<body>
<p>文本框</p>
<input type="text" value="刘备"><br>
<input type="text" value="关羽" ><br>
<input type="text" value="张飞"><br>
<p>文本数据text</p>
<div>我们学习的是开发语言</div>
<div>java语言</div>
<div>是面向对象的oop</div>
<p>图片</p>
<img src="img/01.png" id="img1" >
<p>功能按钮</p>
<button id="btn1">获取第一个文本框的值</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>
第二组函数
1.remove()
删除选择的dom对象和他的子对象
语法：$ (“选择器”).remove()
2.empty()
删除dom对象的子对象
语法：$ (“选择器”).empty()
3.append()
给dom对象在他的后面增加新的dom对象
语法：$ (“选择器”).append(子dom对象)
4.html()
html():获取dom数组中第一个dom对象的文本值(html()返回结果相当于innerHTML)
html(参数)：给dom数组中所有成员设置新的文本内容。(html()返回结果相当于innerHTML)
5.each() 其中2)针对dom对象
each是循环函数，可以循环数组，json，dom对象
1)$ .each(要循环的内容，function(index,element){处理函数})
要循环的内容：可以是数据，json对象，dom对象数组。
function：循环的处理函数，每个成员都会执行函数一次。
index：是循环变量的值，名称自定义
element：和index对应的成员，element名称是自定义的
例如
doArrayContent：function(index,element){处理函数})
2)$(“选择器”).each(function(){处理函数})
可以对jquery对象进行循环处理，jquery对象就是dom数组
<!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">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script>
$(function () {
$("#btn1").click(function(){
$("select").remove();
})
$("#btn2").click(function(){
$("select").empty();
})
$("#btn3").click(function (){
$("#mydiv").append("<button id='newbtn'>我是新加的按钮</button>");
$("#mydiv").append("<table border='1'><tr><td>hello</td><td>111</td></tr><tr><td>hello</td><td>111</td></tr></table>")
})
$("#btn4").click(function(){
alert($("span").html());
})
$("#btn5").click(function (){
$("span").html("我是<b>新的内容<b/>");
})
$("#btn6").click(function (){
var num=[10,20,30];
for(i=0;i<num.length;i++){
doArrayContent(i,num[i])
}
})
$("#btn7").click(function (){
var arr =["abc","hello","jquery"];
$.each(arr,function(index,element){
console.log("循环变量i="+index+",数组成员="+element);
})
})
$("#btn8").click(function(){
var json={"name":"李四","age":80,"sex":"男"};
$.each(json,function(i,n){
console.log("i是json的key="+i+",n是json的value="+n);
})
})
$("#btn9").click(function (){
var domArray=$(":text");
$.each(domArray,function(i,n){
console.log("i是循环变量="+i+",n是dom对象="+n)
console.log("i是循环变量="+i+",n是dom对象="+n.value)
})
})
$("#btn10").click(function(){
$(":text").each(function(i, n){
console.log("i是循环变量="+i+",n是dom对象="+n.value+"jquery对象="+$(n).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>
<select>
<option value="美洲">美洲</option>
<option value="欧洲">欧洲</option>
<option value="亚洲">亚洲</option>
</select>
<br>
<div id="mydiv" style="background-color: aquamarine;">我是div</div>
<br>
<span>我是mysql<b>数据库</b></span><br>
<span>我是jdbc</span>
<br>
<br>
<input type="text" value="刘备">
<input type="text" value="关羽">
<input type="text" value="张飞">
<br>
<br>
<input type="button" id="btn1" value="使用remove删除dom对象">
<input type="button" id="btn2" value="使用empty删除子dom对象">
<input type="button" id="btn3" value="使用append追加dom对象">
<input type="button" id="btn4" value="获取dom数组中第一个dom对象的文本(innerHTML)">
<input type="button" id="btn5" value="设置文本值">
<input type="button" id="btn6" value="自己写循环数组">
<input type="button" id="btn7" value="each循环普通数组">
<input type="button" id="btn8" value="each循环json对象">
<input type="button" id="btn10" value="each第二种语法格式">
</body>
</html>
事件
jquery可以给dom对象绑定事件，在程序执行期间动态的处理事件
第一种事件绑定语法
/第一种事件绑定语法
语法:$(“选择器”).事件名称(事件的处理函数)
$(“选择器”)：选择0或多个dom对象，给他们绑定事件
事件名称：就是js中的去掉on的部分例如单击事件onclick，这里事件名称click
<input type="button" id="btn" value="绑定事件">
$("#btn").click(function(){单击的处理代码})
$(":button").click(function(){单击的处理代码})
<script>
$(function(){
$("#btn").click(function(){
alert("==button单击了，执行处理函数==")
})
})
</script>
</head>
<body>
<input type="button" id="btn" value="绑定事件" >
</body>
</html>
第二种事件绑定方式，on
语法：$(“选择器”).on(事件名称，function（）{事件处理函数})
事件：就是js中去掉on的部分
function：事件处理函数
<body>
<input type="button" id="btn1" value="绑定事件">
</body>
<script>
$("#btn").on("click",function(){alert("按钮单击了")})
</script>
<!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">
<title>事件</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script>
$(function (){
$("#btn1").click(function (){
alert("==button单击了，执行处理函数==")
})
$("#btn2").on("click",function(){alert("按钮单击了")})
$("#btn3").on("click",function(){
$("#mydiv").append("<button id='newbtn'>我是新增加按钮</button>")
$("#newbtn").on("click",function(){
alert("我是新的按钮的单击事件")
})
})
})
</script>
</head>
<body>
<input type="button" id="btn1" value="绑定事件">
<input type="button" id="btn2" value="绑定事件">
<div id="mydiv" style="background-color: aquamarine;">
我是一个div
</div>
<br>
<input type="button" id="btn3" value="新增dom对象，给dom对象绑定事件">
</body>
</html>
AJAX
$.ajax() 核心的函数
语法：$ajax.({json格式的参数})
json格式的参数：key是定义好的，需要开发人员给key赋值。这些key是用来表示ajax请求必须的参数
例如，请求的url地址，是不是异步请求，请求的方式等等。
$.ajax(
{
url:"queryProvinceServlet",
type:"get",
data:{"name":"李四","age":20},
dataType:json,
success:function(resp){发开人员获取数据，更新dom对象},
error:function(){alert("请求错误")}
}
)
url：服务器的地址，例如某个servlet的访问地址。queryProvinceServlet
type：表示请求的方式，get，post，默认是get。这个值不用区分大小写
data：表示提交的请求参数。可以是string，数组，json类型的。推荐使用json格式。
例如：data:{“name”:“李四”，“age”:20}
jquery在发送请求时，会把json中的key作为请求的参数使用，key对应的值作为参数数据。
转为的结果：http://localhost:8080/myweb/queryProvinceServlet?name=李四&age=20
dataType：数据格式，可以是html，text，xml，json等等。表示发起请求后，希望服务器端返回的数据格式，jquery可以尝试使用对应格式处理返回的数据，比如你指定了dataType:json，表示希望服务器返回的是json格式数据。然后jquery把json数据转为json对象。服务器代码可以获取到dataType的内容。 默认text
success：函数function。当服务器端返回了数据，jquery处理完数据后，执行这个函数。等同于异步对象的readyState==4$$status=200的情况
例如：success:function(resp){发开人员处理服务器返回的数据}
resp是自定义形参，相当于resp=xhr.responseText
error:function(),当请求错误时，执行这个函数。
contentType：表示请求的参数数据格式。例如：application/json，发送数据到服务器时所使用的内容类型，这个可以不写。
async：是一个boolean表示请求时同步的还是异步的。true是异步的，默认是true：false同步的。
$.get()
$ .get()这个函数就是执行get请求方式的ajax
语法：$ $.get(url,请求参数,success函数,dataType)
例如
$.get("queryName",{"proid":1},function(resp){获取省份名称},"text")
$.post()
$ .post()执行post请求的ajax。
语法：$ $.post(url,请求参数,success函数,dataType)
例如
$.post("queryName",{"proid":1},function(resp){获取省份名称},"text")
|