jQuery入门：
设计目的:
为了简化Javascript开发，第三方产商开发了JavaScript库
优点:
- jQuery是一个轻量级js库，使用简单
- jQuery最核心的是选择器，用于获取当前页面元素
- jQuery提供了大量高效方法，大幅度提升了速度
基础知识:
选择器表达式
$(“a”) 标签选择器 $(“a”).addClass(“heighlight”)对当前页面中所有的a标签增加heighlight类(css)
$(" * “)通配选择器 $(”*").removeClass(“heighlight”);移除当前页面中所有标签的heighlight类(css)
$("#id") id选择器
$(".class")类选择器
$(“div1,p”)组合选择器，对元素进行组合
方法添加css
removeclass("")移除所有css
addclass("")添加css
层叠选择器
$(“ancestor des”) 后代选择器
$(“ances>des”) 子选择器
$(“ances~des”) 兄弟选择器 选择之后的
属性选择器
$(“selse[att=value]”) 属性名等于属性值
$(“selse[att^=value]”) 属性值以什么开头匹配
(
"
s
e
l
s
e
[
a
t
t
("selse[att
("selse[att=value]") 属性以什么结尾匹配
$(“selse[att *=value]”) 通配只要包含value值匹配
不经常用的位置选择器和表单选择器扩展知识
$(".myclass:first")第一个
$(“selse:last”)最后一个
$(“li:even”) 获取偶数位置的元素（从0开始）
$(“li:odd”)获取奇数位置的元素（从0开始）
$(“li:eq(2)”) 获取指定位置的元素（从0开始）
表单选择器
$(“sele:input”) 获取所有输入项（即所有表单元素）
$(“sele:password”) 密码框
$(“sele:text”) 文本
$(“sele:reset”) 重置按钮
jquery方法操作
attr(name|properties|key) 设置和获取元素属性
attr(name)只有一个参数就是获取 ，
attr(name，“www”)两个参数是设置 ，
如果一次性获取多个属性值，则只会返回第一个属于该标签或该类的属性值，如果一次性给多个标签设置值的时候则会对该标签下的所有该属性进行设置
removeAttr(name) 移除元素属性
eg：$(“a”).removeAttr(“href”);
操作元素的css样式
css()获取或设置匹配元素的样式属性
css(“color”)获取color属性
css(“color”,“red”)
css({设置多个,分隔}) eg：$(“a”).css({“color”:“red” , “font-size”:“bold” , “font-style”:“italic”})
addClass(“css类名”)为每个匹配的元素添加样式
addclass(“css类名 css2”) 多个类名
removeClass(“css类名”) 移除样式
设置元素内容方法
val(参数) 设置和获取输入项的值（获取或设置文本输入框的内容，当不写参数时代表获取文本框的输入内容）
text(参数) 获取和设置元素的纯文本 ，会将文本中的html标签进行转义，将文本原封不动的展示在界面中 （优先使用）
html(参数) 设置和获取元素内部的html 能跟实现再添加标签功能，不会进行转义
事件
on("click",function(){
})
click(function(){
}) 绑定事件的简写形式
等价
处理方法中提高了event
键盘按下 event遵守了w3c格式，
keypress(function(event){
})
Ajax入门:
创建XmlHttpRequest对象：
- XMLHttpRequest用于在后台与服务器交换数据，是AJAX的核心
- XMLHttpRequest并不是W3C的标准，不同浏览器的创建方式不同
最通用的做法
var xmlhttp
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttRequest();
}
else{
xmlhttp = new ActiveXObject("Mircrosoft.XMLHTTP");
}
发送Ajax请求:
xmlhttp.open("method:","url:","true")
xmlhttp.send()
处理服务器响应:
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readystate==4&&xmlhttp.status==200){
var string=xmlhttp.responceText;
var json=JSON.parse(string);
document.getElementById("").innerHTML=json;
}
}
if(xmlhttp.readystate==4&&xmlhttp.status==200){
var string=xmlhttp.responceText;
var json=JSON.parse(string);
document.getElementById("").innerHTML=json;
}
xmlhttp.readyState属性说明XMLHttpRequest当前状态：
-
值为0说明请求未初始化 -
值为1说明服务器已建立连接 -
值为2说明请求已经被接收 -
值为3说明请求正在被处理 -
值为4说明响应文本已经被接收
同步状态:
- 代码进入等待状态（事先在servlet中设置了Thread.sleep()的方法），数据不返回，程序不会向下执行即所谓的阻塞状态，在该状态下onreadystatechange事件将失效，
- 同步是发送一个请求,需要等待返回,然后才能够发送下一个请求，有个等待的过程
异步状态:
- 程序不会处于阻塞状态，依旧向下执行，数据返回时，通过触发onreadystatechange事件进行数据的获取和处理
- 异步是发送一个请求,不需要等待返回,随时可以再发送下一个请求，不需要等待。
jQuery对Ajax的支持
jQuery对Ajax进行封装，提供了$.ajax()方法
$.ajax(options)
options常用JSON对象 其中JSONP解决跨域访问问题
利用JSON对象来描述Ajax发送请求的相关细节，如图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K7orxyyo-1637848795116)(C:\Users\张烈文\AppData\Roaming\Typora\typora-user-images\1588576055154.png)]
利用jQuery和Ajax实现二级联动例子：
//HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
"url": "/channel",
"type": "GET",
"data": "level=1",
"dataType": "json",
"success":function (json) {
for (var i = 0; i < json.length; i++) {
var ch = json[i];
$("#lv1").append("<option value='" + ch.code + "'>" + ch.name + "</option>");
}
}
})
})
$(function () {
$("#lv1").change(function () {
var value = $(this).val();
$.ajax({
"url": "/channel",
"type": "get",
"data":{"level":"2","parent":value},
"dataType": "json",
"success": function (json) {
$("#lv2>option").remove();
for (var i = 0; i < json.length; i++) {
var ch = json[i];
$("#lv2").append("<option>" + ch.name + "</option>");
}
}
})
})
})
</script>
</head>
<body>
<select id="lv1" style="width: 200px;height: 30px">
<option selected="selected">请选择</option>
</select>
<select id="lv2" style="width: 200px;height: 30px">
</select>
</body>
</html>
package com.Ray.ajax;
import com.alibaba.fastjson.JSON;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String level = req.getParameter("level");
String parent = req.getParameter("parent");
List chlist = new ArrayList();
if(level.equals("1")){
chlist.add(new Channel("ai","前沿/区块链/人工智能"));
chlist.add(new Channel("web", "前端/小程序/js"));
} else if (level.equals("2")) {
if (parent.equals("ai")) {
chlist.add(new Channel("mico", "微服务"));
chlist.add(new Channel("blockchain", "区块链"));
chlist.add(new Channel("other", "。。。。"));
} else if (parent.equals("web")) {
chlist.add(new Channel("html","HTML"));
chlist.add(new Channel("css", "CSS"));
chlist.add(new Channel("other", "。。。。"));
}
}
String json = JSON.toJSONString(chlist);
resp.setContentType("text/html;charset=UTF-8");
resp.getWriter().println(json);
}
}
package com.Ray.ajax;
public class Channel {
private String code;
private String name;
public Channel() {
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Channel(String code, String name) {
this.code = code;
this.name = name;
}
}
etCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Channel(String code, String name) {
this.code = code;
this.name = name;
}
}
|