jquery 前端 javascript day36

今日内容

0 复习上周 1 本周安排 2 JQuery介绍 3 JQuery引入 4 JQuery的语法 4.1 选择器 4.2 事件 5 DOM操作 5.1 获取设置标签内容 5.2 获取设置标签属性 5.3 获取设置标签样式 6 作业

0 复习上周

1 写出至少15个标签

h1-h6 p hr br div span font ol ul li img a iframe

table tr td form input select option

2 写出至少7个css属性

color,text-align,font-size,font-family,background-color,background-image

width,height,list-style,display,margin,padding,border,position,top,bottom,left,right,float

---

以上属性的值,要再记忆

3 写出input标签的type的不同属性值以及解释

type=text,文本框

type=password,密码框

type=radio,单选框

type=checkbox,复选框

type=file,文件上传

type=email,邮箱

type=date,日期

4 写出js通过id获得dom对象的语句

document.getElementById("id")

5 写出js代码:获得input的值

input对象.value

6 写出几个表单事件

获得焦点 onfocus

失去焦点 onblur

内容改变 onchange

表单提交 onsubmit

7 form

action,表单数据提交到后台的路径

-----

课下,再写一个注册表单,form写上路径,点击提交,观察浏览器路径

demo1.html?username=admin&password=123456&sex=男&skill=Java&skill=HTML&birthday=2022-01-01

-----

以上路径,发现?前面是服务器路径

?后面是表单提交的数据,key=value

key是表达标签(input,select)要设置name属性

https://www.baidu.com/s?ie=UTF-8&wd=java

8 哪些HTML标签,CSS样式,JS能发出请求?

总结: HTML标签内,有src或者href属性都可以发请求

