JQuery 详细教程

news2024/11/24 22:49:40

文章目录

  • 一、JQuery 对象
    • 1.1 安装和使用
    • 1.2 JQuery包装集对象
  • 二、JQuery 选择器
    • 2.1 基础选择器
    • 2.2 层次选择器
    • 2.3 表单选择器
  • 三、JQuery Dom 操作
    • 3.1 操作元素
      • 3.1.1 操作属性
      • 3.1.2 操作样式
      • 3.1.3 操作内容
    • 3.2 添加元素
    • 3.3 删除元素
    • 3.4 遍历元素
  • 四、JQuery 事件
    • 4.1 ready 加载事件
    • 4.2 bind() 绑定事件
  • 五、JQuery Ajax
    • 5.1 $.ajax()
    • 5.2 $.get()
    • 5.3 $.post()
    • 5.4 $.getJSON()

提示：以下是本篇文章正文内容，前端系列学习将会持续更新

一、JQuery 对象

JQuery 是⼀套兼容多浏览器的 JavaScript 脚本库.。核心理念是写得更少，做得更多，使⽤ JQuery 将极⼤的提高编写 JavaScript 代码的效率，帮助开发者节省了⼤量的⼯作，让写出来的代码更加优雅，更加健壮，“如⻁添翼”。同时网络上丰富的 JQuery 插件，也让我们站在巨⼈的肩膀上。

1.1 安装和使用

官网：https://jquery.com
在这里插入图片描述

选择 Download the uncompressed, development jQuery 3.4.1 开发版下载：
 1.完整版：jquery-3.4.1.js --> 学习版本 (学习源码 向⾼⼿学习是最好学习⽅法)。
 2.压缩版：jquery3.4.1.min.js --> 开发版本 (压缩版，减少传输)。

<!-- 在需要使用的页面引入即可 -->
<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>

1.2 JQuery包装集对象

$ 符号在 jQuery 中代表对 jQuery 对象的引⽤， “jQuery” 是核⼼对象。通过该符号可以获取 jQuery 对象，只有 jQuery 对象才能调⽤ jQuery 提供的⽅法。

①Dom 对象

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

②Jquery 包装集对象

var jQueryObject = $("#testDiv"); // 方法一
var jQueryObject = jQuery("#testDiv"); // 方法二

③Dom对象转Jquery对象

var domDiv = document.getElementById('mydiv'); // 获取Dom对象
var jQueryObject = $(domDiv);

④Jquery对象转Dom对象

var jqueryDiv = $("#mydiv"); // 获取jQuery对象
var domDiv = jqueryDiv[0]; // 将以获取的jquery对象转为dom

回到目录…

二、JQuery 选择器

2.1 基础选择器

选择器名称举例
id选择器#id$("#testDiv") 选择id为testDiv的元素
元素名称选择器element$("div")选择所有div元素
类选择器.class$(".blue")选择所有class=blue的元素
选择所有元素*$("*")选择⻚⾯所有元素
组合选择器selector1,selector2,selectorN$("#testDiv,span,.blue")同时选中多个选择器匹配的元素
// id选择器
var idSelecter = $('#mydiv1');
// 元素选择器
var nameSe = $('div'); // 有多个div元素
// 类选择器 .class
var classSe = $('.blue'); // 有多个class=blue的元素
// 通⽤选择器：*
var all = $("*");
// 组合选择器
var unionSe = $('span, .blue, div');

2.2 层次选择器

选择器名称举例
后代选择器祖先 后代$("#parent div")选择id=parent的元素的所有div元素，所有后代
子代选择器parent > child$("#parent > div")选择id=parent的直接div⼦元素，所有儿子集
相邻选择器prev + next$(".blue + img")选择class=blue的下⼀个img元素，必须相邻
同辈选择器prev ~ sibling$(".blue ~ img")选择class=blue的之后的img元素，所有同辈元素
console.log("=========后代选择器-选择所有后代=====");
var ancestorS = $('#parent div');

