开始时间:2021-09-07
jQuery
jQuery是js库,
库:相当于java的工具类,库是存放东西的,jQuery是存放js代码的地方,放的用js代码写的function
来看一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
//这里需要另起一个script才行
<script type="text/javascript">
/*
$(document)
1.$( document) ,$是jQuery中的函数名称, document是函数的参数,作用是 document对象变成jQuery函数库可以使用的对象。
2. ready:是jQuery中的函数,是准备的意思,当页面的dom对象加载成功后会执行ready函数的内容。 ready相当于js中的onLoad事件
3. function()自定义的表示onLoad后要执行的功能。
*/
$(document).ready(function () {
alert("This is jQuery");
})
$(function (){
alert("这是简写方式")
})
</script>
<body>
</body>
</html>
$(document)
1.$( document) ,$是jQuery中的函数名称, document是函数的参数,作用是 document对象变成jQuery函数库可以使用的对象。
2. ready:是jQuery中的函数,是准备的意思,当页面的dom对象加载成功后会执行ready函数的内容。 ready相当于js中的onLoad事件
3. function()自定义的表示onLoad后要执行的功能。
要使用jQuery,得先引入jQuery文件
jQuery对象和DOM对象
dom对象,使用javascript的语法创建的对象叫做dom对象,也就是js对象。
var obj=document.getElementById( "txt1");
obj是dom对象,也叫做js对象
jquery对象:使用jquery语法表示对象叫做jquery对象,
注意: jquery表示的对象都是数组。
例如
var jobj - $("#txt1")
jobj就是使用jquery语法表示的对象。
也就是jquery对象。它是一个数组。
现在数组中就一个值
dom对象可以和jquery对象相互的转换。
进行dom和jquery的转换:目的是要使用对象的方法,或者方法。
DOM转jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick() {
var obj = document.getElementById("btn");
alert("使用dom对象的属性:" + obj.value);
//dom转为jQuery
var $jobj = $(obj);
//必须要用jQuery库,不然用不了其属性
alert("使用jQuery对象的属性:" + $jobj.val())
}
</script>
<body>
<input type="button" value="按钮" id="btn" onclick="btnClick()">
</body>
</html>
#id的使用参考博客
jQuery转DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript " src="jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick() {
//使用jQuery获取对象
//#是id选择器
//得到的都是一个数组,通过下标来获取对象
var obj = $("#txt")[0];
//var obj=$("#txt").get(0);两者等价
alert("使用DOM对象的属性:" + obj.value)
var num = obj.value;
obj.value = num * num;
}
</script>
<body>
<input type="button" value="计算平方" id="btn" onclick="btnClick()"/><br/>
<input type="text" value="整数" id="txt"/>
</body>
</html>
选择器
选择器:就是一个字符串,用来定位dom对象的。定位了dom对象,就可以通过jquery的函数操作dom常用的选择器:
基本选择器的使用
选择器类型 | 语法 |
---|---|
id选择器 | $(’#dom对象的id值") |
class选择器 | $(“class样式名”) |
标签选择器 | $(“标签名称”) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
div {
background: black;
width: 100px;
height: 200px;
}
</style>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1() {
var obj = $("#one");
obj.css("background", "green");
}
function fun2() {
var obj = $(".two");
obj.css("background", "green");
}
function fun3() {
//标签选择器
var obj = $("div");
obj.css("background", "green");
}
function fun4() {
//选择全部
var obj = $("*");
obj.css("background", "green");
}
function fun5() {
//组合选择器
var obj = $("#one,span");
obj.css("background", "green");
}
</script>
<body>
<div id="one">
<input type="button" value="变颜色" onclick="fun1()"/>
</div>
<div class="two">
<input type="button" value="变颜色" onclick="fun2()"/>
</div>
<div><input type="button" value="变颜色" onclick="fun3()"/></div>
<span class="two">span标签<input type="button" value="变颜色" onclick="fun4()"/></span>
<span class="two">span标签<input type="button" value="变颜色" onclick="fun5()"/></span>
</body>
</html>
表格选择器
和有没有form没关系
语法:
$(":type属性值")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1() {
var obj = $(":text");
alert(obj.val());
}
function fun2() {
var obj = $(":radio");
for (var i = 0; i < obj.length; i++) {
//此时这样写是不对的,因为遍历jQuery对象时,每一个子对象就是一个DOM了
//alert(obj[i].val());
var dom = obj[i];
alert(dom.value)
}
}
</script>
<body>
<input type="text" value="type=text" onclick="fun1()"/><br/>
<input type="radio" value="man"/>男<br/>
<input type="radio" value="woman"/>女<br/>
<input type="button" value="开关" onclick="fun2()"/><br/>
</body>
</html>
过滤器
比较一下Servlet那边的过滤器
基本过滤器
过滤器格式 | 功能 |
---|---|
$(“选择器:first”) | 选择第一个DOM对象 |
$(“选择器:last”) | 选择最后一个DOM对象 |
$(“选择器:eq(数组下标)”) | 获取指定下标的DOM对象 |
$(“选择器:lt(下标)”) | 获取小于下标的所有DOM对象 |
$(“选择器:gt(下标)”) | 获取大于下标的所有DOM对象 |
lt(less than) gt(greater than)
在过滤器中调用响应事件
$("#btn1").click(function () {
//过滤器
var obj = $("div:first");
obj.css("background", "red");
})
就是上述格式即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
background: gray;
}
</style>
<script type="text/javascript" src="JS/jquery-3.4.1.js"></script>
<script type="text/javascript">
// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(),
// 相当于是onLoad().
$(function () {
//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
$("#btn1").click(function () {
//过滤器
var obj = $("div:first");
obj.css("background", "red");
})
//绑定事件
$("#btn2").click(function () {
var obj = $("div:last");
obj.css("background", "green");
})
//绑定btn3的事件
$("#btn3").click(function () {
var obj = $("div:eq(3)");
obj.css("background", "blue");
})
$("#btn4").click(function () {
var obj = $("div:lt(3)");
obj.css("background", "orange");
})
$("#btn5").click(function () {
var obj = $("div:gt(3)");
obj.css("background", "yellow");
})
$("#txt").keydown(function () {
alert("keydown")
})
})
</script>
</head>
<body>
<input type="text" id="txt"/>
<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div>我是div-2
<div>我是div-3</div>
<div>我是div-4</div>
</div>
<div>我是div-5</div>
<br/>
<span>我是span</span>
<br/>
<input type="button" value="获取第一个div" id="btn1"/>
<br/>
<input type="button" value="获取最后一个div" id="btn2"/>
<br/>
<input type="button" value="获取下标等于3的div" id="btn3"/>
<br/>
<input type="button" value="获取下标小于3的div" id="btn4"/>
<br/>
<input type="button" value="获取下标大于3的div" id="btn5"/>
</body>
</html>
表单属性过滤器
根据选中状态来进行选择
过滤器格式 | 功能 |
---|---|
$(":text:enabled") | 选择可用的文本框 |
$(":text:disabled") | 选择不可用的文本框 |
$(":checkbox:checked") | 复选框中的元素 |
选择器>option:selected | 选择指定下来列表的被选中元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
background: gray;
}
</style>
<script type="text/javascript" src="JS/jquery-3.4.1.js"></script>
<script type="text/javascript">
// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(),
// 相当于是onLoad().
$(function () {
//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
$("#btn1").click(function () {
//获取所有可以使用的text
var obj = $(":text:enabled");
//设置 jquery数组值所有dom对象的value值
obj.val("hello");
})
$("#btn2").click(function () {
//获取选中的checkbox
var obj = $(":checkbox:checked");
for (var i = 0; i < obj.length; i++) {
//alert( obj[i].value);
alert($(obj[i]).val())
}
})
$("#btn3").click(function () {
//获取select选中的值
//var obj= $("select>option:selected");
var obj = $("#yuyan>option:selected");
alert(obj.val());
})
})
</script>
</head>
<body>
<input type="text" id="txt1" value="text1"/><br/>
<input type="text" id="txt2" value="text2" disabled="true"/><br/>
<input type="text" id="txt3" value="text3"/><br/>
<input type="text" id="txt4" value="text4" disabled/><br/>
<br/>
<input type="checkbox" value="游泳"/>游泳 <br/>
<input type="checkbox" value="健身" checked/>健身 <br/>
<input type="checkbox" value="电子游戏" checked/>电子游戏 <br/>
<br/>
<select id="yuyan">
<option value="java">java语言</option>
<option value="go" selected>go语言</option>
<option value="python">python语言</option>
</select>
<br/>
<input type="button" value="设置可以的text的value是hello" id="btn1"/>
<br/>
<button id="btn2">显示选中的复选框的值</button>
<br/>
<button id="btn3">显示选中下拉列表框的值</button>
</body>
</html>
函数
val
操作数组中 DOM 对象的 value 属性.
$(选择器).val() :无参数调用形式, 读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值): 有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
text
操作数组中所有 DOM 对象的【文字显示内容属性】
$(选择器).text():无参数调用, 读取数组中所有 DOM 对象的文字显示内容,将得到内容拼接
为一个字符串返回
$(选择器).text(值):有参数方式, 对数组中所有 DOM 对象的文字显示内容进行统一赋值
attr
对 val, text 之外的其他属性操作
$(选择器).attr(“属性名” ): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名” ,“值” ): 对数组中所有 DOM 对象的属性设为新值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
background: yellow;
}
</style>
<script type="text/javascript" src="JS/jquery-3.4.1.js"></script>
<script type="text/javascript">
//在dom对象创建好后,绑定事件
$(function () {
$("#btn1").click(function () {
//val() 获取dom数组中第一个对象的value属性值
var text = $(":text").val();
alert(text)
})
$("#btn2").click(function () {
//设置所有的text的value为新值
$(":text").val("三国演义");
})
$("#btn3").click(function () {
//获取div ,text()无参数,获取dom对象的文本值,连接成一个字符串
alert($("div").text());
})
$("#btn4").click(function () {
//设置div的文本值
$("div").text("新的div文本内容");
})
$("#btn5").click(function () {
//读取指定属性的值
alert($("img").attr("src"));
})
$("#btn6").click(function () {
//设置指定属性的,指定值
$("img").attr("src","JS/ex2.jpg");
//val(), text();
})
})
</script>
</head>
<body>
<input type="text" value="刘备"/><br/>
<input type="text" value="关羽"/><br/>
<input type="text" value="张飞"/><br/>
<br/>
<div>1.我第一个div</div>
<div>2.我第二个div</div>
<div>3.我第三个div</div>
<br/>
<img src="JS/ex1.jpg" id="image1"/>
<br/>
<input type="button" value="获取第一文本框的值" id="btn1"/>
<br/>
<br/>
<input type="button" value="设置所有文本框的value值" id="btn2"/>
<br/>
<br/>
<input type="button" value="获取所有div的文本值" id="btn3"/>
<br/>
<br/>
<input type="button" value="设置div的文本值" id="btn4"/>
<br/>
<br/>
<input type="button" value="读取src属性的值" id="btn5"/>
<br/>
<br/>
<input type="button" value="设置指定的属性值" id="btn6"/>
</body>
</html>
语法 | 功能 |
---|---|
$(选择器).remove() | 将数组中所有 DOM 对象及其子对象一并删除 |
$(选择器).empty() | 将数组中所有 DOM 对象的子对象删除 |
$(选择器).append(“
我动态添加的 div
”) | 为数组中所有 DOM 对象添加子对象 |
$(选择器).html() | 无参数调用方法,获取 DOM 数组第一个匹元素的内容。 |
$(选择器).html(值) | 有参数调用, 用于设置 DOM 数组中所有元素的内容 |
$.each( 要遍历的对象, function(index,element) { 处理程序 } ) | 对数组, json 和 dom 数组等的遍历,对每个元素调用一次函数。 |
我们看一下完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
background: yellow;
}
</style>
<script type="text/javascript" src="JS/jquery-3.4.1.js"></script>
<script type="text/javascript">
//在dom对象创建好后,绑定事件
$(function () {
$("#btn1").click(function () {
//使用remove:删除父和子所有的dom对象
$("select").remove();
})
$("#btn2").click(function () {
//使用empty 删除子dom对象
$("select").empty();
})
$("#btn3").click(function () {
//使用append,增加dom对象
//$("#facher").append("<input type='button' value='我是增加的按钮' />")
//增加一个table
$("#father").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");
})
$("#btn4").click(function () {
//使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
//alert($("span").text()); // 我是mysql数据库
//保留和不保留标签内容
alert($("span").html()); //我是mysql <b>数据库</b>
})
$("#btn5").click(function () {
//使用 html(有参数):设置dom对象的文本值
$("span").html("我是新的<b>数据</b>");
})
$("#btn6").click(function () {
//循环普通数组,非dom数组
var arr = [11, 12, 13];
//每个成员都会调用,此时的i和n都是从数组中取的
$.each(arr, function (i, n) {
alert("循环变量:" + i + "=====数组成员:" + n);
})
})
$("#btn7").click(function () {
//循环json
var json = {"name": "张三", "age": 20};
//var obj = eval("{'name':'张三','age':20}");
$.each(json, function (i, n) {
alert("i是key=" + i + ",n是值=" + n);
})
})
$("#btn8").click(function () {
//循环dom数组
var domArray = $(":text");//dom数组
$.each(domArray, function (i, n) {
// n 是数组中的dom对象
alert("i=" + i + " , n=" + n.value);
})
})
$("#btn9").click(function () {
//循环jquery对象, jquery对象就是dom数组
$(":text").each(function (i, n) {
alert("i=" + i + ",n=" + n.value);
})
})
})
</script>
</head>
<body>
<input type="text" value="刘备"/>
<input type="text" value="关羽"/>
<input type="text" value="张飞"/>
<br/>
<select>
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="豹子">豹子</option>
</select>
<br/>
<br/>
<select>
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="美洲">美洲</option>
</select>
<br/>
<br/>
<div id="father">我是第一个div</div>
<br/>
<br/>
<span>我是mysql <b>数据库</b></span>
<br/>
<span>我是jdbc</span>
<br/>
<br/>
<input type="button" value="使用remove删除父和子对象" id="btn1"/>
<br/>
<br/>
<input type="button" value="使用empty删子对象" id="btn2"/>
<br/>
<br/>
<input type="button" value="使用append,增加dom对象" id="btn3"/>
<br/>
<br/>
<input type="button" value="获取第一个dom的文本值" id="btn4"/>
<br/>
<br/>
<input type="button" value="设置span的所有dom的文本值" id="btn5"/>
<br/>
<br/>
<input type="button" value="循环普通数组" id="btn6"/>
<br/>
<br/>
<input type="button" value="循环json" id="btn7"/>
<br/>
<br/>
<input type="button" value="循环dom数组" id="btn8"/>
<br/>
<br/>
<input type="button" value="循环jquery对象" id="btn9"/>
</body>
</html>
用on绑定事件
语法: $(选择器).on(event,data,function)
event:事件一个或者多个,多个之间空格分开
data: 可选。规定传递到函数的额外数据, json 格式
function: 可选。规定当事件发生时运行的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
background: yellow;
}
</style>
<script type="text/javascript" src="JS/jquery-3.4.1.js"></script>
<script type="text/javascript">
//在dom对象创建好后,绑定事件
$(function () {
$("#btn1").click(function () {
//使用append增加dom对象
$("#mydiv").append("<input id='newBtn' type='button' value='我是新加入的按钮'/>");
//使用on给按钮绑定事件
$("#newBtn").on("click", function () {
alert("新建的按钮被单击了");
})
//两者语法等价
/*
$("#newBtn").click(function () {
alert("被单击了");
})
*/
})
})
</script>
</head>
<body>
<div id="mydiv">
我是一个div ,需要增加一个button
</div>
<input type="button" value="创建一个button,绑定一个click" id="btn1"/>
<br/>
</body>
</html>
Ajax函数
参考博客复习Ajax
$.ajax() 是 jQuery 中 AJAX 请求的核心方法,所有的其他方法都是在内部使用此方法。
关键字 | 含义 |
---|---|
async | 布尔值,表示请求是否异步处理。默认是 true |
contentType | 发送数据到服务器时所使用的内容类型。默认是:“application/x-www-form-urlencoded”。application/json格式居多 |
data | 规定要发送到服务器的数据, 可以是: string, 数组, 多数是 json |
dataType | 期望从服务器响应的数据类型。 jQuery 从 xml, json, text, html 这些中测试最可能的类型 |
error(xhr,status,error) | 如果请求失败要运行的函数 |
success(result,status,xhr) | 当请求成功时运行的函数 |
url | 请求的地址 |
type | 请求方式(get、post) |
error() , success()中的 xhr 是 XMLHttpRequest 对象。
来看一下实际应用
可以实现之前Ajax实现的内容
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>使用json格式的数据</title>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//获取dom的value值
var proid = $("#proid").val();
//发起ajax请求
//必备套餐 url;type;data;datatype
$.ajax({
url: "queryjson", type: "get", data: {
"proid": proid
}, datatype: "json",
success: function (resp) {
alert(resp + resp.jiancheng);
$("#proname").val(resp.name);
$("#projiancheng").val(resp.jiancheng);
$("#proshenghui").val(resp.shenghui);
}
})
})
})
</script>
</head>
<body>
<p>ajax请求使用json格式的数据</p>
<table>
<tr>
<td>省份编号:</td>
<td><input type="text" id="proid">
<input type="button" value="搜索" id="btn">
</td>
</tr>
<tr>
<td>省份名称:</td>
<td><input type="text" id="proname"></td>
</tr>
<tr>
<td>省份简称:</td>
<td><input type="text" id="projiancheng"></td>
</tr>
<tr>
<td>省会名称:</td>
<td><input type="text" id="proshenghui"></td>
</tr>
</table>
</body>
</html>
我们再来看一个应用,实现级联查询省份和省会
index部分
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>省市级级联测试</title>
</head>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
function loadDataAjax() {
$.ajax({
url: "queryprovince",
type: "get",
dataType: "json",
success: function (resp) {
//删除原有数据,不然每次点都会新增多的数据
$("#province").empty();
alert(resp);
//resp得到一个JSON数组,用each来循环
$("#province").append("<option value='" + "'>" + "请选择省份" + "</option>");
$.each(resp, function (i, n) {
//获取dom对象
$("#province").append("<option value='" + n.id + "'>" + n.name + "</option>");
})
}
}
)
}
$(function () {
// $(function())在页面的dom的对象加载成功后执行的函数, 在此发起ajax。
loadDataAjax();
//绑定事件
$("#btnLoad").click(function () {
loadDataAjax();
})
//给省份的select绑定一个change事件,当select内容发生变化时,触发事件
$("#province").change(function () {
//获取选中的列表框的值
var obj = $("#province>option:selected");
alert(" select 的change 事件" + obj.val() + "====" + obj.text())
var provinceId = obj.val(); // 1 ,2, 3
//做一个ajax请求,获取省份的所有城市信息
$.get("querycity", {proid: provinceId}, callback, "json");
})
})
//定义一个处理返回数据的函数
function callback(resp) {
//清空select列表
$("#city").empty();
$.each(resp, function (i, n) {
$("#city").append("<option value='" + n.id + "'>" + n.name + "</option>")
})
}
</script>
<body>
<p> 省市级级联</p>
<div>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
省份:
</td>
<td>
<select id="province">
<option value="0">请选择.....</option>
</select>
<input type="button" value="load数据" id="btnLoad"/>
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select id="city">
<option value="0">请选择.....</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
QueryDao文件补充一个方法
public List<City> queryCityList(Integer provinceId) {
List<City> cities = new ArrayList<>();
try {
City city = null;
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url, username, password);
sql = "select id,name from city where provinceid=?";
pst = conn.prepareStatement(sql);
pst.setInt(1, provinceId);
rs = pst.executeQuery();
while (rs.next()) {
city = new City();
city.setId(rs.getInt("id"));
city.setName(rs.getString("name"));
cities.add(city);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (rs != null) {
rs.close();
}
} catch (Exception ex) {
ex.printStackTrace();
}
try {
if (pst != null) {
pst.close();
}
} catch (Exception ex) {
ex.printStackTrace();
}
try {
if (conn != null) {
conn.close();
}
} catch (Exception ex) {
ex.printStackTrace();
}
}
return cities;
}
再写一个Servlet和Province类似
package controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import dao.QueryDao;
import entity.City;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
public class QueryCityServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String ProvinceId = request.getParameter("proid");
String json = "{}";
//判断是否取到了数据
if (ProvinceId != null && !"".equals(ProvinceId.trim())) {
QueryDao dao = new QueryDao();
List<City> cityList = dao.queryCityList(Integer.valueOf(ProvinceId));
ObjectMapper objectMapper = new ObjectMapper();
json = objectMapper.writeValueAsString(cityList);
}
//输出JSON格式数据,响应Ajax请求
response.setContentType("application/json;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.println(json);
pw.flush();
pw.close();
}
}
看看效果
结束时间:2021-09-17