JQuery
优化JavaScript语言,缩短了JS的代码,将JS的方法整合。
使用JQuery
- 官网下载
- 在文件中引入
<script type="text/javascript" src="lib/jquery-3.6.0.js"></script>
选择器
选择器返回的值是一个数组
基础选择器
ID选择器,Class选择器,标签选择器
JQuery选择器与JavaScript选择器对比
// ID
$("#div1");
document.getElementById("div1");
// Class
$(".oneClass");
document.getElementsByClassName("oneClass");
// 标签
$("div");
document.getElementsByTagName("div");
混合选择器,全选选择器
$("#div1,.twoClass,div"); // 选择id为div1;class为twoClass,标签为div的所有元素
$(*); //所有元素全部选择
form表单选择器
type值选择器 $(“:type值”);
// 获取单行文本框对象
$(":text");
// 获取radio单选按钮的对象,循环遍历每个选项的值
let $radio = $(":radio");
for (let i = 0; i < $radio.length; i++) {
alert($radio.get().value);
}
// 获取多选框的对象,遍历时将dom对象转换为jquery对象,输出值
let $checkbox = $(":checkbox");
for (let i = 0; i < $checkbox.length; i++) {
alert($($checkbox[i]).val());
}
name选择器
- $(“input[name=name的值]”);
$("input[name=sex]");
dom对象和JQuery对象的相互转换
为了易于区分两者的对象,JQuery对象的前面加$
- dom对象转换为JQuery对象;
$(dom对象);
let $div1=$(domdiv1);
- JQuery对象转换为dom对象:
$div1.get(0);
或者$div1[0];
注意括号不同
JQuery对象类似于数组结构
let $div1 = $("#div1"); //定义jquery对象
let domdiv1 = $div1.get(0); //转换为dom对象
过滤器
基本过滤器
- JQuery对象数组中的第一个对象
$("选择器:first")
- JQuery对象数组中的最后一个对象
$("选择器:last")
- JQuery对象数组中索引为2的对象
$("选择器:eq(2)")
- JQuery对象数组中索引小于3的对象
$("选择器:lt(3)")
- JQuery对象数组中索引大于3的对象
$("选择器:gt(3)")
- 完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="lib/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function () {
//
$("#btn1").click(function () {
$("div:first").css("background", "red");
})
$("#btn2").click(function () {
$("div:last").css("background", "yellow")
})
$("#btn3").click(function () {
$("div:eq(3)").css("background", "green")
})
$("#btn4").click(function () {
$("div:lt(2)").css("background", "blue")
})
$("#btn5").click(function () {
$("div:gt(3)").css("background", "orange")
})
})
</script>
<div>div-0</div>
<div>div-1</div>
<div>div-2
<div>div-3</div>
<div>div-4</div>
</div>
<div>div-5</div>
<input type="button" value="选择第一个dom对象" id="btn1"/><br>
<input type="button" value="选择最后一个dom对象" id="btn2"/><br>
<input type="button" value="选择第三个dom对象" id="btn3"/><br>
<input type="button" value="选择前三个dom对象" id="btn4"/><br>
<input type="button" value="选择后三个dom对象" id="btn5"/><br>
</body>
</html>
属性过滤器
$(“选择器:属性”); 注:选择器可以是id选择器也可以是class选择器等等
-
常用属性:
文本框:disabled、readonly
选 择:checked
下拉选择:selected -
表单中所有可用的文本框
示例中使用的是type属性选择器
$(":text:enabled");
- 单选或多选组合适用:name值为sex,且被选中的元素
示例中使用的是name选择器
$("input[name=sex]:checked");
- 下拉选择框适用
$(“选择器>option:selected”)
$("select>option:selected")
常用函数
val
js中的value
- 返回的是数组第一个元素的值
$("选择器").val();
- 给选择器的所有元素赋值
$("选择器").val(“新的值”);
text
js中的innerText属性
- 返回所有元素text拼接的字符串
$("选择器").text()
- 给所有元素的text赋值
$("选择器").text("新的值")
attr(属性)
- 获取元素的属性
$("选择器").attr("属性名")
- 给元素的指定属性赋值
$("选择器").attr("属性名","值")
示例;给img更改src属性的值,产生更换图片的效果
$("img").attr("src","/img/2.jpg")
删除、新增元素
- 删除元素及其子元素
$("选择器").remove()
- 只删除子元素(元素的text也会被删除)
$("选择器").empty()
- 在元素的子元素的最后新增一个子元素(新增html代码)
$("选择器").append("<div>新增的子元素</div>")
html
- 获取数组第一个元素的html
$("选择器").html()
- 与text区别:html会输出元素内所有内容,包括标签符号。示例:
<div id="div1">第一个div
<div>第二个div</div>
</div>
<---以上代码执行获取html后输出为-->
第一个div
<div>第二个div</div>
<--如果执行text函数后输出为-->
第一个div 第二个div
- 设置元素的html
值当中可以包含标签
$("选择器").html("值")
each 循环
数组对象可以是:数组、json、jquery元素数组
- 语法格式1:
$.each(数组对象,function (索引,元素) {
// 依次对每个元素,执行方法
})
- 语法格式2:
遍历选择器返回的数组对象时,单个的元素是dom对象
$("选择器").each(function(i,n){
// 此时操作的是dom对象,不是jquery对象,例如取值时要使用value
})
绑定事件
- 如果要在javaScript代码中完成元素与事件的绑定,则需要在页面加载完成后才可绑定事件。
页面加载完成
- javaScript写法
window.onload=function () {
// 页面加载完成后执行
}
- JQuery写法
$(document).ready(function () {
// 页面加载完成后执行
})
- JQuery简化后的写法
$(function () {
// 页面加载完成后执行
})
单击事件
- 第一种绑定方式:
$("选择器").click(function(){ 事件触发后的执行代码 })
$("#btn1").click(function () {
// 点击后执行代码
})
- 第二种绑定方式:
$("选择器").on("事件名称",function (){ 事件触发后的执行代码 }
$("#btn2").on("click",function () {
//点击后执行的代码
})
Json
jackjson
下载jar包
- 类对象转换为Json字符串
//
ObjectMapper objectMapper = new ObjectMapper();
String json = objectMapper.writeValueAsString(类对象);
// 响应
response.setContentType("application/json;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(json);