JavaWeb之jQuery

28、jQuery

28.1、jQuery的概述

概念：一个JavaScript框架。简化JS开发

  • jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
  • JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

28.2、jQuery的快速入门

步骤：

  1. 下载jQuery

    • 目前jQuery有三个大版本：

      1.x：兼容ie678，使用最广泛的，官方只做BUG维护，

      ​ 功能不再新增。因此一般项目来说，使用1.x版本就可以了，

      ​ 最终版本：1.12.4（2016年5月20日）

      2.x：不兼容ie678，很少有人使用，官方只做BUG维护，

      ​ 功能不再新增加。如果不考虑兼容低版本的浏览器可以使用2.x，

      ​ 最终版本：2.2.4（2016年5月20日）

      3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，

      ​ 一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本

      ​ 目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）

    • jquery-xxx.js 与 jquery-xxx.min.js区别：

      1. jquery-xxx.js ：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
      2. jquery-xxx.min.js ：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

  2. 导入jQuery的js文件：导入min.js文件

  3. 使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>快速入门</title>
<!--  导入jquery文件--><script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
</body>
<script>
<!--  获取div元素对象-->
let div1 = $("#div1");
let div2 = $("#div2");
alert(div1.html())
alert(div2.html())
</script>
</html>

28.3、jQuery对象和JS对象区别与转换

jQuery对象在操作时，更加方便

jQuery对象和js对象方法不通用

两者相互转换

  • jq --> js：jq对象[索引] 或者 jq对象.get(索引)
  • js --> jq：$(js对象)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>快速入门</title><!--  导入jquery文件--><script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
</body><script>//获取所有div元素的对象//JS方式获取let divs = document.getElementsByTagName("div");alert(divs)//JQ方式获取let $divs = $("div");alert($divs)//获取div元素中的值//js的方式for (var i = 0;i<divs.length;i++){let innerText = divs[i].innerText;alert(innerText)}//jq的方式let html = $divs.html();alert(html)//修改div元素中的值//js的方式for (var i = 0;i<divs.length;i++){divs[i].innerText = "aaa";}//jq的方式$divs.html("bbb");//js转换jq的方式let $1 = $(divs);alert($1)//jq转换js的方式//let div = $divs[0];let div = $divs.get(1);alert(div);</script>
</html>

28.4、事件绑定&入口函数&样式控制

事件绑定

//获取按钮对象绑定单击事件 
$("#b1").click(function(){alter("abc");
})

入口函数

//当页面加在完执行函数里面的代码
$(function(){});
/* window.onload 和 $(function) 区别window.onload 只能定义一次，如果定义多次，后面的会将前边的覆盖掉$(function)可以定义多次的
*/

样式控制：css方法

//$("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");

28.5、选择器

选择器：筛选具有相似特征的元素（标签）

28.5.1、基本选择器

  1. 标签选择器（元素选择器）
    • 语法：$("html标签名") 获得所有匹配标签名称的元素
  2. id选择器
    • 语法：$("#id的属性值") 获得与指定id属性值匹配的元素
  3. 类选择器
    • 语法：$(".class的属性值") 获得与指定的class属性值匹配的元素
  4. 并集选择器
    • 语法：$("选择器1,选择器2...") 获取多个选择器选中的所有元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>基本选择器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="js/jquery.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}</style><script type="text/javascript">$(function (){//<input type="button" value="保存"  class="mini" name="ok"  class="mini" />//<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>$("#b1").click(function (){$("#one").css("background-color","red");})//<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>$("#b2").click(function () {$("div").css("backgroundColor","red");})//<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>$("#b3").click(function () {$(".mini").css("backgroundColor","red");})//<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>$("#b4").click(function () {$("span,#two").css("backgroundColor","red")})})</script></head><body><input type="button" value="保存"  class="mini" name="ok"  class="mini" /><input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/><input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/><input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/><input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/><h1>有一种奇迹叫坚持</h1><h2>自信源于努力</h2><div id="one">id为one       </div><div id="two" class="mini" >id为two   class是 mini <div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini" >class是 mini</div><div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini01" >class是 mini01</div><div  class="mini" >class是 mini</div></div><span class="spanone">class为spanone的span元素</span><span class="mini">class为mini的span元素</span><input type="text" value="zhang" id="username" name="username"></body></html>

