javaEE -19（9000 字 JavaScript入门 - 4）

news2025/1/20 11:01:58

一： jQuery

jQuery是一个快速、小巧且功能丰富的JavaScript库。它旨在简化HTML文档遍历、事件处理、动画效果以及与后端服务器的交互等操作。通过使用jQuery，开发者可以以更简洁、更高效的方式来编写JavaScript代码。

jQuery提供了许多易于使用的方法和功能，可以大大简化开发过程。以下是jQuery的一些主要特点：

  1. 选择器：jQuery允许使用CSS选择器来选择页面上的元素。这使得查找和操作DOM元素变得非常容易。

  2. DOM操作：jQuery提供了一套简单而强大的API，用于创建、查找、添加、删除和修改HTML元素。这意味着您可以轻松地操纵页面上的元素，而无需编写繁琐的原生JavaScript代码。

  3. 事件处理：jQuery简化了处理事件的过程。您可以使用一些简单的方法来附加事件处理程序，例如点击、悬停或提交表单时触发的事件。

  4. 动画效果：jQuery提供了用于创建动态和交互性效果的方法。您可以轻松地添加淡入淡出、滑动、渐变、旋转等动画效果，使页面更加生动和吸引人。

1.1 jQuery 隐式迭代

在jQuery中，隐式迭代是指对一组元素进行操作或处理时，jQuery会自动迭代每个元素，并且在每个元素上执行相同的操作。这种隐式迭代使得对多个元素进行处理变得更加简便和高效。

举个例子：

HTML代码：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

JavaScript代码：

$("li").addClass("highlight");

在上面的示例中，$("li")选择了所有的<li>元素，并返回一个jQuery对象。然后，我们调用了addClass("highlight")方法，将highlight类名添加到每个<li>元素上。这里的隐式迭代是jQuery自动迭代每个选中的<li>元素，并在每个元素上执行addClass操作。

最终的结果是，每个<li>元素都会添加highlight类名，从而实现了对多个元素的同一操作。

二： jQuery 常用API

2.1 jQuery 选择器

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

$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号

在这里插入图片描述

2.1.1 jQuery 层级选择器

在这里插入图片描述

2.1.2 jQuery 筛选选择器

在这里插入图片描述

2.1.3 jQuery 筛选方法

在这里插入图片描述

2.1.4 链式编程

链式编程是为了节省代码量，看起来更优雅。

$(this).css('color', 'red').sibling().css('color', '');

代码解析：

  • $(this)：表示当前元素的jQuery对象。
  • .css('color', 'red')：将当前元素的文本颜色设置为红色。
  • .sibling()：选择当前元素的兄弟元素。
  • .css('color', '')：将所选择的兄弟元素的文本颜色设置为空字符串，即移除其文本颜色。

因此，这段代码的效果是将当前元素以及其兄弟元素的文本颜色进行了修改。

2.2 jQuery 样式操作

2.2.1 操作 css 方法

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

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

2.2.2 设置类样式方法

  1. 添加类
$(“div”).addClass(''current'');
  1. 移除类
$(“div”).removeClass(''current'');
  1. 切换类
$(“div”).toggleClass(''current'');

注意：

  • 原生 JS 中 className 会覆盖元素原先里面的类名。
  • jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

2.3 jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：
在这里插入图片描述

2.3.1 显示隐藏效果

