jQuery的使用
1、初识jQuery
jQuery是一个别人封装好的模块（类库），代码量更少的实现我们想要的功能。
1）下载jQuery
jQuery官网》
有两个版本：
一个时压缩生产版本：Download the compressed, production jQuery 3.6.0 》jquery-3.6.0.min.js (这里的min表示生产)
一个时非压缩开发版本：Download the uncompressed, development jQuery 3.6.0 >
2）代码引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--引用jQuery-->
<script src="jquery-3.6.0.min.js"></script>
</body>
</html>
3）根据jQuery的用法来进行操作即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="info"></h1>
<!--引用jQuery-->
<script src="jquery-3.6.0.min.js"></script>
<script>
$("#info").text("欢迎指导");
</script>
</body>
</html>
2、jQuery教程》https://www.runoob.com/jquery/jquery-tutorial.html
参考文档：https://jquery.cuishifeng.cn/jQuery_selector_context.html
3、选择器
寻找想要的标签
1）ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="info"></h1>
<h1 id="info1"></h1>
<h1 id="info2"></h1>
<!--引用jQuery-->
<script src="jquery-3.6.0.min.js"></script>
<script>
$("#info")
</script>
</body>
</html>
2）class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 class="info">class的</h1>
<h2 class="info"></h2>
<h3 class="info2">1234567890</h3>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(".info").text("class选择器")；
</script>
</body>
</html>
3）标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 class="info">class的</h1>
<h2 class="info"></h2>
<h3 class="info2">1234567890</h3>
<script src="jquery-3.6.0.min.js"></script>
<script>
$("h1").text("class选择器")
</script>
</body>
</html>
4）多选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 class="info"></h1>
<h2 class="info"></h2>
<h3 class="info3">1234567890</h3>
<div id="v1">
sdf
</div>
<script src="jquery-3.6.0.min.js"></script>
<script>
$("h1,.info3,#id").text("xxxxx")
</script>
</body>
</html>
5）层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 class="info"></h1>
<h2 class="info"></h2>
<h3 class="info3">1234567890</h3>
<div id="v1">
<h1>
sdf
</h1>
<ul>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script>
$("#v1 li").text("yyy");
</script>
</body>
</html>
4、筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="v1">
<h1>
sdfg
</h1>
<ul id="menu">
<li>x1</li>
<li id="xx">x2</li>
<li>x3</li>
</ul>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script>
//父级
$("#xx").parent();
//爷爷级
$("#xx").parent().parent();
// 孩子
$("#menu").children();
// 兄弟下一个
$("#xx").next();
// 兄弟上一个
$("#xx").prev();
// 所有的兄弟
$("#xx").siblings();
// 子孙中寻找
$("#v1").find("li");
$("#v1").find("#xx");
$("#v1").find(".v1");
</script>
</body>
</html>
5、样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="v1">
<h1>
sdf
</h1>
<ul>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script>
$("v1").addClass("增加样式");
$("v1").removeClass("删除样式");
$("v1").hasClass("判断是否有样式");
$("v1").toggleClass("跳动样式");
</script>
</body>
</html>
6、链式编程
菜鸟教程连接https://www.runoob.com/jquery/jquery-chaining.html
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function() { $("button").click(function(){ $("#p1").css("color","red").slideUp(2000).slideDown(2000); }); }); </script> </head> <body> <p id="p1">菜鸟教程!!</p> <button>点我</button> </body> </html>
7、案例：
1）使用jQuery实现如下效果点击头部实现打开和闭合菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.group{
width: 300px;
border: 1px solid #ddd;
}
.group .header{
background-color: gold;
padding: 8px 5px;
}
.group .menu a{
display: block;
}
/*隐藏样式*/
.hide{
display: none;
}
</style>
</head>
<body>
<div class="group">
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu">
<a href="https://www.cnblogs.com/liunaixu/">菜单1</a>
<a href="https://www.cnblogs.com/liunaixu/">菜单2</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu">
<a href="https://www.cnblogs.com/liunaixu/">菜单1</a>
<a href="https://www.cnblogs.com/liunaixu/">菜单2</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu">
<a href="https://www.cnblogs.com/liunaixu/">菜单1</a>
<a href="https://www.cnblogs.com/liunaixu/">菜单2</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
<!--给所有class=header 的标签设置点击事件-->
$(".header").click(function () {
/* if($(this).next().hasClass('hide')){
// $(this)点击的事件
$(this).next().removeClass('hide');
}else {
$(this).next().addClass('hide');
}
*/
// 使用toggleClass()也可以实现上面的效果
$(this).next().toggleClass('hide');
});
</script>
</body>
</html>
2）实现点开任意一个其他都关闭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.group{
width: 300px;
border: 1px solid #ddd;
}
.group .header{
background-color: gold;
padding: 8px 5px;
}
.group .menu a{
display: block;
}
/*隐藏样式*/
.hide{
display: none;
}
</style>
</head>
<body>
<div class="group">
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu hide">
<a href="https://www.cnblogs.com/liunaixu/">菜单1</a>
<a href="https://www.cnblogs.com/liunaixu/">菜单2</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu hide">
<a href="https://www.cnblogs.com/liunaixu/">菜单1</a>
<a href="https://www.cnblogs.com/liunaixu/">菜单2</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu hide">
<a href="https://www.cnblogs.com/liunaixu/">菜单1</a>
<a href="https://www.cnblogs.com/liunaixu/">菜单2</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
<!--给所有class=header 的标签设置点击事件-->
$(".header").click(function () {
//自己展开
$(this).next().removeClass('hide');
//别人，给他关闭
$(this).parent().siblings().find('.menu').addClass("hide");
});
</script>
</body>
</html>
8、值和文本操作
1）值操作
<input type='text' id='v1' /> // 获取值 $("#v1").val() // 设置值 $("#v1").val("xxxxxx")
2)文本操作
<div id='v2'>xxxxx</div> //获取文本 $("#v2").text() //设置文本 $("#v2").text(“yyyyyy”)
3）扩展
基于jQuery去创造标签。
$("<a>").text(“yyyyyy”)
案例：Web 聊天室，当输入框为空时点击发送提示不能为空，当输入空有内容时点击发送将输入框内的内容放到放到下方区域中。
代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" placeholder="请输入内容" id="txt">
<input type="button" value="发送" id="btn">
</div>
<div id="content-area" style="width: 800px; background-color: #dddddd; border:1px solid #333;height: 500px;">
</div>
<script src="jquery-3.6.0.min.js"></script>
<script>
$("#btn").click(function () {
var content = $("#txt").val();
if(content.length < 1){
alert("输入不能为空");
return;
}
var newDiv = $("<div>").text(content);
// 在id=content-area的标签内部添加值
$("#content-area").append(newDiv)
});
</script>
</body>
</html>
9、attr()的属性操作
1）获取属性值
2）给属性赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--attr()属性操作-->
<a id="t1" href="https://www.cnblogs.com/liunaixu/">刘思江博客</a>
<script src="jquery-3.6.0.min.js"></script>
<script>
<!--获取属性并在控制台上打印出来-->
var data = $("#t1").attr("href")
console.log(data)
// 给属性赋值
$("#t1").attr('href',"https://www.baidu.com")
</script>
</body>
</html>
10、prop属性，针对于checkbox的选项的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--checked默认选中-->
篮球<input type="checkbox" id="v2" checked />
足球<input type="checkbox" id="v3"/>
<script src="jquery-3.6.0.min.js"></script>
<script>
// 设置选项属性
$("#v2").prop("checked",false)
$("#v3").prop("checked",true)
</script>
</body>
</html>
案例：表格中的全选、取消和反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" id="btnAll">
<input type="button" value="取消" id="btnClear">
<input type="button" value="反选" id="btnReverse">
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>ID</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>大江东去</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>大江东去</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>大江东去</td>
</tr>
</tbody>
</table>
<script src="jquery-3.6.0.min.js"></script>
<script>
$("#btnAll").click(function () {
$("table input[type='checkbox']").prop('checked',true)
})
$("#btnClear").click(function () {
$("table input[type='checkbox']").prop('checked',false)
})
$("#btnReverse").click(function () {
$("table input[type='checkbox']").each(function () {
/* var old = $(this).prop('checked');
if(old){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
*/
//上面的逻辑判断可以简化如下，只是判断
var old = $(this).prop('checked');
$(this).prop('checked',!old)
})
})
</script>
</body>
</html>
11、文档和标签的操作
1）创建标签
$("<div>")
$("<a>")
2)添加：追加
<div id='content'>
<div>adsgf</div>
//要想把标签添加到此处
</div>
var tag = $("<div>").text("xxxxx");
$("#content").append(tag)
添加：顶部插入
<div id='content'>
//要想把标签添加到此处，内部的顶部
<div>adsgf</div>
</div>
var tag = $("<div>").text("xxxxx");
$("#content").prepend(tag)；
添加：外部插入前
//要想把内容添加到此处，使用before <div id='content'> <div>adsgf</div> </div> var tag = $("<div>").text("xxxxx"); $("#content").before(tag)；
添加：外部插入后
<div id='content'>
<div>adsgf</div>
</div>
//要想把内容添加到此处，使用after
var tag = $("<div>").text("xxxxx");
$("#content").after(tag)；
3）删除标签
<div id="v1">
<h1>
sdfg
</h1>
<ul id="menu">
<li>x1</li>
<li id="xx">x2</li>
<li>x3</li>
</ul>
</div>
$("#xx").remove()
4）清空文本内容
<div id='xxx'>
asdfghjkl
</div>
如果时input框清空
$("#xxx").val("")
12、事件委托：删除动态数据的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="txt" />
<input type="button" value="添加" id="btnAdd">
<ul id="dataList"
<li>刘思江</li>
<li>周杰伦</li>
<li>江山</li>
</ul>
<script src="jquery-3.6.0.min.js"></script>
<script>
<!--点击并添加-->
$("#btnAdd").click(function(){
$("#dataList").append($("<li>").text($("#txt").val()));
});
// 删除数据，只能删除添加之前的数据，若想删除动态的数据使用事件委托
/* $("li").click(function () {
$(this).remove();
})
*/
// 通过父类查找
$("#dataList").on("click","li",function () {
$(this).remove();
})
</script>
</body>
</html>
13、框架加载：优化12事件委托案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="txt" />
<input type="button" value="添加" id="btnAdd">
<ul id="dataList"
<li>刘思江</li>
<li>周杰伦</li>
<li>江山</li>
</ul>
<script src="jquery-3.6.0.min.js"></script>
<script>
// 推荐，当页面'框架'加载完成之后执行。
$(function () {
// 写在这里面
$("#btnAdd").click(function(){
$("#dataList").append($("<li>").text($("#txt").val()));
});
// 删除数据，只能删除添加之前的数据，若想删除动态的数据使用事件委托
/* $("li").click(function () {
$(this).remove();
})
*/
bindLi();
})
function bindLi() {
// 通过父类查找
$("#dataList").on("click","li",function () {
$(this).remove();
})
}
</script>
</body>
</html>