28.5.2、层级选择器

  1. 后代选择器
    • 语法：$("A B") 选择A元素内部的所有B元素
  2. 子选择器：
    • 语法：$("A > B") 选择A元素内部的所有B子元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>层次选择器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="js/jquery.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}</style><script type="text/javascript">$(function (){// <input type="button" value="保存" className="mini" name="ok" className="mini"/>// <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>$("#b1").click(function (){$("body div").css("backgroundColor","red");})// <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>$("#b2").click(function (){$("body > div").css("backgroundColor","red");})})</script></head><body><input type="button" value="保存"  class="mini" name="ok"  class="mini" /><input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/><input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/><h1>有一种奇迹叫坚持</h1><h2>自信源于努力</h2><div id="one">id为one  </div><div id="two" class="mini" >id为two   class是 mini <div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini" >class是 mini</div><div  class="mini" >class是 mini</div></div><div class="one">class是 one <div  class="mini01" >class是 mini01</div><div  class="mini" >class是 mini</div></div><span class="spanone">    span</span></body></html>

28.5.3、属性选择器

  1. 属性名称选择器
    • 语法：$(A[属性名]) 包含指定属性的选择器
  2. 属性选择器
    • 语法：$("A[属性名='值']") 包含指定属性等于指定值的选择器
  3. 复合属性选择器
    • 语法：$("A[属性名='值'][]...") 包含多个属性条件的选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>属性过滤选择器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="js/jquery.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div.visible{display:none;}</style><script type="text/javascript">$(function () {// <input type="button" value="保存" className="mini" name="ok" className="mini"/>// <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>$("#b1").click(function (){$("div[title]").css("backgroundColor","red")})// <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>$("#b2").click(function (){$("div[title='test']").css("backgroundColor","red")})// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>$("#b3").click(function (){$("div[title!='test']").css("backgroundColor","red")})// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>$("#b4").click(function (){$("div[title^='te']").css("backgroundColor","red")})// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>$("#b5").click(function (){$("div[title$='est']").css("backgroundColor","red")})// <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>$("#b6").click(function (){$("div[title*='es']").css("backgroundColor","red")})// <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>$("#b7").click(function (){$("div[id][title*='es']").css("backgroundColor","red")})})</script></head><body><input type="button" value="保存"  class="mini" name="ok"  class="mini" /><input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/><input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/><input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/><input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/><input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/><input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/><input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/><div id="one">id为one   div  </div><div id="two" class="mini"  title="test">id为two   class是 mini  div  title="test"<div  class="mini" >class是 mini</div></div><div class="visible" >class是 one <div  class="mini" >class是 mini</div><div  class="mini" >class是 mini</div></div><div class="one" title="test02">class是 one    title="test02"<div  class="mini01" >class是 mini01</div><div  class="mini" style="margin-top:0px;">class是 mini</div></div><div class="visible" >这是隐藏的</div><div class="one"></div><div id="mover" >动画</div><input type="text" value="zhang" id="username" name="username"></body></html>

28.5.4、过滤选择器

  1. 首元素选择器
    • 语法：:frist 获得选择的元素中的第一个元素
  2. 尾元素选择器
    • 语法：:last 获得选择的元素中的最后一个元素
  3. 非元素选择器
    • 语法：:not(selecter) 不包含指定内容的元素
  4. 偶数选择器
    • 语法：:even 偶数，从0开始计数
  5. 奇数选择器
    • 语法：:odd 奇数，从0开始计数
  6. 等于索引选择器
    • 语法：:eq(index) 指定索引元素
  7. 大于索引选择器
    • 语法：:gt(index) 大于指定索引元素
  8. 小于索引选择器
    • 语法：:lt(index) 小于指定索引元素
  9. 标题选择器
    • 语法：:header 获得标题元素，固定写法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>基本过滤选择器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="js/jquery.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}</style><script type="text/javascript">$(function (){// <input type="button" value="保存" className="mini" name="ok" className="mini"/>// <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>$("#b1").click(function () {$("div:first").css("backgroundColor","red");})// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>$("#b2").click(function () {$("div:last").css("backgroundColor","red");})// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>$("#b3").click(function () {$("div:not(.one)").css("backgroundColor","red");})// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>$("#b4").click(function () {$("div:even").css("backgroundColor","red");})// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>$("#b5").click(function () {$("div:odd").css("backgroundColor","red");})// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>$("#b6").click(function () {$("div:gt(3)").css("backgroundColor","red");})// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>$("#b7").click(function () {$("div:eq(3)").css("backgroundColor","red");})// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>$("#b8").click(function () {$("div:lt(3)").css("backgroundColor","red");})// <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>$("#b9").click(function () {$(":header").css("backgroundColor","red");})})</script></head><body><input type="button" value="保存"  class="mini" name="ok"  class="mini" /><input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/><input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/><input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/><input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/><input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/><input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/><input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/><input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/><input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/><h1>有一种奇迹叫坚持</h1><h2>自信源于努力</h2><div id="one">id为one  </div><div id="two" class="mini" >id为two   class是 mini <div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini" >class是 mini</div><div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini01" >class是 mini01</div><div  class="mini" >class是 mini</div></div></body></html>

