前端基础4——jQuery

文章目录

  • 一、基本了解
    • 1.1 导入jQuery库
    • 1.2 基本语法
    • 1.3 选择器
  • 二、操作HTML
    • 2.1 隐藏和显示元素
    • 2.2 获取与设置内容
    • 2.3 获取、设置和删除属性
    • 2.4 添加元素
    • 2.5 删除元素
    • 2.6 设置CSS样式
  • 三、jQuery Ajax
    • 3.1 基本语法
    • 3.2 回调函数
    • 3.3 常用HTTP方法
    • 3.4 案例一
      • 3.4.1 准备工作
      • 3.4.2 准备一个api接口地址
      • 3.4.3 定义Ajax执行逻辑
    • 3.5 案例二：提交表单
    • 3.6 案例三：数据表格

一、基本了解

概念：

  • jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程，例如JS原生代码几十行实现的功能，jQuery可能一两行就可以实现，因此得以广泛应用，官方网站。
  • 使用jQuery可以简化代码编写，解决浏览器的兼容性。

发行版本：

  • 1.x：常用版本，运维人员已够使用。
  • 2.x，3.x：除非特殊要求，一般用的少。

1.1 导入jQuery库

  • jQuery代码编写位置与JS位置一样，但需要先head标签里引入jquery.min.js文件。

下载地址：

  • https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js
  • https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js
  • https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js

1.下载到本地，引用本地文件方式。
在这里插入图片描述
2.直接指定jquery库文件网址。
在这里插入图片描述

1.2 基本语法

  • 语法格式：$(selector).action()
  • $：代表jQuery本身，只要是使用jQuery语法，就必须使用$符号。
  • (selector)：选择器，查找HTML元素。
  • action()：对元素的操作，和js使用方式大致相同。

1.3 选择器

