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语法表示对象叫做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
常用的选择器:
1) id选择器, 语法: $(“#dom对象的id值”)
通过dom对象的id定位dom对象的。 通过id找对象, id在当前页面中是唯一值。
2) class选择器, 语法: $(".class样式名)
class表示css中的样式, 使用样式的名称定位dom对象的。
3) 标签选择器, 语法: $(“标签名称”)
使用标签名称定位dom对象的
4. 表单选择器,
使用标签的type属性值,定位dom对象的方式。
语法: $(“:type属性值”)
例如: $(“:text”) ,选择的是所有的单行文本框,
$(“:button”) ,选择的是所有的按钮。
5.过滤器:
在定位了dom对象后,根据一些条件筛选dom对象。
过滤器有是一个字符串,用来筛选dom对象的。
过滤器不能单独使用, 必须和选择器一起使用。
1)$("选择器:first") : 第一个dom对象
2)$("选择器:last"): 数组中的最后一个dom对象
3)$("选择器:eq(数组的下标)") :获取指定下标的dom对象
4)$("选择器:lt(下标)") : 获取小于下标的所有dom对象
5)$("选择器:gt(下标)") : 获取大于下标的所有dom对象
6.表单属性过滤器: 根据表单中dom对象的状态情况,定位dom对象的。
启用状态, enabled ,
不可用状态 disabled
选择状态 , checked , 例如radio, checkbox
7.each语法
1). 可以对 数组, json ,dom数组循环处理。 数组, json中的每个成员都会调用一次处理函数。
var arr = { 1, 2, 3} //数组
var json = {“name”:“lisi”,“age”:20 }
var obj = $(“:text”);
语法: $.each( 循环的内容, 处理函数 ) :表示使用jquery的each,循环数组,每个数组成员,
都会执行后面的“处理函数”一次。
$: 相当于是java的一个类名
each:就是类中的静态方法。
静态方法调用,可以使用 类名.方法名称
处理函数:function(index, emelent) :
index, element都是自定义的形参, 名称自定义。
index:循环的索引
element:数组中的成员
js循环数组:
for(var i=0;i<arr.length;i++){
var item = arr[i]; //数组成员
//操作数组成员
shuchu( i , item);
}
function shuchu(index, emlemnt){
输出index ,element
}
2).循环jquery对象, jquery对象就是dom数组
jquery对象.each( function(index,element) {} )
8. jquery中给dom对象绑定事件
1) $(选择器).事件名称( 事件的处理函数)
$(选择器):定位dom对象, dom对象可以有多个, 这些dom对象都绑定事件了
事件名称:就是js中事件去掉on的部分, 例如 js中的单击事件 onclick(),
jquery中的事件名称,就是click,都是小写的。
事件的处理函数:就是一个function ,当事件发生时,执行这个函数的内容。
例如给id是btn的按钮绑定单击事件
$(“#btn”).click(funtion(){
alert(“btn按钮单击了”)
})
-
on 事件绑定
$(选择器).on( 事件名称 , 事件的处理函数)事件名称: 就是js事件中去掉on的部分, 例如js中onclick ,这里就是click
事件的处理函数: function 定义。例如,
<input type="button" id="btn">
$(“#btn”).on(“click”, function() { 处理按钮单击 } )
9. 使用jquery的函数,实现ajax请求的处理。
没有jquery之前,使用XMLHttpRequest做ajax , 有4个步骤。 jquery简化了ajax请求的处理。
使用三个函数可以实现ajax请求的处理。
1) $.ajax() : jquery中实现ajax的核心函数。
2) $.post() : 使用post方式做ajax请求。
3) $.get() : 使用get方式发送ajax请求。
$.post()和$.get() 他们在内部都是调用的 $.ajax()
介绍 $.ajax函数的使用, 函数的参数表示请求的url, 请求的方式,参数值等信息。
$.ajax()参数是一个json的结构。
例如: $.ajax( {名称:值, 名称1:值1..... } )
例如: $.ajax( { async:true ,
contentType:"application/json" ,
data: {name:"lisi",age:20 },
dataType:"json",
error:function(){
请求出现错误时,执行的函数
},
success:function( data ) {
// data 就是responseText, 是jquery处理后的数据。
},
url:"bmiAjax",
type:"get"
}
)
json结构的参数说明:
1)async:是一个boolean类型的值, 默认是true ,表示异步请求的。可以不写async这个配置项
xmlHttp.open(get,url,true),第三个参数一样的意思。
2)contentType: 一个字符串,表示从浏览器发送服务器的参数的类型。 可以不写。
例如你想表示请求的参数是json格式的, 可以写application/json
3)data: 可以是字符串,数组,json,表示请求的参数和参数值。 常用的是json格式的数据
4)dataType: 表示期望从服务器端返回的数据格式,可选的有: xml , html ,text ,json
当我们使用$.ajax()发送请求时, 会把dataType的值发送给服务器, 那我们的servlet能够
读取到dataType的值,就知道你的浏览器需要的是 json或者xml的数据,那么服务器就可以
返回你需要的数据格式。
5)error: 一个function ,表示当请求发生错误时,执行的函数。
error:function() { 发生错误时执行 }
6)sucess:一个function , 请求成功了,从服务器端返回了数据,会执行success指定函数
之前使用XMLHttpRequest对象, 当readyState==4 && status==200的时候。
7)url:请求的地址
8)type:请求方式,get或者post, 不用区分大小写。 默认是get方式。
主要使用的是 url , data ,dataType, success .
10、整体jsp代码
<%--
Created by IntelliJ IDEA.
User: PC
Date: 2022/10/13
Time: 20:33
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax\jQuery实现省市联动</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
/*function loadDataAjax(){
//做ajax请求,使用jquery的$.ajax() ,里面需要json格式的数据
$.ajax({
url:"cascadedQuery",
dataType:"json",
success:function (resp){
//每个省份的信息封装为一个对象,多个对象放入list中去了!
//因此resp是数组:[{"id":1,"name":"河北","jiancheng":"冀","shenghui":"石家庄"},{...},{...}]
//删除旧的数据,把已经存在的数据清空
//在原有的大标签select下需要添加很多小标签<option value=...</option>,以显示内容
//多条数据,考虑循环$.each(resp,function(i,n)),i是循环遍历,n是数组中的每个元素,为json格式{"id":1,"name":"河北","jiancheng":"冀","shenghui":"石家庄"}
$.each(resp,function (i,n){
$("#selectProvince").append("<option value='"+n.id+"'>" + n.name + "</option>");
})
}
})
}*/
// $(function())在页面的dom的对象加载成功后执行的函数, 在此发起ajax。牢记
//前面的函数随便写,只要这里是onload就行!
$(function (){
$("#btn").click(function (){
$.ajax({
url:"queryProvince",
dataType:"json",
/**
* 每个省份的信息封装为一个对象,多个对象放入list中去了!
* 因此resp是数组:[{"id":1,"name":"河北","jiancheng":"冀","shenghui":"石家庄"},{...},{...}]
* @param resp
*/
success:function (resp){
//alert(resp);
//删除旧的数据,把已经存在的数据清空
$("#selectProvince").empty();
/**
* 原有的大标签select下需要添加很多小标签<option value=...</option>,以显示内容
* 多条数据,考虑循环$.each(resp,function(i,n)),i是循环遍历,n是数组中的每个元素,为json格式{"id":1,"name":"河北","jiancheng":"冀","shenghui":"石家庄"}
*/
$.each(resp,function (i,n){
$("#selectProvince").append("<option value='"+n.id+"'>" + n.name + "</option>");
})
/**
* 现在要获取子标签的信息(尤其是id)从而达到根据id搜索对应省份的城市
* 如何做到?
* var obj = $("#selectProvince>option:selected"); 表示获取id = selectProvince 下选中的子标签
* obj.val()操作数组中 DOM 对象的 value 属性
* obj.text()操作数组中所有 DOM 对象的【文字显示内容属性】
*
*/
$("#selectProvince").change(function (){
var obj = $("#selectProvince>option:selected");
//多测试!
//alert("id = " + obj.val() + " | name = " + obj.text() )
/**
* 这时候应该发送数据给后端,如何发送?
* 语法: $.post(URL,data,function(data,status,xhr),dataType) 同理$get()
* 这种语法可以替代 $.ajax ,就是$.ajax既可以get,也可以post
*/
var provinceId = obj.val();
$.post("queryCity",{pId : provinceId},function (resp){
//alert(resp);
//先清空
$("#selectCity").empty();
//置值,使用each循环,追加子标签
$.each(resp,function (i,n){
$("#selectCity").append("<option value='"+n.id+"'>" + n.cityName + "</option>")
})
})
})
}
})
})
})
</script>
</head>
<body>
<h2>Ajax\jQuery实现省市联动</h2><br><br><br>
<table>
<tr>
<td> 省份:</td>
<td>
<select id="selectProvince">
<option value="0">请选择...</option>
</select>
</td>
<td><input type="button" value="加载数据" id="btn"></td>
</tr>
<tr>
<td>城市:</td>
<td>
<select id="selectCity"></select>
</td>
</tr>
</table>
</body>
</html>