28.5.5、表单过滤选择器

  1. 可用元素选择器
    • 语法：:enable 获得可用元素
  2. 不可用元素选择器
    • 语法：:disabled 获取不可用元素
  3. 选中选择器
    • 语法：:checked 获得单选/复选框选中的元素
  4. 选中选择器
    • 语法：:selected 获得下拉框选中的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>表单属性过滤选择器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="js/jquery.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}#job{margin: 20px;}#edu{margin-top:-70px;}</style><script type="text/javascript">$(function () {// <input type="button" value="保存" className="mini" name="ok" className="mini"/>// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>$("#b1").click(function (){$("input[type='text']:enabled").val("aaa")})// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>$("#b2").click(function (){$("input[type='text']:disabled").val("aaa")})// <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>$("#b3").click(function (){alert($("input[type='checkbox']:checked").length)})// <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>$("#b4").click(function (){alert($("#job > option:selected").length)})})</script></head><body><input type="button" value="保存"  class="mini" name="ok"  class="mini" /><input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/><input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/><input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/><input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/><br><br><input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1" ><input type="text" value="不可用值2" disabled="disabled"><input type="text" value="可用值2" ><br><br><input type="checkbox" name="items" value="美容" >美容<input type="checkbox" name="items" value="IT" >IT<input type="checkbox" name="items" value="金融" >金融<input type="checkbox" name="items" value="管理" >管理<br><br><input type="radio" name="sex" value="男" >男<input type="radio" name="sex" value="女" >女<br><br><select name="job" id="job" multiple="multiple" size=4><option>程序员</option><option>中级程序员</option><option>高级程序员</option><option>系统分析师</option></select><select name="edu" id="edu"><option>本科</option><option>博士</option><option>硕士</option><option>大专</option></select><br/><div id="two" class="mini" >id为two   class是 mini  div<div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini" >class是 mini</div><div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini01" >class是 mini01</div><div  class="mini" >class是 mini</div></div></body></html>

28.6、DOM操作

