前端基础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 = 0
            msg = "数据库添加成功！"
        except Exception:
            code = 1
            msg = "数据库添加失败！"
        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 = b
            for i in ids.split(','):
                print(i)
                # 基于ID，使用模型类从数据库中删除
            code = 0
            msg = "删除数据成功！"
        except Exception:
            code = 1
            msg = "删除数据失败！"
        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>
    //1.点击全选按钮，选中全部内容；再次点击全选按钮，取消全部选中内容。
    $("#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++) {
            console.log(check[i].value);
            ids.push(check[i].value);    //将遍历出来的id数据放入数组。
        }
        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.查看效果。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

PostgreSQL 查询语句大全

PostgreSQL 查询语句大全

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
如何使用『Nginx』配置后端『HTTPS』协议访问

如何使用『Nginx』配置后端『HTTPS』协议访问

前言 本篇博客主要讲解如何使用 Nginx 部署后端应用接口 SSL 证书&#xff0c;从而实现 HTTPS 协议访问接口&#xff08;本文使用公网 IP 部署&#xff0c;读者可以自行替换为域名&#xff09; 申请证书 须知 请在您的云服务平台申请 SSL 证书&#xff0c;一般来说证书期限…
阅读更多...
安卓逆向 - Frida反调试绕过

安卓逆向 - Frida反调试绕过

本文仅供学习交流&#xff0c;只提供关键思路不会给出完整代码&#xff0c;严禁用于非法用途&#xff0c;谢绝转载&#xff0c;若有侵权请联系我删除&#xff01; 本文案例 app&#xff1a;5Lqs5LicYXBwMTEuMy4y 一、引言&#xff1a; Frida是非常优秀的一款 Hook框架&#…
阅读更多...
word导出为HTML格式教程,同时也导出图片

word导出为HTML格式教程,同时也导出图片

在写文档教程时&#xff0c;有时需要借鉴人家的专业文档内容&#xff0c;一般都是word格式文档。word直接复制里面的内容&#xff0c;帐帖到网站编辑器会有很多问题&#xff0c;需要二次清楚下格式才行&#xff0c;而且图片是没办法直接复制到编辑器内的。所以最方便的办法是将…
阅读更多...
lv3 嵌入式开发-3 linux shell命令（文件搜索、文件处理、压缩）

lv3 嵌入式开发-3 linux shell命令（文件搜索、文件处理、压缩）

目录 1 查看文件相关命令 1.1 常用命令 1.2 硬链接和软链接 2 文件搜索相关命令 2.1 查找文件命令 2.2 查找文件内容命令 2.3 其他相关命令 3 文件处理相关命令 3.1 cut 3.2 sed 过滤 3.3 awk 匹配 4 解压缩相关命令 4.1 解压缩文件的意义 4.2 解压缩相关命令 1 …
阅读更多...
在STS里使用Gradle编译Apache POI5.0.0

在STS里使用Gradle编译Apache POI5.0.0

1、到官方下面地址下载Gradle最新的版本 Gradle Distributions 2、解压后拷贝到D盘下D:\gradle-8.3-rc-4里 3、配置环境变量 新建系统变量 GRADLE_HOME &#xff0c;值为 路径 4、在 Path 中添加上面目录的 bin 文件路径 &#xff08;可以用 %GRADLE_HOME%\bin&#xff0c…
阅读更多...
【python爬虫】5.爬虫实操（歌词爬取）

【python爬虫】5.爬虫实操（歌词爬取）

文章目录 前言项目&#xff1a;寻找周杰伦分析过程代码实现重新分析过程什么是NetworkNetwork怎么用什么是XHR&#xff1f;XHR怎么请求&#xff1f;json是什么&#xff1f;json数据如何解析&#xff1f;实操&#xff1a;完成代码实现 一个总结一个复习 前言 这关让我们一起来寻…
阅读更多...
React笔记（三）类组件(1)

React笔记（三）类组件(1)

一、组件的概念 使用组件方式进行编程&#xff0c;可以提高开发效率&#xff0c;提高组件的复用性、提高代码的可维护性和可扩展性 React定义组件的方式有两种 类组件&#xff1a;React16.8版本之前几乎React使用都是类组件 函数组件:React16.8之后&#xff0c;函数式组件使…
阅读更多...
Kubernetes可视化管理工具Kuboard部署使用及k8s常用命令梳理记录

Kubernetes可视化管理工具Kuboard部署使用及k8s常用命令梳理记录

温故知新 &#x1f4da;第一章 前言&#x1f4d7;背景&#x1f4d7;目的&#x1f4d7;总体方向 &#x1f4da;第二章 安装 Kubernetes 多集群管理工具 - Kuboard v3&#x1f4d7;部署方式&#x1f4d7;通过Kuboard v3 - Kubernetes安装&#xff08;在master节点执行)&#x1f4…
阅读更多...
Blender 围绕自身的原点旋转与游标旋转

