jQuery

1.jQuery概述

1.jQuery介绍

jQuery 是一个 JavaScript 库

框架：Mybatis （jar包） 大工具

插件：PageHelper （jar包） 小工具

库：js库：jquery (js文件) 小工具 （对于原生语言的升级，扩展）

所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程

2.jQuery快速入门 

1.编写 HTML 文档

2.引入 jQuery 文件

3.使用 jQuery 获取元素

4.使用浏览器测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title>
</head>
<body><div id="div">我是div</div>
</body><script src="jquery-3.7.1.js"></script><script>//JS方式，通过id属性值来获取divlet jsDiv = document.getElementById("div");//alert(jsDiv);//alert(jsDiv.innerHTML);//jQuery方式，通过id属性来获取div元素let jqDiv = $("#div");alert(jqDiv);alert(jqDiv.html());</script>
</html>

jQuery 是一个 JavaScript 库。

就是定义好的一个 JS 文件，内部封装了很多功能，可以大大简化我们的 JS 操作步骤。

要想使用，必须要引入该文件。

jQuery 的核心语法 $();

下载地址：http://jquery.com/download/​​​​​​

2.jQuery基本语法

1.JS对象和JQuery对象转换

jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换

JS的DOM对象转换成JQuery对象

$(JS的DOM对象)

jQuery对象转换成JS对象

jQuery对象[索引]

jQuery对象.get(索引)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对象转换</title>
</head>
<body><div id="div">我是div</div>
</body><script src="jquery-3.7.1.js"></script><script>// JS方式，通过id属性值获取div元素let jsDiv = document.getElementById("div");alert(jsDiv.innerHTML);//alert(jsDiv.html());  JS对象无法使用jQuery里面的功能// 将 JS 对象转换为jQuery对象let jq = $(jsDiv);alert(jq.html());// jQuery方式，通过id属性值获取div元素let jqDiv = $("#div");alert(jqDiv.html());// alert(jqDiv.innerHTML);   jQuery对象无法使用JS里面的功能// 将 jQuery对象转换为JS对象  ( 将获取到的js对象放入一个数组中，jq对象就是一个包含了js对象的数组)let js = jqDiv[0];alert(js.innerHTML);</script>
</html>

2.事件的基本使用

常用的事件

事件名说明
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onclick鼠标单击事件
ondblclick鼠标双击事件
onblur元素失去焦点
onfocus元素获得焦点
onchange用户改变域的内容

在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件的使用</title>
</head>
<body><input type="button" id="btn" value="点我"><br><input type="text" id="input">
</body>
<script src="jquery-3.7.1.js"></script>
<script>//单击事件$("#btn").click(function(){alert("点我干嘛?");});//获取焦点事件// $("#input").focus(function(){//     alert("你要输入数据啦...");// });//失去焦点事件$("#input").blur(function(){alert("你输入完成啦...");});
</script>
</html>

3.事件的绑定和解绑 

绑定事件

jQuery 对象.on(事件名称,执行的功能);

解绑事件

jQuery 对象.off(事件名称);

如果不指定事件名称，则会把该对象绑定的所有事件都解绑

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件的绑定和解绑</title>
</head>
<body><input type="button" id="btn1" value="点我"><input type="button" id="btn2" value="解绑">
</body><script src="jquery-3.7.1.js"></script><script>//给btn1按钮绑定单击事件$("#btn1").on("click",function(){alert("点我干嘛?");});//通过btn2解绑btn1的单击事件$("#btn2").on("click",function(){$("#btn1").off("click");});</script></html>

4.事件的切换

事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系

方式一：单独定义

$(元素).事件方法名1(要执行的功能);

$(元素).事件方法名2(要执行的功能);