28.6.1、内容操作

  1. html()：获取/设置元素的标签内容 <a><font>内容</font></a> --> <font>内容</font>
  2. text()：获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容
  3. val()：获取/设置元素的value属性值
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script  src="../js/jquery.min.js"></script><script>$(function (){// 获取myinput 的value值let value = $("#myinput").val();alert(value);// 获取mydiv的标签体内容let html = $("#mydiv").html();alert(html)// 获取mydiv文本内容let text = $("#mydiv").text();alert(text)})</script></head><body><input id="myinput" type="text" name="username" value="张三" /><br /><div id="mydiv"><p><a href="#">标题标签</a></p></div></body>
</html>

28.6.2、属性操作

28.6.2.1、通用属性操作
  1. attr()：获取/设置元素的属性
  2. removeAttr()：删除属性
  3. prop()：获取/设置元素的属性
  4. removeProp()：删除属性
  • attr和prop区别？
    1. 如果操作的是元素的固有属性，则建议使用prop
    2. 如果操作的是元素自定义的属性，则建议使用attr
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>获取属性</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery.min.js"></script><style type="text/css">div,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div.mini{width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div.visible{display:none;}</style><script type="text/javascript">$(function () {//获取北京节点的name属性值alert($("#bj").attr("name"));//设置北京节点的name属性的值为dabeijing$("#bj").attr("name","dabeijing")//新增北京节点的discription属性 属性值是didu$("#bj").attr("discription","didu")//删除北京节点的name属性并检验name属性是否存在$("#bj").removeAttr("name")//获得hobby的的选中状态let prop = $("#hobby").prop("checked");alert(prop)})</script></head><body><ul><li id="bj" name="beijing" xxx="yyy">北京</li><li id="tj" name="tianjin">天津</li></ul><input type="checkbox" id="hobby"/></body></html>
28.6.2.2、对class属性操作
  1. addClass()：添加class属性值
  2. removeClass()：删除class属性值
  3. toggleClass()：切换class属性
    • toggleClass("one")：
      • 判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象上不存在class="one"，则添加
  4. css()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>样式操作</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery.min.js"></script><style type="text/css">.one{width: 200px;height: 140px;margin: 20px;background: red;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 40px;height: 40px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 40px;height: 40px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}/*待用的样式*/.second{width: 300px;height: 340px;margin: 20px;background: yellow;border: pink 3px dotted;float:left;font-size: 22px;font-family:Roman;}</style><script type="text/javascript">$(function () {//<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>$("#b1").click(function (){$("#one").addClass("second")})//<input type="button" value=" addClass"  id="b2"/>$("#b2").click(function (){$("#one").addClass("second")})//<input type="button" value="removeClass"  id="b3"/>$("#b3").click(function (){$("#one").removeClass("second")})//<input type="button" value=" 切换样式"  id="b4"/>$("#b4").click(function (){$("#one").toggleClass("second")})//<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>$("#b5").click(function (){alert($("#one").css("backgroundColor"))})//<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>$("#b6").click(function (){$("#one").css("backgroundColor","green")})})</script></head><body><input type="button" value="保存"  class="mini" name="ok"  class="mini" /><input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/><input type="button" value=" addClass"  id="b2"/><input type="button" value="removeClass"  id="b3"/><input type="button" value=" 切换样式"  id="b4"/><input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/><input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/><h1>有一种奇迹叫坚持</h1><h2>自信源于努力</h2><div id="one">id为one </div><div id="two" class="mini" >id为two   class是 mini <div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini" >class是 mini</div><div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini01" >class是 mini01</div><div  class="mini" >class是 mini</div></div><span class="spanone">    span</span></body></html>

28.6.3、CRUD操作

  1. append()：父元素子元素追加到末尾
    • 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
  2. prepend()：父元素将子元素追加到开头
    • 对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头
  3. appendTo()：
    • 对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾
  4. prependTo()：
    • 对象1.prependTo(对象2)：将对象1添加到对象2内部，并且在开头
  5. after()：添加元素到元素后边
    • 对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
  6. before()：添加元素到元素前边
    • 对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
  7. insertAfter()：
    • 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
  8. insertBefore()：
    • 对象1.insertBefore(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>内部插入脚本</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery.min.js"></script><style type="text/css">div,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div.visible{display:none;}</style><script type="text/javascript">$(function (){// <input type="button" value="将反恐放置到city的后面"  id="b1"/>$("#b1").click(function (){//$("#city").append($("#fk"))$("#fk").appendTo($("#city"))})// <input type="button" value="将反恐放置到city的最前面"  id="b2"/>$("#b2").click(function (){$("#city").prepend($("#fk"))//$("#fk").prependTo($("#city"))})// <input type="button" value="将反恐插入到天津后面"  id="b3"/>$("#b3").click(function (){//$("#tj").after($("#fk"))$("#fk").insertAfter($("#tj"))})// <input type="button" value="将反恐插入到天津前面"  id="b4"/>$("#b4").click(function (){$("#tj").before($("#fk"))//$("#fk").insertBefore($("#tj"))})})</script></head><body><input type="button" value="将反恐放置到city的后面"  id="b1"/><input type="button" value="将反恐放置到city的最前面"  id="b2"/><input type="button" value="将反恐插入到天津后面"  id="b3"/><input type="button" value="将反恐插入到天津前面"  id="b4"/><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重庆</li></ul><ul id="love"><li id="fk" name="fankong">反恐</li><li id="xj" name="xingji">星际</li></ul><div id="foo1">Hello1</div> </body></html>
  1. remove()：移除元素
    • 对象.remove()：将对象删除掉
  2. empty()：清空元素的所有后代元素
    • 对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>删除节点</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery.min.js"></script><style type="text/css">div,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div.mini{width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div.visible{display:none;}</style><script type="text/javascript">$(function () {// <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>$("#b1").click(function (){$("#bj").remove()})// <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>$("#b2").click(function (){$("#city").empty()})})</script></head><body><input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/><input type="button" value="删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重庆</li></ul><p class="hello">Hello</p> how are <p>you?</p> </body></html>

28.6.4、隔行换色案例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script  src="../../js/jquery.min.js"></script><script>//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow$(function (){//获取数据行中的tr的对象并判断是奇数还是偶数$("tr:gt(1):odd").css("backgroundColor","pink")$("tr:gt(1):even").css("backgroundColor","yellow")})</script></head><body><table id="tab1" border="1" width="800" align="center" ><tr><td colspan="5"><input type="button" value="删除"></td></tr><tr style="background-color: #999999;"><th><input type="checkbox"></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table></body>
</html>

28.6.5、全选全不选案例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script  src="../../js/jquery.min.js"></script><script>//通过点击按钮将多选框全部选中function selectAll(obj) {//alert(obj.checked);$(".itemSelect").prop("checked",obj.checked)}</script></head><body><table id="tab1" border="1" width="800" align="center" ><tr><td colspan="5"><input type="button" value="删除"></td></tr><tr><th><input type="checkbox" onclick="selectAll(this)" ></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table></body>
</html>

28.6.6、QQ表情选择

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>QQ表情选择</title><script  src="../../js/jquery.min.js"></script><style type="text/css">*{margin: 0;padding: 0;list-style: none;}.emoji{margin:50px;}ul{overflow: hidden;}li{float: left;width: 48px;height: 48px;cursor: pointer;}.emoji img{ cursor: pointer; }</style><script>//需求：点击qq表情，将其追加到发言框中$(function () {//给所有的图片添加单击事件$("ul img").click(function () {$(".word").append($(this).clone())})})</script></head>
<body><div class="emoji"><ul><li><img src="img/01.gif" height="22" width="22" alt="" /></li><li><img src="img/02.gif" height="22" width="22" alt="" /></li><li><img src="img/03.gif" height="22" width="22" alt="" /></li><li><img src="img/04.gif" height="22" width="22" alt="" /></li><li><img src="img/05.gif" height="22" width="22" alt="" /></li><li><img src="img/06.gif" height="22" width="22" alt="" /></li><li><img src="img/07.gif" height="22" width="22" alt="" /></li><li><img src="img/08.gif" height="22" width="22" alt="" /></li><li><img src="img/09.gif" height="22" width="22" alt="" /></li><li><img src="img/10.gif" height="22" width="22" alt="" /></li><li><img src="img/11.gif" height="22" width="22" alt="" /></li><li><img src="img/12.gif" height="22" width="22" alt="" /></li></ul><p class="word"><strong>请发言：</strong><img src="img/12.gif" height="22" width="22" alt="" /></p></div>
</body>
</html>

28.6.7、多选下拉列表左右移动

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script  src="../../js/jquery.min.js"></script><style>#leftName , #btn,#rightName{float: left;width: 100px;height: 300px;}#toRight,#toLeft{margin-top:100px ;margin-left:30px;width: 50px;}.border{height: 500px;padding: 100px;}</style><script>//需求：实现下拉列表选择条目左右选择功能$(function () {//获取按钮对象并绑定单击事件$("#toRight").click(function () {$("#rightName").append($("#leftName > option:selected"))})$("#toLeft").click(function () {$("#leftName").append($("#rightName > option:selected"))})})</script></head><body><div class="border"><select id="leftName" multiple="multiple"><option>张三</option><option>李四</option><option>王五</option><option>赵六</option></select><div id="btn"><input type="button" id="toRight" value="-->"><br><input type="button" id="toLeft" value="<--"></div><select id="rightName" multiple="multiple"><option>钱七</option></select></div></body>
</html>

28.7、动画

三种方式显示和隐藏元素

  1. 默认显示和隐藏方式
    1. show([speed],[easing],[fn])
      • 参数：
        1. speed：动画的速度。三个预定义的值(“slow”,“normal”,“fast”)或表示动画时长的毫秒数值(如：1000)
        2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
          • swing：动画执行时效果是 先慢，中间快，最后又慢
          • linear：动画执行时速度是匀速的
        3. fn：在动画完成时执行的函数，每一个元素执行一次
    2. hide([speed],[easing],[fn])
    3. toggle([speed],[easing],[fn])
  2. 滑动显示和隐藏方式
    1. slideDown([speed],[easing],[fn])
    2. slideUp([speed],[easing],[fn])
    3. slideToggle([speed],[easing],[fn])
  3. 淡入淡出显示和隐藏方式
    1. fadeIn([speed],[easing],[fn])
    2. fadeOut([speed],[easing],[fn])
    3. fadeToggle([speed],[easing],[fn])
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="../js/jquery.min.js"></script><script>//隐藏function hideFn() {$("#showDiv").hide("slow","swing");}//显示function showFn() {$("#showDiv").show("slow","swing");}//切换function toggleFn() {$("#showDiv").toggle("slow","swing");}</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()"><div id="showDiv" style="width:300px;height:300px;background:pink">div显示和隐藏
</div>
</body>
</html>

28.8、遍历

28.8.1、js遍历

js遍历的方式：

  • for(初始化值;循环结束条件;步长)
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function () {//获取所有的li元素let lis = $("#city li");//原始js的方式遍历for (var i=0;i<lis.length;i++ ){alert(lis[i].innerHTML)}})</script>
</head>
<body>
<ul id="city"><li>北京</li><li>上海</li><li>天津</li><li>重庆</li>
</ul>
</body>
</html>

28.8.2、jq遍历

  1. jq对象.each(callback)

    1. 语法：

      jquery对象.each(function(index,element){});

      • index：就是元素在集合中的索引
      • element：就是集合中的每一个元素对象
      • this：集合中每一个元素对象

    2. 回调函数返回值：

      • true：如果当前function返回为false，则结束循环(break)。
      • false：如果当前function返回为true，则结束本次循环，继续下次循环(continue)

  2. $.each(object,[callback])

  3. for..of：jquery 3.0 版本之后提供的方式

    for(元素对象 of 容器对象)

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function () {//获取所有的li元素let lis = $("#city li");//使用jq的方式遍历//jq对象.each(callback)// lis.each(function (index,element) {//     //这里的this代表每一个li元素对象，index代表元素的索引，element代表元素对象//     alert(index+":"+element.innerHTML)// })//$.each(object,[callback])$.each(lis,function (index,element) {alert(index+":"+element.innerHTML)})})</script>
</head>
<body>
<ul id="city"><li>北京</li><li>上海</li><li>天津</li><li>重庆</li>
</ul>
</body>
</html>

28.9、事件绑定

28.9.1、jq标准绑定

jquery标准的绑定方式：

  • jq对象.事件方法(回调函数);
  • 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为
    • 表单对象.submit();让表单提交

28.9.2、on绑定事件/off解除绑定

  • jq对象.on("事件名称",回调函数)
  • jq对象.off("事件名称")
    • 如果off方法不传递任何参数，则将组件上的所有事件全部解绑

28.9.3、事件切换

事件切换：toggle

  • jq对象.toggle(fn1,fn2...)

    • 当单击jq对象对应的组件后，会执行fn1,，第二次点击会执行fn2…

  • 注意：1.9版本.toggle() 方法删除，jQuery Migrate(迁移) 插件可以恢复此功能

    <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

28.10、广告显示和隐藏案例

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>广告的自动显示与隐藏</title><style>#content{width:100%;height:500px;background:#999}</style><!--引入jquery--><script type="text/javascript" src="../js/jquery.min.js"></script><script>//定义个显示和隐藏的方法function hideFn() {$("#ad").hide("slow")}function showFn(){$("#ad").show("slow")}$(function () {//当页面加载完3秒后执行显示方法使用定时器setTimeout(showFn,3000);//当广告显示5秒后隐藏setTimeout(hideFn,8000)})</script>
</head>
<body>
<!-- 整体的DIV -->
<div><!-- 广告DIV --><div id="ad" style="display: none;"><img style="width:100%" src="../img/adv.jpg" /></div><!-- 下方正文部分 --><div id="content">正文部分</div>
</div>
</body>
</html>

28.11、抽奖案例

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>jquery案例之抽奖</title><script type="text/javascript" src="../js/jquery.min.js"></script><script>//获取将所有的图片封装称为一个数组var arr = ["../img/man00.jpg","../img/man01.jpg","../img/man02.jpg","../img/man03.jpg","../img/man04.jpg","../img/man05.jpg","../img/man06.jpg",]var id;var index;$(function () {//定义点击开始按钮后让小相框中的图片发生变化$("#startID").click(function () {//使用循环定时器切换图片id = setInterval(function () {//获取一个随机数作为角标index = Math.floor(Math.random()*7);$("#img1ID").prop("src",arr[index])},20);})//定义点击停止按钮使小相框中的图片停止切换$("#stopID").click(function () {clearInterval(id);$("#img2ID").prop("src",arr[index])})})</script>
</head>
<body><!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px"><img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div><!-- 大像框 -->
<divstyle="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"><img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div><!-- 开始按钮 -->
<inputid="startID"type="button"value="点击开始"style="width:150px;height:150px;font-size:22px"onclick="imgStart()"><!-- 停止按钮 -->
<inputid="stopID"type="button"value="点击停止"style="width:150px;height:150px;font-size:22px"onclick="imgStop()"><script language='javascript' type='text/javascript'>//准备一个一维数组，装用户的像片路径var imgs = ["../img/man00.jpg","../img/man01.jpg","../img/man02.jpg","../img/man03.jpg","../img/man04.jpg","../img/man05.jpg","../img/man06.jpg"];</script>
</body>
</html>

28.12、插件

插件：增强jQuery的功能

实现方式：

  1. $.fn.extend(object)
    • 增强通过jquery获取的对象的功能 $("#id")
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>01-jQuery对象进行方法扩展</title><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$.fn.extend({//定义一个方法check:function (){this.prop("checked",true);},uncheck:function () {this.prop("checked",false)}})function checkFn() {$("input[type='checkbox']").check()}function uncheckFn() {$("input[type='checkbox']").uncheck()}</script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球</body>
</html>
  1. $.extend(object)
    • 通过jQuery对象自身的功能 $/jQuery
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>01-jQuery对象进行方法扩展</title><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值$.extend({min:function (a,b) {return a>b?b:a;},max:function (b,c) {return b>c?b:c}})$(function () {let min = $.min(1,2);alert(min)let max = $.max(4,5);alert(max)})</script>
</head>
<body>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/591901.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LeetCode每日一题：1154. Day of the Year

LeetCode每日一题：1154. Day of the Year

文章目录 一、题目二、题解 一、题目 Given a string date representing a Gregorian calendar date formatted as YYYY-MM-DD, return the day number of the year. Example 1: Input: date “2019-01-09” Output: 9 Explanation: Given date is the 9th day of the year…
阅读更多...
K8S学习指南(52)-k8s包管理工具Helm

K8S学习指南(52)-k8s包管理工具Helm

文章目录 引言Helm 基本概念Helm 的架构Helm 使用示例1. 安装 Helm2. 初始化 Helm3. 创建一个 Chart4. 编辑 Chart5. 打包 Chart6. 发布 Chart7. 部署 Release Helm 的高级用法1. 使用 Helm Secrets 进行敏感信息加密2. 使用 Helmfile 进行多Chart管理 Helm 的进阶主题1. Helm …
阅读更多...
AI绘图之风景画

AI绘图之风景画

这一段时间AI画图比较火&#xff0c;笔者也尝试了一些工具&#xff0c;在使用的过程中发现midjourney比较适合小白&#xff0c;而且画的画比较符合要求。质量也高。当然AI时代的来临大家也不要太慌&#xff0c;毕竟人才是最重要的&#xff0c;AI还是要靠人输入内容才可以生成内…
阅读更多...
线程死锁检测组件逻辑与源码

线程死锁检测组件逻辑与源码

死锁介绍 任务的执行体之间互相持有对方所需的资源而不释放&#xff0c;形成了相互制约而都无法继续执行任务的情况&#xff0c;被称为“死锁”。 死锁案例 线程A持有锁a不释放&#xff0c;需要去获取锁b才能继续执行任务&#xff0c; 线程B持有锁b不释放&#xff0c;需要去…
阅读更多...
k8s陈述式资源管理（命令行）

k8s陈述式资源管理（命令行）

1、资源管理 &#xff08;1&#xff09;陈述式资源管理&#xff08;常用——查、增&#xff09; 使用kubectl工具进行命令行管理 ①特点&#xff1a;对资源的增删查比较方便&#xff0c;对改不友好 ②优点&#xff1a;90%以上的场景都可以满足 ③缺点&#xff1a;命令冗长…
阅读更多...
React Grid Layout基础使用

React Grid Layout基础使用

摘要 React Grid Layout是一个用于在React应用程序中创建可拖拽和可调整大小的网格布局的库。它提供了一个灵活的网格系统&#xff0c;可以帮助开发人员构建响应式的布局&#xff0c;并支持拖拽、调整大小和动画效果。本文将介绍如何使用React Grid Layout来创建自适应的布局。…
阅读更多...
canvas绘制圆点示例

canvas绘制圆点示例

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…
阅读更多...
如何移除视频中的背景音乐或人物声音

如何移除视频中的背景音乐或人物声音

移除视频声音是将视频指定的声音移除&#xff0c;可以选择移除人物声音还是视频的背景音乐&#xff0c;方便实现二次创作。 小编给大家推荐一些方法帮助大家更轻松地移除视频中的背景音乐或人物声音&#xff0c;有兴趣的朋友请自行百度查找&#xff0c;或小程序查找 1、方法&a…
阅读更多...
跟我用路由器学Linux编程实例

跟我用路由器学Linux编程实例

跟我用路由器学Linux编程实例 本专栏文章以梅林、openwrt等linux路由为基础硬件&#xff0c;和笔者一起学习使用shell语言。带你从编写简单的插件开始&#xff0c;学习怎么折腾路由器&#xff0c;顺便学会编程。软路由用的都是Linux基础系统&#xff0c;学会了在路由上编程&am…
阅读更多...
P8722 [蓝桥杯 2020 省 AB3] 日期识别（C语言）

P8722 [蓝桥杯 2020 省 AB3] 日期识别（C语言）

题目描述 小蓝要处理非常多的数据, 其中有一些数据是日期。 在小蓝处理的日期中有两种常用的形式&#xff1a;英文形式和数字形式。 英文形式采用每个月的英文的前三个字母作为月份标识&#xff0c;后面跟两位数字表示日期&#xff0c;月份标识第一个字母大写&#xff0c;后…
阅读更多...
2023福建省“信息安全管理与评估“---单机取证（高职组）

2023福建省“信息安全管理与评估“---单机取证（高职组）

2023福建省“信息安全管理与评估“---单机取证（高职组） 2023福建省“信息安全管理与评估“---单机取证（高职组）：公众号：鱼影安全（有联系方式）Evidence1：Evidence2：Evidence3：Evidence4：Evidence5：Evidence6：Evidence7：Evidence8：Evidence9：Evidence10：<
阅读更多...
从入门到精通，30天带你学会C++【第十四天：洛谷选题讲解】

从入门到精通，30天带你学会C++【第十四天：洛谷选题讲解】

彩蛋 这么长的目录应该没人看吧。 Bi------------------------------------------------------------------------------- 目录 Everyday English 前言 函数 sqrt ( ) for循环 题目网址 分析题意 思路点拨 优化程序 AC代码 AC截图 数学 if判断 题目网址 思路…
阅读更多...
视频剪辑技巧：轻松制作短视频，一键合并、剪辑、添加背景音乐

视频剪辑技巧：轻松制作短视频，一键合并、剪辑、添加背景音乐

随着社交媒体的普及&#xff0c;短视频已是分享生活、娱乐和传递信息的重要方式。如果要制作短视频&#xff0c;但又不熟悉复杂的视频编辑软件&#xff0c;那么本文将讲解一些实用的视频剪辑技巧&#xff0c;轻松制作出高质量的短视频。现在一起来看看云炫AI智剪如何批量合并视…
阅读更多...
光纤通信系统中常见类型的损伤和均衡方法

光纤通信系统中常见类型的损伤和均衡方法

相干光纤通信系统中常见的损伤和均衡算法 光纤通信中的系统损伤损耗色度色散 CD偏振相关损耗PMD 偏振模色散RSOP 偏振态旋转PDL 偏振相关损耗 CFO 载波频率偏移和CPN 载波相位噪声 光纤通信系统损伤均衡算法 光纤通信中的系统损伤 信道中常见的损伤包括损耗、色散和偏振相关损…
阅读更多...
【HarmonyOS开发】分布式应用的开发实践（元旦快乐）

【HarmonyOS开发】分布式应用的开发实践（元旦快乐）

元旦快乐&#xff0c;再见2023&#xff0c;加油2024&#xff0c;未来可期&#xff0c;愿新的一年带来健康、幸福和成功&#xff01;&#x1f4aa; &#x1f4aa;&#x1f4aa; 多种设备之间能够实现硬件互助、资源共享&#xff0c;依赖的关键技术包括分布式软总线、分布式设备虚…
阅读更多...
机器学习基本概念及模型简单代码（自用）

机器学习基本概念及模型简单代码（自用）

监督学习 监督学习是机器学习的一种方法&#xff0c;其中我们教导模型如何做出预测或决策&#xff0c;通过使用包含输入和对应输出的已标注数据集进行训练。这种方法的关键特点是利用这些标注数据**&#xff08;即带有正确答案的数据&#xff09;**来指导模型的学习过程。 一言…
阅读更多...
uni-app 前后端调用实例 基于Springboot 数据列表显示实现

uni-app 前后端调用实例 基于Springboot 数据列表显示实现

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…
阅读更多...
【ArcGIS微课1000例】0084：甘肃积石山地震震中100km范围内历史灾害点分布图（2005-2020）

【ArcGIS微课1000例】0084：甘肃积石山地震震中100km范围内历史灾害点分布图（2005-2020）

甘肃积石山地震震中100km范围内历史灾害点分布图（2005-2020）。 文章目录 一、成果预览二、实验数据三、符号化四、地图整饰一、成果预览 本实验最终效果图如下所示： 二、实验数据 以下数据可以从本专栏配套的实验数据包中0084.rar中获取。 1. 历史灾害数据。为2005-2020时…
阅读更多...
深度学习｜10.5 卷积步长 10.6 三维卷积

深度学习｜10.5 卷积步长 10.6 三维卷积

文章目录 10.5 卷积步长10. 6 三维卷积![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b5bfa24f57964b0f81f9602f5780c278.png) 10.5 卷积步长 卷积步长是指每计算一次卷积&#xff0c;卷积移动的距离。 设步长为k&#xff0c;原矩阵规模为nxn&#xff0c;核矩阵…
阅读更多...
BIOS：计算机中的特洛伊木马

BIOS：计算机中的特洛伊木马

内容概述&#xff1a; 由于主板制造商在计算机启动时用来显示品牌徽标的图像分析组件相关的问题&#xff0c;多个安全漏洞&#xff08;统称为 LogoFAIL&#xff09;允许攻击者干扰计算机设备的启动过程并安装 bootkit。x86 和 ARM 设备都面临风险。主板固件供应链安全公司 Bin…
阅读更多...
最新文章

Copyright @ 2022~2023