console.log("=========⼦代选择器-选择⼉⼦辈=====");
var child = $('#parent>div');

console.log("=========相邻选择器=====");
var pre_next = $(".gray + img");

console.log("=========同辈选择器,其后，（弟弟）=====");
var pre_siblings = $(".gray ~ img");

2.3 表单选择器

Forms名称举例
表单选择器:input查找所有的input元素：$(":input")
注意：会匹配所有的 input、textarea、select 和 button元素。
⽂本框选择器:text查找所有⽂本框：$(":text")
密码框选择器:password查找所有密码框：$(":password")
单选按钮选择器:radio查找所有单选按钮：$(":radio")
复选框选择器:checkbox查找所有复选框：$(":checkbox")
提交按钮选择器:submit 查找所有提交按钮：$(":submit")
图像域选择器:image查找所有图像域：$(":image")
重置按钮选择器:reset查找所有重置按钮：$(":reset")
按钮选择器:button查找所有按钮：$(":button")
⽂件域选择器:file查找所有⽂件域：$(":file")

回到目录…

三、JQuery Dom 操作

3.1 操作元素

3.1.1 操作属性

获取属性说明举例
attr(属性名)获取指定的属性值，固有属性和自定义属性均可操作attr('checked')
attr('name')
prop(属性名)获取指定的属性值，只能操作固有属性prop('checked')
设置属性说明举例
attr(属性名,属性值)设置指定的属性值，固有属性和自定义属性均可操作attr('checked',’checked’)
attr('name',’zs’)
prop(属性名,属性值)设置指定的属性值，只能操作固有属性。一般用于设置具有boolean类型的属性值prop('checked','true')
移除属性说明举例
removeAttr(属性名)移除指定的属性removeAttr('checked')
<body>
	<input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"/>	aa
	<input type="checkbox" name="ch" id="bb" />	bb
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/** 获取属性 **/
	var name = $("#aa").attr("name");
	var name2 = $("#aa").prop("name");
	// 返回值是boolean的属性（元素设置了属性）
	var ck1 = $("#aa").attr("checked"); // checked 或 undefined
	var ck2 = $("#aa").prop("checked"); // true 或 false
		
	/** 设置属性 **/
	$("#aa").attr("value","1");
	$("#bb").prop("value","2");
	// 返回值是boolean的属性
	$("#bb").attr("checked","checked");
	$("#bb").prop("checked",false);
		
	/** 移除属性 **/
	$("#aa").removeAttr("checked")
</script>

attr()和prop()的区别：
  1. 如果是固有属性，attr()和prop()方法均可操作
  2. 如果是自定义属性，attr()可操作，prop()不可操作
  3. 如果是返回值是boolean类型的属性
        若设置了属性，attr()返回具体的值，prop()返回true；
        若未设置属性，attr()返回undefined，prop()返回false；

总结：
  如果属性的类型是boolean（checked单选/多选、selected下拉菜单、disabled按钮禁用），则使用prop()方法；否则使用attr()方法。

3.1.2 操作样式

方法说明
attr("class")获取class属性的值，即样式名称
attr("class","样式名")修改class属性的值，修改样式
addClass("样式名")添加样式名称
css()添加具体的样式，如css("font-size","40px")、
css({"font-family":"楷体","color":"green"})
removeClass("样式名")移除样式名称
<head>
	<meta charset="utf-8">
	<title>操作元素的样式</title>
	<style type="text/css">
		div{
			padding: 8px;
			width: 180px;
		}
		.blue{
			background: blue;
		}
		.larger{
			font-size: 30px;
		}
		.pink{
			background: pink;
		}
		.green {
			background : green;
		}	
	</style>
