jQuery笔记

JQuery

1.jQuery概述

1.1 JavaScript库

仓库: 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了

JavaScript库:即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等

比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)。

1.2 jQuery的概念

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是 “write Less,Do More”，即倡导写更少的代码做更多的事情。

jQuery 封装了JavaScript常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax交互

  • jQuery 的优点
    • 轻量级。核心文件才几十kb，不会影响页面加载速度
    • 跨浏览器兼容。基本兼容了现在主流的浏览器
    • 链式编程、隐式迭代
    • 对事件、样式、动画支持，大大简化了DOM操作
    • 支持插件扩展开发。有着丰富的第三方的插件
    • 例如:树形菜单、日期控件、轮播图等
    • 免费、开源

2.jQuery的基本使用

2.1 jQuery 的下载

官网地址:https://jquery.com/

code.jquery.com/jquery-3.5.1.min.js

版本

  • 1x: 兼容IE 678等低版本浏览器，官网不再更新
  • 2x: 不兼容IE 678等低版本浏览器，官网不再更新
  • 3x: 不兼容IE 678等低版本浏览器，是官方主要更新维护的版本
2.2 jQuery 的入口函数
$(function (){//此处是页面 DOM 加载完成的入口
});$(document).ready(function(){//此处是页面DOM加载完成的入口
});
  1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
  2. 相当于原生 javascript 中的DOMContentLoaded。
2.4 jQuery 的顶级对象$
  1. $是jQuery的别称，在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$。
  2. $是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
2.5 jQuery 对象和 DOM 对象
  1. 用原生 JS 获取来的对象就是 DOM 对象
  2. jQuery方法获取的元素就是jQuery对象。
  3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 Javascirpt 属性和方法

DOM 对象与jQuery对象之间是可以相互转换的。

因为原生 js 比 jQuery 更大，原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

  1. DOM 对象转换为jQuery对象:$(DOM对象)
  2. jQuery对象转换为 DOM 对象(两种方式)
$('div')[index]
// index是索引号
$('div'),get(index)

3.jQuery的选择器

3.1 jQuery的基础选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。

$("选择器") //里面选择器直接写CSS选择器即可，但是要加引号
名称用法描述
ID选择器$(“#id”)获取指定ID的元素
全选选择器$(“*”)匹配所有元素
类选择器$(“.class”)获取同一类class的元素
标签选择器$(“div”)获取同一类标签的所有元素
并集选择器$(“div,p,li”)选取多个元素
交集选择器$(“li.current”)交集元素
3.2 层级选择器
名称用法描述
子代选择器$(“ul>li”)使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器$(“ul li”)使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
3.3 隐式迭代

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。

简单理解: 给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作方便我们调用。

3.4 jQuery筛选选择器
语法用法描述
:first$(‘li:first’)获取第一个li元素
:last$(‘li:last’)获取最后一个li元素
:eq(index)$(“li:eq(2)”)获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd$(“li:odd”)获取到的li元素中，选择索引号为奇数的元素
:even$(“li:even”)获取到的li元素中，选择索引号为偶数的元素
3.5 jQuery筛选方法(重点)
语法用法说明
parent()$(“li”).parent();查找父级
children(selector)$(“ul”).children(“li”);相当于$(“ul>li”)，最近一级（亲儿子）
find(selector)$(“ul”).find(“li”);相当于$(“ul li”)，后代选择器
siblings(selector)$(“.first”).siblings(“li”);查找兄弟节点，不包括自身
nextAll([expr])$(“.first”).nextAll()查找当前元素之后所有的同辈元素
prevtAll([expr])$(“.last”).prevAll()查找当前元素之前所有的同辈元素
hasClass(class)$(“div”).hasClass(“protected”)检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)$(“li”).eq(2);相当于$("li:eq(2)"),index从0开始
3.6 jQuery的排他思想

