引入文件
选择器
<!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><!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("事件")