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.cs.com/liunaixu/">菜单1</a>
<a href="https://www.cs.com/liunaixu/">菜单2</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu">
<a href="https://www.cs.com/liunaixu/">菜单1</a>
<a href="https://www.cs.com/liunaixu/">菜单2</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu">
<a href="https://www.cs.com/liunaixu/">菜单1</a>
<a href="https://www.cs.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.cs.com/liunaixu/">菜单1</a>
<a href="https://www.cs.com/liunaixu/">菜单2</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu hide">
<a href="https://www.cs.com/liunaixu/">菜单1</a>
<a href="https://www.cs.com/liunaixu/">菜单2</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu hide">
<a href="https://www.cs.com/liunaixu/">菜单1</a>
<a href="https://www.cs.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.cs.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>