思路: 利用siblings()筛选方法选出除自身外元素修改为默认样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>jQuery的排他思想</title><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body><button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button><script>$(function () {$("button").click(function () {$(this).css("background-color", "red");// $("button").not(this).css("background-color", "");$(this).siblings("button").css("background-color", "");});});</script></body>
</html>

index()方法

$("button").click(function () {// index() 方法可以获取当前元素在其同辈元素中的位置索引console.log($(this).index());
});

4. jQuery样式操作

4.1 操作CSS方法

jQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式

  1. 参数只写属性名，则是返回属性值
$(this).css("'color");
  1. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color", "red");
  1. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({"color":"white","font-size":"20px"});
4.2 设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点

  1. 添加类
$("div").addClass("current");
  1. 删除类
$("div").removeClass("current");
  1. 切换类
$("div").toggleClass("current");

5. jQuery效果

5.1 元素的显示和隐藏

  1. 显示语法规范

    show([speed,[easing],[fn]])

  2. 显示参数

  • 参数都可以省略，无动画直接显示。

  • speed: 三种预定速度之一字符串(“slow”，“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)

  • easing: (Optional)用来指定切换效果，默认是 “swing” ，可用参数 “linear”

  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

  1. 隐藏语法规范

    show([speed,[easing],[fn]])

  2. 隐藏参数

  • 参数都可以省略，无动画直接显示。

  • speed: 三种预定速度之一字符串(“slow”，“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)

  • easing: (Optional)用来指定切换效果，默认是 “swing” ，可用参数 “linear”

  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

切换语法规范

toggle([speed,[easing],[fn]]);
5.2 滑动效果

  1. 滑动切换效果语法规范

    slideToggle([speed,[easing],[fn]]);

  2. 滑动切换效果参数

    • 参数都可以省略。
    • speed: 三种预定速度之一的字符串(“slow”，“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)
    • easing: (Optional)用来指定切换效果，默认是 “swing” 可用参数 “linear”
    • fn: 回调函数，在动画完成时执行的函数,每个元素执行一次。
5.3 事件切换
hover([over,]out)
  1. over:鼠标移到元素上要触发的函数(相当于mouseenter)
  2. out:鼠标移出元素要触发的函数(相当于mouseleave)

如果只写一个函数,鼠标移入和离开都会触发这个函数

5.4 动画队列及其停止排队方法
  1. 动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

2.停止排队

stop();
  1. stop()方法用于停止动画或效果,
  2. 注意:stop()写到动画或者效果的前面，相当于停止结束上一次的动画。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>导航栏</title><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><style>ul {list-style: none;padding: 0;}ul li {float: left;margin-right: 10px;position: relative;}ul li span {display: inline-block;width: 50px;height: 20px;margin: 0;text-align: center;}ul li .content {display: none;width: 100%;height: 290px;background-color: blue;position: absolute;top: 100%;left: 0;}</style></head><body><div class="box"><ul><li><span>导航</span><div class="content"></div></li><li><span>导航</span><div class="content"></div></li><li><span>导航</span><div class="content"></div></li><li><span>导航</span><div class="content"></div></li><li><span>导航</span><div class="content"></div></li></ul></div><script>$("ul>li").hover(function () {// 先停止动画$(this).children(".content").stop().slideToggle();});</script></body>
</html>
5.5 淡入淡出效果
  1. 淡入效果语法规范
fadeIn([speed,[easing],[fn]])
  1. 淡入效果参数
    • 参数都可以省略。
    • speed:三种预定速度之一的字符串(“slow”，“normal”,or “fast”)或表示动画时长的亳秒数值(如:1000)
    • easing: (Optional)用来指定切换效果，默认是 “swing” 可用参数 “linear”
    • fn: 回调函数，在动画完成时执行的函数,每个元素执行一次。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>淡入淡出效果</title><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><style>div {width: 200px;height: 200px;background-color: red;}</style></head><body><button>淡入</button><button>淡出</button><button>淡入淡出切换</button><button>修改透明度</button><div></div><script>$(function () {});$("button").eq(0).click(function () {$("div").fadeIn();});$("button").eq(1).click(function () {$("div").fadeOut();});$("button").eq(2).click(function () {$("div").fadeToggle();});$("button").eq(3).click(function () {$("div").fadeTo("slow", 0.5);});</script></body>
</html>
5.6 自定义动画animate
  1. 语法
animate(params,[speed],[easing],[fn]);
  1. 参数
    • params😗*想要更改的样式属性,以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法。**其余参数都可以省略。
    • speed:三种预定速度之一的字符串(“slow”，“normal”,or “fast”)或表示动画时长的亳秒数值(如:1000)
    • easing: (Optional)用来指定切换效果，默认是 “swing” 可用参数 “linear”
    • fn: 回调函数，在动画完成时执行的函数,每个元素执行一次。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>动画效果</title><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><style>div {position: absolute;width: 200px;height: 200px;background-color: blue;}</style></head><body><div></div><script>// 实现自定义动画$(function () {$("div").click(function () {$(this).animate({left: "250px",top: "250px",width: "100px",height: "100px",opacity: 0.5,},1000);});});</script></body>
</html>

6. jQuery的属性操作

6.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的 href,比如 <input>元素里面的type。

  1. 获取属性语法
prop("属性")
  1. 设置属性语法
prop("属性"，"属性值")
6.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index=“1“

  1. 获取属性语法
attr("属性")//类似原生 getAttribute()
  1. 设置属性语法
attr("属性"，"属性值")//类似原生 setAttribute()
6.3 数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除

1.附加数据语法

data("name"，"value")// 向被选元素附加数据

2.获取数据语法

date("name")// 向被选元素获取数据

同时，还可以读取 HTML5 自定义属性 data-index，得到的是数字型

<span data-index="1">test</span>console.log($("span").data("index")) <- 输出1 ->

7.jQuery内容文本值

主要针对元素的内容还有表单的值操作。

7.1 普通元素内容html()(相当于原生innerHTML)
html() //获取元素内容
html("内容") // 设置元素内容值
7.2 text()文本内容值
text()
text("文本内容")
7.3 val()表单值
val()
val("文本内容")
  • parents()返回所有祖先元素,例如parents('.father')返回祖先元素中class属性等于father的元素
  • toFixed(2)可以保留指定位小数

8. jQuery元素操作

8.1 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。(如果想要给同一类元素做不同操作，就需要用到遍历)

语法1:

$("div").each(function(index,domEle){ xxx;})

  1. each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个

  2. 里面的回调函数有2个参数: index 是每个元素的索引号; demEle是每个DOM元素对象，,不是jQuery对象

  3. 所以要想使用jQuery方法，需要给这个DOM元素转换为jQuery对象$(domEle)

语法2:

$.each(object,function(index,element){ xxx;})
  1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
  2. 里面的函数有2个参数: index是每个元素的索引号; element遍历内容
// each() 方法用于遍历集合中的每个元素，并对每个元素执行一个函数。
var colors = ["red", "green", "blue", "yellow", "purple"];
$("li").each(function (index, element) {$(this).css("color", colors[index]);// element是DOM对象,不能使用jQuery方法
});// $.each() 方法用于遍历数组或对象，并对每个元素执行一个函数,主要用于数据处理
var arr = [1, 2, 3, 4, 5];
$.each(arr, function (index, value) {console.log(index + ":" + value);
});
8.2 创建元素
$("<li>我是新创建的元素</Ii>");
// 新创建一个元素
8.3 添加元素

1.内部添加

element.append("内容") // 把内容放入匹配元素内部`最后面`，类似原生appendChild。
element.prepend("内容")

2.外部添加

element.after("内容")// 把内容放入目标元素后面
element.before("内容") // 把内容放入目标元素前面
8.4 删除元素
element.remove()// 删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html("") // 清空匹配的元素内容

9. jQuery尺寸和位置操作

9.1 尺寸操作
语法用法
width() / height()取得匹配元素宽度和高度值，只算width / height
innerWidth() / innerHeight()取得匹配元素宽度和高度值，包含padding
outerWidth() / outerHeight()取得匹配元素宽度和高度值，包含padding、border
outerWidth(true) / outerHeight(true)取得匹配元素宽度和高度值，包含padding、border、margin
9.2 位置操作

位置主要有三个:offset()、position()、scrollTop() / scrollLeft()

  1. offset()设置或获取元素相对文档偏移: offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。

  2. position()获取元素相对带定位父级偏移: position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

  3. scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧区域

    • scrollTop() 方法设置或返回被选元素被卷去的头部。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0"/><title>回到顶部jquery版</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#top {position: fixed;bottom: 10px;right: 10px;width: 50px;height: 50px;background-color: #f00;color: #fff;text-align: center;line-height: 50px;cursor: pointer;border-radius: 50%;z-index: 999;}#content {height: 2000px;background-color: pink;}</style></head><body><div id="top">顶部按钮</div><div id="content">内容</div></body><script>$(function () {$("#top").hide();// 当页面滚动超出1000像素时，显示回到顶部按钮$(window).scroll(function () {if ($(window).scrollTop() > 1000) {console.log("显示回到顶部按钮");$("#top").fadeIn(1000);} else {$("#top").fadeOut(1000);}});// 点击回到顶部按钮，页面回到顶部$("#top").click(function () {$("html,body").stop().animate({scrollTop: 0,},1000);});});</script>
</html>

10. jQuery事件

10.1 单个事件注册

语法:

element.事件(function(){});
$('div').click(function(){console.log("div被点击");
})
10.2 事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法:

element.on(events,[selector],fn)
  1. events: 一个或多个用空格分隔的事件类型,如 “click” 或 “keydown”
  2. selector: 元素的子元素选择器
  3. fn: 回调函数 即绑定在元素身上的侦听函数。
on()方法优势1

可以绑定多个事件，多个处理事件处理程序。

$("div").on({mouseover:function(){},mouseout:function(){},click:function(){},
});

如果事件处理程序相同

$("div").on("mouseover mouseout"function(){$(this).toggleClass("current");
});
on()方法优势2:

可以事件委派操作。

事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$("ul").on("click", "li", function () {$(this).css("background-color", "yellow");
});
// click 是绑定在 ul 身上的，但是 触发的对象是 ul 里面的小li, this指向的是触发对象
on()方法优势3

动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>微博发布功能</title><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><style>ul li a {float: right;}ul li {border-bottom: 1px solid #ccc;display: none;}</style><script>$(function () {$("button").on("click", function () {var content = $(".txt").val();if (content == "") {alert("请输入内容");return false;}var li = $("<li></li>");li.html(content + "<a href='javascript:;'>删除</a>");$("#weibo ul").append(li);li.slideDown();$(".txt").val("");});// 事件委托$("ul").on("click", "a", function () {console.log(this);$(this).parent().slideUp(function () {$(this).remove(); // 删除列表项});});});</script><style>.box {width: 500px;margin: 50px auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;}</style></head><body><div class="box" id="weibo"><span>微博发布</span><textareaname=""id=""class="txt"cols="30"rows="10"placeholder="发布你的微博"></textarea><button>发布</button><ul></ul></div></body>
</html>
10.3 事件off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0"/><title>off解绑事件</title><script src="../jquery-1.12.4.js"></script><style>div {width: 400px;height: 400px;background-color: pink;margin: 0 auto;}</style></head><body><div></div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></body><script>$(function () {$("div").on({click: function () {console.log("点击");},mouseover: function () {console.log("鼠标经过");},});$("ul").on("click", "li", function () {this.style.backgroundColor = "yellow";});// off解绑事件$("div").off(); // 默认解绑所有事件$("div").off("click"); // 参数是监听函数名$("div").off("mouseover");$("ul").off("click", "li"); // 解绑事件委托});</script>
</html>

如果有的事件只想触发一次，可以使用one()来绑定事件。

10.4 自动触发事件 trigger()

有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click()  //第一种简写形式
element.trigger("type")  //第二种自动触发模式
element.triggerHandler(type)  //第三种自动触发模式

triggerHandler()触发事件,不执行默认行为

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>自动触发事件</title><script src="../jquery-1.12.4.js"></script><style>div {width: 200px;height: 200px;background-color: red;}</style></head><body><div></div><input type="text" /></body><script>$(function () {$("div").on("click", function () {$(this).css("background-color", "blue");});$("input").on("focus", function () {$(this).val("输入框获得焦点了");});$("input").triggerHandler("focus"); // 触发事件，但不执行默认行为(光标移动到输入框)// 自动触发事件//   $("div").click();//   $("div").trigger("click");$("div").triggerHandler("click"); // 触发事件，但不执行默认行为});</script>
</html>
10.5 jQuery事件对象

事件被触发，就会有事件对象的产生

element.on(events,[selector],function(event){})

阻止默认行为: event.preventDefault()或者 return false

阻止冒泡: event.stopPropagation()

11. jQuery的其他方法

11.1 jQuery拷贝对象

如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用$.extend()方法

语法

$.extend([deep],target,object1,[objectN])
  1. deep: 如果设为 true 为深拷贝，默认为 false 浅拷贝
  2. target: 要拷贝的目标对象
  3. object1: 待拷贝到第一个对象的对象。
  4. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
  5. 深拷贝，前面加true ，完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。如果有不冲突的属性,会拷贝到一起
11.2 多库共存

问题概述: jQuery使用$作为标示符，随着jQuery的流行,其他JavaScript库也会用这$作为标识符，这样一起使用会引起冲突

客观需求: 需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。

jQuery 解决方案:

  1. 把里面的$符号统一改为jQuery。比如jQuery(‘div’)
  2. jQuery变量规定新的名称: $.noConflict(),var xx = $.noConflict()
// 假设是其他库
$(function () {function $(ele) {return document.querySelector(ele);}console.log($("div")); // 输出<div></div>jQuery.each(); // 想调用jquery的each方法，肯定会报错// 解决办法：var xxx = jQuery.noConflict(); // 保存原jqueryxxx.each(); // 调用原jquery的each方法
});
11.3 jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成

注意:这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。

jQuery插件常用的网站:

  1. jQuery插件库 http://www.jq22.com/
  2. jQuery之家 http://www.htmleaf.com/

​

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

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

相关文章

Mysql数据类型面试题15连问

Mysql数据类型面试题15连问

整数类型的 UNSIGNED 属性有什么用&#xff1f; MySQL 中的整数类型可以使用可选的 UNSIGNED 属性来表示不允许负值的无符号整数。使用 UNSIGNED 属性可以将正整数的上限提高一倍&#xff0c;因为它不需要存储负数值。 例如&#xff0c; TINYINT UNSIGNED 类型的取值范围是 0 ~…
阅读更多...
【go从零单排】Mutexes互斥锁

【go从零单排】Mutexes互斥锁

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;互斥锁&#xff08;Mutex&#xff09;是一种用于保护共…
阅读更多...
LLM时代下Embedding模型如何重塑检索、增强生成

LLM时代下Embedding模型如何重塑检索、增强生成

文章目录 一、背景二、C-MTEB评测结果三、性能不错的向量模型腾讯Conan系列阿里GTE系列商汤Piccolo系列合合信息acge系列智源BGE系列数元灵Dmeta系列jina系列OpenAI系列 四、业务中选择向量模型有哪些考量五、洞察与总结为什么需要RAG和Embedding向量化技术&#xff1f;RAG 和 …
阅读更多...
[SWPUCTF 2022 新生赛]Power! 反序列化详细题解

[SWPUCTF 2022 新生赛]Power! 反序列化详细题解

知识点: PHP反序列化(执行顺序) 构造POP链 代码审计 题目主页: 输入框可以输入内容,习惯性先查看一下页面的源代码,收集信息 发现源码中有提示参数source 先不急,再看一下其他信息 是apache服务器,php版本为7.4.30 url传参 ?sourceindex.php 回显了index.php的源码 …
阅读更多...
【go从零单排】Rate Limiting限流

【go从零单排】Rate Limiting限流

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 中&#xff0c;速率限制&#xff08;Rate Limiting&#xff09;是一种控制…
阅读更多...
【GPTs】MJ Prompt Creator：轻松生成创意Midjourney提示词

【GPTs】MJ Prompt Creator：轻松生成创意Midjourney提示词

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 &#x1f4af;GPTs指令&#x1f4af;前言&#x1f4af;MJ Prompt Creator主要功能适用场景优点缺点 &#x1f4af; 小结 &#x1f4af;GPTs指令 中文翻译&#xff1a; 任务说明 您是一款为幻灯片工…
阅读更多...
Android Profiler 内存分析

Android Profiler 内存分析

Android studio&#xff08;下面简称AS&#xff09;为App提供的性能分析工具&#xff0c;在AS3.0替换掉旧的分析工具&#xff0c;对于其使用方法&#xff0c;官方也有对应的介绍&#xff1a;Android Profiler 对于使用方法&#xff0c;我只用到比较简单的功能&#xff0c;高级的…
阅读更多...
[ Linux 命令基础 3 ] Linux 命令详解-文件和目录管理命令

[ Linux 命令基础 3 ] Linux 命令详解-文件和目录管理命令

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…
阅读更多...
HTMLCSS： 实现可爱的冰墩墩

HTMLCSS： 实现可爱的冰墩墩

效果演示 HTML <div class"wrap"><div class"body"></div><div class"ear"></div><div class"ear rightEar"></div><div class"leftHand"></div><div class"…
阅读更多...
【电力系统】永磁同步电机调速系统带有扰动观测器

【电力系统】永磁同步电机调速系统带有扰动观测器

【电力系统】永磁同步电机调速系统带有扰动观测器( DOB)的最优滑模控制、改进补偿滑模控制、传统滑模、PID控制研究 摘要 本文研究了永磁同步电机&#xff08;PMSM&#xff09;调速系统中的不同控制策略&#xff0c;包括最优滑模控制、改进补偿滑模控制、传统滑模控制以及PID控…
阅读更多...
TVM计算图分割--分割方式

TVM计算图分割--分割方式

文章目录 TVM中的计算图分割方式1. Partition Pass2. dataflow_pattern3. 内置图分割接口4. Pipeline Executor5. BYOC框架6. Collage7. UMA深度学习模型通常是用计算图来表示的。计算图是一种有向无环图，其中节点代表算子，表示一个操作，节点之间的边表示算子之间的数据依赖…
阅读更多...
如何使用IDEA创建Maven/SSM工程？

如何使用IDEA创建Maven/SSM工程？

鉴于很多学校还在教授SSMJSP&#xff0c;很多同学不会使用IDEA创建Maven工程&#xff0c;这里进行说明 windows下安装jdk并配置环境 添加链接描述Windows下安装Maven并配置环境 首先你要本地安装jdk&#xff0c;Maven并配置基础环境变量&#xff0c;然后对IDEA进行jdk、Mave…
阅读更多...
大数据新视界 -- 大数据大厂之 Impala 性能优化：优化数据加载的实战技巧（下）（16/30）

大数据新视界 -- 大数据大厂之 Impala 性能优化：优化数据加载的实战技巧（下）（16/30）

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…
阅读更多...
从0开始机器学习--Day23--支持向量机

从0开始机器学习--Day23--支持向量机

经过前面的学习&#xff0c;我们已经知道在解决问题时&#xff0c;重要的不仅仅是要在算法A或算法B中选择更优的&#xff0c;而是考虑怎么选择用于学习算法的特征和正则化参数&#xff0c;相比神经网络和逻辑回归&#xff0c;支持向量机在这两个方面做得更好。 优化目标(Optimi…
阅读更多...
macOS 设置固定IP

macOS 设置固定IP

文章目录 以太网Wifi![请添加图片描述](https://i-blog.csdnimg.cn/direct/65546e966cae4b2fa93ec9f0f87009d8.png) 基于 macOS 15.1 以太网 Wifi
阅读更多...
Pandas | 数据分析时将特定列转换为数字类型 float64 或 int64的方法

Pandas | 数据分析时将特定列转换为数字类型 float64 或 int64的方法

类型转换 传统方法astype使用value_counts统计通过apply替换并使用astype转换 pd.to_numericx对连续变量进行转化⭐参数&#xff1a;返回值&#xff1a;示例代码&#xff1a; isnull不会检查空字符串 数据准备 有一组数据信息如下&#xff0c;其中主要将TotalCharges、MonthlyC…
阅读更多...
HarmonyOS Next 实战卡片开发 02

HarmonyOS Next 实战卡片开发 02

HarmonyOS Next 实战卡片开发 02 卡片开发中&#xff0c;还有一个难点是显示图片。其中分为显示本地图片和显示网络图片 显示本地图片 卡片可以显示本地图片&#xff0c;如存放在应用临时目录下的图片。路径比如 /data/app/el2/100/base/你的项目boundleName/temp/123.png 以…
阅读更多...
双十一云服务器抢购后，用SD-WAN连通多云网络

双十一云服务器抢购后，用SD-WAN连通多云网络

双十一个个云厂商都有一定的优惠&#xff0c;我在阿里云和腾讯云都购买了服务器&#xff0c;原本主要是使用的阿里云&#xff0c;一堆乱七八糟的东西都是部署在阿里云的&#xff0c;现在买了一台腾讯云之后就在思考一个问题&#xff0c;怎么在腾讯云使用阿里云原本部署的服务。…
阅读更多...
从0开始学docker （每日更新 24-11-7）

从0开始学docker （每日更新 24-11-7）

docker网络基础 docker容器网络模型 容器网络项目libnetwork&#xff1a;docker网络架构基于一套称为容器网络模型&#xff08;CNM&#xff09;的接口 CNM高层架构 包括&#xff1a; 沙箱&#xff08;Sandbox&#xff09;&#xff1a;又称沙盒&#xff0c;包含容器的网络栈…
阅读更多...
Linux学习笔记之组管理和权限管理

Linux学习笔记之组管理和权限管理

组管理 文件/目录 所有者 一般文件所有者是文件的创建者&#xff0c;谁创建了该文件&#xff0c;就自然成为该文件的所有者 ls -ahl &#xff08;查看文件的所有者&#xff09; chown 用户名 文件名 &#xff08;修改文件所有者&#xff09; 文件/目录 所在组 当某个用户…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023