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>