2.3.1.1 显示
show([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略， 无动画直接显示。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

举个例子：

show(1000, 'easeInOut', function() {
  console.log('动画完成');
});

第一个参数 speed 是动画的持续时间，这里设置为 1000 毫秒（1秒）。第二个参数 easing 是动画的缓动函数，这里设置为 ‘easeInOut’。最后一个参数 fn是动画完成后要执行的回调函数，这里我们输出一条消息到控制台。

2.3.1.2 隐藏
hide([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略， 无动画直接显示。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.3.1.3 显示和隐藏切换
toggle([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略， 无动画直接显示。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

2.3.2 滑动效果

2.3.2.1 下滑
slideDown([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略。
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.3.2.2 上滑
slideUp([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.3.2.3 上滑和下滑切换
slideToggle([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

2.3.3 事件切换

hover([over,]out)

参数解释：

  • over:鼠标移到元素上要触发的函数（相当于mouseenter）
  • out:鼠标移出元素要触发的函数（相当于mouseleave）
  • 如果只写一个函数，则鼠标经过和离开都会触发它

2.3.4 动画队列及其停止排队方法

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

我们可以通过这个方法停止排队：

stop()

注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

2.3.5 淡入淡出效果

2.3.5.1 淡入
fadeIn([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.3.5.2 淡出
fadeOut([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.3.5.3 淡入淡出切换
fadeToggle([speed,[easing],[fn]])

参数解释：

  • 参数都可以省略。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.3.5.4 渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])

参数解释：

  • opacity 透明度必须写，取值 0~1 之间。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or
    “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

2.3.6 自定义动画 animate

animate(params,[speed],[easing],[fn])

参数解释：

  • params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

举个例子：
下面是使用 animate 函数的一个简单例子：

// 创建一个 DOM 元素
const box = document.createElement('div');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
document.body.appendChild(box);

// 定义动画参数
const params = {
  targets: box,
  translateX: 200,
  rotate: '1turn',
  backgroundColor: '#00ff00',
};

// 执行动画
animate(params, 1000, 'easeInOutQuad', () => {
  console.log('动画结束');
});

2.4 jQuery 属性操作

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

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

  1. 获取属性语法
prop(''属性'')
  1. 设置属性语法
prop(''属性'', ''属性值'')

2.4.2 设置或获取元素自定义属性值 attr()

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

  1. 获取属性语法
attr(''属性'') // 类似原生 getAttribute()
  1. 设置属性语法
attr(''属性'', ''属性值'') // 类似原生 setAttribute()

2.4.3 数据缓存 data()

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

  1. 附加数据语法
data(''name'',''value'') // 向被选元素附加数据
  1. 获取数据语法
date(''name'') // 向被选元素获取数据

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

2.5 jQuery 文本属性值

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

  1. 普通元素内容 html()（ 相当于原生inner HTML)
html() // 获取元素的内容
html(''内容'') // 设置元素的内容
  1. 普通元素文本内容 text() (相当与原生 innerText )
text() // 获取元素的文本内容
text(''文本内容'') // 设置元素的文本内容
  1. 表单的值 val()（ 相当于原生value)
val() // 获取表单的值
val(''内容'') // 设置表单的值

2.6 jQuery 元素操作

2.6.1 遍历元素

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

$("div").each(function (index, domEle) { xxx; }）
  1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
  2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
  3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
// HTML结构
<div class="example">Element 1</div>
<div class="example">Element 2</div>
<div class="example">Element 3</div>

// JavaScript代码
$(document).ready(function() {
  // 使用$.each()函数迭代所有class为.example的div元素
  $.each($(".example"), function(index, domEle) {
    $(this).text("Element " + (index + 1));
    console.log($(this).text());
  });
});

在$.each()函数中，index是迭代的当前元素的索引，domEle是迭代的当前元素本身。$.each()函数会自动给index赋上递增的数值，所以不需要手动定义变量index。index会自动递增。

当然还有另外一种形式：

$.each(object，function (index, element) { xxx; }）
  1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
  2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容

2.6.2 创建元素

$(''<li></li>'');

动态的创建了一个 < li >

2.6.3 添加元素

2.6.3.1 内部添加
  1. 内部添加
element.append(''内容'')

把内容放入匹配元素内部最后面，类似原生 appendChild。

element.prepend(''内容'')

把内容放入匹配元素内部最前面。

2.6.3.2 外部添加
element.after(''内容'') // 把内容放入目标元素后面

element.before(''内容'') // 把内容放入目标元素前面
  • 内部添加元素，生成之后，它们是父子关系。
  • 外部添加元素，生成之后，他们是兄弟关系。

2.6.4 删除元素

element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') // 清空匹配的元素内容
  • remove 删除元素本身。
  • empt() 和 html(‘’‘’) 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

2.7 jQuery 尺寸、位置操作

2.7.1 jQuery 尺寸

在这里插入图片描述

  • 以上参数为空，则是获取相应值，返回的是数字型。
  • 如果参数为数字，则是修改相应值。
  • 参数可以不必写单位。

2.7.2 jQuery 位置

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

offset() 设置或获取元素偏移

  • offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
  • 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left
    用于获取距离文档左侧的距离。
  • 可以设置元素的偏移：offset({ top: 10, left: 30 });

position() 获取元素偏移

  • position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
  • 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left
  • 用于获取距离定位父级左侧的距离。该方法只能获取。

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

  • scrollTop() 方法设置或返回被选元素被卷去的头部。
  • 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

三： jQuery 事件

3.1 jQuery 事件注册

3.1.1 单个事件注册

element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })

其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

3.2 jQuery 事件处理

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() {
alert('hello world!');
});

在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

on() 方法优势3：

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

$(“div").on("click",”p”, function(){
alert("俺可以给动态生成的元素绑定事件")
});

$("div").append($("<p>我是动态创建的p</p>"));

3.2.1 事件处理 off() 解绑事件

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

$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托

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

3.2.2 自动触发事件 trigger()

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

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

$("p").on("click", function () {
alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击

triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。

3.3 jQuery 事件对象

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

element.on(events,[selector],function(event) {})
  • 阻止默认行为：event.preventDefault() 或者 return false
  • 阻止冒泡： event.stopPropagation()

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

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

相关文章

腾讯云轻量应用服务器优缺点介绍

腾讯云轻量应用服务器优缺点介绍

腾讯云轻量应用服务器开箱即用、运维简单的轻量级云服务器&#xff0c;CPU内存带宽配置高并且价格特别优惠&#xff0c;轻量2核2G3M带宽62元一年、2核2G4M优惠价118元一年&#xff0c;540元三年、2核4G5M带宽218元一年&#xff0c;756元3年、4核8G12M带宽646元15个月等&#xf…
阅读更多...
【 C语言 】 | C程序百例

【 C语言 】 | C程序百例

【 C语言 】 | C程序百例 时间&#xff1a;2023年12月28日13:50:43 文章目录 【 C语言 】 | C程序百例1.参考2.练习 1.参考 1.【 C语言 】 | C程序百例-CSDN博客 2.100Example: C程序百例-酷勤网&#xff08;kuqin.com&#xff09;提供.pdf (gitee.com) 3.cProgram/LinuxC - 码…
阅读更多...
[JS设计模式] Module Pattern

[JS设计模式] Module Pattern

随着应用程序和代码库的增长&#xff0c;保持代码的可维护性和模块化变得越来越重要。模块模式允许将代码分成更小的、可重用的部分。 除了能够将代码分割成更小的可重用部分之外&#xff0c;模块还允许将文件中的某些值保留为私有。默认情况下&#xff0c;模块内的声明范围(封…
阅读更多...
Qt编写的exe程序上添加程序信息

Qt编写的exe程序上添加程序信息

1、qtcreator编写 在pro文件中添加如下信息 # 版本信息 VERSION 4.0.2.666# 图标 RC_ICONS Images/MyApp.ico# 公司名称 QMAKE_TARGET_COMPANY "Digia"# 产品名称 QMAKE_TARGET_PRODUCT "Qt Creator"# 文件说明 QMAKE_TARGET_DESCRIPTION "Qt …
阅读更多...
Android : 画布的使用 简单应用

Android : 画布的使用 简单应用

示例图&#xff1a; MyView.java&#xff1a; package com.example.demo;import android.content.Context; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.view.Vi…
阅读更多...
node-red：modbus协议数据格式转换

node-red：modbus协议数据格式转换

node-red&#xff1a;MODBUS协议数据格式转换 一、32word无符号转换1.1 写操作1.2 读操作 二、字符串转换2.1 字符串写操作2.2 字符串读操作 三、有符号整数转换3.1 有符号16word转换3.1.1 负数 读 操作3.1.2 负数 写 操作 3.2 有符号32word转换 源码 本文将描述通过node-red采…
阅读更多...
2024年【北京市安全员-B证】证考试及北京市安全员-B证模拟考试题库

2024年【北京市安全员-B证】证考试及北京市安全员-B证模拟考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【北京市安全员-B证】证考试及北京市安全员-B证模拟考试题库&#xff0c;包含北京市安全员-B证证考试答案和解析及北京市安全员-B证模拟考试题库练习。安全生产模拟考试一点通结合国家北京市安全员-B证考试最新…
阅读更多...
本地部署 text-generation-webui

本地部署 text-generation-webui

本地部署 text-generation-webui 0. 背景1. text-generation-webui 介绍2. 克隆代码3. 创建虚拟环境4. 安装 pytorch5. 安装 CUDA 运行时库6. 安装依赖库7. 启动 Web UI8. 访问 Web UI9. OpenAI 兼容 API 0. 背景 一直喜欢用 FastChat 本地部署大语言模型&#xff0c;今天试一…
阅读更多...
GitOps实践指南：GitOps能为我们带来什么?

GitOps实践指南：GitOps能为我们带来什么?

Git&#xff0c;作为开发过程中的核心工具&#xff0c;提供了强大的版本控制功能。即便在写代码的时候稍微手抖一下&#xff0c;我们也能通过 Git 的差异对比&#xff08;diff&#xff09;轻松追踪到庞大工程中的问题&#xff0c;确保代码的准确与可靠。这种无与伦比的自省能力…
阅读更多...
python如何通过日志分析加入黑名单

python如何通过日志分析加入黑名单

python通过日志分析加入黑名单 监控nginx日志&#xff0c;若有人攻击&#xff0c;则加入黑名单&#xff0c;操作步骤如下&#xff1a; 1.读取日志文件 2.分隔文件&#xff0c;取出ip 3.将取出的ip放入list&#xff0c;然后判读ip的次数 4.若超过设定的次数&#xff0c;则加…
阅读更多...
面向对象（高级）知识点强势总结！！！

面向对象（高级）知识点强势总结！！！

文章目录 一、知识点复习1-关键字&#xff1a;static1、知识点2、重点 2-单例模式&#xff08;或单子模式&#xff09;1、知识点2、重点 3-理解main()方法1、知识点2、重点 4-类的成员之四&#xff1a;代码块1、知识点2、重点 5-关键字&#xff1a;final1、知识点2、重点 6-关键…
阅读更多...
Python 网络编程之搭建简易服务器和客户端

Python 网络编程之搭建简易服务器和客户端

用Python搭建简易的CS架构并通信 文章目录 用Python搭建简易的CS架构并通信前言一、基本结构二、代码编写1.服务器端2.客户端 三、效果展示总结 前言 本文主要是用Python写一个CS架构的东西&#xff0c;包括服务器和客户端。程序运行后在客户端输入消息&#xff0c;服务器端会…
阅读更多...
ArcGIS Pro中Conda环境的Scripts文件解读

ArcGIS Pro中Conda环境的Scripts文件解读

Scripts中包含的文件如下 1. propy.bat 用于在 ArcGIS Pro 外部运行 Python 脚本&#xff08;扩展名为 .py 的文件&#xff09;。使用的conda环境是与ArcGIS pro环境同步。propy.bat原理是代替各自python环境下的python.exe&#xff0c;主要区别是propy.bat使用的是与Pro同的…
阅读更多...
YOLOv8算法优化：解决YOLOv8无法打印计算量（GFLOPs）的问题点

YOLOv8算法优化：解决YOLOv8无法打印计算量（GFLOPs）的问题点

💡💡💡本文内容：解决YOLOv8无法打印计算量的问题点 💡💡💡本文提供：1）训练阶段自动打印计算量；2）提供离线打印计算量的代码； 1.计算量介绍 FLOPS：注意S是大写，是 “每秒所执行的浮点运算次数”（floating-point operations per second）的缩写。它常被用…
阅读更多...
JavaScript 工具库 | PrefixFree给CSS自动添加浏览器前缀

JavaScript 工具库 | PrefixFree给CSS自动添加浏览器前缀

新版的CSS拥有多个新属性&#xff0c;而标准有没有统一&#xff0c;有的浏览器厂商为了吸引更多的开发者和用户&#xff0c;已经加入了最新的CSS属性支持&#xff0c;这其中包含了很多炫酷的功能&#xff0c;但是我们在使用的时候&#xff0c;不得不在属性前面添加这些浏览器的…
阅读更多...
nodejs业务分层如何写后端接口

nodejs业务分层如何写后端接口

这里展示的是在node express 项目中的操作 &#xff0c;数据库使用的是MongoDB&#xff0c;前期关于express和MongoDB的文章可访问&#xff1a; Nodejs后端express框架 server后端接口操作&#xff1a;通过路由匹配——>调用对应的 Controller——>进行 Service调用——&…
阅读更多...
基于YOLOv8深度学习的45种交通标志智能检测与识别系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战

基于YOLOv8深度学习的45种交通标志智能检测与识别系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…
阅读更多...
TCP的三次握手

TCP的三次握手

TCP 是一种面向连接的单播协议&#xff0c;在发送数据前&#xff0c;通信双方必须在彼此间建立一条连接。所谓的“连接”&#xff0c;其实是客户端和服务器的内存里保存的一份关于对方的信息&#xff0c;如 IP 地址、端口号等。 TCP 可以看成是一种字节流&#xff0c;它…
阅读更多...
强化学习与推荐系统结合

强化学习与推荐系统结合

强化学习与推荐系统结合&#xff0c;是在智能体的学习过程中&#xff0c;会根据外部反馈信息&#xff0c;改变自身状态&#xff0c;在根据自身状态进行决策&#xff0c;就是行动反馈&#xff0c;状态更新&#xff0c;在行动的循环。 深度强化学习推荐系统框架是基于强化学习的…
阅读更多...
【数据结构】顺序表与单链表的增删查改

【数据结构】顺序表与单链表的增删查改

文章目录 前言顺序表增删查改顺序表的定义与初始化增删查改操作测试代码完整代码 单链表的增删查改数据结构定义动态申请节点单链表的尾插和头插单链表的尾删和头删单链表的查找单链表的插入和删除销毁链表测试代码完整代码 总结 前言 在计算机编程领域&#xff0c;数据结构是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023