jQuery
jQuery基本介绍
- jQuery是一款主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTML DOM操作，做事件、动画、ajax处理等。
- 官方地址：https://jquery.com/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pqFk2EHh-1625537853117)(C:\Users\naizhi\AppData\Roaming\Typora\typora-user-images\image-20210624190540120.png)]
jQuery下载
- 下载地址：https://jquery.com/download/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rUImK98h-1625537853118)(C:\Users\naizhi\AppData\Roaming\Typora\typora-user-images\image-20210624190808786.png)]
- 压缩版本：文件体积比较小，适合项目上线后使用。 jquery-3.6.0.min.js
- 未压缩：体积比较大，可读性比较好，适合开发阶段使用。 jquery-3.6.0.js
- 可以通过把鼠标放在下载超链接看右下角的显示判断是否压缩
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qs0B9Q1P-1625537853120)(C:\Users\naizhi\AppData\Roaming\Typora\typora-user-images\image-20210624191411197.png)]
使用Jquery
-
使用步骤：
- 需要在你的项目中加入jquery的文件，idea中是把jquery放在webapp目录。一般是创建一个js目录，存放js文件的。对于hbuilder工具，放在项目的js目录中就可以了。
- 创建一个html文件或者jsp文件都可以，在文件中使用jQuery。
<script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"></script>- 在js代码中，调用jquery中函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个jquery代码</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
/**
* $ ：jquery中的函数名
* document：是参数
* $(document)：把js中的document对象变成jquery可以使用的对象。
* 然后调用ready()的函数。这个ready()是jquery中的函数。
* ready()的执行时间在页面dom对象加载后执行的。
* 相当于js中onload事件。
* ready(函数)：表示在页面对象加载后执行这个函数。
*/
$(document).ready(function () {
alert("Hello,jquery")
});
$(document).ready(myinit());
function myinit() {
alert("====相当于οnlοad==")
}
//jquery提供了简单方式，使用ready()
//$(参数是一个函数)
$(function () {
alert("简单的方式使用ready")
});
</script>
</head>
<body>
</body>
</html>
对象的分类
-
在一个文件中同时存在两种对象：dom对象和jquery对象
-
dom对象：使用js的代码获取，创建的对象。html中的对象都是dom对象
-
jquery对象：使用jquery语法获取的对象。
-
-
为什么要使用dom对象，以及jquery对象？
目的是要dom对象的函数或者属性，以及要使用jquery中提供的函数或者属性。
要dom中的内容就需要使用dom对象，要使用jquery函数库中的函数需要使用jquery对象。
- dom对象和jquery对象可以相互转换的。
dom对象转为jquery对象
- 语法：$(dom对象)得到的是一个jquery对象，可以调用jquery中提供的函数。
<input type="text" id="t1">
//通过js的函数，获得dom对象
var dom = document.getElementById("t1");
//把dom转为jquery
var jqueryObj = $(dom);
//调用jquery中的函数
jqueryObj.val();//获取dom对象的value属性的值
//注意：为了区分dom对象和jquery对象，可以在jquery对象变量名上，加一个$，例如 $obj
jquery对象转为dom对象
- 语法：jquery对象是一个数组，数组成员是dom对象，使用[下标]或get(下标)。
<input type="text" id="txt1">
//使用jquery的方式表示这个dom对象
//$("#txt1")：获取id为txt1的dom对象
var obj = $("#txt1");//obj是一个jquery对象，是一个包含了一个成员的dom数组。
//obj[0]就是dom对象
var dom =obj[0];//或者obj.get(0)
//使用dom对象的函数或者属性
alert(dom.value);
选择器
- 什么是选择器？
选择器就是一个字符串，是一个定位dom对象的字符串。使用这个字符串作为条件定位dom对象。可以使用id、class、标签名称等作为选择器使用，定位dom对象。
基本选择器
- 使用dom对象的id、class名称、标签名称等作为条件定位dom对象
-
使用dom对象的id作为条件
- 语法：$("#id");
-
class选择器：使用对象的class名称定位dom对象
- 语法：$(".class名称");
-
标签选择器：使用标签名称作为条件定位dom对象
- 语法：$(“标签名称”);
-
所有选择器：
- 语法：$("*");
-
组合选择器：
- 语法：$("#id,.class,标签名称");
- 组合选择器使用id或者class名称或者标签名称定位dom对象，id、class、标签名称可以任意组合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style>
div{
background: gray;
width: 100px;
height:100px;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
function fun1() {
//id选择器
var obj = $("#one");
obj.css("background","red")
}
function fun2() {
//class选择器(样式选择器)
var obj = $(".two");
//jquery对象是数组，在使用jquery函数时，把数组每个成员都应用css函数
obj.css("background","pink")
}
function fun3() {
//标签名称选择器
var obj = $("div");
obj.css("background","yellow")
}
function fun4() {
//所有选择器
var obj = $("*");
obj.css("background","orange")
}
function fun5() {
//组合选择器
var obj = $("#one,span");
obj.css("background","blue")
}
</script>
</head>
<body>
<div id="one">我是id为one的div</div>
<div class="two">我是class为two的div</div>
<div >我是普通的div</div>
<span>我是一行文字</span><br>
<input type="button" value="获取id=one的dom对象" onclick="fun1()">
<input type="button" value="获取class=two" 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属性值”)
<input type="text" >
<input type="text" >
//使用表单选择器:$(":text");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<style>
div{
background: gray;
width: 100px;
height:100px;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
function fun1() {
//使用表单选择器，获取dom对象
var obj = $(":text");
alert(obj.val());
}
function fun2() {
var obj = $(":radio");
for (var i =0;i<obj.length;i++){
var dom = obj[i];//dom是dom对象
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="我是一个文本框"><br>
<p>单选框</p>
<input type="radio" value="man">男
<input type="radio" value="woman">女<br>
<p>多选框</p>
<input type="checkbox" value="bike">骑行
<input type="checkbox" value="football">足球
<input type="checkbox" value="music">音乐
<br>
<input type="button" value="读取文本框的value值" onclick="fun1()">
<input type="button" value="读取单选框的value值" onclick="fun2()">
<input type="button" value="读取多选框的value值" onclick="fun3()">
</body>
</html>
过滤器
- 过滤器是一个字符串，用来筛选dom对象，过滤器是和选择器一起使用的。在选择了dom对象后，再进行过滤筛选。
基本过滤器
- 使用dom对象在数组中的位置，作为过滤条件的
- 选择数组中第一个dom成员
- 语法：$(“选择器:first”);
- 选择数组中最后一个成员
- 语法：$(“选择器:last”);
- 选择等于指定下标的dom成员
- 语法：$(“选择器:eq(下标)”);
- 选择大于某个下标的所有成员
- 语法：$(“选择器:gt(下标)”);
- 选择小于某个下标的所有成员
- 语法：$(“选择器:lt(下标)”);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本过滤器</title>
<style>
div{
background: gray;
width: 100px;
height:100px;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function () {
//btn1事件
$("#btn1").click(function () {
//选择第一个div
var obj = $("div:first");
obj.css("background","pink");
});
//btn2事件
$("#btn2").click(function () {
//选择最后一个div
/*var obj = $("div:last");
obj.css("background","pink");*/
$("div:last").css("background","blue");
});
//btn3事件
$("#btn3").click(function () {
//选择指定下标的div
$("div:eq(3)").css("background","red");
});
//btn4
$("#btn4").click(function () {
//选择大于指定下标div
$("div:gt(3)").css("background","orange");
});
//btn4
$("#btn5").click(function () {
//选择小于指定下标div
$("div:lt(3)").css("background","green");
});
});
</script>
</head>
<body>
<div id="one">div0</div>
<div id="two">div1</div>
<div>
div2
<div>div3</div>
<div>div4</div>
</div>
<div>div5</div>
<input type="button" id="but1" value="获取数组中第一个dom对象" >
<input type="button" id="but2" value="获取数组中最后一个dom对象" >
<input type="button" id="but3" value="选择下标等于3的div" >
<input type="button" id="but4" value="选择下标大于3的div" >
<input type="button" id="but5" value="选择下标小于3的div" >
</body>
</html>
表单过滤器
- 根据对象的状态作为条件，筛选dom对象
- 获取可用的文本框
- 语法：$(":text:enabled")
- 获取不可用的文本框
- 语法：$(":text:disabled")
- 获取选中的复选框
- 语法：$(":checkbox:checked")
- 获取选中的下拉列表框
- 语法：$(":选择器>option:selected")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本过滤器</title>
<style>
div{
background: gray;
width: 100px;
height:100px;
}
</style>
<script src="js/jquery-1.8.3.min.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++){
alert(obj[i].value);
}
});
$("#btn3").click(function () {
//选中的下拉列表框
var obj = $("#lang>option:selected");
alert(obj.val());
})
});
</script>
</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>
<input type="checkbox" value="游泳">游泳 <br>
<input type="checkbox" value="健身" checked="true">健身 <br>
<input type="checkbox" value="电子游戏" checked>电子游戏 <br>
<select id="lang">
<option value="java">java语言</option>
<option value="go" selected>go语言</option>
<option value="python">python语言</option>
</select><br>
<button id="btn1">给所有可用的文本框设置value为hello</button>
<button id="btn2">显示所有选中的复选框值</button>
<button id="btn3">显示选中的下拉列表框</button>
</body>
</html>
函数
常用函数1
-
val()：操作dom对象的value值
- val():没有参数，获取dom数组中第一个dom对象的value值
- val(参数):有参数，给dom数组中所有dom对象的value属性赋值
-
text()：操作标签的文本内容，标签开始和结束之间的内容
- text():没有参数，把dom数组中所有dom对象的文本内容链接起来，形成一个字符串，并返回这个字符串
- text(参数):有参数，给dom数组中的所有成员统一赋予新的文本
-
attr()：操作value、文本以外的属性
- attr(“属性名”)：获取dom数组中第一个dom成员的此属性值
- attr(“属性名”,“属性值”)：给dom数组中所有dom成员此属性赋值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常用函数1</title> <script src="js/jquery-1.8.3.min.js"></script> <script> $(function () { $("#btn1").click(function () { //获取第一个dom对象的value值 //var obj = $(":text").val(); var obj = $(":text:first").val(); alert(obj); }); $("#btn2").click(function () { //给所有的文本框赋值 $(":text").val("诸葛亮"); }); $("#btn3").click(function () { //所有text()函数，读取文本内容 alert($("div").text()); }); $("#btn4").click(function () { //所有text()函数，设置文本内容 $("div").text("我是div"); }); $("#btn5").click(function () { //读取src的属性值,使用attr()函数 alert($("img").attr("src")) }); $("#btn6").click(function () { //设置新的图片 $("img").attr("src","imgs/a2.jpg"); }); }); </script></head><body> <input type="text" value="刘备"><br> <input type="text" value="关羽"><br> <input type="text" value="张飞"><br> <div>我们学习的是开发语言</div> <div>是Java语言</div> <div>是面向对象的</div> <img src="imgs/a1.jpg" id="img1"> <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>
常用函数2
- remove()：删除选择的dom对象和它的子对象
- 语法：$(“选择器”).remove()
- empty()：删除dom对象的子对象
- 语法:$(“选择器”).empty()
- append()：给dom对象在他的后面增加新的dom对象
- 语法:$(“选择器”).append(子dom对象)
- html()
- html()：获取dom数组中第一个dom对象的文本值(html()返回结果相当于innerHTML)
- html(参数):给dom数组中所有成员设置新的文本内容(html()返回结果相当于innerHTML)
- each()：是循环函数，可以循环数组，json，dom对象数组
- 语法：$.each(要循环的内容，function(index,element){处理函数})
- 要循环的内容：可以是数组，json对象，dom对象数组
- function：循环的处理函数，每个成员都会执行一次
- index：是循环变量的值，名称自定义
- element：是和index对应的成员，element名称是自定义
- 语法：$(“选择器”).each(要循环的内容，function(index,element){处理函数})
- 可以对jquery对象进行循环处理，jquery对象就是dom数组
- 语法：$.each(要循环的内容，function(index,element){处理函数})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用函数2</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(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("<b>我是新的内容</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 =['java','mysql','jquery'];
$.each(arr,function (index, element) {
console.log("循环变量="+index+",数组成员="+element);
})
});
$("#btn8").click(function () {
var json={"name":"李四","age":"18","sex":"男"};
//key循环json数组
$.each(json,function (i, n) {
//i是key，n是value
console.log("i是json的key="+i+",n是json的value="+n);
})
});
$("#btn9").click(function () {
var domArray = $(":text");
$.each(domArray,function (i, n) {
//i是循环变量，n是dom对象
console.log("i是循环变量="+i+",n是dom对象="+n.value);
})
});
$("#btn10").click(function () {
$(":text").each(function (i, n) {
console.log("i是循环变量="+i+",n是dom对象="+$(n).val());
})
});
});
//定义一个函数，处理数组中的每个内容
function doArrayContent(index,element) {
console.log("数组的循环变量是"+index+"数组成员为"+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: red">
我是一个div
</div>
<span>我是<b>mysql</b>数据库</span>
<br>
<span>我要学习sql语言</span>
<br>
<input type="text" value="孙悟空"><br>
<input type="text" value="猪八戒"><br>
<input type="text" value="沙悟净"><br>
<input type="text" value="唐三藏"><br>
<button id="btn1">使用remove删除dom对象</button>
<button id="btn2">使用empty删除子dom对象</button>
<button id="btn3">使用append追加dom对象</button>
<button id="btn4">获取dom数组中第一个dom对象的文本(innerHTML)</button>
<button id="btn5">设置dom文本值(innerHTML)</button>
<button id="btn6">手工循环数组</button>
<button id="btn7">each循环普通数组</button>
<button id="btn8">each循环json对象</button>
<button id="btn9">each循环dom数组</button>
<button id="btn10">each第二种语法格式</button>
</body>
</html>
事件
- jquery可以给dom对象绑定事件，在程序执行期间动态的处理事件
第一种事件绑定方式
- 语法：$(“选择器”).事件名称(事件的处理函数)
- $(“选择器”)：选择0或多个dom对象，给他们绑定事件
- 事件名称：就是js中去掉on的部分。例如：单价事件omclick，这里的事件名称就是click
- 事件的处理函数：函数定义，当事件发生时，会执行这个函数。
//例如<input type="button" id="but" value="绑定事件" >//绑定事件$("#btn").click(function () { //单机的处理代码});
<script>$(function () { //页面dom对象加载后执行，相当于onload事件 //绑定事件 $("#btn").click(function () { alert("单机过按钮了，执行处理函数") });});</script><body> <input type="button" id="btn" value="绑定事件" ></body>
第二种事件绑定方式(on)
- 语法：$(“选择器”).on(事件名称，function(){事件处理函数})
- 事件：就是js中去掉on的部分
- funcction：事件处理函数
<body> <input type="button" id="btn" value="绑定事件" ></body> <script> $("#btn").on("click",function () { alert("单击按钮了"); })</script>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>on绑定事件</title> <script src="js/jquery-1.8.3.min.js"></script> <script> $(function () { $("#btn").on("click",function () { $("#myDiv").append("<button id='newbtn'>我是新增的按钮</button>"); //给dom对象button绑定事件 $("#newbtn").on("click",function () { alert("我是新的按钮的单击事件"); }) }) }); </script></head><body> <div id="myDiv" style="background-color: pink"> 我是div </div> <br> <input type="button" id="btn" value="新增dom对象，绑定事件" ></body></html>
Ajax
- 使用jquery提供的函数实现ajax请求的处理。代替直接使用XMLHttpRequest，但是jquery实际还是使用的异步对象。
$.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格式
- 例如：date:{“name”:“张三”,“age”:20}
- jquery在发送请求时，会把json中的key作为请求的参数使用，key对应的值作为参数数据
- 转为的结果：http://localhost:8080/myweb/queryProvinceServlet?name=李四&age=20
- dataType：数据格式，可以是html、xml、text、json等等。表示发起请求后，希望服务器端返回的数据格式。jquery可以尝试使用对应格式处理返回的数据。比如你指定了dataType：json，表示希望服务器返回的是json格式数据。然后jquery把json数据转为json对象。服务器代码可以获取到dataType的内容
- 例如：请求中dataType:“json”,jquery发起请求后，在请求头中显示：Accept:application/json,text/javascript,/;q=0.01
- 如果请求是dataType:“text”，请求中显示：Accept:text/plain,;q=0.01
- success：函数function。当服务器端返回了数据，jquery处理完数据后，执行这个函数。等同于异步对象的readyState==4 &&status ==200的情况
- 例如：success:function(resp){开发人员处理服务器返回的数据}
- resp是自定义形参，相当于：resp=xhr.responseText
- error：function()，当请求错误时，执行这个函数。
- contentType：表示请求的参数数据格式。例如：application/json，这个内容可以不写。
- async：是一个boolean表示请求是同步的还是异步的。true是异步的，false是同步的。默认是true
$.ajax({
url:"LoginServlet",
type:"get",
data:"name="+$("#name").val(),
dataType:"text",
success:function (resp) {
//resp是服务器返回的数据，这个数据先通过jquery处理的
$("#namespan").val(resp);
}
});
$.get()
- $.get()这个函数就是执行get请求方式的ajax
- 语法：$.get(url,请求参数,success函数,dataType)
- 例如：
$.get("queryName",{"proid":1},function(resp){获取省份名称},"text")
$.get("LoginServlet",
"name="+$("#name").val(),
function (resp) {$("#namespan").val(resp)},
"text");
$.post()
- $.post()执行post请求的ajax
- 语法：$.post(url,请求参数,success函数,dataType)
- 例如：
$.p("queryName",{"proid":1},function(resp){获取省份名称},"text")
$.post("LoginServlet",
"name="+$("#name").val(),
function (resp) {$("#namespan").val(resp)},
"text");
级联查询
- 思路：有两个数据库的查询
- 查询所有的省份名称和id
- 根据提交的省份id，查询city表，得到城市列表
- 有两个servlet介绍请求，一个查询所有的省份；一个接收省份id的参数，查询省份对应的城市列表
- 数据格式使用json
- 发起请求使用 . a j a x ， .ajax， .ajax，.get，$.post
- 事件：onChange()
- 实现步骤：
- 数据表province(获取全部的id和name列的值)，city表根据province的值，得到id，name列
- 创建web应用，加入mysql驱动的jar包和jackson的jar包
- 创建实体类(pojo)：Province,City
- 创建Dao类，QueryDao类，有两个方法
- 创建servlet，两个servlet，一个查询所有的省份名称，一个查询城市列表
- 创建jsp，发起两个ajax的请求
3806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