</head>
<body>
	<h3>css()方法设置元素样式</h3>
	<div id="conBlue" class="blue larger">天蓝色</div>
	<div id="conRed">大红色</div>
	<div id="remove" class="blue larger">天蓝色</div>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// attr("class") 	获取元素的样式名
	var cla = $("#conBlue").attr("class");
		
	// attr("class","样式名")	设置元素的样式
	$("#conBlue").attr("class","green");
		
	// addClass("样式名")	添加样式
	$("#conBlue").addClass("larger");
	$("#conBlue").addClass("pink");
		
	// css()	添加具体的样式（添加行内样式）
	$("#conRed").css("font-size","40px");
	$("#conRed").css({"font-family":"楷体","color":"green"});
		
	// removeClass("样式名")		移除样式
	$("#remove").removeClass("larger");
</script>

3.1.3 操作内容

方法说明
html()获取元素的html内容
html("html, 内容")设定元素的html内容
text()获取元素的⽂本内容，不包含html
text("text 内容")设置元素的⽂本内容，不包含html
val()获取元素value值
val("值")设定元素的value值
<body>
	<h3><span>html()和text()方法设置元素内容</span></h3>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="text">北京</div>
	<div id="text2"><h2>北京</h2></div>
	<input type="text" name="uname" id="op" value="oop" />
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// html("内容")	设置元素的内容，包含html标签（非表单元素）
	$("#html").html("<h2>上海</h2>");
	$("#html2").html("上海");
	// html()	获取元素的内容，包含html标签（非表单元素）
	var div1 = $("#div1").html();
	var div2 = $("#div2").html();
	
	// text("内容")	 设置元素的纯文本内容，不识别HTML标签（非表单元素）
	$("#text").text("北京");
	$("#text2").text("<h2>北京</h2>");
	// text()	获取元素的纯文本内容，不识别HTML标签（非表单元素）
	var txt = $("#text").text();
	var txt2 = $("#text2").text();
		
	// val()	获取元素的值（表单元素）
	var val = $("#op").val();
	// 	val("值")	设置元素的值（表单元素）
	$("#op").val("今天天气不错");
</script>

回到目录…

3.2 添加元素

创建元素：直接使⽤核⼼函数即可

$('元素内容');
$('<p>this is a paragraph!!!</p>');
添加元素说明
prepend(content)头插，在被选元素内部的开头插入元素或内容，被追加的 content 参数
$(content).prependTo(selector)头插，把 content 元素或内容加⼊ selector 元素开头
append(content)尾插，在被选元素内部的结尾插入元素或内容，被追加的 content 参数
$(content).appendTo(selector)尾插，把 content元素或内容插⼊selector 元素内，默认是在尾部
before()同级前插，在元素前插⼊指定的元素或内容:$(selector).before(content)
after()同级后插，在元素后插⼊指定的元素或内容:$(selector).after(content)
<body>
	<span class="red">男神</span>
	<span class="blue">偶像</span>
	<div class="green">
		<span >小鲜肉</span>
	</div> 
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/* 添加元素 */
	var span = "<span>小奶狗</span>";
	// 得到指定元素，并在元素的内部最前面追加内容
	$(".green").prepend(span);
	var span2 = "<span>小狼狗</span>";
	$(span2).prependTo($(".green"));
	// 尾部插入
	var span3 = "<span>小奶狗1</span>";
	var span4 = "<span>小奶狗2</span>";
	$(".green").append(span3);
	$(span4).appendTo($(".green"));
		
	// 将已存在内容追加到指定元素中
	$(".green").append($(".red"));
		
	/* 同级追加 */
	var sp1 = "<span class='pink'>女神</span>";
	var sp2 = "<span class='gray'>歌手</span>";
	$(".blue").before(sp1);
	$(".blue").after(sp2);
</script>

回到目录…

3.3 删除元素

方法说明
remove()删除所选元素或指定的⼦元素，包括整个标签和内容⼀起删。
empty()清空元素内容
// 删除元素
$("#div1").remove();
// 清空元素
$("p").empty();

回到目录…

3.4 遍历元素