名称语法示例
标签选择器element$(“h2”) 选取所有h2元素
类选择器.class$(“.title“) 选取所有class为title的元素
ID选择器#id$(“#title”) 选取id为title的元素
并集选择器selector1,selector2,…$(“div,p,.title”) 选取所有div、p和拥有class为title的元素
属性选择器$(“input[name=‘username’]”) 选取input标签名为username的元素。
$(“[href=‘#’]”) 选取href值等于“#”的元素

二、操作HTML

2.1 隐藏和显示元素

  • hide() ：隐藏某个元素。
  • show() ：显示某个元素。
  • toggle() ：hide()和show()方法之间切换。

1.设置三个按钮，点击”隐藏“按钮，则隐藏标签内容；点击"显示"按钮，则显示标签内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p id="demo">我的名字是：卿君</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<button id="toggle" type="button">切换</button><script type="text/javascript">$("#hide").click(function () {$("p").hide();});$("#show").click(function () {$("p").show();});$("#toggle").click(function () {$("p").toggle();})
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

2.2 获取与设置内容

  • text()：设置或返回所选元素的文本内容。
  • html()：设置或返回所选元素的HTML内容。
  • val()：设置或返回表单字段的值。

1.对比文本内容和html内容区别。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body><p id="txt">演讲主题：<b>正文</b>。
</p>
<button type="button" id="1">显示文本</button>
<button type="button" id="2">显示HTML</button>
<p id="3"></p><script type="text/javascript">$("#1").click(function () {x = $("#txt").text();   //打印id=txt标签的文本内容。$("#3").text(x);   //将获取的内容传入id=3的标签。$("#3").text(x).css("color","red") //不会解析b标签});$("#2").click(function () {x = $("#txt").html(); //获取html内容。$("#3").html(x).css("color","blue") //会解析b标签，.html()设置})
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

2.设置返回表单字段的值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<h1>欢迎访问运维管理系统</h1>
用户名：<input type="text" id="uname" name="username"><br>
密码：<input type="password" id="pwd" name="password"><br>
<button type="button" id="btn">显示输入内容</button>
<p id="demo"></p>
<script type="text/javascript">$("#btn").click(function () {a = $("#uname").val();b = $("#pwd").val();$("#demo").text(a + ',' + b).css("color","red")})
</script>
</body>
</html>

在这里插入图片描述

2.3 获取、设置和删除属性

  • attr()：设置或返回所选元素的属性值。
  • removeAttr()：删除属性值。

1.获取元素属性值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<a href="http://www.baidu.com" id="a1">百度一下</a><br>
<button type="button" id="btn">查看CSS属性值</button>
<p id="demo"></p>
<script type="text/javascript">$("#btn").click(function () {x = $("#a1").attr("href"); //获取属性值$("#demo").text(x) //将属性值作为内容设置元素})
</script>
</body>
</html>

在这里插入图片描述
2.设置超链接，从第一个网址跳转到第二个网址。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<a href="http://www.baidu.com" id="a1">百度一下</a><br>
<button type="button" id="btn">查看CSS属性值</button>
<p id="demo"></p>
<script type="text/javascript">$("#btn").click(function () {x = $("#a1").attr("href","http://www.redis.cn/"); //从百度跳转到redis官网。})
</script>
</body>
</html>

3.删除属性值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<a href="http://www.baidu.com" id="a1">百度一下</a><br>
<button type="button" id="btn">删除CSS属性值</button>
<p id="demo"></p>
<script type="text/javascript">$("#btn").click(function () {x = $("#a1").removeAttr("href");   //删除href属性。})
</script>
</body>
</html>

在这里插入图片描述

2.4 添加元素

  • append() 在被选中元素的结尾插入内容。
  • prepend() 在被选中元素的开头插入内容。
  • after() 在被选中元素之后插入内容。
  • before() 在被选中元素之前插入内容。

1.示例代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="main"><p>我爱中华</p><p>大好河山</p><p>华夏九州</p>
</div>
<button type="button" id="wenben1">追加文本</button>
<button type="button" id="wenben2">开头新增文本</button>
<button type="button" id="wenben3">追加段落</button>
<script type="text/javascript">$("#wenben1").click(function () {$("#main").append("追加的文本内容");})$("#wenben2").click(function () {$("#main").prepend("新增的文本内容");})$("#wenben3").click(function () {$("#main").append("<p>追加的段落</p>");})
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

2.5 删除元素

  • remove()：删除被选元素及子元素。
  • empty()：清空被选元素（删除下面所有子元素）。

1.删除div标签内容，包括其下所有的标签内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="main"><p>我爱中华</p><p>大好河山</p><p>华夏九州</p>
</div><button type="button" id="wenben1">追加文本</button>
<button type="button" id="wenben2">开头新增文本</button>
<button type="button" id="wenben3">追加段落</button>
<button type="button" id="wenben4">删除</button>
<script type="text/javascript">$("#wenben1").click(function () {$("#main").append("追加的文本内容");})$("#wenben2").click(function () {$("#main").prepend("新增的文本内容");})$("#wenben3").click(function () {$("#main").append("<p>追加的段落</p>");})$("#wenben4").click(function () {$("#main").remove();})
</script>
</body>
</html>

在这里插入图片描述
2.隐藏div标签内容。
在这里插入图片描述

2.6 设置CSS样式

  • css() 设置或返回样式属性（键值）。
  • addClass() 向被选元素添加一个或多个类样式。
  • removeClass() 从被选元素中删除一个或多个类样式。
  • toggleClass() 对被选元素进行添加/删除类样式的切换操作。

1.直接设置样式属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="main"><p>我爱中华</p><p>大好河山</p><p>华夏九州</p>
</div>
<button type="button" id="ziti">修改字体大小</button>    //点击按钮修改字体大小。
<button type="button" id="color">修改字体颜色和样式</button>    //点击按钮修改字体颜色和样式。<script type="text/javascript">$("#ziti").click(function () {$("#main").css("font-size","6px");})$("#color").click(function () {$("#main").css({"color":"blue","font-style":"italic"});})
</script>
</body>
</html>

在这里插入图片描述
2.引用类修改样式属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script><style>    //定义通用属性样式。.mm {color: orange;font-size: 10px;}</style>
</head>
<body>
<div id="main"><p>我爱中华</p><p>大好河山</p><p>华夏九州</p>
</div>
<button type="button" id="ziti">修改字体颜色和大小</button>  //点击按钮修改字体颜色。
<script type="text/javascript">$("#ziti").click(function () {$("#main").addClass("mm");})
</script>
</body>
</html>

在这里插入图片描述
3.删除属性样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQ测试</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script><style>    //定义通用属性样式。.mm {color: orange;font-size: 10px;}</style>
</head>
<body>
<div id="main" class="mm"><p>我爱中华</p><p>大好河山</p><p>华夏九州</p>
</div>
<button type="button" id="ziti">删除字体属性</button>   //点击按钮去除原本的字体颜色。
<script type="text/javascript">$("#ziti").click(function () {$("#main").removeClass("mm");})
</script>
</body>
</html>

在这里插入图片描述

三、jQuery Ajax

概念：

  • Ajax（Asynchronous JavaScript And XML，异步JavaScript和XML），AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。例如在不刷新页面的情况下查询数据、登录验证等。
  • 可以减少带宽、服务器负载；提高用户体验。
  • 使用场景：网页局部刷新

工作流程：

  1. 浏览器第一次访问网站一个页面时，Web服务器处理完后会以消息体方式返回浏览器，浏览器自动解析HTML内容。
  2. 当有局部有新数据需要更新时，Ajax会在背后去请求服务端拿到数据，再交给js处理html，最后渲染填充到那个div板块。此时就达到不需要刷新网页，就可以加载刷新局部数据的功能。
    在这里插入图片描述

3.1 基本语法

  • jQuery Ajax主要使用$.ajax()方法实现，用于向服务端发送HTTP请求。
  • 基本语法：$.ajax([settings]);
  • settings 是$.ajax ( )方法的参数列表，用于配置 Ajax 请求的键值对集合。
参数类型描述
urlstring发送请求的地址，默认为当前页地址
typestring请求方式，默认为GET
dataobejct、array、string发送到服务器的数据
dataTypestring预期服务器返回的数据类型，包括JSON、XML、text、HTML等
contentTypestring发送信息至服务器时内容编码类型。默认值: “application/xwww-form-urlencoded”。
timeoutnumber设置请求超时时间
globalBoolean表示是否触发全局Ajax事件，默认为true
headersobejct设置请求头信息
asyncBoolean默认true，所有请求均为异步请求。设置false发送同步请求

3.2 回调函数

  • 回调函数：参数引用一个函数，并将数据作为参数传递给该函数。
  • jqXHR：一个XMLHttpRequest对象
参数函数格式描述
beforeSendfunction(jqXHR,object)发送请求前调用的函数，例如添加自定义HTTP头
successfunction(data, String textStatus,jqXHR)请求成功后调用的函数，参数data：可选，由服务器返回的json数据
errorfunction(jqXHR,String textStatus,errorThrown)请求失败时调用的函数
completefunction(jqXHR, String textStatus)请求完成后（无论成功还是失败）调用的函数

3.3 常用HTTP方法

  • HTTP方法：向服务器提交数据，服务器根据对应方法操作。
HTTP方法数据处理说明
POST新增新增一个资源
GET获取取得一个资源
PUT更新更新一个资源
DELETE删除删除一个资源

3.4 案例一

3.4.1 准备工作

1.创建好一个Django基础项目。

###########################################################
1.项目根url路由规则。
from django.urls import path,re_path
from qingjun import views
urlpatterns = [re_path('^$',views.qingjun)
]
###########################################################
2.创建一个应用模块qingjun。
python manage.py startapp qingjun
###########################################################
3.qingjun.views.py视图文件。
from django.shortcuts import render
def qingjun(request):return render(request,'index.html')
###########################################################
4.定义index.html模板。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>平台首页</title><script src="/static/js/jquart.min.js"></script>
</head>
<body>
首页
</body>
</html>
###########################################################
5.导入jquery库文件，存放目录/static/js/jquart.min.js。
库文件下载地址：https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js
###########################################################
6.更改django默认静态文件地址，settings.py文件末尾追加以下内容。
STATICFILES_DIRS = (os.path.join(BASE_DIR,'static'),
)

在这里插入图片描述

3.4.2 准备一个api接口地址

1.添加代码。
在这里插入图片描述
2.查看效果。
在这里插入图片描述

3.4.3 定义Ajax执行逻辑

1.html文件中写js脚本，使用jQuery Ajax编写。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>平台首页</title><script src="/static/js/jquart.min.js"></script>
</head>
<body>
首页
<p id="a">这是Ajax请求的数据</p>
<script>$.ajax({type: "GET",url: "/user_api/",   //ajax请求地址。success: function (abc) {        //abc位置参数，是服务端返回的json数据。console.log(abc);$("#a").text(abc)   //将请求结果打印到p标签显示。},error: function () {alert("请求错误")}})
</script>
</body>
</html>

2.查看结果。
在这里插入图片描述

3.5 案例二：提交表单

  • 新增数据，Ajax向后端API发起数据。

1.项目url路由规则代码。

from django.urls import path,re_path
from qingjun import views
urlpatterns = [re_path('server/', views.server),
]

2.应用qingjun中的视图函数server代码。

from django.shortcuts import render
from django.http import JsonResponse
def server(request):if request.method == "GET":return render(request, 'server.html')elif request.method == "POST":print(request.POST)try:pass# 获取提交的字段，使用模型类入库。code = 0msg = "数据库添加成功！"except Exception:code = 1msg = "数据库添加失败！"result = {'code': code, 'msg': msg}return JsonResponse(result)

3.html模板内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>新增服务器</title><script src="/static/js/jquart.min.js"></script>
</head>
<body>
<h1>添加服务器信息</h1>##默认from表单是通过submit提交按钮来触发事件进行提交数据，默认提交到action的url地址，为空则是当前页面。
##若要使用from表单的submit提交按钮，需要在from标签中添加参数onsubmit="return false，可以去掉触发提交事件。
##Ajax提交from表单会重复提交url，添加#表示不触发from提交事件。
<form action="#" method="post">   //创建一个post提交表单。{% csrf_token %}主机名：<input type="text" name="hostname"><br>IP地址：<input type="text" name="ip"><br>操作系统：<input type="text" name="os"><br>
{#    <input type="submit" value="提交" id="btn"> onsubmit="return false" #}<button type="button" id="btn">提交</button>
</form><p id="notice"></p>
<script>$("#btn").click(function () {// 1.先获取表单中所有值。var hostname = $("input[name='hostname']").val();  //通过jquery的属性选择器获取表单输入的值。var ip = $("input[name='ip']").val();var os = $("input[name='os']").val();var csrf_token = $("input[name='csrfmiddlewaretoken']").val();// 2.将表单的值统一放到对象。data = {'hostname': hostname, 'ip': ip, 'os': os, 'csrfmiddlewaretoken':csrf_token};// 3.通过ajax将这个对象提交到服务端数据接口。$.ajax({type: "POST",url: "/server/",  //数据接口data: data,success: function (result) {if(result.code == 0) {$("#notice").text(result.msg).css("color", "blue")} else if(result.code == 1){$("#notice").text(result.msg).css("color", "red")}},error: function(){alert("服务器异常！")}})});
</script>
</body>
</html>

4.测试效果。
在这里插入图片描述

在这里插入图片描述

3.6 案例三：数据表格

  • 批量删除，Ajax向后端API发送要删除的数据ID。

1.项目url路由规则代码。

from django.urls import path,re_path
from qingjun import views
urlpatterns = [re_path('server_table/', views.server_table),
]

2.应用qingjun中的视图函数server代码。

from django.shortcuts import render
from django.http import JsonResponse
def server_table(request):if request.method == "GET":return render(request,'server_table.html')elif request.method == "POST":ids = request.POST.get("ids")try:# a = bfor i in ids.split(','):print(i)# 基于ID，使用模型类从数据库中删除code = 0msg = "删除数据成功！"except Exception:code = 1msg = "删除数据失败！"result = {'code': code, 'msg': msg}return JsonResponse(result)

3.html模板内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>服务器列表</title><script src="/static/js/jquart.min.js"></script>
</head>
<body>
{% csrf_token %}
<table border="1"><thead><tr><th><input type="checkbox" id="selectAll">全选</th><th>主机名</th><th>IP</th><th>操作系统</th></tr></thead><tbody id="tb"><tr><td><input type="checkbox" value="1" name="id"></td><td>test1</td><td>192.168.1.10</td><td>CentOS7</td></tr><tr><td><input type="checkbox" value="2" name="id"></td><td>test2</td><td>192.168.1.11</td><td>CentOS7</td></tr><tr><td><input type="checkbox" value="3" name="id"></td><td>test3</td><td>192.168.1.11</td><td>CentOS7</td></tr></tbody>
</table><button id="btn">批量删除（发送AJAX请求）</button>
<p id="notice"></p><script>$("#selectAll").click(function(){var all_num = $("#tb input").length; // 获取总行数var select_num = $("#tb input:checked").length; // 获取选择的数量if(all_num == select_num) { // 如果等于说明是全选，再点击的目的是取消全选$("#tb input").prop("checked",false)  // 设置未选中} else {$("#tb input").prop("checked",true)  // 设置未选中}// 获取当前选中的input值var check = $("#tb input:checked"); //获取是一个数组，check[0].value获取第一个input值// 将选中的input的id放到数组var ids = new Array()for(var i=0;i<check.length;i++) {// for(i in check){console.log(check[i].value);ids.push(check[i].value);{#ids[i] = check[i].value#}}ids = ids.join(',');console.log(ids);var csrf_token = $("input[name='csrfmiddlewaretoken']").val();// 2.将表单的值统一放到对象data = {'ids': ids, 'csrfmiddlewaretoken':csrf_token};// 3.通过ajax将这个对象提交到服务端数据接口});$("#btn").click(function(){$.ajax({type: "POST",url: "/server_table/",  //数据接口data: data,success: function (result) {if(result.code == 0) {$("#notice").text(result.msg).css("color", "blue")} else if(result.code == 1){$("#notice").text(result.msg).css("color", "red")}},error: function(){alert("服务器异常！")}})})
</script>
</body>
</html>

4.查看效果。
在这里插入图片描述

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

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

相关文章

go语言配置

go语言配置

1、Go语言的环境变量 与Java等编程语言一样&#xff0c;安装Go语言开发环境需要设置全局的操作系统环境变量&#xff08;除非是用包管理工具直接安装&#xff09; 主要的系统级别的环境变量有两个: &#xff08;1&#xff09;GOROOT&#xff1a;表示Go语言环境在计算机上的安…
阅读更多...
springboot docker

springboot docker

在Spring Boot中使用Docker可以帮助你将应用程序与其依赖的容器化&#xff0c;并简化部署和管理过程。 当你在Spring Boot中使用Docker时&#xff0c;你的代码不需要特殊的更改。你可以按照通常的方式编写Spring Boot应用程序。 java示例代码&#xff0c;展示了如何编写一个基…
阅读更多...
lv3 嵌入式开发-3 linux shell命令（权限、输入输出）

lv3 嵌入式开发-3 linux shell命令（权限、输入输出）

1 Shell概述 随着各式Linux系统的图形化程度的不断提高&#xff0c;用户在桌面环境下&#xff0c;通过点击、拖拽等操作就可以完成大部分的工作。 然而&#xff0c;许多Ubuntu Linux功能使用shell命令来实现&#xff0c;要比使用图形界面交互&#xff0c;完成的更快、更直接。…
阅读更多...
MOS场效应管

MOS场效应管

导体三极管中参与导电的有两种极性的载流子&#xff0c;所以也称为双极型三极管。本文将介绍另一种三极管&#xff0c;这种三极管只有一种载流子参与导电&#xff0c;所以也称为单极型三极管&#xff0c;因为这种管子是利用电场效应控制电流的&#xff0c;所以也叫场效应三极管…
阅读更多...
JVM 垃圾收集器

JVM 垃圾收集器

重点&#xff1a;CMS&#xff0c;G1&#xff0c;ZGC 主要垃圾收集器如下&#xff0c;图中标出了它们的工作区域、垃圾收集算法&#xff0c;以及配合关系。 Serial 收集器 Serial 收集器是最基础、历史最悠久的收集器。 如同它的名字&#xff08;串行&#xff09;&#xff0c…
阅读更多...
使用实体解析和图形神经网络进行欺诈检测

使用实体解析和图形神经网络进行欺诈检测

图形神经网络的表示形式&#xff08;作者使用必应图像创建器生成的图像&#xff09; 一、说明 对于金融、电子商务和其他相关行业来说&#xff0c;在线欺诈是一个日益严重的问题。为了应对这种威胁&#xff0c;组织使用基于机器学习和行为分析的欺诈检测机制。这些技术能够实时…
阅读更多...
从0创建vite+vue3项目遇到的一些坑

从0创建vite+vue3项目遇到的一些坑

使用ws自动创建的vitevue3项目后设置不了alias 答&#xff1a;不懂原理&#xff0c;但是有其他方法解决。直接在命令行执行“npm init vitelatest"后&#xff0c;一路选下去有create-vue的选项&#xff0c;就选这个create-vue创建&#xff1b;创建后会自动导入一个叫node…
阅读更多...
滑动窗口最大值

滑动窗口最大值

题目链接 滑动窗口最大值 题目描述 注意点 只可以看到在滑动窗口内的 k 个数字返回 滑动窗口中的最大值1 < k < nums.length 解答思路 首先使用双端队列解决本题&#xff0c;队列中存储的是元素在数组中的下标&#xff0c;不断往队尾添加元素下标。在双端队列中&…
阅读更多...
【图解算法数据结构】分治算法篇 + Java代码实现

【图解算法数据结构】分治算法篇 + Java代码实现

文章目录 一、重建二叉树二、数值的整数次方三、打印从 1 到最大的 n 位数四、二叉搜索树的后序遍历序列五、数组中的逆序对 一、重建二叉树 public class Solution {int[] preorder;HashMap<Integer, Integer> dic new HashMap<>();public TreeNode buildTree(in…
阅读更多...
算法：分治思想处理归并递归问题

算法：分治思想处理归并递归问题

文章目录 算法原理实现思路典型例题排序数组数组中的逆序对计算右侧小于当前元素的个数 总结 算法原理 利用归并思想进行分治也是很重要的一种思路&#xff0c;在解决逆序对的问题上有很大的需求空间 于是首先归并排序是首先的&#xff0c;归并排序要能写出来&#xff1a; c…
阅读更多...
Linux学习之vsftpd虚拟用户

Linux学习之vsftpd虚拟用户

/etc/vsftpd/vsftpd.conf里边有几项跟vsftpd虚拟用户有关的主要配置&#xff1a; guest_enableYES&#xff0c;允许匿名用户登录vsftpd guest_usernamevirtual&#xff0c;指定虚拟用户账户为virtual&#xff0c;就是把虚拟用户映射成Linux本地用户&#xff0c;这样可以使用Lin…
阅读更多...
【C++】C++11新特性（下）

【C++】C++11新特性（下）

上篇文章&#xff08;C11的新特性&#xff08;上&#xff09;&#xff09;我们讲述了C11中的部分重要特性。本篇接着上篇文章进行讲解。本篇文章主要进行讲解&#xff1a;完美转发、新类的功能、可变参数模板、lambda 表达式、包装器。希望本篇文章会对你有所帮助。 文章目录 一…
阅读更多...
用反射实现自定义Java对象转化为json工具类

用反射实现自定义Java对象转化为json工具类

传入一个object类型的对象获取该对象的class类getFields方法获取该类的所有属性对属性进行遍历&#xff0c;并且拼接成Json格式的字符串&#xff0c;注意&#xff1a;通过属性名来推断方法名获取Method实例通过invoke方法调用 public static String objectToJsonUtil(Object o…
阅读更多...
MVC模式分层练习

MVC模式分层练习

新建库 新建表 插入点数据 先不用MVC模式写功能,来看下缺点是什么 新建一个空项目 选项项目使用的JDK 自己的IDEA总是要重启下 新建模块 因maven还没教 添加框架支持 添加后项目多了这些 添加些必要依赖 这里注意下,如果导入jar包不对可以重新导入下或者是jar包本身出了问…
阅读更多...
C语言每日一练--------Day(8)

C语言每日一练--------Day(8)

本专栏为c语言练习专栏&#xff0c;适合刚刚学完c语言的初学者。本专栏每天会不定时更新&#xff0c;通过每天练习&#xff0c;进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字&#xff1a;图片整理 寻找数组下标 &#x1f493;博主csdn个人主页&#xff1a;小小…
阅读更多...
安防监控/视频存储/视频汇聚平台EasyCVR接入海康Ehome车载设备出现收流超时的原因排查

安防监控/视频存储/视频汇聚平台EasyCVR接入海康Ehome车载设备出现收流超时的原因排查

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。视频汇聚平台既具…
阅读更多...
C++ for 循环

C++ for 循环

for 循环允许您编写一个执行特定次数的循环的重复控制结构。 语法 C 中 for 循环的语法&#xff1a; for ( init; condition; increment ) {statement(s); }下面是 for 循环的控制流&#xff1a; init 会首先被执行&#xff0c;且只会执行一次。这一步允许您声明并初始化任…
阅读更多...
1688API技术解析，实现关键词搜索淘宝商品（商品详情接口等）批量获取，可高并发

1688API技术解析，实现关键词搜索淘宝商品（商品详情接口等）批量获取，可高并发

要使用1688API接口采集商品详情&#xff0c;可以按照以下步骤进行&#xff1a; 获取API接口权限&#xff1a;申请1688的app key和app secret&#xff0c;并获取access_token。 编写API请求代码&#xff1a;使用Python等编程语言&#xff0c;编写API请求代码。以下是一个Python…
阅读更多...
ARM Cortex-M 的 SP

ARM Cortex-M 的 SP

文章目录 1、栈2、栈操作3、Cortex-M中的栈4、MDK中的SP操作流程5、Micro-Lib的SP差别1. 使用 Micro-Lib2. 未使用 Micro-Lib 在嵌入式开发中&#xff0c;堆栈是一个很基础&#xff0c;同时也是非常重要的名词&#xff0c;堆栈可分为堆 (Heap) 和栈 (Stack) 。 栈(Stack): 一种…
阅读更多...
【Maven】如何发现，定位，解决依赖冲突

【Maven】如何发现，定位，解决依赖冲突

发现冲突 运行的时候可能报出错误xx类找不到xx方法&#xff0c;xx类找不到&#xff0c;很有可能就是冲突导致的。 定位冲突根因 通过idea maven插件 idea安装插件&#xff0c;maven helper 比如我有两个依赖&#xff0c;guava和findbug。 他们都用到了jsr305&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023