jQuery
1.jQuery是js库
库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的js代码写的function
2.dom对象和jquery对象
-
dom对象：使用javascript的语法创建的对象叫做dom对象，也就是js对象。
var obj = document.getElementById("txt1"); obj是dom对象，也叫作js对象 obj.value; -
jquery对象：使用jquery语法表示h对象叫做jquery对象，注意：jquery表示的对象都是数组。
例如：
var jobj = $("#txt1"); jobj就是使用jquery语法表示的对象。也就是jquery对象，它是一个数组，现在数组中就一个值。 -
dom对象可以和jquery对象相互的转换。
dom对象可以转为jquery对象，语法：$(dom对象)； jquery对象也可以转换为dom对象，语法：从数组中获取第一个对象，第一个对象就是dom对象，使用【0】或者get{0}。 -
为什么要进行dom和jquery的转换：目的是要是用对象的方法或者属性。
当你的dom对象，可以使用dom对象的属性或者方法，如果你要想使用jquery提供的函数，必须是jquery对象才可以。
3.选择器
? 就是一个字符串，用来定位dom对象的，定位了dom对象，就可以通过jquery的函数来操作dom
常用的选择器：
-
id选择器，语法：$("#dom对象的id值")；
通过dom对象的id定位dom对象的，通过id找对象，id在当前页面中是唯一值。
-
class选择器，语法：$(".class样式名")
class表示css中的样式，使用样式的名称来定位dom对象的。
-
标签选择器，语法：$(“标签名称”)
使用标签名称定位dom对象的。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
background: beige;
width: 200px;
height: 100px;
}
</style>
<script type="text/javascript" src="JS/jquery-3.4.1.js"></script>
<script type="text/x-javascript">
function fun1(){
//id选择器
var obj = $("#one");
//使用jquery中改变样式的函数
obj.css("background","blue");
}
function fun2(){
//样式选择器
var obj = $(".two");
obj.css("background","yellow");
}
function fun3(){
//标签选择器
var obj=$("div");//数组有三个对象
//jquery的操作是操作数组中的全部成员
//所以是给所以div都设置的背景色
obj.css("background","white");
}
function fun4(){
var obj = $("*");
obj.css("background","green");
}
function fun5(){
var obj=$("#one,span");
obj.css("background","red");
}
</script>
</head>
<body>
<div id="one">我是one的id</div><br/>
<div class="two">我是样式是two的div</div>
<br />
<div>我是没有id，class的div</div>
<br />
<span>我是span标签</span>
<br />
<input type="button" value="获取id是one的dom对象" onclick="fun1()" /><br />
<input type="button" value="使用class样式获取dom对象" onclick="fun2()"/><br />
<input type="button" value="使用标签选择器" onclick="fun3()"/><br />
<input type="button" value="所有选择器" onclick="fun4()"/><br />
<input type="button" value="组合选择器" onclick="fun5()"/><br />
</body>
</html>
4.表单选择器
使用标签的type属性值，定位dom对象的方式。
语法：$(":type属性值")
例如：$("：text"),选择的是所有的单行文本框，
$(":button"),选择的是所有的按钮。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script type="text/javascript" src="JS/jquery-3.4.1.js"></script>
<script type="text/x-javascript">
function fun1(){
//表单选择器 $(":type的值")
var $obj = $(":text");
//获取value属性的值 val()
alert($obj.val());
}
function fun2(){
//表单选择器 定位radio
var $obj = $(":radio");
//循环数组,数组中的成员是dom对象,可以使用dom对象的属性或者函数
for(var i=0;i<$obj.length;i++){
var dom = $obj[i];
alert(dom.value);
}
}
function fun3(){
//表单选择器 定位checkbox
var $obj = $(":checkbox");//数组有三个对象
for(var i=0;i<$obj.length;i++){
var dom = $obj[i];
//alert(dom.value);
//使用jquery的val函数,获取value的值
//1.需要一个jquery对象
var $jObj = $(dom);//$jObj是jquery对象
//调用jquery函数
alert("jquery的函数调用="+$jObj.val());
}
}
</script>
</head>
<body>
<input type="text" value="我是type=text" />
<br />
<input type="radio" value="man" />男<br />
<input type="radio" value="women" />女<br />
<br />
<input type="checkbox" value="bike" />骑行<br />
<input type="checkbox" value="football" />足球<br />
<input type="checkbox" value="music" />音乐<br />
<br />
<input type="button" value="读取text的值" onclick="fun1()"/><br />
<input type="button" value="读取radio的值" onclick="fun2()"/><br />
<input type="button" value="读取checkbox的值" onclick="fun3()"/><br />
</body>
</html>
5.过滤器
-
在定义了dom对象后，根据一些条件筛选dom对象。
-
过滤器是一个字符串，用来筛选dom对象的。
-
过滤器不能单独使用，必须和选择器一起使用。
- $(“选择器:first”)：第一个dom对象
- $(“选择器:last”)：数组中的最后一个dom对象
- $(“选择器:eq(数组的下标)”)：获得指定下标的dom对象
- $(“选择器:lt(下标)”)：获取小于下标的所有dom对象
- $(“选择器:gt(下标)”)：获取小于下标的所有dom对象
实例：
<!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/x-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").click(function(){
var $obj=$("div:eq(3)");
$obj.css("background","blue");
})
$("#btn4").click(function(){
var $obj=$("div:lt(3)");
$obj.css("background","yellow");
})
$("#btn5").click(function(){
var $obj=$("div:gt(3)");
$obj.css("background","orange");
})
})
</script>
</head>
<body>
<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" id="btn1" value="获取第一个div" /><br />
<input type="button" id="btn2" value="获取最后一个div" /><br />
<input type="button" id="btn3" value="获取下标等于3" /><br />
<input type="button" id="btn4" value="获取下标小于3" /><br />
<input type="button" id="btn5" value="获取下标大于3" /><br />
</body>
</html>
6.表单属性过滤器
- 根据表单中dom对象的状态情况，定位dom对象的。
启用状态：enabled
不可用状态：disabled
选择状态：checked，例如radio，checkbox
实例：
<!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/x-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="true" />健身<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" id="btn1" value="所有可用的text设置hello"/><br />
<input type="button" id="btn2" value="显示被选中的复选框的值"/><br />
<button id="btn3">显示下拉列表框的值</button>
</body>
</html>
7.each语法
- 可以对数组，json，dom数组循环处理。数组，json中的每个成员都会调用一次处理函数。
var arr = {1,2,3}//数组
var ison = {"name":"lisi","age":20}
var $obj = $(":text");
语法：
$.each(循环的内容，处理函数)：表示使用jquery的each，循环数组，每个数组成员，都会执行后面的“处理函数”一次。
$：相当于是java的一个类名。
each：就是类中的静态方法。静态方法调用，可以使用 “类名.方法名称”
处理函数：function(index，element)：index，element都是自定义的形参，名称自定义。
index：循环的索引。 element：数组中的成员
js循环数组：
for(var i=0;i<arr.length;i++){
var item = arr[i];//数组成员
shuchu(i,item)://操作数组成员
}
function shuchu(index,element){
输出index，element
}
- 循环jquery对象，jquery对象就是dom数组
jquery对象.each(function(index，element){})
8.jquery中给dom对象绑定事件
- $(选择器).事件名称(事件的处理函数)
$(选择器).事件名称(事件的处理函数)
$(选择器)：定位dom对象，dom对象可以有多个，这些dom对象都绑定事件了。
事件名称：就是js事件中去掉on的部分，例如js中的onclick()， jquery中的事件名称，就是click，都是小写的。
事件的处理函数：就是一个function，当事件发生是，执行这个函数的内容。
例如给id是btn的按钮绑定单击事件：
$("#btn").click(function(){
alert("btn按钮单击了");
})
2.on事件绑定
$(选择器).on(事件名称，事件的处理函数)
事件名称：就是就是事件中去掉on的部分，例如js中的onclick，这里就是click。
事件的处理函数：function定义。
例如：<input type="button" id="btn">
$("#btn").on("click",function(){处理单击按钮})
9.使用jquery的函数，事件ajax请求的处理
- 没有使用jquery之前，使用XMLHttpRequest做ajax请求，有四个步骤。jquery简化了ajax请求的处理。
- 使用三个函数可以事件ajax请求的处理。
- $.ajax()：jquery中实现ajax的核心函数。
- $.post()：使用post方式做ajax。
- $.get()：使用get方式做ajax
- 介绍$.ajax函数的使用，函数的参数表示请求的url，请求的方式，参数值等信息。
- $.ajax()参数是一个json的结构
例如：$.ajax({名称：值，名称：值1…})
$.ajax({
async:true,
conteneType:"application/json",
data:{name:"lisi",age:20},
dataType:"json",
error:function(){},
success:function(data){},
url:"bmiAjax",
type:"get"
})
- json结构的参数说明
-
async：是一个布尔类型的值，默认是true，表示异步请求的，可以不写async这个配置项。xmlHttp.open(get,url,true),第三个参数一样的意思。
-
contentType：一个字符串，表示从浏览器发送服务器的参数的类型。可以不写，默认是"application/x-www-form-urlencoded"。例如你想表示请求的参数是json格式的， 可以写application/json。
-
data：可以是字符串，数组，json，表示请求的参数和参数值。常用的是json格式的数据。
-
dataType：表示期望从服务器返回的数据格式，可选的有：xml，html，text，json
当我们适用$.ajax()发送请求时，会把dataType的值发送给服务器，那我们的servlet能够读取到dataType的值，就知道你的浏览器需要的是json或者xml的数据，name服务器就可以返回你需要的数据格式。
-
error：一个function，表示当请求失败发生错误时，执行的函数。error：function(){ 发生错误时执行 }。
-
success：一个function，请求成功了，从服务器返回了数，会执行success指定函数，之前使用XMLHttpRequest对象，当readyState == 4&&status == 200的时候。
-
url：请求的地址。
-
type：请求方式，get或者post，不用区分大小写。默认是get方式。
主要使用的是url，data，dataType，success
jquery实例 省市级联查
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>省市级联查询</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url:"queryprovice",
dataType:"json",
success:function ( resp) {
//删除旧的数据，把已经存在的数据删除
$("#province").empty();
$.each(resp,function (i,n) {
//获取selectdom对象
$("#province").append("<option value='"+n.id+"'>"+n.name+" </option>");
})
}
})
//绑定事件
$("#btnLoad").click(function () {
//做ajax对象，使用jquery的$.ajax()
$.ajax({
url:"queryprovice",
dataType:"json",
success:function ( resp) {
//删除旧的数据，把已经存在的数据删除
$("#province").empty();
$.each(resp,function (i,n) {
//获取selectdom对象
$("#province").append("<option value='"+n.id+"'>"+n.name+" </option>");
})
}
})
})
//给省份的select绑定一个change时间，当select内容发生改变是，触发事件
$("#province").change(function () {
//获取选中的列表框的值
var obj = $("#province>option:selected");
//alert("alert 的 change 事件"+obj.val()+"---"+obj.text());
var proviceId = obj.val();
//做一个ajax请求，获取省份的所有城市信息
$.post("querycity",{proid:proviceId},callback,"json")
})
//封装
function callback(resp){
//清空旧的数据，把已经存在的数据删除
$("#city").empty();
$.each(resp,function(i,n){
$("#city").append("<option value='"+n.id+"'>"+n.name+"</option>");
})
}
})
</script>
</head>
<body>
<p>省市级联查询，使用ajax</p>
<div>
<table border="1">
<tr>
<td>省份：<td/>
<select id="province" cellpadding="0" cellspacing="0">
<option value="0">请选择.......</option>
</select>
<input type="button" value="load数据" id="btnLoad"/>
</tr>
<tr>
<td>城市:</td>
<td>
<select id="city" >
<option value="0">请选择.......</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>QueryProviceServlet</servlet-name>
<servlet-class>com.bjpowernode.conntroller.QueryProviceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>QueryProviceServlet</servlet-name>
<url-pattern>/queryprovice</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>QueryCityServlet</servlet-name>
<servlet-class>com.bjpowernode.conntroller.QueryCityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>QueryCityServlet</servlet-name>
<url-pattern>/querycity</url-pattern>
</servlet-mapping>
</web-app>
city
package com.bjpowernode.entity;
public class city {
private Integer id;
private String name;
private Integer ProvinceId;
public city(Integer id, String name, Integer provinceId) {
this.id = id;
this.name = name;
ProvinceId = provinceId;
}
public city() {
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getProvinceId() {
return ProvinceId;
}
public void setProvinceId(Integer provinceId) {
ProvinceId = provinceId;
}
@Override
public String toString() {
return "city{" +
"id=" + id +
", name='" + name + '\'' +
", ProvinceId=" + ProvinceId +
'}';
}
}
Province
package com.bjpowernode.entity;
public class Province {
private Integer id;
private String name;
private String jiancheng;
private String shenghui;
public Province() {
}
public Province(Integer id, String name, String jiancheng, String shenghui) {
this.id = id;
this.name = name;
this.jiancheng = jiancheng;
this.shenghui = shenghui;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getJiancheng() {
return jiancheng;
}
public void setJiancheng(String jiancheng) {
this.jiancheng = jiancheng;
}
public String getShenghui() {
return shenghui;
}
public void setShenghui(String shenghui) {
this.shenghui = shenghui;
}
@Override
public String toString() {
return "Province{" +
"id=" + id +
", name='" + name + '\'' +
", jiancheng='" + jiancheng + '\'' +
", shenghui='" + shenghui + '\'' +
'}';
}
}
QueryDao
package com.bjpowernode.dao;
import com.bjpowernode.entity.Province;
import com.bjpowernode.entity.city;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
public class QueryDao {
private Connection conn;
private PreparedStatement pst;
private ResultSet rs ;
private String sql;
private String url="jdbc:mysql://localhost:3306/springdb";
private String username = "root";
private String password ="123";
//查询所有的省份信息
public List<Province> queryProvinceList(){
List<Province> provinces =new ArrayList<>();
try {
Province p = null;
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url,username,password);
sql = "select id,name,jiancheng,shenghui from province order by id";
pst = conn.prepareStatement(sql);
rs = pst.executeQuery();
while (rs.next()){
p = new Province();
p.setId(rs.getInt("id"));
p.setName(rs.getString("name"));
p.setJiancheng(rs.getString("jiancheng"));
p.setShenghui(rs.getString("shenghui"));
provinces.add(p);
}
} catch (Exception e) {
e.printStackTrace();
}finally {
if (rs != null){
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (pst != null){
try {
pst.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
return provinces;
}
//查询一个省份下面的所有城市
public List<city> queryCityList(Integer provinceId){
List<city> cities =new ArrayList<>();
try {
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 city = new city();
city.setId(rs.getInt("id"));
city.setName(rs.getString("name"));
cities.add(city);
}
} catch (Exception e) {
e.printStackTrace();
}finally {
if (rs != null){
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (pst != null){
try {
pst.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
return cities;
}
}
QueryProviceServlet
package com.bjpowernode.conntroller;
import com.bjpowernode.dao.QueryDao;
import com.bjpowernode.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
public class QueryProviceServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String json = "{}";
//调用dao，获取所有的省份信息，是一个省份信息
QueryDao dao = new QueryDao();
List<Province> provinces = dao.queryProvinceList();
//把list转为json格式的数据，输出给ajax请求
if (provinces != null){
//调用jackson工具库，实现List--json
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(provinces);
}
//输出json数据，响应ajax请求，返回数据
response.setContentType("application/json;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.println(json);
pw.flush();
pw.close();
}
}
QueryCityServlet
package com.bjpowernode.conntroller;
import com.bjpowernode.dao.QueryDao;
import com.bjpowernode.entity.city;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
public class QueryCityServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String json = "{}";
//获取请求传过来的省份id
String strProvicedId = request.getParameter("proid");
if (strProvicedId != null && !"".equals(strProvicedId.trim())) {
QueryDao dao = new QueryDao();
List<city> cityList = dao.queryCityList(Integer.valueOf(strProvicedId));
//把list转为json
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(cityList);
}
//输出数据
response.setContentType("application/json;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.println(json);
pw.flush();
pw.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
展示效果
网页打开界面
查询省份
查询城市