方法示例说明
each()$(selector).each(function(index,element))参数 function 为遍历时的回调函数，index为元素索引，element是当前元素
// 获取所有的span，并遍历打印到控制台
$("span").each(function(index,element){
	console.log(index);
	console.log(element); // <span class="green">jquery</span>
	console.log(this);    // <span class="green">jquery</span>
	console.log($(this)); // jQuery对象: jQuery.fn.init(1)
});

回到目录…

四、JQuery 事件

4.1 ready 加载事件

  • ready() 类似于 onLoad() 事件，预加载事件 (当页面的 Dom 结构加载完毕后执行)。
  • ready() 可以写多个，按顺序执行。
// 语法：
$(document).ready(function(){
	// 执行代码
});
// 简写为：
$(function(){
	// 执行代码
});

示例：

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		console.log("ready加载事件...");
	});
	$(document).ready(function(){
		console.log($("#p1"));
	});
</script>
<body>
	<p id="p1">文本</p>
</body>

回到目录…

4.2 bind() 绑定事件

为被选元素添加⼀个或多个事件处理程序，并规定事件发⽣时运⾏的函数。

$(selector).bind(eventType, [eventData], handler(eventObject));
  • eventType ：是⼀个字符串类型的事件类型，就是你所需要绑定的事件。
    这类类型可以包括：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
    mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select, submit, keydown, keypress, keyup, error
  • [eventData]：可省略，传递的参数，格式：{名:值,名2:值2}。
  • handler(eventObject)：该事件触发执行的函数。

①为元素绑定单个事件

// 原生js绑定事件
document.getElementById("test").onclick = function(){
	console.log("test...");
};
// bind() 绑定
$("#test").bind("click",function(){
	console.log("世上无难事，只怕有心人");
});
// 直接绑定
$("#btntest").click(function(){
	$(this).prop("disabled",true); // 禁用按钮
});

②为元素绑定多个事件

// 方式一：链式编程
$("#btn2").bind("click",function(){
	console.log("按钮2被点击了...");
}).bind("mouseout",function(){
	console.log("按钮2移开了...");
});
// 方式二：JSON格式
$("#btn3").bind({
	"click":function(){
		console.log("按钮3被点击了...");
	},
	"mouseout":function(){
		console.log("按钮3移开了...");
	}
});
// 方式三：直接绑定
$("#btn4").click(function(){
	console.log("按钮4被点击了...");
}).mouseout(function(){
	console.log("按钮4移开了...");
});

③同时为多个事件绑定同一个函数

$("#btn1").bind("click mouseout",function(){
	console.log("按钮1...");
});

回到目录…

五、JQuery Ajax

5.1 $.ajax()

参数说明
type请求⽅式 GET/POST
url请求地址 url
async是否异步，默认是 true 表示异步
data要求为Object或String类型的参数，发送到服务器的数据
dataType要求为String类型的参数，预期服务器返回的数据类型。如：xml, html, script, json, jsonp, text
contentType设置请求头，默认为"application/x-www-form-urlencoded"
success请求成功时调⽤此函数
error请求失败时调⽤此函数

①发送GET请求

@GetMapping("/books")
@ResponseBody
public List<Book> bookList() {
    return bookService.getBooks();
}

<body>
    <table id="table" border="1px">
      <tr>
        <th>序号</th>
        <th>标题</th>
        <th>描述</th>
      </tr>
    </table>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script>
    $.ajax({
        type: "get",
        url: "/books",
        async: true,
        dataType: "json",
        success: function(result) {
            result.forEach(function(book) {
                var tbody = `<tr><td>${book.bid}</td><td>${book.title}</td><td>${book.desc}</td></tr>`;
                $("#table").append(tbody);
            })
        }
    });
</script>

②发送POST请求

@PostMapping("/addBook2")
@ResponseBody
public Boolean add2(Book book) { // 不要加 @RequestBody注解
    return bookService.addBook(book) > 0;
}