//方式一 单独定义
$("#div").mouseover(function(){//背景色：红色//$("#div").css("background","red");$(this).css("background","red");});
$("#div").mouseout(function(){//背景色：蓝色//$("#div").css("background","blue");$(this).css("background","blue");
});

方式二：链式定义

$(元素).事件方法名1(要执行的功能).事件方法名2(要执行的功能);

//方式二 链式定义
$("#div").mouseover(function(){$(this).css("background","red");
}).mouseout(function(){$(this).css("background","blue");
});

5.遍历操作

方式一：传统方式

for(let i = 0; i < 容器对象长度; i++){执行功能;
}

方式二：对象.each()方法

容器对象.each(function(index,ele){执行功能;
});

方式三：$.each()方法

$.each(容器对象,function(index,ele){执行功能;
});

方式四：for of语句

for(ele of 容器对象){执行功能;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>遍历</title>
</head>
<body><input type="button" id="btn" value="遍历列表项"><ul><li>周杰伦</li><li>许嵩</li><li>薛之谦</li></ul>
</body>
<script src="jquery-3.7.1.js"></script>
<script>//方式一：传统方式$("#btn").click(function(){let lis = $("li");//传入的是一个标签名，就会获取所有的标签对象，将标签对象放入jQuery对象for(let i = 0 ; i < lis.length; i++) {alert(i + ":" + lis[i].innerHTML);}});//方式二：对象.each()方法$("#btn").click(function(){let lis = $("li");lis.each(function(index,ele){// 匿名函数作为参数传递给each方法，就是由each方法内部来调用alert(index + ":" + ele.innerHTML);// each方法第一次调用匿名函数时，0 , lis[0]// each方法第二次调用匿名函数时，1 , lis[1]});});//方式三：$.each()方法$("#btn").click(function(){let lis = $("li");$.each(lis,function(index,ele){alert(index + ":" + ele.innerHTML);});});//方式四：for of 语句遍历$("#btn").click(function(){let lis = $("li");for(ele of lis){alert(ele.innerHTML);}});</script>
</html>

3.jQuery选择器 

 1.基本选择器

选择器：类似于 CSS 的选择器，可以帮助我们获取元素。

例如：id 选择器、类选择器、元素选择器、属性选择器等等

jQuery 中选择器的语法：$();

选择器语法作用
元素选择器$(“元素的名称”);根据元素名称获取元素对象们
id选择器$("#id的属性值");根据id属性值获取元素对象
类选择器$(".class的属性值");根据class属性值获取元素对象们
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基本选择器</title>
</head>
<body><div id="div1">div1</div><div class="cls">div2</div><div class="cls">div3</div>
</body>
<script src="jquery-3.7.1.js"></script>
<script>//1.元素选择器   $("元素的名称")let divs = $("div");//alert(divs.length);//2.id选择器    $("#id的属性值")let div1 = $("#div1");//alert(div1);//3.类选择器     $(".class的属性值")let cls = $(".cls");alert(cls.length);
</script>
</html>

2.层级选择器 

选择器语法作用
后代选择器$(“A B”);A下的所有B(包括B的子级)
子选择器$(“A > B”);A下的所有B(不包括B的子级)
兄弟选择器$(“A + B”);A相邻的下一个B
兄弟选择器$(“A～B”);A相邻的所有B

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>层级选择器</title>
</head>
<body><div><span>s1<span>s1-1</span><span>s1-2</span></span><span>s2</span></div><div></div><p>p1</p><p>p2</p>
</body>
<script src="jquery-3.7.1.js"></script>
<script>// 1. 后代选择器 $("A B");      A下的所有B(包括B的子级)let spans1 = $("div span");//alert(spans1.length);// 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级)let spans2 = $("div > span");//alert(spans2.length);// 3. 兄弟选择器 $("A + B");    A相邻的下一个Blet ps1 = $("div + p");//alert(ps1.length);// 4. 兄弟选择器 $("A ~ B");    A相邻的所有Blet ps2 = $("div ~ p");alert(ps2.length); 
</script>
</html>

3.属性选择器 

选择器语法作用
属性名选择器$(“A[属性名]”);根据指定属性名获取元素对象们
属性值选择器$(“A[属性名=属性值]”);根据指定属性名和属性值获取元素对象们
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title>
</head>
<body><input type="text"><input type="password"><input type="password">
</body>
<script src="jquery-3.7.1.js"></script>
<script>//1.属性名选择器   $("元素[属性名]")let in1 = $("input[type]");//alert(in1.length);//2.属性值选择器   $("元素[属性名=属性值]")let in2 = $("input[type='password']");alert(in2.length);
</script>
</html>

4.过滤器选择器 

选择器语法作用
首元素选择器$(“A:first”);获得选择的元素中的第一个元素
尾元素选择器$(“A:last”);获得选择的元素中的最后一个元素
非元素选择器$(“A:not(B)”);不包括指定内容的元素
偶数选择器$(“A:even”);偶数，从0开始计数
奇数选择器$(“A:odd”);奇数，从0开始计数
等于索引选择器$(“A:eq(index)”);指定索引元素
大于索引选择器$(“A:gt(index)”);大于指定索引元素
小于索引选择器$(“A:lt(index)”);小于指定索引元素

语法： 基本选择器/层级选择器 : 过滤选择器

基本选择器 不包含id选择器

过滤选择器，是从多个结果中选择一个或多个

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>过滤器选择器</title>
</head>
<body><div>div1</div><div id="div2">div2</div><div>div3</div><div>div4</div>
</body>
<script src="jquery-3.7.1.js"></script>
<script>// 1.首元素选择器	$("A:first");let div1 = $("div:first");//alert(div1.html());// 2.尾元素选择器	$("A:last");let div4 = $("div:last");//alert(div4.html());// 3.非元素选择器	$("A:not(B)");let divs1 = $("div:not(#div2)");//alert(divs1.length);// 4.偶数选择器	    $("A:even");let divs2 = $("div:even");//alert(divs2.length);//alert(divs2[0].innerHTML);//alert(divs2[1].innerHTML);// 5.奇数选择器	    $("A:odd");let divs3 = $("div:odd");//alert(divs3.length);//alert(divs3[0].innerHTML);//alert(divs3[1].innerHTML);// 6.等于索引选择器	 $("A:eq(index)");let div3 = $("div:eq(2)");//alert(div3.html());// 7.大于索引选择器	 $("A:gt(index)");let divs4 = $("div:gt(1)");//alert(divs4.length);//alert(divs4[0].innerHTML);//alert(divs4[1].innerHTML);// 8.小于索引选择器	 $("A:lt(index)");let divs5 = $("div:lt(2)");alert(divs5.length);alert(divs5[0].innerHTML);alert(divs5[1].innerHTML); 
</script>
</html>

5.表单属性选择器

选择器语法作用
可用元素选择器$(“A:enabled”);获得可用元素
不可用元素选择器$(“A:disabled”);获得不可用元素
单选/复选框被选中的元素$(“A:checked”);获得单选/复选框选中的元素
下拉框被选中的元素$(“A:selected”);获得下拉框选中的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单属性选择器</title>
</head>
<body><input type="text" disabled><input type="text" ><input type="radio" name="gender" value="men" checked>男<input type="radio" name="gender" value="women">女<input type="checkbox" name="hobby" value="study" checked>学习<input type="checkbox" name="hobby" value="sleep" checked>睡觉<select><option>---请选择---</option><option selected>本科</option><option>专科</option></select>
</body>
<script src="jquery-3.7.1.js"></script>
<script>// 1.可用元素选择器  $("A:enabled");let ins1 = $("input:enabled");//alert(ins1.length);// 2.不可用元素选择器  $("A:disabled");let ins2 = $("input:disabled");//alert(ins2.length);// 3.单选/复选框被选中的元素  $("A:checked");let ins3 = $("input:checked");//alert(ins3.length);//alert(ins3[0].value);//alert(ins3[1].value);//alert(ins3[2].value);// 4.下拉框被选中的元素   $("A:selected");let select = $("select option:selected");alert(select.html());  
</script>
</html>

4.jQuery  DOM 

1.操作文本

常用方法

方法作用
html()获取标签的文本
html(value)设置标签的文本内容，解析标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作文本</title>
</head>
<body><div id="div">我是div</div><input type="button" id="btn1" value="获取div的文本"><input type="button" id="btn2" value="设置div的文本">
</body>
<script src="jquery-3.7.1.js"></script>
<script>//1. html()   获取标签的文本内容$("#btn1").click(function(){//获取div标签的文本内容let value = $("#div").html();alert(value);});//2. html(value)   设置标签的文本内容，解析标签$("#btn2").click(function(){//设置div标签的文本内容//$("#div").html("我真的是div");$("#div").html("<b>我真的是div</b>");});
</script>
</html>

2.操作对象 

常用方法

方法作用
$(“元素”)创建指定元素
append(element)添加成最后一个子元素，由添加者对象调用
appendTo(element)添加成最后一个子元素，由被添加者对象调用
prepend(element)添加成第一个子元素，由添加者对象调用
prependTo(element)添加成第一个子元素，由被添加者对象调用
before(element)添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
after(element)添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
remove()删除指定元素(自己移除自己)
empty()清空指定元素的所有子元素

append，appendTo，prepend，prependTo是父子关系的操作（父亲添加儿子，或者是，儿子添加到父亲）

before，after是兄弟关系的操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作对象</title>
</head>
<body><div id="div"></div><input type="button" id="btn1" value="添加一个span到div"> <br><br><br><input type="button" id="btn2" value="将加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;<input type="button" id="btn3" value="将加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;<input type="button" id="btn4" value="将雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;<input type="button" id="btn5" value="将雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;<ul id="city"><li id="bj">北京</li><li id="sh">上海</li><li id="gz">广州</li><li id="sz">深圳</li></ul><ul id="desc"><li id="jy">加油</li><li id="xq">雄起</li></ul>  <br><br><br><input type="button" id="btn6" value="将雄起删除"> &nbsp;&nbsp;&nbsp;<input type="button" id="btn7" value="将描述列表全部删除"> &nbsp;&nbsp;&nbsp;
</body>
<script src="jquery-3.7.1.js"></script>
<script>// 按钮一：添加一个span到div$("#btn1").click(function(){let span = $("<span>span</span>");$("#div").append(span);});//按钮二：将加油添加到城市列表最下方$("#btn2").click(function(){//$("#city").append($("#jy"));$("#jy").appendTo($("#city"));});//按钮三：将加油添加到城市列表最上方$("#btn3").click(function(){//$("#city").prepend($("#jy"));$("#jy").prependTo($("#city"));});   //按钮四：将雄起添加到上海下方$("#btn4").click(function(){$("#sh").after($("#xq"));});//按钮五：将雄起添加到上海上方$("#btn5").click(function(){$("#sh").before($("#xq"));});//按钮六：将雄起删除$("#btn6").click(function(){$("#xq").remove();});//按钮七：将描述列表全部删除$("#btn7").click(function(){$("#desc").empty();});
</script>
</html>

3.操作样式 

常用方法

方法作用
css(name)根据样式名称获取css样式
css(name,value)设置CSS样式
addClass(value)给指定的对象添加样式类名
removeClass(value)给指定的对象删除样式类名
toggleClass(value)如果没有样式类名，则添加。如果有，则删除
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作样式</title><style>.cls1{background: pink;height: 30px;}</style>
</head>
<body><div style="border: 1px solid red;" id="div">我是div</div><input type="button" id="btn1" value="获取div的样式"> &nbsp;&nbsp;<input type="button" id="btn2" value="设置div的背景色为蓝色">&nbsp;&nbsp;<br><br><br><input type="button" id="btn3" value="给div设置cls1样式"> &nbsp;&nbsp;<input type="button" id="btn4" value="给div删除cls1样式"> &nbsp;&nbsp;<input type="button" id="btn5" value="给div设置或删除cls1样式"> &nbsp;&nbsp;
</body>
<script src="jquery-3.7.1.js"></script>
<script>// 1.css(name)   获取css样式$("#btn1").click(function(){alert($("#div").css("border"));});// 2.css(name,value)   设置CSS样式$("#btn2").click(function(){$("#div").css("background","blue");});// 3.addClass(value)   给指定的对象添加样式类名$("#btn3").click(function(){$("#div").addClass("cls1");});// 4.removeClass(value)  给指定的对象删除样式类名$("#btn4").click(function(){$("#div").removeClass("cls1");});// 5.toggleClass(value)  如果没有样式类名，则添加。如果有，则删除$("#btn5").click(function(){$("#div").toggleClass("cls1");}); 
</script>
</html>

4.操作属性 

常用方法

方法作用
attr(name,[value])获得/设置属性的值
prop(name,[value])获得/设置属性的值(checked，selected)

prop专门用于操作单选框，复选框，下拉列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作属性</title>
</head>
<body><input type="text" id="username"> <br><input type="button" id="btn1" value="获取输入框的id属性">  &nbsp;&nbsp;<input type="button" id="btn2" value="给输入框设置value属性"><br><br><input type="radio" id="gender1" name="gender">男<input type="radio" id="gender2" name="gender">女<br><input type="button" id="btn3" value="选中女"><br><br><select><option>---请选择---</option><option id="bk">本科</option><option id="zk">专科</option></select><br><input type="button" id="btn4" value="选中本科">
</body>
<script src="jquery-3.7.1.js"></script>
<script>// 1.attr(name,[value])   获得/设置属性的值//按钮一：获取输入框的id属性$("#btn1").click(function(){alert($("#username").attr("id"));});//按钮二：给输入框设置value属性$("#btn2").click(function(){$("#username").attr("value","hello...");});// 2.prop(name,[value])   获得/设置属性的值(checked，selected)//按钮三：选中女$("#btn3").click(function(){$("#gender2").prop("checked",true);});//按钮四：选中本科$("#btn4").click(function(){$("#bk").prop("selected",true);});
</script>
</html>

5.案例 随机图片

动态切换小图分析

1.准备一个数组

2.定义一个计数器

3.定义定时器对象

4.定义图片路径变量

5.为开始按钮绑定单击事件

6.设置按钮状态

7.设置定时器，循环显示图片

8.循环获取图片路径

9.将当前图片显示到小图片上

10.计数器自增

显示大图分析

1.为停止按钮绑定单击事件

2.取消定时器

3.设置按钮状态

4.将图片显示到大图片上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机图片</title>
</head>
<body><!--小图--><div style="background-color: red;border: dotted;height: 50px;width: 50px;"><img src="OIP-C.jpg" id="small" style="width: 50px; height: 50px;" ></div><!--大图--><div style="border: double;width: 400px; height: 400px; position: absolute; left: 500px;"><img src="" id="big" style="width: 400px; height: 400px; display: none;" ></div><!--开始和介绍按钮--><input id="startBtn" type="button" style="width: 150px; height: 150px; font-size: 20px;"value = "开始"><input id="stopBtn" type="button" style="width: 150px; height: 150px; font-size: 20px;"value = "停止">
</body>
<script src="jquery-3.7.1.js"></script>
<script>//1.准备一个数组let imgs = ["OIP-C.jpg","OIP-C (2).jpg","OIP-C (3).jpg","OIP-C (4).jpg"];//2.定义一个计数器变量let count = 0;//3.声明定时器对象let time = null;//4.声明图片路径变量let imgSrc = "";//5.为开始按钮绑定单击事件$("#startBtn").click(function(){//6.设置按钮状态//禁用开始按钮$("#startBtn").porp("disabled",true);//启用停止按钮$("#stopBtn").porp("disabled",false);//7.设置定时器，循环显示图片time = setInterval(function(){//8.循环获取图片路径let index = count % imgs.length; //0%10=0 1%10=1 2%10=2...9%10=9 10%10=0//9.将当前图片显示到小图片上imgSrc = imgs[index];$("#small").prop("src",imgSrc);//10.计数器自增count++;},10);});//11.为停止按钮绑定单击事件$("#stopBtn").click(function(){//12.取消定时器clearInterval(time);//13.设置按钮状态//启用开始按钮$("#startBtn").prop("disabled",false);//禁用停止按钮$("#stoptBtn").prop("disabled",true);//14.将图片显示到大图上$("#big").prop("src",imgSrc);$("#big").prop("style","width: 400px; height: 400px;");});
</script>
</html>

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

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

相关文章

Linux进阶-ipc共享内存

Linux进阶-ipc共享内存

目录 共享内存 shmget()&#xff1a;创建或获取共享内存 shmat()&#xff1a;映射 shmdt()&#xff1a;解除映射 shmctl()&#xff1a;获取或设置属性 sem.h文件 sem.c文件 shm.c文件 Makefile文件 执行过程 共享内存 共享内存&#xff1a;将内存进行共享&#xff0c…
阅读更多...
纯css+js自制下拉框

纯css+js自制下拉框

前提 因为html的select标签&#xff0c;下拉框自定义程度非常的低&#xff0c;为了贴合而项目ui显示&#xff0c;所以打算自制下拉框 代码 html <div class"pos-rel"><div id"select" class"select get-select"><span class&…
阅读更多...
小程序中如何使用自定义组件应用及搭建个人中心布局

小程序中如何使用自定义组件应用及搭建个人中心布局

一&#xff0c;自定义组件 从小程序基础库版本 1.6.3 开始&#xff0c;小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。 开发者可以将页面内的功能模块抽象成自定义组件&#xff0c;以便在不同的页面中重复使用&#xff1b;也可以将复杂的…
阅读更多...
02、MySQL-------主从复制

02、MySQL-------主从复制

目录 七、MySql主从复制启动主从复制&#xff1a;原理&#xff1a;实现&#xff1a;1、创建节点2、创建数据库3、主从配置1、主节点2、从节点 4、测试&#xff1a;5、问题&#xff1a;1、uuid修改2、service_id3、读写不同步方法1&#xff1a;方法2&#xff1a; 七、MySql主从复…
阅读更多...
pip install huggingface_hub时报错

pip install huggingface_hub时报错

pip install huggingface_hub时报错&#xff1a; 可以尝试&#xff1a;pip install --upgrade huggingface_hub 进行安装 方法参考了&#xff1a;https://blog.csdn.net/m0_72295867/article/details/132060750
阅读更多...
HTTP基础

HTTP基础

HTTP请求报文格式 HTTP 的请求报文分为三个部分 请求行&#xff08;Request Line&#xff09;、请求头&#xff08;Request Header&#xff09;和请求体&#xff08;Request Body&#xff09;。请求体是HTTP请求的核心&#xff0c;其中包含了需要上传服务器的数据。常见的请求…
阅读更多...
macOS查端口占用进程

macOS查端口占用进程

java开发人员&#xff0c;端口冲突的问题基本都遇到过吧&#xff01;以下的日志是否熟悉&#xff1a; *************************** APPLICATION FAILED TO START ***************************Description:The Tomcat connector configured to listen on port 8084 failed to …
阅读更多...
图论与网络优化

图论与网络优化

2.概念与计算 2.1 图的定义 图(graph) G G G 是一个有序的三元组&#xff0c;记作 G < V ( G ) , E ( G ) , ψ ( G ) > G<V(G),E(G),\psi (G)> G<V(G),E(G),ψ(G)>。 V ( G ) V(G) V(G) 是顶点集。 E ( G ) E(G) E(G) 是边集。 ψ ( G ) \psi (G) ψ(G…
阅读更多...
小程序技术在信创操作系统中的应用趋势：适配能力有哪些？

小程序技术在信创操作系统中的应用趋势：适配能力有哪些？

小程序技术在信创操作系统中的应用前景非常广阔&#xff0c;但也面临着一些挑战和问题。开发者需要积极应对这些挑战和问题&#xff0c;为信创操作系统的发展和推广做出贡献。同时&#xff0c;开发者也需要关注小程序技术在信创操作系统中的应用趋势&#xff0c;积极探索新的应…
阅读更多...
Python订单生成器+队列+异步提高性能和容错

Python订单生成器+队列+异步提高性能和容错

以下代码实现了一个订单生成器&#xff0c;使用 asyncio 和 aioredis 库实现了高并发地生成订单&#xff0c;并将新增订单异步更新到数据库。具体实现流程如下&#xff1a; 初始化 OrderGenerator 类。传入 Redis 服务器地址和并发数&#xff0c;在初始化函数中设置并发数和一…
阅读更多...
【Django 03】QuerySet 和 Instance应用

【Django 03】QuerySet 和 Instance应用

1. DRF QuerySet 和 Instance功能概述 1.1 QuerySet 从数据库中查询结果存放的集合称为 QuerySet。 Django ORM用到三个类&#xff1a;Manager、QuerySet、Model。每个Model都有一个默认的 manager实例&#xff0c;名为objects。Django的ORM通过Mode的objects属性提供各种数据…
阅读更多...
Java 常用类（包装类）

Java 常用类（包装类）

目录 八大Wrapper类包装类的分类 装箱和拆箱包装类和基本数据类型之间的转换常见面试题 包装类方法包装类型和String类型的相互转换包装类常用方法&#xff08;以Integer类和Character类为例&#xff09;Integer类和Character类的常用方法 Integer创建机制&#xff08;面试题&a…
阅读更多...
划词搜索IP插件

划词搜索IP插件

插件背景 浏览器插件可以让用户根据个人工作及日常需求来定制浏览器的功能和界面。当用户在网页上看到一些IP地址时&#xff0c;或许会好奇它们的来源和归属。传统的做法是&#xff0c;用户需要复制这个IP地址&#xff0c;然后跳转到埃文科技旗下的http://IPUU.net网站进行查询…
阅读更多...
基于Java的考研信息查询系统设计与实现(源码+lw+部署文档+讲解等)

基于Java的考研信息查询系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…
阅读更多...
Flink SQL 时区 -- 时间字符串转时间戳并转换时区

Flink SQL 时区 -- 时间字符串转时间戳并转换时区

文章目录 一、数据需求&#xff1a;二、探索路程1、UNIX_TIMESTAMP CONVERT_TZ2、UNIX_TIMESTAMP 三、解决方案TIMESTAMPADD TO_TIMESTAMP 一、数据需求&#xff1a; 将时间字符串格式化&#xff0c;转变成时间戳&#xff0c;再加8小时后写入clickhouse 2023-10-17T03:00:4…
阅读更多...
速卖通测评补单的条件和步骤

速卖通测评补单的条件和步骤

速卖通测评补单对于卖家来说是一种低成本、高回报的推广营销方式&#xff0c;可以提高商品的流量、转化率、关键词质量分和链接权重。但是如果处理不当&#xff0c;可能会对店铺产生负面影响。下面是实现自养号给自己店铺测评的条件和步骤&#xff1a; 1. 稳定的测评环境系统 …
阅读更多...
使用 OpenSSL 扩展来实现公钥和私钥加密

使用 OpenSSL 扩展来实现公钥和私钥加密

首先&#xff0c;你需要生成一对公钥和私钥。可以使用 OpenSSL 工具来生成&#xff1a; 1、生成私钥 openssl genpkey -algorithm RSA -out private_key.pem 2、从私钥生成公钥&#xff1a; openssl rsa -pubout -in private_key.pem -out public_key.pem现在你有了一个私钥…
阅读更多...
Docker是一个流行的容器化平台，用于构建、部署和运行应用程序。

Docker是一个流行的容器化平台，用于构建、部署和运行应用程序。

文章目录 Web应用程序数据库服务器微服务应用开发环境持续集成和持续部署 (CI/CD)应用程序依赖项云原生应用程序研究和教育 &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&#xff1a;…
阅读更多...
react配置 axios

react配置 axios

配置步骤&#xff08;基本配置&#xff09;&#xff1a; 1.安装 axios cnpm install axios --save2.src/utils 新建一个 request.js文件(没有utils就新建一个目录然后再建一个request.js) 3.request代码如下&#xff1a; 这个是最简单的配置了&#xff0c;你可以根据自己的需…
阅读更多...
链表的概念+MySingleList的实现

链表的概念+MySingleList的实现

文章目录 链表一、 链表的概念1.概念2. 结构 二、MySingleList的实现1 .定义内部类2 .创建链表3. 遍历链表并打印4.查找单链表中是否包含关键字key5.得到链表的长度6.头插法7. 尾插法8.任意位置插入8.删除结点清空 链表 顺序存储&#xff1a;顺序表/ArrayList 优点&#xff1…
阅读更多...
最新文章

Copyright @ 2022~2023