Java教程
java第二阶段之JQuery
一、JQuery简介
（一）简介
jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
（二）使用
1、引入
之前JavaScript课程我们讲过外部js文件的引入，如下:
<script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>
2、使用
在jQuery中，标识符$与jQuery是等价的，即jQuery == $，为了书写简单方便， 我们通常使用$替代jQuery。但jQuery是严格区分大小写的。
例如：我们可以通过jQuery(选择器) 或 $(选择器)来查找元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery的使用</title>
</head>
<script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script>
$(function() {
console.log($("div").html());
});
</script>
<body>
<div>Hello Jquery</div>
</body>
</html>
二、页面加载
jQuery提供了ready()函数，用于页面加载成功后执行。与window.onload函数作用一致。写法有以下三种：
代码示例：
$(function(){
alert(3);
})
JQuery的ready()与window.onload的区别：
1.执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
由此可见，$(document).ready()的执行时机要早于window.onload。
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload，只会执行一个。
$(document).ready()可以同时编写多个，并且都可以得到执行。
3.简化写法
window.onload没有简化写法。
$(document).ready(function(){})可以简写成$(function(){});
三、js对象与jQuery对象
(js对象)DOM对象：就是通过原生JavaScript方法获取到的对象就是DOM对象。
jQuery对象：就是通过jQuery包装DOM对象后产生的对象。
jQuery对象和DOM对象可以进行相互转换，但是切记两个对象的属性和函数不能彼此混搭使用
DOM对象转jQuery对象，语法：jQuery(DOM对象); 或 $(DOM对象);
jQuery对象转DOM对象，语法：jQuery对象[index]; 或 jQuery对象.get(index);
代码示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(function(){
var obj = document.getElementsByTagName("div")[0];
console.log(obj.innerHTML);
console.log($("div").html());
console.log($(obj).html());
$obj = $("div");
console.log($obj[0].innerHTML);
})
</script>
</head>
<body>
<div>div区域标签
<a href="">百度一下</a>
</div>
</body>
</html>
四、jQuery选择器
jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的定位，从而完成元素属性和行为的处理。
jQuery选择器的分类：
1.基本选择器
2.层级选择器
3.属性选择器
4.过滤选择器
5.表单选择器
（一）基本选择器
基本选择器是我们使用频率最高的选择器。
主要有：标签选择器、ID选择器、类选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(function(){
$arr = $("p");
for(var i = 0;i<$arr.length;i++){
console.log($arr[i].innerHTML);
}
$obj = $(".first");
for(var i = 0;i<$obj.length;i++){
console.log($obj[i].innerHTML);
}
console.log($("#title").html());
})
</script>
</head>
<body>
<p id = "title" class="first">我是p标签</p>
<p class="first">I am p </p>
<p>I am p3</p>
</body>
</html>
（二）层级选择器
层级选择器指按节点树的层级关系获取元素。通俗一点讲就是子孙元素/父子元素/兄弟元素的关系。
主要有：后代选择器、子选择器。
1.后代选择器：parent child, 使用空格隔开。获得父元素内部的所有儿子、孙子...元素。（祖孙关系）
2.子选择器：parent > child ,使用>符号隔开。 获得父元素下面的子元素。（父子关系）
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$arr = $("#main span");
for(var i=0;i<$arr.length;i++){
console.log($arr[i].innerHTML);
}
$arr.each(function(i,dom){
console.log(dom.innerHTML);
console.log($(dom).html());
})
})
</script>
</head>
<body>
<div id="main">
<p> I am a p in div</p>
<span>i am a span in div</span>
<p>
<span>I am a span in p</span>
</p>
</div>
<div>
<span>hahahahahha</span>
</div>
</body>
</html>
（三）属性选择器
根据属性或属性的值进行筛选。
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute=value] [attribute=value] $("[href='#'][class='demo']") 所有href属性的值等于"#"，且class属性的值为"demo"
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$arr = $("[href]");
$arr.each(function(i,dom){
console.log(dom.innerHTML);
});
$obj = $("[href='regist.html']");
console.log($obj.html());
})
</script>
</head>
<body>
<a href="index.html">链接1</a>
<a href="login.html">链接2</a>
<a href="regist.html">链接3</a>
<a href=""></a>
<a href=""></a>
</body>
</html>
（四）过滤选择器
过滤选择器是从获取的对象列表中再次筛选想要的元素。常用的过滤选择器有：
:first 第一个
:last 最后一个
:eq(index) 指定索引的
:gt(index) 大于索引的
:lt(index) 小于索引的
:odd 奇数
:even 偶数
:not() 除了**
:header 匹配标题,比如h2,h3...
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
//:first
console.log($("ul li:first").html());
//:last
console.log($("ul li:last").html());
//:eq(index)
console.log($("ul li:eq(1)").html());
console.log("============================");
//:lt(index)
$arr = $("ul li:lt(3)");
$arr.each(function(i,dom){
console.log(dom.innerHTML);
})
//:gt(index)
$arr4 = $("ul li:gt(1)")
$arr4.each(function(i,dom){
console.log(dom.innerHTML);
})
console.log("============================");
//:odd
$arr1 = $("ul li:odd");
$arr1.each(function(i,dom){
console.log(dom.innerHTML);
})
//:even
$arr3 = $("ul li:even");
$arr3.each(function(i,dom){
console.log(dom.innerHTML);
})
console.log("============================");
//:header
$arr2 = $("body :header");
$arr2.each(function(i,dom){
console.log(dom.innerHTML);
})
})
</script>
</head>
<body>
<h1>H1 title</h1>
<h2>H2 title</h2>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
<h3>H3 title</h3>
</body>
</html>
（五）表单选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$obj = $("body :disabled");
console.log($obj.val());
$arr= $("body :enabled");
$arr.each(function(i,dom){
console.log(dom.value);
})
$("#btn").click(function(){
$arr1 = $("input[type='checkbox']:checked");
$arr1.each(function(i,dom){
console.log(dom.value);
})
$arr2 = $(":selected");
console.log($arr2.val());
})
$("#txt").blur(function(){
console.log($(this).val());
})
$("#d1").change(function(){
console.log(this.value);
})
})
</script>
</head>
<body>
sex:
man:<input type="radio" name="sex" value="man" id="" disabled>
women:<input type="radio" name="sex" value="woman" id=""><br>
hobby:
smoking:<input type="checkbox" name="hobby" value="smoking" id="">
tang:<input type="checkbox" name="hobby" value="tang" id="">
walk:<input type="checkbox" name="hobby" value="walk" id=""><br>
<select name="" id="d1">
<option value="bj">bj</option>
<option value="sh">sh</option>
<option value="nj">nj</option>
</select>
<input type="button" value="点击" id = "btn">
<input type="text" name="" id="txt">
</body>
</html>
五、jQuery的DOM操作
（一）属性操作
attr()
attr("属性名") 获取标签中对应的属性名的值
attr("属性名","属性值") 设置标签的属性名与对应的属性值
prop()
prop("属性名") 获取标签中对应的属性名的值
prop("属性名","属性值") 设置标签的属性名与对应的属性值
attr()与prop()的区别？
attr()能够实现对标签中自带属性与自定义属性的操作,但是在某些使用过程中有功能失效问题
prop()实现对标签中自带属性的操作,推荐使用
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.c2{
border: 2px solid red;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
console.log($("#txt").attr("name"));
console.log($("#txt").prop("name"));
console.log($("#txt").attr("ids"));
console.log($("#txt").prop("ids"));
$("#txt").prop("class","c2");
})
</script>
</head>
<body>
<input type="text" id="txt" name="username" ids="hello" class="c1">
</body>
</html>
（二）class类操作
1. addClass() 向被选元素添加一个或多个类
2. removeClass() 从被选元素删除一个或多个类
3. toggleClass() 对被选元素进行添加/删除类的切换操作
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid orange;
height: 100px;
width: 100px;
}
.c1{
border: 1px solid red;
height: 300px;
}
.c2{
width: 400px;
background-color: blue;
}
.c3{
background-color: springgreen;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("div").mouseover(function(){
$(this).addClass("c1 c2");
})
$("div").mouseout(function(){
$(this).removeClass("c2");
})
$("div").click(function(){
$(this).toggleClass("c3");
})
})
</script>
</head>
<body>
<div>区域标签</div>
</body>
</html>
（三）内容操作
1. html() 设置或返回所选元素的内容（包括 HTML 标记）
2. text() 设置或返回所选元素的文本内容
3. val() 设置或返回表单字段的值
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("#btn").click(function() {
console.log($("div").html()); //获取div的内容
console.log($("div").text()); //获取div的文本内容
console.log($("#d1").val()); //获取文本框输入的值
});
})
</script>
</head>
<body>
<div>
<a href="">超链接-百度一下</a>
</div>
<input type="text" id="d1" /> <br>
<input type="button" value="点击" id="btn">
</body>
</html>
（四）样式操作
1. css("样式名") 获取该样式的值
2. css("样式名","值") 设置一个样式
3. css({"样式名":"值","样式名":"值",...}) 设置多个样式
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$("div").css({"height":"200px","width":"200px","border":"1px solid red"})
})
})
</script>
</head>
<body>
<div></div>
<input type="button" value="点击" id="btn">
</body>
</html>
（五）文档操作
1、内部插入
1. append(); 在被选元素的结尾插入内容
2. prepend(); 在被选元素的开头插入内容
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("ul").append("<a href=''>百度一下</a>")
$("ul").prepend("<a href=''>百度一下</a>")
})
$("#btn2").click(function(){
})
})
</script>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<input type="button" value="内部添加" id="btn1">
<input type="button" value="外部添加" id="btn2">
<input type="button" value="">
</body>
</html>
2、外部插入
1. after(); 在被选元素之后插入内容
2. before();在被选元素之前插入内容
3、删除
1. empty(); 清空里面内容
2. remove(); 删除整个元素
3. detach(); 删除整个元素
2,3删除的区别,detach删除后还遗留在页面上，并没有完全消失
六、jQuery事件
jQuery的事件类型和我们之前学习的JavaScript事件类型基本上是一样的，只是在使用的方式上有一些差别 比如 点击事件click,失焦事件 blur,聚焦事件 focus等...
代码示例如下:
$obj.click(function(){
//编写点击事件触发后要执行的js代码
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
//给按钮添加点击事件
$("#btn").click(function() {
alert("按钮点击事件触发并执行");
});
})
</script>
</head>
<body>
<input type="button" value="点击事件演示" id="btn">
</body>
</html>
七、动画效果
1、显示与隐藏
jQuery特效，是指jQuery封装了JS的一些用于处理元素的显示与隐藏的比较好看的效果，我们可以通过调用函数直接使用。
常用的jQuery特效有以下几种：
1.显示与隐藏
（1）show(speed,callback);显示元素。
（2）hide(speed,callback);隐藏元素。
（3）toggle(speed,callback); 在 show() 和hide() 方法之间切换，显示被隐藏的元素，并隐藏已显示的元素。
参数说明：
speed 参数规定隐藏和显示的速度，可以取以下值："slow"、"fast" 或毫秒。
callback 参数是隐藏或显示完成后所执行的回调函数名称。
以上两个参数都是可选项。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: brown;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div").hide(5000,function(){
alert("嘿嘿嘿嘿嘿")
})
})
$("#btn2").click(function(){
$("div").show(5000,function(){
alert("大大大大大")
})
})
$("#btn3").click(function(){
$("div").toggle(3000)
})
})
</script>
</head>
<body>
<div>12</div>
<input type="button" value="隐藏" id="btn1">
<input type="button" value="显示" id="btn2">
<input type="button" value="hide/show" id="btn3">
</body>
</html>
2、淡入淡出
（1）fadeIn(speed,callback);淡入已隐藏的元素。
（2）fadeOut(speed,callback);淡出可见元素。
（3）fadeToggle(speed,callback);在 fadeIn()与 fadeOut()方法之间进行切换。如果元素已淡出，则 fadeToggle()会向元素添加淡入效果。如果元素已淡入，则 fadeToggle()会向元素添加淡出效果。
参数作用同上。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: brown;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div").fadeIn(5000,function(){
alert("嘿嘿嘿嘿嘿")
})
})
$("#btn2").click(function(){
$("div").fadeOut(5000,function(){
alert("大大大大大")
})
})
})
</script>
</head>
<body>
<div>12</div>
<input type="button" value="隐藏" id="btn1">
<input type="button" value="显示" id="btn2">
<input type="button" value="hide/show" id="btn3">
</body>
</html>
3、滑动效果
（1）slideDown(speed,callback);向下滑动元素，用于作显示。
（2）slideUp(speed,callback);向上滑动元素，用于作隐藏。
（3）slideToggle(speed,callback);在 slideDown()与 slideUp()方法之间进行切换。如果元素已向下滑动，则 slideToggle()会向上滑动它们。如果元素已向上滑动，则 slideToggle()会向下滑动它们。
参数作用同上。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border:1px solid black;
width: 200px;
height: 200px;
}
#a {
background-color: brown;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#a").slideUp(5000,function(){
alert("嘿嘿嘿嘿嘿")
})
})
$("#btn2").click(function(){
$("#a").slideDown(5000,function(){
alert("大大大大大")
})
})
})
</script>
</head>
<body>
<div>
<div id="a">12</div>
</div>
<input type="button" value="隐藏" id="btn1">
<input type="button" value="显示" id="btn2">
<input type="button" value="hide/show" id="btn3">
</body>
</html>
4、自定义动画
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
animate(params,[speed],[fn])
参数解析:
1.params:一组包含作为动画属性和终值的样式属性和及其值的集合
2.speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
3.fn:在动画完成时执行的函数，每个元素执行一次。
代码示例：
八、数组操作
jQuery中有属于自己的遍历对象或者数组的方法，如下：
第一种写法:
$obj.each(function(i,dom){
});
第二种写法：
$.each(object,function(i,dom){
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("div").click(function(){
$(this).animate({"left":"500px"},5000,function(){
$(this).hide(3000)
})
})
})
</script>
</head>
<body>
<div>12</div>
</body>
</html>
i :对象的成员或数组的索引
dom:对应变量或内容,该变量或者内容为js对象
注意：如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$arr = $("div")
$arr.each(function(i,dom){
console.log($(dom).html());
})
})
</script>
</head>
<body>
<div>123</div>
<div>321</div>
</body>
</html>
九、表单插件
在学习javascript时候，我们手动的完成过表单数据的校验，这项功能在实际开发中也是常见的，属于通用功能，但是单纯的通过javascript进行校验，如果选项过多，那么还是有些力不从心。实际在开发中我们都是使用第三方工具，本案例中我们将使用jQuery插件validation进行表单的校验。
validation插件的使用步骤：
1、下载validation工具。
2、导入工具jquery-3.4.1.js、jquery.validate.js、messages_zh.js。
3、编写form表单信息并在脚本中给form表单绑定validate验证方法。
4、在form表单元素中逐个指定校验规则。
-
怎么修改Kafka的JVM参数？-icode9专业技术文章分享12-24
-
线下车企门店如何实现线上线下融合？12-23
-
鸿蒙Next ArkTS编程规范总结12-23
-
物流团队冬至高效运转，哪款办公软件可助力风险评估？12-23
-
优化库存，提升效率：医药企业如何借助看板软件实现仓库智能化12-23
-
项目管理零负担！轻量化看板工具如何助力团队协作12-23
-
电商活动复盘，为何是团队成长的核心环节？12-23
-
鸿蒙Next ArkTS高性能编程实战12-23
-
数据驱动：电商复盘从基础到进阶！12-23
-
从数据到客户：跨境电商如何通过销售跟踪工具提升营销精准度？12-23
-
汽车4S店运营效率提升的核心工具12-23
-
ERP 系统开发案例：用 PERT 图打造高效项目管理12-23
-
初创团队必备！全面解析支持甘特图的项目管理工具与功能特点12-23
-
任务进度跟踪不再难！可视化项目协作工具精选12-23
-
看板工具为汽车销售门店协作赋能：关键方法12-23
