前端高级之---jQuery基本用法(很全)
其他版本下载：https://www.bootcdn.cn/jquery/
3.5.1版本：https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js
注意：slim版没有Ajax
官网：https://jquery.com/
JQuery
- JQuary内部封装了原生的js代码（还添加了很多功能），书写更少的代码完成js操作，类似python模块
- 在前端模块不叫模块，叫
类库 - 兼容多个浏览器
- 宗旨：write less do more
- 原生JS运行速度快，JQ则稍慢（但其核心js才几十kb）
'''
JQuery 文件下载
compessed-压缩版（去掉空格，容量更小一点）
uncompressed-未压缩（标准格式）全选+复制到一个 “JQuary-3.5.1.js”文件中
'''
1、使用
-
JQuery本质就是
.js文件，复制到要使用的项目文件夹内，然后引用这个文件即可（引用外部JS文件）<head><meta charset="UTF-8"><title>JQ学习</title><script src="JQuery-3.5.1.js"></script> </head>
1.1 导入问题
1）文件下载到本地，但要重复书写引用代码
# 可以借助pycharm自动初始化代码功能完成自动添加
File——Settings——Editor——File and Code Templates
选择 HTML File 将要初始化的代码黏贴到相应位置
——apply——OK这样自定义的HTML模板就设置好了# 但是这样还有一个问题，代码中的文件路径被规定死了，必须是本地路径，而且必须下载好JQuery文件到本地# 浏览器在请求时，会单独请求下载这个类库，其文件路径若未指定（比如本地地址），就会自动拼接本地文件路径2）直接引入JQuery提供的CDN服务（基于网络直接请求加载）
<!--CDN:网络内容分发网络有免费也有付费的免费参考网站-bootcdn--><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js
"></script><!-- 这样任然存在问题，就是计算机必须要有网络 --><!--而在公司开发时，一般会有专门的文件服务器来提供下载地址，分散请求压力-->
1.2 JQ基本语法
JQuery(选择器).action() // JQuery可以简写成 $
JQuery() === $()'''JQuery 与 原生js代码对比'''
//eg:将标签内部的文本颜色改为红色//原生JS代码操作
var pEle = document.getElementById('d1');
pEle.style.color = 'skyblue';//JQ操作标签
$('p').css('color','pink');
1.3 jQuery对象
-
注意：JQuery对象只能调用JQ方法
而标签对象才能调用标签对象的方法！！
（[对象转换](#2.1 基本选择器 & 对象转换)） -
JQ方法调用，背后其实隐含了一个迭代器，for循环取值出来后再操作。。。
1.4 文档就绪
3. 文档就绪事件
DOM文档加载的步骤(HTML代码解析顺序：自上而下)
- 解析HTML结构。
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码。
- DOM树构建完成。
- 加载图片等外部文件。
- 页面加载完毕。
等待文档加载完毕后执行函数，有两种方式：
#1、执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。#2、编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 #-window.unload是浏览器对象
$(document).ready()可以同时编写多个，并且都可以得到执行 #-$(document).将js的文档对象转为JQ对象#3、简化写法不同
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
- 当然最好就是直接把所有操作性质的script代码都放到body内最底部
1.5 链式操作
#链式调用，原理就是 调用一个实例化方法返回的是当前的对象
$('.box1').css('color','red').next().css('width','200px').css('height','200px').css('background','g
-
本质就是在调用的时候，返回了自己
python中验证：
class People:def __init__(self,name,age):self.name=nameself.age=agedef f1(self):print('from f1')return selfdef f2(self):print('from f2')return selfobj=People("egon",18)obj.f1().f2().f1()
2、查找标签
https://www.cnblogs.com/Dominic-Ji/p/10490669.html
2.1 基本选择器 & 对象转换
// id选择器
$('#d1')
S.fn.init [div#d1]
// 类选择器
$('.c1')
S.fn.init [p.c1, prevObject: S.fn.init(1)]
//标签选择器
$('span')
S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]//注意：结果看着是数组，但也是JQuery对象
typeof($('span'))
"object"#下面两个一定要区分开
//JQuery对象如何变为标签对象
$('#d1')[0] //数组取值，与JS不同之处：JS的id不需要索引取值，但是JQ一律都放到数组
<div id="d1">…</div>//标签对象如何转JQuery对象
$(document.getElementById('d1'))
S.fn.init [div#d1]
-
补充一个所有选择
$('*') //站在全局角度而非body S.fn.init(16) [html, head, meta, title, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: S.fn.init(1)]
2.2 组合选择器/分组与嵌套
准备：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组合选择器</title><script src="JQuery-3.5.1.js"></script>
</head>
<body>
<span>span1</span>
<span>span2</span>
<div id="d1">div1<span>div1>span1</span><p id="d2">div1>p1<span>div1>p1>span2</span></p><span>div1>span3</span>
</div><div class="c1"></div><span>span4</span>
<span>span5</span></body>
</html>
$('div')
S.fn.init(2) [div#d1, div.c1, prevObject: S.fn.init(1)]
//并列使用
$('div.c1')
S.fn.init [div.c1, prevObject: S.fn.init(1)]
$('div#d1')
S.fn.init [div#d1, prevObject: S.fn.init(1)]//并列+混合使用
$('#d1,c1,p')
S.fn.init(2) [div#d1, p#d2, prevObject: S.fn.init(1)]$('div span') // css后代选择器：div内所有span
S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]$('div>span') // css儿子选择器：div内往下一级span
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]$('div+span') // css毗邻选择器：div同级相邻下一个span
S.fn.init [span, prevObject: S.fn.init(1)]$('div~span') // css弟弟选择器：div同级下所有span
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
2.3 基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(选择器)// 过滤掉所有满足not条件的标签
:has(选择器)// 过滤出所有后代中满足has条件的标签#例如
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有！！！后代中！！！不含a标签的li标签
（1）似CSS-第n个/奇偶
- 准备
<!-- ul>li{1$$}*10 快速生成10个带序号内容的标签 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本筛选器</title><script src="JQuery-3.5.1.js"></script>
</head>
<body>
<ul><li>101</li><li>102</li><li>103</li><li>104</li><li>105</li><li>106</li><li class="c1">107</li><li>108</li><li id="d1">109</li><li>110</li>
</ul>
</body>
</html>
$("ul li")$("ul li:first") //CSS标签:fist-child {}$("ul li:last") //css标签:last-child {}$('ul li:eq(2)') //css标签:nth-child() {}$('ul li:even') //偶数索引选择器$('ul li:odd') //奇数索引选择器
- 鼠标移到eq查询结果下第一行
>0: li处可以看到按照索引取出了第三个JQ对象
- even 偶数（包括0），按照索引是偶数来取值，取出来的元素位置为奇数
- odd 奇数，按照索引是奇数来取值，取出来的元素位置为偶数
（2）似HTML-大于小于索引
//大于某个索引
$('ul li:gt(2)') //gt >号
S.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: S.fn.init(1)]//小于某个索引
$('ul li:lt(2)') //lt <号
S.fn.init(2) [li, li, prevObject: S.fn.init(1)]
（3）除了not
- 移除满足条件的标签
$('ul li:not("#d1")') //注意引号外单内双
S.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: S.fn.init(1)]
（4）has
- 准备
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本筛选器</title><script src="JQuery-3.5.1.js"></script>
</head>
<body>
<ul><li>101</li><li>102</li><li>103</li><li>104</li><li>105</li><li>106</li><li class="c1">107</li><li>108</li><li id="d1">109</li><li>110</li>
</ul><div>div<p>div>p</p><span>div>span</span>
</div>
<div>div<a href="">div>a</a>
</div></body>
</html>
$('div')
S.fn.init(2) [div, div, prevObject: S.fn.init(1)]# has
$('div:has("p")') // 选出包含一个或多个标签载内的标签
S.fn.init [div, prevObject: S.fn.init(1)]
//注意一定是选择出一个“父级标签”！只能has跟“标签”！$('ul:has("li.c1")') //选出包含了class是c1的li标签的ul标签
S.fn.init [ul, prevObject: S.fn.init(1)]$('li:has(".c1")') #错误示范，has跟属性
S.fn.init [prevObject: S.fn.init(1)] //返回空
length: 0$('li:has("li.c1")') #错误示范2，找的不是父级
S.fn.init [prevObject: S.fn.init(1)]
length: 0
（5）属性选择器 $(‘标签[属性名=属性值]’)
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
- 准备
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性选择器</title><script src="JQuery-3.5.1.js"></script>
</head>
<body>
<input type="text" user = "eve">
<input type="text" user = "edith">
<p user = "edith"></p>
</body>
</html>
//注意引号外单内双/外汇双内单$('[user]') //含有user属性的
S.fn.init(3) [input, input, p, prevObject: S.fn.init(1)]$('[user="eve"]') //user属性值为eve的
S.fn.init [input, prevObject: S.fn.init(1)]$('p[user="edith"]') //user属性值为edith的p标签
S.fn.init [p, prevObject: S.fn.init(1)]'''内置属性示例'''
$('[type]')
S.fn.init(2) [input, input, prevObject: S.fn.init(1)]
$('[type="text"]')
S.fn.init(2) [input, input, prevObject: S.fn.init(1)]
（6）表单筛选器 $(’:属性值’)
-
只有，但也只要是属于form表单里的（input、select、textaera）
都可以简写为
$(':属性值'):text :password :file :radio :checkbox:submit :reset :button ...以及表单对象属性 :enabled :disabled :checked :selected -
准备
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单筛选器</title><script src="JQuery-3.5.1.js"></script>
</head>
<body><form action=""><p>username:<input type="text"></p><p>password:<input type="password"></p><input type="button">
</form></body>
</html>
$('input[type="text"]')
S.fn.init [input, prevObject: S.fn.init(1)]0: inputlength: 1prevObject: S.fn.init [document]__proto__: Object(0)
$('input[type="password"]')
S.fn.init [input, prevObject: S.fn.init(1)]0: inputlength: 1prevObject: S.fn.init [document]__proto__: Object(0)#以上都可以简写为：
$(':text')
S.fn.init [input, prevObject: S.fn.init(1)]
$(':password')
S.fn.init [input, prevObject: S.fn.init(1)]
-checked & selected
-
checked会把selected的option也拿到（也就是selected和checked都拿到）；selected只拿自己的
-
若不想要selected的option需自己加限制
$('input:checked') -
准备
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单筛选器</title><script src="JQuery-3.5.1.js"></script>
</head>
<body><form action=""><p>username:<input type="text"></p><p>password:<input type="password"></p><input type="checkbox" value="111">111<input type="checkbox" value="222" checked>222<!--默认选中--><input type="checkbox" value="333">333<select name="" id="" multiple><option value="">111</option><option value="">222</option><option value="" selected>333</option><!--默认选中--></select><input type="button" value="按钮">
</form></body>
</html>
#1 checked
$(':checked')
S.fn.init [input, prevObject: S.fn.init(1)]//若选中了另一个，也就是多选状态下（即222默认勾上，333自己勾上）
$(':checked')
S.fn.init(2) [input, input, prevObject: S.fn.init(1)]
//另一个也拿到了，即使没有checked，所以是只要选中就拿到#2 selected
$(':selected')
S.fn.init [option, prevObject: S.fn.init(1)]
$(':checked') //checked会把selected的option也拿到
S.fn.init(2) [input, option, prevObject: S.fn.init(1)]//如果只想拿到checked的input:
$('input:checked')
S.fn.init [input, prevObject: S.fn.init(1)]//mutiple多选也会都拿到
$(':selected')
S.fn.init(2) [option, option, prevObject: S.fn.init(1)]
2.4 筛选器方法
-同级上下next/prev
-
通过一个元素出发，就找到其他所有元素
-
准备
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>筛选器方法</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js "></script> </head> <body><span id="d1">span</span> <span>span</span><div id="d2"><span>div>span</span><p>div>p<span id="d3">div>p>span</span></p><span>div>span</span> </div><span>span</span> <span>span</span> <span class="c1">span</span></body> </html>/*同级往下找 .next*/$('#d1') S.fn.init [span#d1]$('#d1').next() S.fn.init [span, prevObject: S.fn.init(1)]0: spanlength: 1prevObject: S.fn.init [span#d1]__proto__: Object(0)$('#d1').nextAll() S.fn.init(5) [span, div#d2, span, span, span.c1, $('#d1').nextUntil('.c1') //直到c1为止，且不包含c1 S.fn.init(4) [span, div#d2, span, span, /*同级往上找 .prev*/ $('.c1').prev() S.fn.init [span, prevObject: S.fn.init(1)]$('.c1').prevAll() S.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: S.fn.init(1)]$('.c1').prevUntil('#d2') //直到d2为止，且不包含d2 S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
-找父级parent
$('#d3').parent()
S.fn.init [p, prevObject: S.fn.init(1)]$('#d3').parent().parent()
S.fn.init [div#d2, prevObject: S.fn.init(1)]//父级可以一直点下去
$('#d3').parent().parent().parent()
S.fn.init [body, prevObject: S.fn.init(1)]
$('#d3').parent().parent().parent().parent()
S.fn.init [html, prevObject: S.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent()
S.fn.init [document, prevObject: S.fn.init(1)]//直到document文档对象结束，下面就没有了
$('#d3').parent().parent().parent().parent().parent().parent()
S.fn.init [prevObject: S.fn.init(1)]//直接一行代码拿到所有父级标签
$('#d3').parents()
S.fn.init(4) [p, div#d2, body, html, prevObject: S.fn.init(1)]//默认拿到HTML为止$('#d3').parentsUntil('body') //手动设置body前所有标签
S.fn.init(2) [p, div#d2, prevObject: S.fn.init(1)]
-找子级children / 兄弟siblings
$('#d2').children() //找儿子
S.fn.init(3) [span, p, span, prevObject: S.fn.init(1)]$('#d2').siblings() //找同级的“上下”所有
S.fn.init(5) [span#d1, span, span, span, span.c1, prevObject: S.fn.init(1)]
-筛选器封装方法：
- 与上述筛选器方法均两两等价
find
//以下两种方式虽然等价，单含义上有区别$('div p')
S.fn.init [p, prevObject: S.fn.init(1)]$('div').find('p') //find从已经划分的（div）区域里筛选出想要的标签
S.fn.init [p, prevObject: S.fn.init(1)]
-filter
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的等价于 $("div.c1")
-.first() / .last() / .not("")
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
- 示例：
$('div span')
S.fn.init(3) [span, span#d3, span, prevObject: S.fn.init(1)]// div span:first == div span .first()
$('div span:first')
S.fn.init [span, prevObject: S.fn.init(1)]$('div span').first()
S.fn.init [span, prevObject: S.fn.init(3)]// div span:not("") == div span .not("")
$('div span:not("#d3")')
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]$('div span').not('#d3')
S.fn.init(2) [span, span, prevObject: S.fn.init(3)]
3、操作标签
- 在用变量存储对象的时候
- js中推荐用
xxxEle表示标签对象 - jQuery中则用
$xxxEle表示jQuery对象
- js中推荐用
3.1 CSS样式操作
-样式类
addClass(); // 添加指定的CSS类名。
removeClass(); // 移除指定的CSS类名。
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
示例：
css("color","red") //DOM操作：tag.style.color="red"$("p").css("color", "red"); //将所有p标签的字体设置为红色
-位置
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
例1$("#bb").offset({"left":100,"top":100}) 例2$(window).scrollTop(0); // 跳到首页
-
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和
.position()的差别在于：.position()是相对于相对于父级元素的位移。
-尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
3.2 文本操作
-text & HTML
-
准备
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>文本操作</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js "></script> </head> <body> <div><p>说说心里话</p> </div> </body> </html>
//操作标签内部文本
js jQuery
innerText text()
innerHTML html()//括号内不加参数就是获取
$('div').text()
"说说心里话"
$('div').html()
"<p>说说心里话</p>
"//括号内加参数就是设置，且是覆盖效果
$('div').text('大智大勇')
S.fn.init [div, prevObject: S.fn.init(1)]
$('div').html('大吉大利')
S.fn.init [div, prevObject: S.fn.init(1)]$('div').text('<h1>大智大勇</h1>') //纯文本
S.fn.init [div, prevObject: S.fn.init(1)]
$('div').html('<h1>大智大勇，大吉大利</h1>') //可识别标签
S.fn.init [div, prevObject: S.fn.init(1)]
-获取值val
-
准备
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>值操作</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js "></script> </head> <body> <div><p>说说心里话</p> </div><input type="text" id="d1"> <!--文本类型--> <input type="file" id="d2"> <!--文件类型--><input type="checkbox" name="hobby" value="111">111 <input type="checkbox" name="hobby" value="222">222 <input type="checkbox" name="hobby" value="333">333</body> </html> -
注意文件对象获取方法！！！
# input标签中若获取的对象内容为文本：$('#d1').val() //无内容获取，输入前
""$('#d1').val() //无内容获取，输入后（非提交）
"kunkunkunkun"$('#d1').val('大智大勇') //括号内有内容，赋值
S.fn.init [input#d1]# input标签中若获取的对象内容为文件：！！！
$('d2').val() //拿到JQ对象后转成JS对象$('#d2')[0].files[0] //js中的获取文件对象方法
File {name: "D58_点击有惊喜01.jpg", lastModified: 1600914948752, lastModifiedDate: Thu Sep 24 2020 10:35:48 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 75338, …}# checkbox
$(':checkbox')
S.fn.init(3) [input, input, input, prevObject: S.fn.init(1)]
$(':checkbox').val() //获取
"111"$(':checkbox').val('666') //赋值
S.fn.init(3) [input, input, input, prevObject: S.fn.init(1)]$(':checkbox').val([666 777 888]) //无法统一设置
#VM204:1 Uncaught SyntaxError: Unexpected number
3.3 属性操作
-用于ID等或自定义属性：
js jQuery
setAttribute() attr(name,value)
getAttribute() attr(name)
removeAttribute() remove(name)
-用于checkbox和radio
prop('value') // 获取value属性的值
prop('checked',true); // 设置属性
removeProp('value') // 移除value属性
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。
示例：全选、反选、取消
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<h3>菜单</h3>
<input type="button" value="全选" id="all">
<input type="button" value="反选" id="reverse">
<input type="button" value="取消" id="cancel">
<p>蒸羊羔<input type="checkbox" name="menu"></p>
<p>蒸鹿茸<input type="checkbox" name="menu"></p>
<p>蒸熊掌<input type="checkbox" name="menu"></p>
<p>烧花鸭<input type="checkbox" name="menu"></p>
<p>烧雏鸡<input type="checkbox" name="menu"></p>
<p>烧子鹅<input type="checkbox" name="menu"></p><script src="
https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
<script>$('#all').click(function () {$('input').prop('checked',true)});$('#reverse').click(function () {$('input').each(function () {// console.log($(this).prop("checked"))// $(this).prop("checked",! 原来的checked值)// !做取反操作$(this).prop('checked',!$(this).prop('checked'));})});$('#cancel').click(function () {$('input').prop('checked',false)});</script>
</body>
</html>
3.4 文档处理 ？？？
-插入内部/外部前后
//内部
$(A).appendTo(B) // 把A追加到B内部的最后面
$(A).prependTo(B) // 把A前置到B内部的最前面//外部
$(A).insertAfter(B) // 把A放到B外部的后面
$(A).insertBefore(B) // 把A放到B外部的前面# 或者
//内部
$(A).append(B) // 把B追加到A内部的最后
$(A).prepend(B) // 把B前置到A内部的最前面//外部
$(A).after(B) // 把B放到A外部的后面
$(A).before(B) // 把B放到A外部的前面
-清除和清空元素
$('.p1').remove() // 从DOM中删除所有匹配的元素。====>把元素本身删掉
$('.p1').empty() // 删除匹配的元素集合中所有的子节点====》把元素的子元素都删掉（包含文本内容）
练习：
https://www.cnblogs.com/linhaifeng/articles/9512484.html#_label7
-替换
replaceWith() //with什么替换什么
replaceAll() //什么替换所有的什么$("a").replaceWith($(p)) // 替换者在后，被替换者在前# 将所有的div标签替换为p标签
$// ("div").replaceAll($(p)) // 不正确
$(p).replaceAll($('div')) // 替换者在前，被替换者在后
-克隆
clone()
// clone方法不加参数true，克隆标签但不克隆标签带的事件
// clone方法加参数true，克隆标签并且克隆标签带的事件
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>克隆</title><style>#b1 {background-color: deeppink;padding: 5px;color: white;margin: 5px;}#b2 {background-color: dodgerblue;padding: 5px;color: white;margin: 5px;}</style>
</head>
<body><button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>// clone方法不加参数true，克隆标签但不克隆标签带的事件$('#b1').on("click",function () {$(this).clone().insertAfter(this);});// clone方法加参数true，克隆标签并且克隆标签带的事件$('#b2').on("click",function () {$(this).clone(true).insertAfter(this);});
</script>
</body>
</html>
3.5 事件流
-概念
//什么是事件？？？
鼠标点击click、页面滚动onscroll、鼠标悬停mouseover等对元素的操作称之为事件，对HTML元素产生的事件可以被绑定上具体的操作，称之为事件绑定，比如在点击某一个元素时触发某个功能的执行// 注意：
首先我们要知道，浏览器中的各种操作不是因为我们绑定事件之后才存在，即便是我们不对任何元素绑定任何事件，我们仍然可以对元素进行各种如click、mouseover等等操作
只不过没有为元素绑定事件时，触发click或mouseover等操作将不会执行任何动作
总结下来，我们之所以绑定事件，就是因为想要在触发某个操作时去执行一些动作/函数而非无所事事
以点击事件为例，当我们点击div.box2时，由于div.box2在div.box1里,所以我们同时也在点击div.box1,同理，我们同时也在点击body、同时也在点击html
//事件流描述的是从页面中接收事件的顺序，js事件流分为三个阶段① 事件捕获阶段；② 处于目标阶段；③ 事件冒泡阶段// 强调：jQuery只有②③ 阶段以点击事件为例作出比喻：整个屏幕相当于一片草地，点击一下屏幕中的某个位置，相当于在屏幕中埋了一颗地雷事件捕获就是扫雷的过程：从外向里扫雷处于目标阶段就是找到了雷，然后嘣的一声，雷爆炸了事件冒泡阶段就是雷爆炸了向外产生的冲击波：从内向外扩散，以雷为中心方圆几十里地都给丫的炸死
可以通过向文档或者文档中的元素添加“事件侦听器”（addEventListener）来验证上述流程，
addEventListener这个方法接收3个参数：要处理的事件名、事件触发时执行的函数、一个布尔值。
布尔值参数如果是true，表示在捕获阶段执行函数；如果是false，表示在冒泡阶段执行函数
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!-- <meta charset="UTF-8">-->
<!-- <title>Title</title>-->
<!-- <style>-->
<!-- .box1 {-->
<!-- width: 600px;-->
<!-- height: 600px;-->
<!-- border: 1px solid black;-->
<!-- }-->
<!-- .box2 {-->
<!-- width: 200px;-->
<!-- height: 200px;-->
<!-- border: 1px solid red;-->
<!-- }-->
<!-- </style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="box1">-->
<!-- <div class="box2"></div>-->
<!--</div>--><!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
<!--<script>-->
<!-- $(".box2").click(function () {-->
<!-- console.log("我是儿子")-->
<!-- })--><!-- $(".box1").click(function () {-->
<!-- console.log("爸爸")-->
<!-- })-->
<!--</script>-->
<!--</body>-->
<!--</html>--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件流</title><script>window.onload = function () {// 1、事件捕获阶段：document.addEventListener('click', function () { // document代表的是整个html页面；console.log('document处于事件捕获阶段');}, true);document.documentElement.addEventListener('click', function () { // document.documentElement代表的是<html>标签；console.log('html处于事件捕获阶段');}, true);document.body.addEventListener('click', function () { // document.body代表的是<body>标签；console.log('body处于事件捕获阶段');}, true);var oBtn = document.getElementById('btn');oBtn.addEventListener('click', function () { // btn标签console.log('btn处于事件捕获阶段');}, true);// 2、处于目标阶段// 3、事件冒泡阶段document.addEventListener('click', function () { // document代表的是整个html页面；console.log('document处于事件冒泡阶段');}, false);document.documentElement.addEventListener('click', function () { // // document.documentElement代表的是<html>标签；console.log('html处于事件冒泡阶段');}, false);document.body.addEventListener('click', function () { // document.body代表的是<body>标签；console.log('body处于事件冒泡阶段');}, false);oBtn.addEventListener('click', function () { // btnconsole.log('btn处于事件冒泡阶段');}, false);};</script>
</head>
<body>
<!--
href="javascript:;"代表阻止默认事件
-->
<a href="javascript:;" id="btn">按钮</a>
</body>
</html>
3.6 具体事件操作
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 200px;height: 200px;background-color: red;}.father {width: 600px;height: 600px;border: 1px solid black;}</style>
</head>
<body>
<div class="father"><div class="box"></div>
</div><form action="http://www.baidu.com" id="form"><input type="text" id="inp"><input type="radio" value="男" name="gender">男<input type="radio" value="女" name="gender">女<input type="radio" value="保密" name="gender">保密<input type="submit" value="提交" id="btn">
</form><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>// $('.box').click(function () {// console.log("单击")// })// $('.box').dblclick(function () {// console.log("双击")// })// $('.box').mouseover(function () {// console.log("悬浮")// })// $('.box').mouseout(function (event) {// console.log("儿子移除")// return false// console.log(event.type)// console.log(event.target)// event.preventDefault() // 阻止默认事件// event.stopPropagation() // 阻止事件冒泡// })// $('.father').mouseout(function () {// console.log("爸爸移除")// })// mouseenter 与 mouseover效果一样，// mouseleave 与 mouseout效果一样，// 但是前者不支持冒泡行为// $('.box').mouseleave(function (event) {// console.log("儿子移除")// })//// $('.father').mouseleave(function () {// console.log("爸爸移除")// })// $('#inp').focus(function (event) {// console.log('鼠标聚焦');// });// $('#inp').blur(function (event) {// console.log('鼠标失去焦点');// });// $('#inp').keydown(function () {// $(this).val("123")// });// $('#inp').keyup(function () {// $(this).val("123")// });// $('#inp').change(function () {// console.log($(this).val());// });// $(":radio").change(function () {// console.log($(this).val())// })// $("#inp").select(function () {// console.log($(this).val())// })// $("#btn").click(function () {// console.log("123")// return false// })$("#btn").submit(function () {console.log("123")return false})
</script>
</body>
</html>
-事件绑定与解除绑定的方法 ???
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {width: 500px;height: 500px;background-color: gray;}</style>
</head>
<body>
<div class="box1">div1
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>// 绑定方式一：$('.box1').click(function () {alert('绑定方式一')});// 绑定方式二：$('.box1').bind('click', function () {alert('绑定方式二')});$('.box1').bind('mouseover mouseout', function () { // 绑定多个事件做同一件事console.log('绑定多个事件做同一件事')});$('.box1').bind({'mouseup': function () {console.log('mouseover');},'mousedown': function () {console.log('mouseout');}});// 移除事件，unbind没有参数则代表移除所有事件setTimeout(function () {alert('3s啦。。。mouseover失效');$('.box1').unbind('mouseover');}, 3000);setTimeout(function () {alert('10s啦。。。所有事件移除');$('.box1').unbind();}, 10000)
</script>
</body>
</html>
-事件对象
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {width: 500px;height: 500px;background-color: gray;}.box2 {width: 200px;height: 200px;background-color: red;}</style>
</head>
<body>
<div class="box1">div1<div class="box2">div2</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>// this和event.target// 相同之处：// 1、this和event.target都是js dom对象// 不同之处：// 1、js中事件是会冒泡的，所以this是会变化的，但event.target不会变化，它永远是直接接受事件的目标js DOM元素，这一点区别将在后续的事件委托的知识点中体现；$('.box2').bind('click',function (event) {console.log(event.type); // event.type事件的类型为：clickconsole.log(event.target); // event.target指的是点击的那个元素console.log(event.pageX); // 点击事件/点击位置相对于窗口的X轴位置console.log(event.pageY);})// 常用的事件方法：1 阻止事件冒泡 2.阻止默认事件// ev.preventDefault() 阻止默认事件// ev.stopPropagation()阻止事件冒泡// return false 既阻止默认事件又阻止事件冒泡</script>
</body>
</html>
-事件冒泡之事件委托 ？？？？
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul>li{list-style: none;width: 600px;height: 50px;border: 1px solid black;}</style>
</head>
<body>
<ul><li>aaaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eeee</li>
</ul><button id="btn">点击新增</button><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>/*$("#btn").click(function () {var li=document.createElement("li")li.innerText="666"$(li).appendTo($("ul"))//1、比起事件委托，该方式需要遍历所有li节点，性能较低。//2、如果我们在绑定事件完成后，页面又动态的加载了一些元素……
$("<li>item7</li>").appendTo("ul"); 该方式需要我们给新增的元素再绑定一次事件$("li").mouseover(function () {// console.log(this.innerText)$(this).css('background-color',"red").siblings().css('background-color',"white")})})//下面这个也不能删，否则原来的就没有事件了，只有新加的有事件$("li").mouseover(function () {// console.log(this.innerText)$(this).css('background-color',"red").siblings().css('background-color',"white")})*/$("ul").on("mouseover","li",function () {// console.log(this.innerText)$(this).css('background-color',"red").siblings().css('background-color',"white")})$("#btn").click(function () {var li=document.createElement("li")li.innerText="666"$(li).appendTo($("ul"))})
</script>
</body>
</html>
tml
- aaaa
- bbb
- ccc
- ddd
- eeee
点击新增
```练习：？？？
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
相关文章
- Android初始之Intent
Intent作为Action之间的媒介，是Android的核心之一 下面是Intent的知识图谱...
2024/4/8 12:58:15 - 矩阵中的路径--力扣
请设计一个函数，用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径。路径可以从矩阵中的任意一格开始，每一步可以在矩阵中向左、右、上、下移动一格。如果一条路径经过了矩阵的某一格，那么该路径不能再次进入该格子。例如…...
2024/4/8 1:54:28 - TCP为什么三次握手
TCP的三次握手过程，为什么是三次呢？ 三次握手过程 （1）第一次握手 客户端向服务器端发送tcp报文请求建立连接，其中： 标记位为SYN1 序号为seqx （2）第二次握手 服务端收到信息后知道…...
2024/4/8 12:47:22 - Hadoop集群部署（三），集群时间同步
集群中的节点需要设置时间同步。这很自然，因为多节点协作，我们希望它们在时间上是同步的。 解决方案就很简单了，只保留一个节点作为时间服务器，其他两个节点从该节点得到时间。 步骤 所有节点停止并永久关闭ntp服务，…...
2024/4/9 12:42:55 - 好消息！阿里巴巴预计未来几个月内，阿里云将实现首次盈利
阿明（Aming）微评：看到这个消息后，相信所有做云计算业务的公司，对此都会深有感触。毕竟所有涉足公有云的厂商，大部分处于非赢利的长期状态，能够从经营中获得利润可是公有云厂商一直以来的“渴望”…...
2024/4/7 21:57:39 - 2020-10-02Linux shell判断url是否能访问，定时访问网站如果有问题就重启，懒得去查故障
testurlhttp://www.baidu.com urlstatus$(curl -s -m 5 -IL $testurl|grep 200) if [ "$urlstatus" "" ] thenecho "urlstatus is OFF "date;reboot fi curl -s -m 5 -IL http://www.baidu.com|grep 200 -s 静默模式，进度条和错…...
2024/4/25 19:01:55 - 学习C++18天
昨天是第18天，学习内容如下： 1.数据共享与保护 2.作用域 3.可见性 4.对象生存期 5.类的静态数据成员 6.类的静态函数成员 7.类的友元 8.常数据成员 9.多文件结构 10.编译预处理 曾老师布置的作业太难了，昨天和刘兄搞到十一点还没搞好。...
2024/4/10 16:43:51 - python lambda解析
lambda是一个匿名函数，传入参数，然后输出结果。 return sum(map(lambda x : x in J , S))#S是储存x的数组 # lambda匿名函数 f lambda a,b,c:abcprint f(1,2,3) # 返回结果为6...
2024/4/7 23:54:04 - JSP中实现数据库的增删改查的操作
1、建立数据库 2、 新建工程 选择Java Enterprise 配置tomcat 规范工程名和路径 工程路径 创建lib文件夹，放入数据库驱动jar包 添加为库文件 配置项目 3、添加代码 创建包 规范包的名字 创建Java Bean 创建UserBean类，类名命名要规范 添加成员变量 priv…...
2024/4/16 19:43:12 - 解决opencv代码补全问题
opencv中代码无补全提示1.问题描述：在pycharm中opencv函数的补全很方便，ctr左击可以查看源代码，但是opencv的补全经常异常，这里提供一种实测有效的解决方法2.环境windows10，opencv4.4，pycharm，a…...
2024/4/10 23:17:19 - CF 1092E Minimal Diameter Forest 题解
Solution 1 首先，如果我们已经把这棵可爱的森林连成了一棵更加可爱的树，那么新树的直径是多少呢？ 类比CF804D（有我题解），可以得到直径来自下面两种情况之一： ①老树中的直径(即在初始的森林形…...
2024/4/8 0:04:00 - Unity Timeline设置时间轴长度
...
2024/4/23 2:40:07 - springboot - 利用@PostConstruct对自定义Bean进行初始化
开发博客系统的时候有一个需求，就是希望系统启动时，自动将指定文件夹中的md文件写入到数据库，这样我每更新一篇文章只需将文章拷贝入那个文件夹即可。（当然也可以开发界面上传的方式，但我不想搞得那么复杂，…...
2024/4/24 9:55:20 - 电商管理后台 API 接口文档
1. 电商管理后台 API 接口文档 1.1. API V1 接口说明 接口基准地址：http://127.0.0.1:8888/api/private/v1/服务端已开启 CORS 跨域支持API V1 认证统一使用 Token 认证需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌使用 HTT…...
2024/4/9 22:44:17 - 80篇数据库大数据精华内容
八天小长假，一个难得的查漏补缺、学习充电的好时机！平时因为忙碌而错过的技术干货，不如重拾一次酣畅淋漓；那些读过后为之鼓掌的优质好文也不妨温故而知新~为了方便大家查阅，dbaplus社群对近一年发布过的干货好文进行汇…...
2024/4/26 10:27:56 - 《Deep Image Matting》论文笔记
参考代码：Deep Matting 1. 概述 导读：这篇文章是在深度学习基础上进行抠图，之前也有基于此的工作，但是那些方法存在前景背景区域颜色接近或是有复杂纹理的时候表现欠佳。文章对于这些方法效果差的原因进行分析并归纳为࿱…...
2024/4/15 5:58:30 - 算法与数据结构打怪升级路线
参考： 哪本《数据结构与算法》最好？ - 一枚程序媛酱的回答 - 知乎 https://www.zhihu.com/question/21628833/answer/688749786...
2024/4/21 14:31:23 - Effective C++读书笔记（五）——设计与声明
1.让接口容易被正确使用，不易被误用 class Date { public:Date(int month, int day, int year)... };上述接口可能会引起客户调用的错误,即填写顺序出错： Date d(2, 30, 2020)； Date d(30, 2, 2020)；进一步，可以将mon…...
2024/4/15 18:39:59 - 网络编程之--tcp协议_udp协议_DNS域名解析系统_上网通信流程
TCP 协议 可靠传输 , TCP数据包没有长度限制 , 理论上可以无限长 , 但是为了保证网络的效率 , 通常TCP数据包的长度不会超过IP数据包的长度 , 以确保单个TCP数据包不必再分割 端口范围: 0 - 65535 , 0 - 1023 为系统占用端口 建立链接三次握手 断开链接四次挥手 网络…...
2024/4/17 5:15:32 - 【Python小技巧】获取音频文件时长
import librosa #pip install librosa file_url "media/xx/cj.m4a" #音频文件路径 time librosa.get_duration(filenamefile_url) windows下报错： Error opening media/xx/cj.mp3: File…...
2024/4/8 1:54:55
最新文章
- 就业班 第三阶段（nginx） 2401--4.22 day1 nginx1 http+nginx初识+配置+虚拟主机
一、HTTP 介绍 HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。 HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件…...
2024/4/26 15:33:03 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言，在此感激不尽。 权重和梯度的更新公式如下： w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - vue3项目运行正常但vscode红色波浪线报错
以下解决办法如不生效，可尝试 重启 vscode 一、Vetur插件检测问题 vetur 是一个 vscode 插件，用于为 .vue 单文件组件提供代码高亮以及语法支持。但 vue 以及 vetur 对于 ts 的支持，并不友好。 1、原因 如下图：鼠标放到红色波浪…...
2024/4/19 21:42:15 - Python语法总结：not（常出现错误）
0、not是什么 在python中not是逻辑判断词，用于布尔型True和False之前 a not Ture # a False b not False # b True1、not的用法 （1）判断语句 if not a:# 如果a是False，执行的语句（2）判断元素是否在…...
2024/4/26 2:51:31 - 416. 分割等和子集问题（动态规划）
题目 题解 class Solution:def canPartition(self, nums: List[int]) -> bool:# badcaseif not nums:return True# 不能被2整除if sum(nums) % 2 ! 0:return False# 状态定义：dp[i][j]表示当背包容量为j，用前i个物品是否正好可以将背包填满ÿ…...
2024/4/26 1:36:40 - 【Java】ExcelWriter自适应宽度工具类（支持中文）
工具类 import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellType; import org.apache.poi.ss.usermodel.Row; import org.apache.poi.ss.usermodel.Sheet;/*** Excel工具类** author xiaoming* date 2023/11/17 10:40*/ public class ExcelUti…...
2024/4/25 21:14:51 - Spring cloud负载均衡@LoadBalanced LoadBalancerClient
LoadBalance vs Ribbon 由于Spring cloud2020之后移除了Ribbon，直接使用Spring Cloud LoadBalancer作为客户端负载均衡组件，我们讨论Spring负载均衡以Spring Cloud2020之后版本为主，学习Spring Cloud LoadBalance，暂不讨论Ribbon…...
2024/4/26 8:22:40 - TSINGSEE青犀AI智能分析+视频监控工业园区周界安全防范方案
一、背景需求分析 在工业产业园、化工园或生产制造园区中，周界防范意义重大，对园区的安全起到重要的作用。常规的安防方式是采用人员巡查，人力投入成本大而且效率低。周界一旦被破坏或入侵，会影响园区人员和资产安全，…...
2024/4/26 11:10:01 - VB.net WebBrowser网页元素抓取分析方法
在用WebBrowser编程实现网页操作自动化时，常要分析网页Html，例如网页在加载数据时，常会显示“系统处理中，请稍候..”，我们需要在数据加载完成后才能继续下一步操作，如何抓取这个信息的网页html元素变化&…...
2024/4/25 16:50:01 - 【Objective-C】Objective-C汇总
方法定义 参考：https://www.yiibai.com/objective_c/objective_c_functions.html Objective-C编程语言中方法定义的一般形式如下 - (return_type) method_name:( argumentType1 )argumentName1 joiningArgument2:( argumentType2 )argumentName2 ... joiningArgu…...
2024/4/25 13:02:58 - 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】
👨💻博客主页：花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】🌏题目描述🌏输入格…...
2024/4/26 0:25:04 - 【ES6.0】- 扩展运算符（...）
【ES6.0】- 扩展运算符... 文章目录 【ES6.0】- 扩展运算符...一、概述二、拷贝数组对象三、合并操作四、参数传递五、数组去重六、字符串转字符数组七、NodeList转数组八、解构变量九、打印日志十、总结 一、概述 **扩展运算符(...)**允许一个表达式在期望多个参数࿰…...
2024/4/26 6:06:14 - 摩根看好的前智能硬件头部品牌双11交易数据极度异常！——是模式创新还是饮鸩止渴？
文 | 螳螂观察 作者 | 李燃 双11狂欢已落下帷幕，各大品牌纷纷晒出优异的成绩单，摩根士丹利投资的智能硬件头部品牌凯迪仕也不例外。然而有爆料称，在自媒体平台发布霸榜各大榜单喜讯的凯迪仕智能锁，多个平台数据都表现出极度异常…...
2024/4/25 17:43:17 - Go语言常用命令详解(二)
文章目录 前言常用命令go bug示例参数说明 go doc示例参数说明 go env示例 go fix示例 go fmt示例 go generate示例 总结写在最后 前言 接着上一篇继续介绍Go语言的常用命令 常用命令 以下是一些常用的Go命令，这些命令可以帮助您在Go开发中进行编译、测试、运行和…...
2024/4/25 17:43:00 - 用欧拉路径判断图同构推出reverse合法性：1116T4
http://cplusoj.com/d/senior/p/SS231116D 假设我们要把 a a a 变成 b b b，我们在 a i a_i ai 和 a i 1 a_{i1} ai1 之间连边， b b b 同理，则 a a a 能变成 b b b 的充要条件是两图 A , B A,B A,B 同构。 必要性显然࿰…...
2024/4/25 13:00:31 - 【NGINX--1】基础知识
1、在 Debian/Ubuntu 上安装 NGINX 在 Debian 或 Ubuntu 机器上安装 NGINX 开源版。 更新已配置源的软件包信息，并安装一些有助于配置官方 NGINX 软件包仓库的软件包： apt-get update apt install -y curl gnupg2 ca-certificates lsb-release debian-…...
2024/4/25 17:42:40 - Hive默认分割符、存储格式与数据压缩
目录 1、Hive默认分割符2、Hive存储格式3、Hive数据压缩 1、Hive默认分割符 Hive创建表时指定的行受限（ROW FORMAT）配置标准HQL为： ... ROW FORMAT DELIMITED FIELDS TERMINATED BY \u0001 COLLECTION ITEMS TERMINATED BY , MAP KEYS TERMI…...
2024/4/26 9:43:47 - 【论文阅读】MAG：一种用于航天器遥测数据中有效异常检测的新方法
文章目录 摘要1 引言2 问题描述3 拟议框架4 所提出方法的细节A.数据预处理B.变量相关分析C.MAG模型D.异常分数 5 实验A.数据集和性能指标B.实验设置与平台C.结果和比较 6 结论 摘要 异常检测是保证航天器稳定性的关键。在航天器运行过程中，传感器和控制器产生大量周…...
2024/4/26 9:43:47 - --max-old-space-size=8192报错
vue项目运行时，如果经常运行慢，崩溃停止服务，报如下错误 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 因为在 Node 中，通过JavaScript使用内存时只能使用部分内存（64位系统&…...
2024/4/25 13:40:45 - 基于深度学习的恶意软件检测
恶意软件是指恶意软件犯罪者用来感染个人计算机或整个组织的网络的软件。 它利用目标系统漏洞，例如可以被劫持的合法软件（例如浏览器或 Web 应用程序插件）中的错误。 恶意软件渗透可能会造成灾难性的后果，包括数据被盗、勒索或网…...
2024/4/25 13:01:30 - JS原型对象prototype
让我简单的为大家介绍一下原型对象prototype吧！ 使用原型实现方法共享 1.构造函数通过原型分配的函数是所有对象所 共享的。 2.JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，所以我们也称为原型对象…...
2024/4/25 15:31:26 - C++中只能有一个实例的单例类
C中只能有一个实例的单例类 前面讨论的 President 类很不错，但存在一个缺陷：无法禁止通过实例化多个对象来创建多名总统： President One, Two, Three; 由于复制构造函数是私有的，其中每个对象都是不可复制的，但您的目…...
2024/4/25 17:31:15 - python django 小程序图书借阅源码
开发工具： PyCharm，mysql5.7，微信开发者工具 技术说明： python django html 小程序 功能介绍： 用户端： 登录注册（含授权登录） 首页显示搜索图书，轮播图࿰…...
2024/4/25 13:22:53 - 电子学会C/C++编程等级考试2022年03月（一级）真题解析
C/C++等级考试（1~8级）全部真题・点这里 第1题：双精度浮点数的输入输出 输入一个双精度浮点数，保留8位小数，输出这个浮点数。 时间限制：1000 内存限制：65536输入 只有一行，一个双精度浮点数。输出 一行，保留8位小数的浮点数。样例输入 3.1415926535798932样例输出 3.1…...
2024/4/26 9:43:45 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示，配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下：1、长按电脑电源键直至关机，然后再按一次电源健重启电脑，按F8健进入安全模式2、安全模式下进入Windows系统桌面后，按住“winR”打开运行窗口，输入“services.msc”打开服务设置3、在服务界面，选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE，请勿更改元素数目。
%读入6幅图像（每一幅图像的大小是564*564） f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面，在等待界面中我们需要等待操作结束才能关机，虽然这比较麻烦，但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows，请勿关闭计算机”的提示，要过很久才能进入系统，有的用户甚至几个小时也无法进入，下面就教大家这个问题的解决方法。第一种方法：我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题，电脑时发现开机屏幕显现“正在配置Windows Update，请勿关机”(如下图所示)，而且还需求等大约5分钟才干进入系统。这是怎样回事呢？一切都是正常操作的，为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示，没过几秒后电脑自动重启，每次开机都这样无法进入系统，此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一：开机按下F8，在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况，就是电脑提示正在准备windows请勿关闭计算机，碰到这样的问题该怎么解决呢，现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法：1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后，每次关机的时候桌面上都会显示一个“配置Windows Update的界面，提示请勿关闭计算机”，每次停留好几分钟才能正常关机，导致什么情况引起的呢？出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着，别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚，只能是考虑备份数据后重装系统了。解决来方案一：管理员运行cmd：net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办？
原标题：电脑提示“配置Windows Update请勿关闭计算机”怎么办？win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢？一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ，然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ，然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间：2020-04-20 22:24:19 浏览次数：729次 区域： 南阳 > 卧龙 列举网提醒您：为保障您的权益，请不要提前支付任何费用！ 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于：钉钉，外勤365，红圈通，企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”，长时间没反应，无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了，具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面，长时间没反应，无法进入系统。这个问题原来帮其他同学也解决过，网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办？...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法，并在最后教给你1种保护系统安全的好方法，一起来看看！电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中，添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败，正在还原更改，请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候，开启电脑发现电脑显示：配置windows更新失败，正在还原更改，请勿关闭计算机。。.这要怎么办呢？下面小编就带着大家一起看看吧！如果能够正常进入系统，建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机，电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机，电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题，就是我们的win7系统在关机的时候，总是喜欢显示“准备配置windows，请勿关机”这样的一个页面，没有什么大碍，但是如果一直等着的话就要两个小时甚至更久都关不了机，非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时，一般是您正对windows进行升级，但是这个要是长时间没有反应，我们不能再傻等下去了。可能是电脑出了别的问题了，来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败，还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况，当我们打开电脑之后，发现一直停留在一个界面：“配置Windows Update失败，还原更改请勿关闭计算机”，等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57