<body>
	<button id="addBook">添加书籍</button>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script>
    $("#addBook").click(function() {
        $.ajax({
            type: "post",
            data: {
                bid: 8,
                title: "铁道游击队",
                desc: "一群英雄智斗日本鬼子"
            },
            url: "/addBook2",
            async: true,
            dataType: "json",
            success: function(result) {
                if(result) {
                    alert("添加成功！");
                }else {
                    alert("添加失败！");
                }
            },
            error: function() {
                alert("添加失败！");
            }
        });
    });
</script>

回到目录…

5.2 $.get()

// 1.请求json⽂件，忽略返回值
$.get('js/cuisine_area.json');

// 2.请求json⽂件，传递参数，忽略返回值
$.get('js/cuisine_area.json', {name:"tom",age:100});

// 3.请求json⽂件,拿到返回值,请求成功后可拿到返回值
$.get('js/cuisine_area.json', function(data){
	console.log(data);
});

// 4.请求json⽂件,传递参数,拿到返回值 
$.get('js/cuisine_area.json', {name:"tom",age:100}, function(data){
	console.log(data);
});

5.3 $.post()

// 1.请求json⽂件，忽略返回值
$.post('../js/cuisine_area.json');

// 2.请求json⽂件，传递参数，忽略返回值
$.post('js/cuisine_area.json', {name:"tom",age:100});

// 3.请求json⽂件,拿到返回值,请求成功后可拿到返回值
$.post('js/cuisine_area.json', function(data){
	console.log(data);
});

// 4.请求json⽂件,传递参数,拿到返回值 
$.post('js/cuisine_area.json', {name:"tom",age:100}, function(data){
	console.log(data);
});

5.4 $.getJSON()

// 表示请求返回的数据类型是JSON格式的ajax请求
$.getJSON('js/cuisine_area.json', {name:"tom",age:100}, function(data){
	console.log(data); // 要求返回的数据格式是JSON格式
});

回到目录…

总结:
提示：这里对文章进行总结：
本文是对JQuery的学习，首先认识了JQuery包装集对象和Dom对象的区别，又学习了JQuery选择器，后续又学习了JQuery对元素的增删查改，以及加载事件和绑定事件，最后使用了JQuery Ajax的四种封装方法。

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

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

相关文章

C/C++每日一练(20230513) 二叉树专场（7）

C/C++每日一练(20230513) 二叉树专场（7）

目录 1. 翻转二叉树 &#x1f31f; 2. 二叉树的最小深度 &#x1f31f; 3. 填充每个节点的下一个右侧节点指针 &#x1f31f;&#x1f31f; 附&#xff1a;二叉树的序列化与反序列化 &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一…
阅读更多...
消息队列中间件介绍

消息队列中间件介绍

消息队列介绍 消息队列中间件是大型系统中的重要组件&#xff0c;已经逐渐成为企业系统内部通信的核心手段。它具有松耦合、异步消息、流量削峰、可靠投递、广播、流量控制、最终一致性等一系列功能&#xff0c;已经成为异步RPC的主要手段之一。 目前常见的消息中间件有Active…
阅读更多...
知名高校博士：我改了这2个地方，一开始被秒拒的论文很快就成功发表了~

知名高校博士：我改了这2个地方，一开始被秒拒的论文很快就成功发表了~

手稿被拒后&#xff0c;你会怎么做&#xff1f;是直接换期刊重投&#xff0c;还是先仔细修改下论文呢&#xff1f; 伊利诺伊大学博士Sara E. Skrabalak分享了自己在论文被秒拒后&#xff0c;修改了文章部分内容就成功发表的经验。我们来看看她到底做了哪些修改吧 ~ Sara E. Sk…
阅读更多...
Java技术总结

Java技术总结

Java技术总结 1.高并发1.什么是高并发2.如何提升系统的并发能力3.常见的互联网分层架构整个系统各层次的水平扩展&#xff0c;又分别是如何实施的呢&#xff1f;4.分层水平扩展架构实践5.总结 2.Java 线程的 5 种状态1.新建状态(New):2.就绪状态(Runnable):3.运行状态(Running)…
阅读更多...
【企业信息化】第1集 免费开源ERP: Odoo 16 CRM客户关系管理系统