</p><p>css中,关于引入图片的属性,也会发请求</p><p>background-image:url(路径)</p><p>js中</p><p>window.location.href = "路径"</p><p>1 本周安排</p><p>周一 JQuery周二 JQuery周三 MySQL周四 MySQL周五 MySQL</p><p>2 JQuery介绍</p><p>JQuery是JS的类库,是js的框架,将原来的JS的操作封装,让js操作DOM,BOM等更加方便简洁.优化HTML文档操作、事件处理、动画设计和AJAX交互。</p><p>jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。</p><p>jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等</p><p>自己总结,jq是什么,用来干什么</p><p>3 JQuery引入</p><p>1 JQuery是JS的框架,是第三方技术,是需要在项目中引入JQuery类库</p><p>2 在HTML页面中引入JQuery类库</p><p>3 以后,就可以在页面中写JQuery代码</p><p>3.1 项目中引入JQuery类库</p><p>项目中引入js类库,一般都会新建一个文件夹js</p><p>一个完整的前端项目目录结构</p><p>-项目名</p><p>–css</p><p>–js</p><p>–images</p><p>3.2 页面中引入</p><p>3.3 使用JQuery</p><p><body></p><p><button id="btn">点我,使用JQ绑定事件,弹框</button></p><p></p><p><script src="./js/jquery-2.1.0.js"></script></p><p></p><p><script></p><p>// $("#btn") 选中btn按钮</p><p>// .click 绑定点击事件</p><p>// function() 事件触发的函数</p><p>$("#btn").click(function () {</p><p>alert("jquery弹框");</p><p>});</p><p></script></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>4 JQuery的语法</p><p>现在主要学习JQuery的语法是</p><p>选择器事件</p><p>其他的JS语法,在JQuery是通用的,例如</p><p>变量数据类型引用类型(JSON,数组,日期,数学等)运算符分支选择循环</p><p>4.1 选择器</p><p>选择器有很多种,具体查询APIjQuery 参考手册 - 选择器 (w3school.com.cn)</p><p>主要学习几个基本即可</p><p>标签名id类</p><p>标签名选择器</p><p>$("标签名");</p><p>// 这样就可以获得同名所有标签,返回的是数组</p><p>// $是JQuery中特殊符号,$===JQuery对象</p><p><body></p><p><div>曹操</div></p><p><div>曹植</div></p><p><div>曹丕</div></p><p><span>曹冲</span></p><p><script src="./js/jquery-2.1.0.js"></script></p><p><script></p><p>// 标签名选择器,选到所有同名标签,返回数组</p><p>var divArr = $("div");</p><p>console.log(divArr);</p><p></script></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>id选择器</p><p>$("#id")</p><p>// 标签要设置id属性,$()内要使用#id选中标签</p><p><body></p><p><div id="d1">曹操</div></p><p><div id="d2">曹植</div></p><p><div id="d3">曹丕</div></p><p><span id="d4">曹冲</span></p><p><script src="./js/jquery-2.1.0.js"></script></p><p><script></p><p>// id选择器,标签加id属性,$()内要#号</p><p>// 选择到一个标签</p><p>var div1 = $("#d1");</p><p>console.log(div1);</p><p></script></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>类选择器</p><p>$(".class")</p><p><body></p><p><div id="d1">曹操</div></p><p><div id="d2" class="son">曹植</div></p><p><div id="d3" class="son">曹丕</div></p><p><span id="d4" class="son">曹冲</span></p><p><script src="./js/jquery-2.1.0.js"></script></p><p><script></p><p>// 类选择器,标签加class属性,$()内要.class</p><p>// 选择到同class的多个标签</p><p>var sonArr = $(".son");</p><p>console.log(sonArr);</p><p></script></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>其他选择器,笔记中不再记,代码演示一下…</p><p>4.2 事件</p><p>事件就是发生在浏览器上的事情,键盘事件,鼠标,表单事件,加载事件等</p><p>现在这些事件与JS中事件是一样,只不过是代码变成了JQuery的语法格式</p><p>事件的写法不一样,与原来HTML事件中少了on</p><p>JQuery事件HTML事件focusonfocusclickonclick…… 绑定方式 jquery对象.事件(响应函数)</p><p>4.2.1 点击双击</p><p><body></p><p><button id="btn-1">点单击事件</button></p><p><button id="btn-2">点双击击事件</button></p><p><script src="./js/jquery-2.1.0.js"></script></p><p><script></p><p>var count = 0;</p><p>/**</p><p>* 1 选择事件源</p><p>* 2 绑定事件</p><p>* 3 设置响应函数</p><p>*/</p><p>$("#btn-1").click(function () {</p><p>count++;</p><p>console.log("单击:" + count);</p><p>});</p><p>$("#btn-2").dblclick(function () {</p><p>console.log("双击");</p><p>});</p><p></script></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>4.2.2 鼠标事件</p><p><body></p><p><div</p><p>id="box"</p><p>style="width: 200px; height: 200px; border: 2px red solid"</p><p>></div></p><p><script src="./js/jquery-2.1.0.js"></script></p><p><script></p><p>var count = 0;</p><p>/**</p><p>* 1 选择事件源</p><p>* 2 绑定事件</p><p>* 3 设置响应函数</p><p>*/</p><p>// $("#box").mouseover(function () {</p><p>// console.log("鼠标进入");</p><p>// });</p><p>// $("#box").mouseout(function () {</p><p>// console.log("鼠标离开");</p><p>// });</p><p>// 链式语法,其实就是链式调用,连着调用</p><p>$("#box").mouseover(function () {</p><p>console.log("鼠标进入");</p><p>}).mouseout(function () {</p><p>console.log("鼠标离开");</p><p>}).mousemove(function () {</p><p>console.log("鼠标移动");</p><p>});</p><p></script></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>4.2.3 键盘事件</p><p>keydownkeyupkeypress</p><p><body></p><p></p><p><input id="input-1" /></p><p><script src="./js/jquery-2.1.0.js"></script></p><p><script></p><p>/**</p><p>* 1 选择事件源</p><p>* 2 绑定事件</p><p>* 3 设置响应函数</p><p>*/</p><p>$("#input-1")</p><p>.keydown((event) => {</p><p>console.log("键盘按下");</p><p>if (event.keyCode == 13) {</p><p>console.log("按下回车,提交表单");</p><p>}</p><p>})</p><p>.keyup(() => {</p><p>console.log("键盘弹起");</p><p>})</p><p>.keypress(function () {</p><p>console.log("键盘按压");</p><p>});</p><p></script></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>4.2.4 表单事件</p><p>focusblurchangesubmit</p><p><body></p><p><form accept="/java2217"></p><p>用户名<input type="text" name="username" /><br /></p><p>密码<input type="password" name="password" /><br /></p><p>技能<input type="checkbox" name="skill" value="Java" /> Java</p><p><input type="checkbox" name="skill" value="HTML" /> HTML</p><p><input type="checkbox" name="skill" value="MySQL" /> MySQL <br /></p><p><input type="submit" value="提交" /></p><p></form></p><p><script src="./js/jquery-2.1.0.js"></script></p><p><script></p><p>// 获得焦点失去焦点</p><p>$("input[type=text]")</p><p>.focus(() => {</p><p>console.log("用户名输入框获得焦点");</p><p>})</p><p>.blur(() => {</p><p>console.log("用户名输入框失去焦点");</p><p>});</p><p>// 内容改变(下拉框,单选复选,都可以实现改变事件)</p><p>$("input[type=checkbox]").change(() => {</p><p>console.log("内容改变");</p><p>});</p><p>// 表单提交</p><p>// 选中表单,绑定事件</p><p>// form是标签名选择器,:first是选中第一个</p><p>$("form:first").submit(function () {</p><p>console.log("提交了");</p><p>// return false; // 阻止表单提交</p><p>return true; // 允许表单提交</p><p>});</p><p></script></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>4.2.5 加载事件</p><p>加载事件,当页面加载完再触发的事件js时加载事件是onload在jquery中ready来加载事件</p><p><html lang="en"></p><p><head></p><p><script src="./js/jquery-2.1.0.js"></script></p><p><script></p><p>// 设置页面加载事件</p><p>$(document).ready(function () {</p><p>$("#btn").click(() => {</p><p>console.log("点击");</p><p>});</p><p>});</p><p>// 以上页面加载事件,会简写</p><p>$(function () {</p><p>$("#btn").click(() => {</p><p>console.log("点击222");</p><p>});</p><p>});</p><p></script></p><p></head></p><p><body></p><p><button id="btn">按钮</button></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>5 DOM操作</p><p>5.1 获取设置标签内容</p><p>js中</p><p>innerHTMLinnerText</p><p>jQuery中</p><p>html(内容)text(内容)val(内容)</p><p><body></p><p><div id="div-1"></p><p><span>获得设置标签内容</span></p><p></div></p><p><button id="btn-1">点击获得div中html</button></p><p><button id="btn-2">点击获得div中text</button></p><p><hr /></p><p><button id="btn-3">点击设置div中html</button></p><p><button id="btn-4">点击设置div中text</button></p><p><hr /></p><p><input id="input-1" /></p><p><button id="btn-5">点击获得input中的value</button></p><p><button id="btn-6">点击设置input中的value</button></p><p><script src="./js/jquery-2.1.0.js"></script></p><p><script></p><p>// 获得html标签,及内容</p><p>$("#btn-1").click(() => {</p><p>console.log($("#div-1").html());</p><p>});</p><p>// 获得纯文本内容</p><p>$("#btn-2").click(() => {</p><p>console.log($("#div-1").text());</p><p>});</p><p>// 设置html.其中有标签和属性,会解析</p><p>$("#btn-3").click(() => {</p><p>$("#div-1").html("<p style='color:red'>这是重新设置的内容</p>");</p><p>});</p><p>// 设置text,其中全部都以文本展现</p><p>$("#btn-4").click(() => {</p><p>$("#div-1").text("<p style='color:red'>这是重新设置的内容</p>");</p><p>});</p><p>// 获得输入框的值</p><p>$("#btn-5").click(() => {</p><p>console.log($("#input-1").val());</p><p>});</p><p>// 获得输入框的值</p><p>$("#btn-6").click(() => {</p><p>$("#input-1").val("黑发不知勤学早,白首方悔读书迟.");</p><p>});</p><p></script></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>5.2 获取设置标签属性</p><p>属性(attribute)操作</p><p>attr(name) 获得指定名字的属性attr(name,value) 给指定属性设置值attr(properties) 给多个属性设置值</p><p>properties其实是json对象{key:value,key:value} removeAttr(name) 移除指定属性的值</p><p><body></p><p><input id="input-1" type="text" /></p><p><button id="btn-1">获得type的属性值</button></p><p><button id="btn-2">设置type的属性值password</button></p><p><button id="btn-3">设置type的多个属性值</button></p><p><button id="btn-4">移除属性</button></p><p><script src="./js/jquery-2.1.0.js"></script></p><p><script></p><p>$("#btn-1").click(function () {</p><p>// 获得属性值</p><p>console.log($("#input-1").attr("type"));</p><p>});</p><p>$("#btn-2").click(function () {</p><p>// 设置属性值</p><p>$("#input-1").attr("type", "password");</p><p>});</p><p>// 同时设置多个属性值</p><p>$("#btn-3").click(function () {</p><p>// 同时设置类型是密码框,再设置默认值</p><p>// 使用的是json {key:"value"}</p><p>$("#input-1").attr({ type: "password", value: "111111" });</p><p>});</p><p>// 移除属性</p><p>$("#btn-4").click(function () {</p><p>// 设置属性值,移除该属性,就是默认效果</p><p>$("#input-1").removeAttr("type");</p><p>});</p><p></script></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>5.3 获取设置标签样式</p><p>JQuery操作样式有两种方案</p><p>给标签设置class类给标签的style设置css属性</p><p>5.3.1 设置class类</p><p>通过给标签设置/删除class类来改变样式</p><p>addClass(class)removeClass(class)toggleClass(class)</p><p><head></p><p><title>获得设置class类</title></p><p><style></p><p>.box1 {</p><p>width: 100px;</p><p>height: 100px;</p><p>background-color: red;</p><p>}</p><p>.box2 {</p><p>width: 200px;</p><p>height: 200px;</p><p>background-color: green;</p><p>}</p><p></style></p><p></head></p><p><body></p><p><div id="box" class="box1">块</div></p><p><button id="btn-1">设置box2样式类</button></p><p><button id="btn-2">移除box2样式类</button></p><p><button id="btn-3">切换样式</button></p><p><script src="./js/jquery-2.1.0.js"></script></p><p><script></p><p>$("#btn-1").click(() => {</p><p>$("#box").addClass("box2");</p><p>});</p><p>$("#btn-2").click(() => {</p><p>$("#box").removeClass("box2");</p><p>});</p><p>$("#btn-3").click(() => {</p><p>// 切换box2</p><p>// 当前有box2样式,那我就移除</p><p>// 当前没有box2样式,那我就添加</p><p>$("#box").toggleClass("box2");</p><p>});</p><p></script></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>5.3.2 设置获得css属性</p><p>设置获得css属性</p><p>css(属性) 获得指定css属性值css(属性,值) 设置指定属性和值css(properties)</p><p><body></p><p><div id="box" style="background-color: red">块</div></p><p><button id="btn-1">点击获得属性</button></p><p><button id="btn-2">点击设置1个属性</button></p><p><button id="btn-3">点击设置多个属性</button></p><p><script src="./js/jquery-2.1.0.js"></script></p><p><script></p><p>$("#btn-1").click(() => {</p><p>// 获得指定css属性值</p><p>console.log($("#box").css("background-color"));</p><p>});</p><p>$("#btn-2").click(() => {</p><p>// 设置指定css属性值</p><p>$("#box").css("background-color", "green");</p><p>});</p><p>$("#btn-3").click(() => {</p><p>// 同时设置多个css属性</p><p>$("#box").css({</p><p>backgroundColor: "yellow",</p><p>width: "200px",</p><p>height: "200px",</p><p>});</p><p>});</p><p></script></p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>补充</p><p><body></p><p>性别</p><p></p><p></p><p><input type="radio" name="sex" value="1" />男</p><p><input type="radio" name="sex" value="2" checked />女</p><p><hr /></p><p><input type="checkbox" name="skill" value="java" checked />java</p><p><input type="checkbox" name="skill" value="html" checked />html</p><p><input type="checkbox" name="skill" value="mysql" />mysql</p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>6 作业</p><p>0 重复2遍代码</p><p>1 jq实现二级联动</p><p>2 全选和反选</p><p>3 以上css属性的值,要再记忆</p><p>4 课下,再写一个注册表单,form写上路径,点击提交,观察浏览器路径</p><p>lor: “yellow”, width: “200px”, height: “200px”, }); }); ```</p><p>补充</p><p><body></p><p>性别</p><p></p><p></p><p><input type="radio" name="sex" value="1" />男</p><p><input type="radio" name="sex" value="2" checked />女</p><p><hr /></p><p><input type="checkbox" name="skill" value="java" checked />java</p><p><input type="checkbox" name="skill" value="html" checked />html</p><p><input type="checkbox" name="skill" value="mysql" />mysql</p><p><div id="ly_cache" data-id="18611377"></div></body></p><p>6 作业</p><p>0 重复2遍代码</p><p>1 jq实现二级联动</p><p>2 全选和反选</p><p>3 以上css属性的值,要再记忆</p><p>4 课下,再写一个注册表单,form写上路径,点击提交,观察浏览器路径</p><p>文章链接</p><div class="ly_isview_code_1"><div class="ly_isview_codea" data-id="18611377"><span><a href="https://www.51969.com/zb_system/login.php" target="_blank">评论可见</a>，请评论后查看内容，谢谢！！！</span></div></div><div id="tingliu" style="background-color:#FFFFFF;border:1px dashed #FF0000;text-align:center;display:block;"><span class="tingliu2 hint--top hint--bounce"><a href="##read_time"><img src="https://www.51969.com/zb_users/plugin/zharry_Reading_time/images/tishi.gif" class="tingliu5" ></a></span>  <span class="tingliu2">您阅读本篇文章共花了：</span> <span class="tingliu3" id="stime"></span> </div></br><script language="JavaScript">var ss=0,mm=0,hh=0;function TimeGo(){ss++;if(ss>=60){mm+=1;ss=0}if(mm>=60){hh+=1;mm=0}ss_str=(ss<10?"0"+ss:ss);mm_str=(mm<10?"0"+mm:mm);tMsg=""+hh+"小时"+mm_str+"分"+ss_str+"秒";document.getElementById("stime").innerHTML=tMsg;setTimeout("TimeGo()",1000)}TimeGo();</script> </div> <div class="tags"> <a href="https://www.51969.com/tags/jquery/" target="_blank">jquery</a><a href="https://www.51969.com/tags/%E5%89%8D%E7%AB%AF/" target="_blank">前端</a><a href="https://www.51969.com/tags/javascript/" target="_blank">javascript</a> </div> <div class="copyright"><blockquote>本文由用户于 2024-03-07 发布在金钥匙，如有疑问，请联系我们。<br>本文链接：<a href="https://www.51969.com/post/18611377.html">https://www.51969.com/post/18611377.html</a></blockquote></div> <div class="single-share"> <div class="post-share"> <a title="分享"><i class="jzicon-jzfenxiang"></i></a> <div class="share-icons share-sns" data-title="jquery 前端 javascript day36" data-url="https://www.51969.com/post/18611377.html"> <span class="share-icon share-wechat cl" data-type="wechat" title="分享到微信"><i class="jzicon-weixin"></i><span id="wechat-qrcode"></span></span> <span class="share-icon share-sina-weibo cl" data-type="weibo" title="分享到微博"><i class="jzicon-weibo"></i></span><span class="share-icon share-qq cl" data-type="qq" title="分享到QQ好友"><i class="jzicon-qq"></i></span> </div> </div> <div class="post-like"> <a href="javascript:;" onclick="Jz52_tsqa_prise('18611377')" class="Jz52_tsqa_prise_id-18611377 dotGood Jz52_tsqa_prise badge" title="好文！一定要点赞！" data-badge="0"><i class="jzicon-jzzan-h"></i><em class="emz">0</em><em>赞</em></a><a href="javascript:;" class="comiis_poster_a single_icon bill_icon" title="文章海报"><i class="jzicon-jzimg"></i></a> </div></div> </div> <div class="nextpro www_51969_com"> <div class="prev"> <article class="post-overlay"> <div class="background-img" style="background-image:url(https://www.51969.com/zb_users/theme/Jz52_tsqa/style/images/prevnoimg.jpg)"> </div> <div class="post_text"> <span><i class="jzicon-angle-left"></i>上一篇</span> <h3 class="post__title typescale-1 nav-prev">前端 javascript json html5 html es6 【jQuery入门】DOM对象和jQuery对象，以及互相转换，选择器</h3> </div> <a href="https://www.51969.com/post/18611370.html" class="link-overlay"></a> </article> </div> <div class="next"> <article class="post-overlay"> <div class="background-img" style="background-image:url(https://www.51969.com/zb_users/theme/Jz52_tsqa/style/images/nextnoimg.jpg)"> </div> <div class="post_text"> <span>下一篇<i class="jzicon-angle-right"></i></span> <h3 class="post__title typescale-1 nav-next">jquery 前端 easyui框架</h3> </div> <a href="https://www.51969.com/post/18611384.html" class="link-overlay"></a> </article> </div> </div> <div class="related-list www_51969_com"> <h3><i class="jzicon-jztuwen"></i> 相关文章</h3> <ul> <li><a href="https://www.51969.com/post/18790703.html" title="javascript vue.js html5 css3 typescript 前端Vue uni-app中的通用网络请求封装：common.js的使用"><p>javascript vue.js html5 css3 typescript 前端Vue uni-app中的通用网络请求封装：common.js的使用</p></a> </li> <li><a href="https://www.51969.com/post/18790689.html" title="javascript vue.js 音视频 vue项目中定制化音频展示，wavesurfer.js基本使用"><p>javascript vue.js 音视频 vue项目中定制化音频展示，wavesurfer.js基本使用</p></a> </li> <li><a href="https://www.51969.com/post/18789660.html" title="javascript React Native Android 源码框架浅析（主流程及 Java 与 JS 双边通信）"><p>javascript React Native Android 源码框架浅析（主流程及 Java 与 JS 双边通信）</p></a> </li> <li><a href="https://www.51969.com/post/18790192.html" title="前端 Python面试题大全（三）：Web开发（Flask、爬虫）"><p>前端 Python面试题大全（三）：Web开发（Flask、爬虫）</p></a> </li> <li><a href="https://www.51969.com/post/18789688.html" title="react.js javascript React Native 框架开发的APP代码发布为APK文件，实现手机端可安装步骤详解，配图文"><p>react.js javascript React Native 框架开发的APP代码发布为APK文件，实现手机端可安装步骤详解，配图文</p></a> </li> <li><a href="https://www.51969.com/post/18790675.html" title="算法华为机试 JavaScript C语言华为OD机试 - 员工派遣（Java & JS & Python & C & C++）"><p>算法华为机试 JavaScript C语言华为OD机试 - 员工派遣（Java & JS & Python & C & C++）</p></a> </li> <li><a href="https://www.51969.com/post/18790325.html" title="前端 HBuilderX配置外部服务器（tomcat）查看编辑jsp界面"><p>前端 HBuilderX配置外部服务器（tomcat）查看编辑jsp界面</p></a> </li> <li><a href="https://www.51969.com/post/18789667.html" title="react.js javascript React Native简介和环境配置，差点挂在第四面"><p>react.js javascript React Native简介和环境配置，差点挂在第四面</p></a> </li> </ul> </div> <div class="comments www_51969_com"> <div id="comments" class="comments-area clearfix"> <div class="comment-list"><div class="jz-comment" id="divCommentPost"><h4 class="comments-title"> <span><i class="jzicon-jzqipaoc"></i>发表评论</span><a rel="nofollow" id="cancel-reply" href="#divCommentPost" style="display:none;float:right;"><small>取消回复</small></a></h4> <form id="frmSumbit" target="_self" method="post" action="https://www.51969.com/zb_system/cmd.php?act=cmt&postid=18611377&key=6d591e7b553029025af9b8ffd9b2e66e" ><input type="hidden" name="inpId" id="inpId" value="18611377"><input type="hidden" name="inpRevID" id="inpRevID" value="0"><div class="jz-comment-box jz-comment-ul3"> <input type="text" name="inpName" id="inpName" class="text" value="" size="28" tabindex="1" placeholder="名称(*)"> </div> <div class="jz-comment-box jz-comment-ul3 jz-comment-ul3-2"> <input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" placeholder="邮箱"> </div> <div class="jz-comment-box jz-comment-ul3"> <input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" size="28" tabindex="3" placeholder="网站"> </div><div class="jz-comment-box jz-comment-textarea"> <textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="欢迎在这里交流评论，但是垃圾评论不受欢迎！"></textarea> </div><input name="sumbit" type="submit" tabindex="6" value="发表评论" onclick="return zbp.comment.post()" class="jz-commbut"> </form></div><label id="AjaxCommentBegin"></label><div class="pagelist page-comment"> </div><label id="AjaxCommentEnd"></label></div> </div></div> </div> </div> <aside id="sticky-wrapper"><div> <span class="ifread"><a href="javascript:;" onclick="Jz52_tsqa_prise('18611377')" class="Jz52_tsqa_prise_id-18611377 dotGood Jz52_tsqa_prise badge" title="好文！一定要点赞！" data-badge="0"><i class="jzicon-jzzan-h"></i><em class="emz">0</em><em>赞</em></a></span><span class="ifread"><a title="回复" href="#divCommentPost" class="badge" data-badge="0"><i class="jzicon-message-3-fill"></i></a></span><span class="ifread"><a title="热度" href="#" class="badge" data-badge="5"><i class="jzicon-fire-fill"></i></a></span><span class="ifread Cshare"><a title="分享" href="javascript:;" class=""><i class="jzicon-share-forward-fill"></i></a> <em class="share-sns" data-title="jquery 前端 javascript day36" data-url="https://www.51969.com/post/18611377.html"> <span class="cl" data-type="wechatl" title="分享到微信"><a title="分享到微信" href="#" class="bds_weixin" ><i class="jzicon-weixin"></i>微信<span id="wechat-qrcodel"></span></a></span><span class="cl" data-type="weibo" title="分享到微博"><a title="分享到新浪微博" href="#" class="bds_tsina" ><i class="jzicon-weibo"></i>新浪微博</a></span><span class="cl" data-type="qzone" title="分享到QQ空间"><a title="分享到QQ空间" href="#" class="bds_qzone" ><i class="jzicon-qzone"></i>QQ空间</a></span><span class="cl" data-type="qq" title="分享到QQ好友"><a title="分享到QQ好友" href="#" class="bds_qq" ><i class="jzicon-qq"></i>QQ</a></span> </em></span><span style="margin-top: 30px;"><a href="javascript:;" title="沉浸阅读" class="goread"><i class="jzicon-book-read-fill"></i></a></span></div></aside> <aside id="sidebar-right"><div class="widget ifread" id="side-new-userarticle"><h3 class="function_t">TA的新帖</h3><ul><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"><a class="list-title" href="https://www.51969.com/post/18842461.html" target="_blank" title="uni-app 微信小程序如何获取用户手机号码？">uni-app 微信小程序如何获取用户手机号码？</a></div><div class="list-footer"><span>2024-05-06</span></div></div><div class="clear"></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"><a class="list-title" href="https://www.51969.com/post/18841537.html" target="_blank" title="前端 node.js npm request to https://registry.npm.taobao.org/create-vue failed, reason: certificate has expired">前端 node.js npm request to https://registry.npm.taobao.org/create-vue failed, reason: certificate has expired</a></div><div class="list-footer"><span>2024-05-05</span></div></div><div class="clear"></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"><a class="list-title" href="https://www.51969.com/post/17819257.html" target="_blank" title="java 大数据技术之Hadoop：使用命令操作HDFS（四）">java 大数据技术之Hadoop：使用命令操作HDFS（四）</a></div><div class="list-footer"><span>2024-05-05</span></div></div><div class="clear"></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"><a class="list-title" href="https://www.51969.com/post/15786412.html" target="_blank" title="Android WebView和H5交互总结">Android WebView和H5交互总结</a></div><div class="list-footer"><span>2024-05-04</span></div></div><div class="clear"></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"><a class="list-title" href="https://www.51969.com/post/18607303.html" target="_blank" title="transformer 人工智能深度学习神经网络自然语言处理 nlp 【论文阅读】Mamba：具有选择状态空间的线性时间序列建模">transformer 人工智能深度学习神经网络自然语言处理 nlp 【论文阅读】Mamba：具有选择状态空间的线性时间序列建模</a></div><div class="list-footer"><span>2024-05-04</span></div></div><div class="clear"></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"><a class="list-title" href="https://www.51969.com/post/18387279.html" target="_blank" title="在python中安装库，会有conda安装，也会有pip安装，conda与pip的区别是什么？">在python中安装库，会有conda安装，也会有pip安装，conda与pip的区别是什么？</a></div><div class="list-footer"><span>2024-04-30</span></div></div><div class="clear"></div></li></ul></div><div id="directory"></div><div class="widget ifread www_51969_com" id="divSearchPanel"><h3 class="function_t">搜索</h3><div><form name="search" method="post" action="https://www.51969.com/zb_system/cmd.php?act=search"><input type="text" name="q" size="11" /> <input type="submit" value="搜索" /></form></div></div><div class="widget ifread www_51969_com" id="side-hot-view-item"><h3 class="function_t">热门文章</h3><ul><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15795466.html" target="_blank" title="开发语言【Python】通过第三方库wxauto自动化操作微信电脑客户端">开发语言【Python】通过第三方库wxauto自动化操作微信电脑客户端</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15782375.html" target="_blank" title="python Django web开发(一) - 前端">python Django web开发(一) - 前端</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/1359046.html" target="_blank" title="vue.js elementui 前端 vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情">vue.js elementui 前端 vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/18610901.html" target="_blank" title="windows 强烈推荐!!一款TCP/UDP Socket 测试工具">windows 强烈推荐!!一款TCP/UDP Socket 测试工具</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/18137843.html" target="_blank" title="深度学习一文精简介绍CNN神经网络">深度学习一文精简介绍CNN神经网络</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/13760144.html" target="_blank" title="网络安全学习 AI编程 copilot 【网安AIGC专题】46篇前沿代码大模型论文、24篇论文阅读笔记汇总">网络安全学习 AI编程 copilot 【网安AIGC专题】46篇前沿代码大模型论文、24篇论文阅读笔记汇总</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15791529.html" target="_blank" title="linux 解决Error while loading conda entry point: conda-libmamba-solver (libarchive.so.19: cannot open shared">linux 解决Error while loading conda entry point: conda-libmamba-solver (libarchive.so.19: cannot open shared</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/157861.html" target="_blank" title="ide 编辑器 VSCode 安装教程（超详细）">ide 编辑器 VSCode 安装教程（超详细）</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15798461.html" target="_blank" title="linux 运维 ubuntu 安装jdk21开发环境">linux 运维 ubuntu 安装jdk21开发环境</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15789783.html" target="_blank" title="一键解决json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)">一键解决json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/13768174.html" target="_blank" title="python 开发语言 Stable Diffusion 本地部署教程">python 开发语言 Stable Diffusion 本地部署教程</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/157442.html" target="_blank" title="Amazon CodeWhisperer 免费 AI 代码生成助手体验分享">Amazon CodeWhisperer 免费 AI 代码生成助手体验分享</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15789774.html" target="_blank" title="路由跳转 GetPage使用详情 Getx使用详情 Flutter中GetX系列九--路由/页面跳转,传值,中间件(GetPage)">路由跳转 GetPage使用详情 Getx使用详情 Flutter中GetX系列九--路由/页面跳转,传值,中间件(GetPage)</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15782324.html" target="_blank" title="分布式 EFAK kafka安装上手第一关，手把手教你安装kafka与可视化工具kafka-eagle">分布式 EFAK kafka安装上手第一关，手把手教你安装kafka与可视化工具kafka-eagle</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/157419.html" target="_blank" title="前端后端开发语言华为云【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇">前端后端开发语言华为云【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/17822463.html" target="_blank" title="开发语言 Java 19的未来：新特性、性能优化和更多">开发语言 Java 19的未来：新特性、性能优化和更多</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15791813.html" target="_blank" title="selenium java chrome 【软件测试】单元测试工具---Junit详解">selenium java chrome 【软件测试】单元测试工具---Junit详解</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/157659.html" target="_blank" title="c语言 ide 编辑器 vscode配置C/C++环境（超详细保姆级教学）">c语言 ide 编辑器 vscode配置C/C++环境（超详细保姆级教学）</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/18664703.html" target="_blank" title="【AIGC调研系列】通义灵码与copilot的对比">【AIGC调研系列】通义灵码与copilot的对比</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15782501.html" target="_blank" title="Nacos Consul 服务发现服务治理 Dubbo引入Zookeeper等注册中心简介以及DubboAdmin简要介绍，为后续详解Dubbo各种注册中心做铺垫！">Nacos Consul 服务发现服务治理 Dubbo引入Zookeeper等注册中心简介以及DubboAdmin简要介绍，为后续详解Dubbo各种注册中心做铺垫！</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15786567.html" target="_blank" title="网络安全人工智能 ai 指纹识别工具WhatWeb使用教程，图文教程（超详细）">网络安全人工智能 ai 指纹识别工具WhatWeb使用教程，图文教程（超详细）</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15786708.html" target="_blank" title="开发语言 MATLAB R2022b 安装教程">开发语言 MATLAB R2022b 安装教程</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15782925.html" target="_blank" title="运维 Linux系统下安装配置 Nginx 超详细图文教程">运维 Linux系统下安装配置 Nginx 超详细图文教程</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/157569.html" target="_blank" title="Nive 云计算与大数据之间的羁绊（期末不挂科版）：云计算 | 大数据 | Hadoop | HDFS | MapReduce | Hive | Spark">Nive 云计算与大数据之间的羁绊（期末不挂科版）：云计算 | 大数据 | Hadoop | HDFS | MapReduce | Hive | Spark</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15786067.html" target="_blank" title="架构云原生 Spring Cloud Gateway 网关整合 Knife4j 4.3 实现微服务接口文档聚合">架构云原生 Spring Cloud Gateway 网关整合 Knife4j 4.3 实现微服务接口文档聚合</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/17819196.html" target="_blank" title="记一次spring cloud gateway Netty线程性能优化(附带压测)">记一次spring cloud gateway Netty线程性能优化(附带压测)</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/1359189.html" target="_blank" title="java 开发语言【消息中间件】详解三大MQ：RabbitMQ、RocketMQ、Kafka">java 开发语言【消息中间件】详解三大MQ：RabbitMQ、RocketMQ、Kafka</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15779785.html" target="_blank" title="pytorch ffmpeg ai AI编程【小沐学Python】Python实现语音识别（Whisper）">pytorch ffmpeg ai AI编程【小沐学Python】Python实现语音识别（Whisper）</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15780880.html" target="_blank" title="如何3分钟在 Windows 11 上启用 Copilot">如何3分钟在 Windows 11 上启用 Copilot</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/18743299.html" target="_blank" title="超级详细的电脑通过网线连接树莓派操作步骤，以及无法查询到树莓派ip的解决办法（本人亲自踩坑无数总结而来，学不会来揍我系列）">超级详细的电脑通过网线连接树莓派操作步骤，以及无法查询到树莓派ip的解决办法（本人亲自踩坑无数总结而来，学不会来揍我系列）</a> </div><div class="list-footer"> <span>2024-05-07</span> </div></div></li></ul></div><div class="widget ifread www_51969_com" id="side-new-comment-item"><h3 class="function_t">最新评论</h3><ul><li><a href="https://www.51969.com/post/18845667.html#cmt1499" title="heze在MQTTNET mqtt客户端 mqtt发布 mqtt订阅 .net C#MQTT编程06--MQTT服务器和客户端(winform版)的评论"><img alt="heze" src="https://www.51969.com/zb_users/avatar/0.png" class="avatar" height="24" width="24"><p>真好</p><span>2024-05-07</span></a></li><li><a href="https://www.51969.com/post/18732400.html#cmt1492" title="gg在kubernetes 容器云原生 K8s（七）：部署、使用 metrics-server的评论"><img alt="gg" src="https://www.51969.com/zb_users/avatar/0.png" class="avatar" height="24" width="24"><p>湖广会馆湖广会馆湖广会馆湖广会馆韩国货</p><span>2024-05-06</span></a></li><li><a href="https://www.51969.com/post/18722929.html#cmt1485" title="你好在c语言 visual studio github 内容运营软件工程一篇文章让你完全掌握使用Git推送代码到新版GitCode的评论"><img alt="你好" src="https://www.51969.com/zb_users/avatar/0.png" class="avatar" height="24" width="24"><p>可以这样子</p><span>2024-05-06</span></a></li><li><a href="https://www.51969.com/post/18771271.html#cmt1478" title="你好在百度搜索引擎用户运营内容运营流量运营头条搜索下拉词怎么做?高粱seo实战告诉你答案的评论"><img alt="你好" src="https://www.51969.com/zb_users/avatar/0.png" class="avatar" height="24" width="24"><p>这个效果不错</p><span>2024-05-06</span></a></li><li><a href="https://www.51969.com/post/18808420.html#cmt1471" title="学生在python 后端 django直播带货系统的设计与实现(程序+开题报告)的评论"><img alt="学生" src="https://www.51969.com/zb_users/avatar/0.png" class="avatar" height="24" width="24"><p>想要源码</p><span>2024-05-03</span></a></li><li><a href="https://www.51969.com/post/51969.html#cmt1464" title="归海奕筎在完全免费白嫖chatGPT-4的终极方法！的评论"><img alt="归海奕筎" src="https://www.51969.com/zb_users/avatar/0.png" class="avatar" height="24" width="24"><p>好想白嫖。</p><span>2024-04-30</span></a></li></ul></div></aside> </div><script>var billmE = new Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Spt","Oct","Nov","Dec"); var billhost = "https://www.51969.com/",billtxt1 = "老司机，路子野，随时超车",billtxt2 = "POWERED: Z-BLOGPHP THEMES: YEELZ",billurl = "https://www.51969.com/post/18611377.html",billtag = "前端",billtitle = "jquery 前端 javascript day36",billcont = "...",billimg = "路径",billlogo = "https://www.51969.com/zb_users/theme/Jz52_tsqa/bill/logo.png",billd = "07",billY = "2024",billm = billmE[parseInt("3")]; var hbtim = '<div class="img_time">'+billd+'<span>'+billm+'. '+billY+'</span></div>';</script><link href="https://www.51969.com/zb_users/theme/Jz52_tsqa/bill/bill.css" media="all" rel="stylesheet"><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/bill/html2canvas.min.js"></script><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/bill/bill.js"></script><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/bill/billgo.js"></script><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/script/asid.js"></script> <div id="footer"> <p><div><a href="https://www.51969.com/" target="_blank">金钥匙</a> | <a href="https://www.51969.com/sitemap/map.xml" target="_blank">网站地图</a> | <a href="http://ai.51969.com/" target="_blank">金钥匙ai</a> | <a href="http://yzkb.51969.com/" target="_blank">柚子快报</a> | <a href="https://www.51969.com/user/51969561/" target="_blank">柚子快报教程</a> | <a href="http://yzkbyqm.51969.com/" target="_blank">柚子快报邀请码</a> | <a href="http://yzkbjhm.51969.com/" target="_blank">柚子快报激活码</a></div><div>本站部分信息来自互联网收集，仅供学习和交流，如有侵权、后门、不妥之处，请联系我们进行删除处理。 </div><script charset="UTF-8" id="kuazhi_ai_click" src="https://kuazhi.com/kuazhi_ai_click.js"></script><div>金钥匙www.51969.com.2009-2024 All Rights Reserved.</div><script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script><script>LA.init({id:"JsGTT7LZ90ZlKYPn",ck:"JsGTT7LZ90ZlKYPn"})</script> <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">浙ICP备15009899号-2</a></p></p> </div></div></div><a href="javascript:void(0);" class="to-top" id="to-top"><i class="jzicon-jzzhiding"></i><em>返回顶部</em></a><a class="jznight" href="javascript:switchNightMode()" target="_self"><i class="jzicon-yejian-b"></i><em>暗黑模式</em></a><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/script/custom.js?v1.0.9"></script><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/script/qrcode.min.js"></script><script src="https://www.51969.com/zb_users/plugin/gbll_rollname/names.js"></script><script src="https://www.51969.com/zb_users/plugin/gbll_rollname/roll.js"></script><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/script/sticky-left.js"></script><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/script/sidebar-right.js"></script><div id="ly_cache" data-id="18611377"></div></body></html>