引入文件
(1)jquery-3.6.0.js和jquery-3.6.0.min.js
(2)以上两个文件任选其一即可
(3)引入：
<script src="js/jquery-3.6.0.js" type="text/javascript"
charset="utf-8">
</script>
(4)语法：
$("选择器").jQuery()
选择器
全局选择器：$("*")
元素选择器：$("元素名称")
class选择器：$(".元素的class属性值")
id选择器：$("#元素的id属性值")
选择器组：$("选择器1,选择器2")
交集选择器：$("选择器1选择器2") 先写元素选择器
后代选择器：$("选择器1 选择器2")
子代选择器：$("选择器1>选择器2")
匹配属性名称：$("元素名称[属性名称]")
匹配属性名称和属性值：$("元素名称[属性名称="属性值"]")
:first 第一个元素
:last 最后一个元素
:odd 索引值为奇数
:even 索引值为偶数
:eq(索引) 等于
:gt(索引) 大于
:lt(索引) 小于:input 输入框
:text 文本框
:password 密码框
:radio 单选按钮
:checkbox 复选框
:checked 默认选中(单选按钮、复选框)
:disabled 不可用
:selected 默认选中(下拉选)
:visible 可见、显示
:hidden 隐藏<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"> </script> </head> <body> <ul id="mySubject"> <li>Spring</li> <li>SpringMVC</li> <li>MyBatis</li> <li>SpringBoot</li> </ul> </body> <script type="text/javascript"> /* 选择器： :first 第一个元素 :last 最后一个元素 :odd 索引值为奇数 :even 索引值为偶数 :eq(索引) 等于 :gt(索引) 大于 :lt(索引) 小于 */ /* :first 第一个元素 */ console.log($("#mySubject li:first").html()); /* :last 最后一个元素 */ console.log($("#mySubject li:last")); /* :odd 索引值为奇数 */ console.log($("#mySubject li:odd")); /* :even 索引值为偶数 */ console.log($("#mySubject li:even")); /* :eq(索引) 等于 */ console.log($("#mySubject li:eq(2)").html()); /* :gt(索引) 大于 */ console.log($("#mySubject li:gt(0)")); /* :lt(索引) 小于 */ console.log($("#mySubject li:lt(2)")); </script> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"> </script> <style type="text/css"> #div1{ width: 100px; height: 100px; border: 1px solid black; /* 隐藏 */ display: none; } #div2{ width: 100px; height: 100px; border: 1px solid black; } </style> </head> <body> <input type="text" value="tom"/> <br> <input type="password" value="1234"/> <br> <input type="radio" value="0"/>男 <input type="radio" value="1" checked/>女 <br> <div> <input type="checkbox" value="0"/>唱歌 <input type="checkbox" value="1" checked/>跳舞 <input type="checkbox" value="2" checked/>打游戏 </div> <br> <select> <option value ="01">郑州</option> <option value ="13" selected>新乡</option> <option value ="34">洛阳</option> </select> <br> <input type="button" value="按钮" disabled/> <input type="button" value="按钮2"/> <br> <div id="bottomdiv"> <div id="div1"> div1 </div> <div id="div2"> div2 </div> </div> </body> <script type="text/javascript"> /* 选择器： :input 输入框 :text 文本框 :password 密码框 :radio 单选按钮 :checkbox 复选框 :checked 默认选中(单选按钮、复选框) :disabled 不可用 :selected 默认选中(下拉选) :visible 可见、显示 :hidden 隐藏 */ /* :input input元素 */ // $(":input").css("background-color","green"); /* :text 文本框 */ // $(":text").css("color","red"); /* :password 密码框 */ // $(":password").css("color","red"); /* :radio 单选按钮 */ // console.log($(":radio")); /* :checked 默认选中 */ // console.log($(":checked")); /* :checkbox 复选框 */ // console.log($(":checkbox")); /* :checked 默认选中 */ // console.log($(":checkbox:checked")); // console.log($("div :checkbox:checked")); // console.log($("div :checked")); // console.log($(":selected").val()); /* :disabled 不可用 */ // console.log($(":disabled")); /* :visible 显示 */ // $("#bottomdiv :visible").css("background-color","red"); /* :hidden 隐藏 */ console.log($("#bottomdiv :hidden").html());; </script> </html>
常用方法
(1)获取value属性值：比如input
获取value属性值：val()
设置value属性值：val(值)
(2)获取值(内容体)：比如h1
获取值(内容体)：html()
设置值(内容体)：html(值)
(3)样式：
设置值：css(样式属性名称,属性值)
获取值：css(样式属性名称)
(4)find(选择器)：查找子元素
(5)not(选择器)：除了...
(6)next()：下一个同级元素
(7)prev()：上一个元素
(8)prop()：
比如checked属性
获取值：prop("checked")
设置值：prop("checked",true/false)
(9)遍历：
$(选择器).each(function(i){
//i：索引值
//this：遍历到的元素
})$.each(遍历的元素，function（）{
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript"
charset="utf-8">
</script>
<style type="text/css">
#mydiv{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="text" value="月薪过万"/>
<br>
<h1>Web</h1>
<div id="mydiv"></div>
<ul id="mySubject">
<li>Spring</li>
<li>SpringMVC</li>
<li>MyBatis</li>
<li>SpringBoot</li>
</ul>
<input id="fullcheck" type="checkbox"/>全选
<input id="reversecheck" type="checkbox"/>反选
<div>
<input type="checkbox" value="0"/>唱歌
<input type="checkbox" value="1"/>跳舞
<input type="checkbox" value="2"/>打游戏
</div>
</body>
<script type="text/javascript">
/*
常用方法：
(1)获取value属性值：比如input
获取value属性值：val()
设置value属性值：val(值)
(2)获取值(内容体)：比如h1
获取值(内容体)：html()
设置值(内容体)：html(值)
(3)样式：
设置值：css(样式属性名称,属性值)
获取值：css(样式属性名称)
(4)find(选择器)：查找子元素
(5)not(选择器)：除了...
(6)next()：下一个同级元素
(7)prev()：上一个元素
(8)prop()：
比如checked属性
获取值：prop("checked")
设置值：prop("checked",true/false)
(9)遍历：
$(选择器).each(function(i){
//i：索引值
//this：遍历到的元素
})
*/
/* 获取value值 */
console.log($(":text").val());
/* 设置value值 */
$(":input").val("早日转正");
/* 获取值 Web */
console.log($("h1").html());
/* 设置值 Java */
$("h1").html("Java");
/* 设置样式 背景颜色 */
$("#mydiv").css("background-color","red");
/* 获取值 */
console.log($("#mydiv").css("background-color"));
/* find(选择器) 查找子元素 */
console.log($("#mySubject").find("li"));
/* not(选择器) 除了... */
console.log($("#mySubject").find("li").not(":first"));
console.log($("#mySubject").find("li").not(":last"));
/* next() 下一个元素 */
console.log($("li:eq(0)").next().html());//SpringMVC
/* prev() 上一个元素 */
console.log($("li:eq(2)").prev().html());//SpringMVC
/* 复选框：全部选中 */
/* 隐式循环 */
/* prop() */
// $(":checkbox").prop("checked",true);
/* 全选 */
$("#fullcheck").click(function(){
// console.log($(this).prop("checked"));
//this：操作的元素
$("div :checkbox").prop("checked",$(this).prop("checked"));
})
/* 反选 */
$("#reversecheck").on("click",function(){
/* 原来true 反选false 原来false 反选true */
/* 遍历 */
$("div :checkbox").each(function(i){
//i：索引值
console.log(i);
//this 遍历到的每个元素
$(this).prop("checked",!$(this).prop("checked"));
})
})
</script>
</html>事件
$(选择器).click(function(){
//执行任务
})
$(选择器).on("click",function(){
//执行任务
})增加：
针对父元素，增加子元素
在A的末尾增加B：
A.append(B)
B.appendTo(A)
在A的头部添加B：
A.prepend(B)
B.prependTo(A)
针对同辈元素，增加\插入元素
在A的前边增加B：
A.before(B)
B.insertBefore(A)
在A的后边增加B：
A.after(B)
B.insertAfter(A)复制：
clone() 参数为true，复制原元素绑定的事件
删除：
remove() 删除自身和子元素
empty() 删除子元素
获取：
针对父元素，获取子元素：children()
针对子元素，获取父元素：
parent() 获取直接父元素
parents() 获取所有的父元素 ...html
针对同辈元素：
获取上一个兄弟节点：prev()
获取下一个兄弟节点：next()
获取所有的兄弟节点：siblings() 不包含自己
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript"
charset="utf-8">
</script>
</head>
<body>
<input id="add" type="button" value="增加"/>
<input id="clone" type="button" value="复制"/>
<input id="del" type="button" value="删除"/>
<input id="get" type="button" value="获取"/>
<ul id="job" >
<li>Java</li>
<li>Web</li>
<li id="test">软件测试</li>
<li>需求</li>
<li>产品经理</li>
<li>运维</li>
</ul>
<ul id="job2">
<li>UI设计</li>
</ul>
</body>
<script type="text/javascript">
// 在 软件测试 上绑定单击事件
/* $("#test").click(function(){
console.log(1);
}) */
$("#test").on("click",function(){
console.log(1);
})
// 获取
$("#get").click(function(){
// 需求1：获取Java
// console.log($("#job :first").html());
// console.log($("#job li").eq(0).html());
// 需求2：获取第一个ul中的所有li
// children()：获取子元素
// console.log($("#job").children());
// 需求3：获取 软件测试 的父元素
// parent()：获取直接父元素
// console.log($("#test").parent());//ul
// parents()：获取所有的父元素 ul\body\html
// console.log($("#test").parents());
// 需求4：获取 软件测试 的下一个兄弟节点
console.log($("#test").next());//需求
// 需求5：获取 软件测试 的上一个兄弟节点
console.log($("#test").prev());//Web
// 需求6：获取 软件测试 的所有(不包含自己)兄弟节点
console.log($("#test").siblings());
})
// 删除
$("#del").click(function(){
// 需求1：删除第一个ul中的内容
// remove()：删除自身和子元素
// $("#job").remove();
// empty()：删除子元素
$("#job").empty();
})
// 复制
$("#clone").click(function(){
// 需求1：复制 软件测试，添加到第一个ul的末尾
// 复制元素：clone()，参数为true，复制绑定事件
var newLi=$("#test").clone(true);
$(newLi).appendTo($("#job"));
})
// 增加
$("#add").click(function(){
var newLi="<li>云计算</li>";
// 需求1：在ul的末尾添加 云计算
// 末尾追加：在A的末尾添加B A.append(B) B.appendTo(A)
// $("#job").append(newLi);
// $(newLi).appendTo($("#job"));
// 需求2：在ul的头部添加 云计算
// $("#job").prepend(newLi);
// $(newLi).prependTo($("#job"));
// 需求3：在 软件测试 之前添加 云计算
// $("#test").before(newLi);
// $(newLi).insertBefore($("#test"));
// 需求4：在 软件测试 之后添加 云计算
// $("#test").after(newLi);
// $(newLi).insertAfter($("#test"));
// 需求5：在第二个ul的末尾添加 第一个ul中的软件测试
var newLi2=$("#test");
$("#job2").append(newLi2);
})
</script>
</html>
属性操作
attr()和prop()：
attr()：获取自定义属性的属性值
prop()：针对于disabled、checked...，若元素具有这些属性，返回值为true，反之为 false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript"
charset="utf-8">
</script>
</head>
<body>
<input type="text" value="123" myname="tom"/>
<br>
<input type="checkbox" />Java
</body>
<script type="text/javascript">
/*
attr()和prop()
对于普通属性，比如type、value等，若需获取属性值，如上两个方法均可
attr()：获取自定义属性的属性值
prop()：针对于disabled、checked...，若元素具有这些属性，
返回值为true，反之为false
*/
console.log($(":text").attr("type"));//text
console.log($(":text").prop("type"));//text
console.log($(":text").attr("value"));//123
console.log($(":text").prop("value"));//123
console.log($(":text").attr("disabled"));//disabled/undefined
console.log($(":text").prop("disabled"));//true/false
console.log($(":text").attr("myname"));//tom
console.log($(":text").prop("myname"));//undefined
console.log($(":checkbox").attr("type"));//checkbox
console.log($(":checkbox").prop("type"));//checkbox
console.log($(":checkbox").attr("checked"));//checked/undefined
console.log($(":checkbox").prop("checked"));//true/false
</script>
</html>事件绑定：
$(选择器).事件(function(){})
$(选择器).on("事件",function(){})
事件解绑：
$(选择器).off("事件")
// 事件绑定
// $("input").click(function(){
// // 事件解绑 让事件只能执行一次
// $(this).off("click");
// console.log($(this).val());
// })