【企业信息化】第1集 免费开源ERP: Odoo 16 CRM客户关系管理系统

文章目录 前言一、概览二、使用功能1.加快销售速度2.销售线索3.机会4.客户5.高效沟通6.报告7.集成 三、总结 前言 世界排名第一的免费开源ERP: Odoo 16 CRM客户关系管理系统。真正以客户为中心的CRM。 一、概览 获得准确预测 使用可操作数据&#xff0c;以做出更好的决定。 获…
阅读更多...
Java --- redis7之缓存预热+雪崩+穿透+击穿

Java --- redis7之缓存预热+雪崩+穿透+击穿

目录 一、缓存预热 二、缓存雪崩 三、缓存穿透 3.1、解决方案 3.1.1、空对象缓存或者缺省值 3.1.2、Goolge布隆过滤器Guava解决缓存穿透 四、缓存击穿 4.1、危害 4.2、解决方案 4.3、模拟百亿补贴活动案例 一、缓存预热 场景&#xff1a;MySQL有N条新记录&#xff…
阅读更多...
基于Java的班级管理系统的设计与实现(论文+源码)_kaic

基于Java的班级管理系统的设计与实现(论文+源码)_kaic

摘 要 伴随着信息技术不断的飞速发展&#xff0c;信息技术给现在的生活也在带来翻天覆地的变化。信息时代的到来已经成为一种趋势&#xff0c;人类的发展历史正在进入到一个新的时代。信息技术已经在生活中的各个领域得到普及以及被应用。班级管理在信息技术发展之前一直都是…
阅读更多...
金子数量——c++

金子数量——c++

金子数量 Description 某地区有n条(编号依次为1到n)互不交叉的道路&#xff0c;每条道路上都有m个数字&#xff0c;其中能被8整除的数称为金子数&#xff0c;这个数字表示其重量。 如下表是3条道路&#xff0c;每条道路中有5个数的一种可能情况。 苏海想在n条道路中走一条金子…
阅读更多...
[架构之路-195]-《软考-系统分析师》- MVC、MVP、MVVM架构各自的优缺点

[架构之路-195]-《软考-系统分析师》- MVC、MVP、MVVM架构各自的优缺点

目录 一、MVC 1.1 MVC的基本结构 1.2 MVC的工作流程 1.3 MVC的优缺点 二、MVP 2.1 MVP的基本结构 2.2 MVP的工作流程 2.3 MVP的优缺点 三、MVVM 3.1 MVVM的基本结构 3.2 MVVM的工作流程 3.3 MVVM的优缺点 前言&#xff1a; MVC&#xff1a;一个controller对应多个v…
阅读更多...
Windows SSH远程连接Linux服务器 - 无公网IP内网穿透

Windows SSH远程连接Linux服务器 - 无公网IP内网穿透

文章目录 前言视频教程1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 转…
阅读更多...
学系统集成项目管理工程师（中项）系列02_文件和标准

学系统集成项目管理工程师（中项）系列02_文件和标准

1. 文件 1.1. 2020 年 4 月&#xff0c;中共中央国务院颁发《关于构建更加完善的要素市场化配置体制的意见》首次将数据作为一种新型的生产要素置入文件 1.1.1. 【21下选01】 1.2. 2021 年印发的 5G 应用扬帆行动计划(2021-2023)的通知到 2023 年&#xff0c;我国 5G 应用发…
阅读更多...
数列合并C语言

数列合并C语言

已知两个不同长度的降序排列的数列&#xff08;假设序列的长度都不超过5&#xff09;&#xff0c;请编程将其合并为一个数列&#xff0c;使合并后的数列仍保持降序排列。 【提示】假设两个降序排列的数列分别保存在数组a和数组b中&#xff0c;用一个循环&#xff0c;从前往后依…
阅读更多...
利用 Amazon API Gateway 和 Amazon Lambda 处理 Cloudfront 的内容请求