Blender 围绕自身的原点旋转与游标旋转

默认情况下的旋转是&#xff0c;R后旋转是物体自身的原点旋转 可以修改为围绕游标旋转&#xff0c;通过旋转R时 局部与全局坐标 全局的坐标不会变 局部的会随着物体的旋转变化 如果平稳时GZZ会在全局到局部坐标之间切换 或在局部到全局之间的切换 学习视频&#xff1a;【基础…
阅读更多...
C++ do...while 循环

C++ do...while 循环

不像 for 和 while 循环&#xff0c;它们是在循环头部测试循环条件。do…while 循环是在循环的尾部检查它的条件。 do…while 循环与 while 循环类似&#xff0c;但是 do…while 循环会确保至少执行一次循环。 语法 C 中 do…while 循环的语法&#xff1a; do {statement(s…
阅读更多...
【Unity】常见的角色移动旋转

【Unity】常见的角色移动旋转

在Unity 3D游戏引擎中&#xff0c;可以使用不同的方式对物体进行旋转。以下是几种常见的旋转方式&#xff1a; 欧拉角&#xff08;Euler Angles&#xff09;&#xff1a;欧拉角是一种常用的旋转表示方法&#xff0c;通过绕物体的 X、Y 和 Z 轴的旋转角度来描述物体的旋转。在Un…
阅读更多...
攻防世界-Caesar

攻防世界-Caesar

原题 解题思路 没出现什么特殊字符&#xff0c;可能是个移位密码。凯撒密码加密解密。偏移12位就行。
阅读更多...
【AWS实验】 配置中转网关及对等连接

【AWS实验】 配置中转网关及对等连接

文章目录 实验概览目标实验环境任务 1&#xff1a;查看网络拓扑并创建基准任务 2&#xff1a;创建中转网关任务 3&#xff1a;创建中转网关挂载任务 4&#xff1a;创建中转网关路由表任务 4.1&#xff1a;创建路由表关联任务 4.2&#xff1a;创建路由传播 任务 5&#xff1a;更…
阅读更多...
腾讯云国际代充-GPU服务器安装驱动教程NVIDIA Tesla

腾讯云国际代充-GPU服务器安装驱动教程NVIDIA Tesla

腾讯云国际站GPU 云服务器是基于 GPU 的快速、稳定、弹性的计算服务&#xff0c;主要应用于深度学习训练/推理、图形图像处理以及科学计算等场景。 GPU 云服务器提供和标准腾讯云国际 CVM 云服务器一致的方便快捷的管理方式。 GPU 云服务器通过其强大的快速处理海量数据的计算性…
阅读更多...
解决Ubuntu 或Debian apt-get IPv6问题：如何设置仅使用IPv4

解决Ubuntu 或Debian apt-get IPv6问题：如何设置仅使用IPv4

文章目录 解决Ubuntu 或Debian apt-get IPv6问题&#xff1a;如何设置仅使用IPv4 解决Ubuntu 或Debian apt-get IPv6问题&#xff1a;如何设置仅使用IPv4 背景&#xff1a; 在Ubuntu 22.04(包括 20.04 18.04 等版本) 或 Debian (10、11、12)系统中&#xff0c;当你使用apt up…
阅读更多...
Lesson6---案例:人脸案例

Lesson6---案例:人脸案例

学习目标 了解opencv进行人脸检测的流程了解Haar特征分类器的内容 1 基础 我们使用机器学习的方法完成人脸检测&#xff0c;首先需要大量的正样本图像&#xff08;面部图像&#xff09;和负样本图像&#xff08;不含面部的图像&#xff09;来训练分类器。我们需要从其中提取特…
阅读更多...
vue声明周期

vue声明周期

1.在created中发送数据 async created(){ const resawait axios.get("url) this.listres.data.data } 2.在mounted中获取焦点 mounted(){ document.querySelector(#inp).focus()
阅读更多...
关于Maxwell与Kafka和数据库的监控

关于Maxwell与Kafka和数据库的监控

1.Maxwell的配置 其实就是配置两端的配置信息,都要能连接上,然后才能去传输数据 config.properties #Maxwell数据发送目的地&#xff0c;可选配置有stdout|file|kafka|kinesis|pubsub|sqs|rabbitmq|redis producerkafka # 目标Kafka集群地址 kafka.bootstrap.servershadoop102…
阅读更多...
快速上手GIT命令，现学也能登堂入室

快速上手GIT命令，现学也能登堂入室

系列文章目录 手把手教你安装Git&#xff0c;萌新迈向专业的必备一步 GIT命令只会抄却不理解&#xff1f;看完原理才能事半功倍&#xff01; 快速上手GIT命令&#xff0c;现学也能登堂入室 系列文章目录一、GIT HELP1. 命令文档2. 简要说明 二、配置1. 配置列表2. 增删改查3. …
阅读更多...
最新文章

Copyright @ 2022~2023