利用 Amazon API Gateway 和 Amazon Lambda 处理 Cloudfront 的内容请求

概述 国内 Amazon Cloudfront 目前不支持 Lambdaedge 功能&#xff0c;不能实现基于 CDN 的 A/B 测试、rewrite、redirect、token 认证和产生 response 等功能&#xff0c;本文介绍如何利用 API Gateway 和 Lambda 实现 Lambdaedge 的功能。下面实验介绍通过 request header 参…
阅读更多...
HttpClient5如何进行代理

HttpClient5如何进行代理

文章目录 说明原始HttpClient代理HttpClient总结 说明 在这篇文章中会对HttpClient5如何进行代理进行说明&#xff0c;我的HttpClient版本是5.2.1。在进行代理之前请先准备好代理服务器。 原始HttpClient 下面是没有进行代理设置的代码&#xff0c;尝试去访问openai接口 Tes…
阅读更多...
GPT-1面试题

GPT-1面试题

简介 1、GPT-1 是什么&#xff1f;它是基于什么模型的&#xff1f; GPT-1 是一种用于自然语言处理的机器学习模型&#xff0c;它是基于 Transformer 架构的。它是 OpenAI 在 2018 年发布的第一个 GPT 模型&#xff0c;有 1.17 亿个参数&#xff0c;比之前的语言模型有了显著的…
阅读更多...
PowerShell

PowerShell

2023年5月12日&#xff0c;周五晚上&#xff1a; 今天突然对看到了一篇关于Linux的Shell的文章&#xff0c;引起了我的兴趣&#xff0c;但由于我的电脑没有虚拟机&#xff0c;所以我决定研究研究一下windows的PowerShell&#xff0c;感觉还挺好玩的。 打开了一个新世界。 不…
阅读更多...
【最新可用】chatGPT镜像网站国内使用，免费稳定！

【最新可用】chatGPT镜像网站国内使用，免费稳定！

新建了一个网站 https://ai.weoknow.com/ 每天给大家更新可用的国内可用chatGPT 2023.5.8新增一个 ChatGPT 国内免翻版 【网站名称】&#xff1a;Chat GPT Ai 【使用环境】&#xff1a;移动端/电脑网页端 ChatGPT是一款功能强大的免费在线聊天机器人&#xff0c;具有人工智能…
阅读更多...
Bean的生命周期及演示

Bean的生命周期及演示

文章目录 一、介绍概念组成&#xff1a; 二、实例演示 一、介绍 概念 Bean的生命周期是指一个Bean对象从创建到销毁的整个存在过程。 组成&#xff1a; 1.实例化Bean&#xff08;为Bean分配内存空间&#xff09; 2.属性注入 (Bean注入和装配) 3.Bean的初始化 各种通知&#…
阅读更多...
【Midjourney】Midjourney 辅助工具 ② ( 自定义命令工具 | 设置颜色 | 设置材质 | 设置随机种子 | 设置图片链接 )

【Midjourney】Midjourney 辅助工具 ② ( 自定义命令工具 | 设置颜色 | 设置材质 | 设置随机种子 | 设置图片链接 )

文章目录 一、Midjourney Prompt Tool 自定义命令工具1、设置颜色参数2、设置材质参数3、设置随机种子参数4、设置图片链接 Midjourney 提示词命令 可以使用 辅助工具 进行生成 , 辅助工具如下 : Midjourney Prompt Tool 自定义命令工具Midjourney Prompt Generator 命令生成器…
阅读更多...
C语言实现【三子棋小游戏】

C语言实现【三子棋小游戏】

Hello,各位小伙伴们好啊&#xff0c;这篇博客是用C语言实现了三子棋的游戏&#xff0c;感兴趣的友友可以试试玩哦&#xff5e; 咦&#xff0c;当我们以玩家的身份和电脑玩这个游戏的时候&#xff0c;有哪些步骤呢&#xff1f;那么&#xff0c;反过来&#xff0c;我们设计游戏的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023