jQuery核心卷

news2024/11/24 8:03:39

目录

一.jQuery引用

二.jQuery语法

三.元素的属性

1.attr()方法

2.使用removeAttr()方法删除HTML元素的属性

3.使用text()方法设置HTML元素的文本内容

四.CSS元素控制

1.使用css()方法获取和设置css属性

2.与CSS类别有关的方法

3.获取和设置HTML元素的尺寸

4.获取和设置元素的位置

五.事件和event对象

1.事件处理函数

2.Event对象

3.绑定事件处理函数

4.键盘事件

5.鼠标事件

6.文档加载事件

六.jQuery动画

1.显示和隐藏HTML元素

2.淡入淡出效果

3.滑动效果

4.自定义动画

5.动画队列


一.jQuery引用

        jQuery是一个开源的,轻量级的JavaScript脚本库,jQuery的使用方法如下:

1.引用jQuery官网在线脚本:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// jQuery语句
</script>

2.将jquery.js下载到本地然后引用:

<script src="jquery-3.7.1.min.js"></script>
<script>
// jQuery语句
</script>

二.jQuery语法

        jQuery语法是为选取HTML元素编制的,可以对元素执行一些操作,语法:

$(selector).action()

$符号定义jQuery语句,选择符selector选取相应的HTML元素,action()执行某些操作,如:

$(this).hide()     //隐藏当前元素
$("p").hide()        //隐藏所有段落
$(".test").hide()    //隐藏所有类别class=“test”的元素
$("#test").hide()    //隐藏所有id=“test”的元素

三.元素的属性
 1.attr()方法

使用attr()方法可以访问匹配的HTML元素的指定属性,语法:

attr(属性名)

如:

<img id="img" src="1.png">
$("#img").attr("src")  //表示得到img的src

attr()方法的主要使用方法:

attr(properties)                以键/值对的形式设置匹配元素的一组属性,如设置所有img元素的src,title和alt属性:

                        $("img").attr({ src:"/iamge/1.png",  title:"jQuery", alt:"jQuery-logo"  });

alttr(key,value)                以键/值的形式设置匹配元素的指定属性,key指属性名,value指属性指,例如:                        $("button").attr("disabled","desabled");

attr(key,fn)                        以回调函数的形式设置匹配元素的指定属性为计算值,key指定属性值,fn指定返回属性值的函数,例如:           $("img").attr("src",function(){ return "/image/"+this.title;});

2.使用removeAttr()方法删除HTML元素的属性

        removeAttr()方法语法:

removeAttr(属性名);

该方法可以移除一个或多个属性,如果要移除多个属性可以用空格分隔属性名

例如移除所有<p>元素的样式属性:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p style="font-size: 120%;color:red" class="button">hello world!</p>
<p style="font-weight: bold;color: #0000FF" class="button">hello time!</p>
<script src="jquery.js"></script>
<script>
    $(document).ready(function(){
        $(".button").click(function () {
            $("p").removeAttr("style");
        });
    });

</script>
</body>
</html>

效果:

     删除style属性后 

3.使用text()方法设置HTML元素的文本内容

        text()语法:

text(文本内容)

例如点击图片输出文件名:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="mn1.png" class="img">
<div class="button">click</div>
<script src="jquery.js"></script>
<script>
    $(document).ready(function(){
        $(".img").click(function () {
            $(".button").text($(".img").attr("src"));
        });
    });
</script>
</body>
</html>

效果:

  点击图片后


四.CSS元素控制

        在jQuery中通过DOM对象设置HTMl元素的CSS样式,方法:

1.使用css()方法获取和设置css属性

(1)获取css属性

值=jQuery对象.css(属性名);

(2)设置css属性

jQuery对象.css(属性名,值);

如:$("p").css("border","3px solid red");

2.与CSS类别有关的方法

        (1)addClass()

使用addClass()方法可以为匹配的HTML元素添加类别属性,语法:

jQuery对象.addClass(className)

例如向第一个<p>添加类别into“”:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .into{
            font-size: 150%;
            color: red;
        }
    </style>
</head>
<body>
<p>hello world!</p>
<p>hello time</p>
<button>添加类别</button>
<script src="jquery.js"></script>
<script>
  $(document).ready(function () {
      $("button").click(function () {
        $("p:first").addClass("into");
      });
  });
</script>
</body>
</html>

效果:

     

        (2)hasClass()

该方法可以判断匹配的元素是否拥有指定的类别,语法:

JQuery对象.hasClass(className)

例如:$("p:frist").hasClass("into"),有返回true,否则false

        (3)removeClass()

该方法可以删除匹配元素的类别,语法:

JQuery对象.removeClass(className)

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .into{
            font-size: 150%;
            color: red;
        }
        .into1{
            color: #3e8e41;
        }
        .into2{
            font-size: 150%;
            color: #0000FF;
        }
    </style>
</head>
<body>
<p class>hello world!</p>
<p class="into2">hello time</p>
<button>添加类别</button>
<script src="jquery.js"></script>
<script>
  $(document).ready(function () {
      $("button").click(function () {
        $("p:first").addClass("into");
        $("p:last").removeClass("into2").addClass("into1");
      });
  });
</script>
</body>
</html>

效果:

   点击后

(4)toggleClass()

        检测匹配的HTML元素中指定的class类别,如果不存在就添加class类别,如果存在就将其删除,执行切换操作,语法:

jQuery对象.toggleClass(className)

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main{
            font-size: 150%;
            color: #FF0000;
        }
    </style>
</head>
<body>
<p>hello world</p>
<p>hello time</p>
<button>转换类别</button>
<script src="jquery.js"></script>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("p").toggleClass("main");
        });
    });
</script>
</body>
</html>

效果:一直点击,一直在切换类别

   

3.获取和设置HTML元素的尺寸

(1)height() 获取和设置元素的高度信息

获取高度语法:

value=JQueryobject.height();

设置高度语法 :

JQueryobject.height(value);

(2)width() 获取和设置元素的宽度

获取宽度语法:

value=JQueryobject.width();

设置宽度语法:

JQueryobject.width(value);
4.获取和设置元素的位置

(1)offset() 获取和设置当前元素在窗口中的偏移量

获取坐标语法:

value=JQueryobject.offset();

设置坐标语法:

JQueryobject.offset(value);

(2)position() 获取和设置当前元素相对于父元素的偏移量

获取坐标语法:

value=JQueryobject.position()

设置坐标语法:

JQueryobject.position(value);

五.事件和event对象

        JQuery事件包括键盘事件,鼠标事件,表单事件,文档加载事件和浏览器事件等

1.事件处理函数

        事件处理函数指触发事件时调用的函数,指定事件函数方法:

JQuery选择器.事件名(function(){
函数体
};)
2.Event对象

        Event对象的属性:

currentTarget触发当前事件的元素
data传递给正在运行的事件处理函数的可选函数
delegateTarget正在运行的事件处理函数绑定的元素
namespace触发事件时触发的命名空间

pageX/pageY

鼠标和文档边缘的距离
relatedTarget事件涉及的其他DOM元素
result返回事件处理函数最后返回的返回值
target初始化事件的DOM元素
timeStamp浏览器创建事件的时间
type事件类型
which用于键盘事件和鼠标事件,表示按下的键或鼠标

例如通过移动鼠标获取鼠标的位置信息:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      background-color: red;}
  </style>
  <script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="mouse">12</div>
<script>
  $(document).mousemove(function (event){
    $("#mouse").text("鼠标 event.pageX:"+event.pageX+",event.pageY:"+event.pageY)
  });
</script>
</body>
</html>

效果:

3.绑定事件处理函数

        bind()方法可以为每一个匹配的元素绑定一个事件处理函数,语法:

bind(type,[data],fn)

type                事件类型

data                可选参数

fn                        事件函数

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bind()</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(document).ready(function (){
            $("button").bind("click",function (){
                $("p").hide();
            });

        $("input").bind("click",{sex:"man"},handler);

        });
        function handler() {
            alert(event.data.sex);
        }
    </script>
</head>
<body>
<p>hello world! hello time!</p>
      <button>click</button>
<input id="sex">
</body>
</html>
4.键盘事件

        JQuery键盘事件:

focusin()当光标进入HTML元素时触发
focusout()当光标离开HTML元素时触发
keydown()当按下按键时触发
keypress()按下并松开时触发
keyup()按键松开时触发

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<script type="text/javascript" src="jquery.js"></script>
<script>
  $(document).ready(function (){
    $("input").keydown(function () {
      $("input").css("background-color","red");
    });
    $("input").keyup(function () {
      $("input").css("background-color","blue");
    })
  })
</script>
</body>
</html>

按下键盘变红,松开变蓝 

又如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<p>输入键盘值输出对应的ASCII值</p>
<div></div>
<script type="text/javascript" src="jquery.js"></script>
<script>
  $(document).ready(function (){
    $("input").keydown(function () {
      $("div").html("key:"+event.which);
    })
  })
</script>
</body>
</html>

输出键盘键对应的的ASCII值

5.鼠标事件

        JQuery鼠标事件

click()当鼠标点击时触发
dbclick()当鼠标双击时触发
hover()鼠标进入和离开指定元素时的处理函数
mousedown()按下鼠标时触发
mouseenter()进入元素的事件处理函数
mouseleave()离开元素时的事件处理函数
mouseove移动鼠标时触发
mouseout离开元素时触发
mouseover当鼠标指针位于元素上方时触发

例如鼠标进入,离开时改变元素背景颜色:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p style="background: #FF0000">hello time!</p>
<script type="text/javascript" src="jquery.js"></script>
<script>
  $(document).ready(function (){
    $("p").mouseenter(function () {
      $("p").css("background-color","blue");
    });
    $("p").mouseleave(function () {
      $("p").css("background-color","green");
    });
  });
</script>
</body>
</html>
6.文档加载事件

        jQuery的文档加载事件有:load,ready,unload事件

load                加载文档时触发

ready                文档就绪事件,当所有HTML元素都加载时执行

unload                离开一个页面或拆卸一个页面时触发


六.jQuery动画

        jQuery动画包括显示和隐藏,渐入渐出,飞入飞出,自定义动画等

1.显示和隐藏HTML元素

(1)以动画效果显示HTML元素show()

语法:

.show([duration],[easing],[complete])

duration                动画效果运动的时间长度,单位ms

easing                动画缓冲函数,包括swing(摇摆缓冲)和linear(线性缓冲)等

complete                指定动画效果执行完后调用的函数

例如以动画形式显示HTML元素:

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>显示图片</button>
<img src="mn1.png" style="display: none">
<script src="jquery.js"></script>
<script>
  $("button").click(function () {
    $("img").show("slow");    //fast
  });
</script>
</body>
</html>

效果:

点击按钮后: 

(2)隐藏HTML元素hide()

语法:

hide([duration],[easing],[complete])

例如隐藏指定HTML元素:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>隐藏图片</button>
<img src="mn1.png">
<script src="jquery.js"></script>
<script>
  $("button").click(function () {
    $("img").hide("slow");    //fast
  });
</script>
</body>
</html>

(3)切换HTML元素的显示和隐藏状态toggle()

语法:

toggle([duration],[easing],[complete])

例如:

隐藏后点击显示图片,显示后点击隐藏图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>隐藏/显示图片</button>
<img src="mn1.png">
<script src="jquery.js"></script>
<script>
  $("button").click(function () {
    $("img").toggle("slow");    //fast
  });
</script>
</body>
</html>
2.淡入淡出效果

        淡入淡出的动画效果是通过透明度的变化来实现的

(1)实现淡入效果fadeIn()

语法:

fadeIn([duration],[easing],[complete])

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      margin: 3px;
      width: 80px;
      display: none;
      height: 80px;
      float: left;
    }
    div#one{background: #FF0000}
    div#two{background: #3e8e41}
    div#three{background: #0000FF}
  </style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<button>点击</button>
<script src="jquery.js"></script>
<script>
  $("button").click(function () {
    $("div:hidden:first").fadeIn("slow");   //选择器(div:hidden:first)得到隐藏的div元素
  });
</script>
</body>
</html>

效果:

点击后:

(2)实现淡出效果fadeOut()

语法:

fadeOut([duration],[easing],[complete])

fadeOut可以设置淡出的时间:

$("div).fadeOut(5000)

还可以设置动画完成后调用的函数:

$("div").fadeIn(5000,function(){ //函数体  })

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
     background: #060;
      width: 300px;
      height: 300px;
      color: red;
    }
  </style>
</head>
<body>
<div></div>
<button id="up">点击查看效果</button>
<script src="jquery.js"></script>
<script>
  $("#up").click(function () {
  $("div").fadeOut(5000,function (){alert("动画完成")});
  });
</script>
</body>
</html>

效果:

点击后div会渐渐淡去,并弹窗警告

(3)调节HTML元素的透明底fadeTo()

语法:

fadeTo([duration],[opacity],[easing],[complete])

opacity                透明度,值在1~0之间

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">透明度</div>
<div>参考</div>
<button id="up">点击查看效果</button>
<script src="jquery.js"></script>
<script>
  $("#up").click(function () {
  $("#div").fadeTo("slow",0.4);
  });
</script>
</body>
</html>

效果:

(4)以淡入淡出效果切换显示和隐藏HTML元素fadeToggle()

        fadeToggle()方法调用时,如果是显示的HTML元素会渐渐隐藏,相反,隐藏的会渐渐显示

语法:

fadeToggle([duration],[opacity],[easing],[complete])

例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button>线性切换</button>
<button>快速交换</button>
<p>慢速,线性的方式切换显示和隐藏</p>
<p>快速切换显示和隐藏</p>
<script src="jquery.js"></script>
<script>
 $("button:first").click(function () {
   $("p:first").fadeToggle("slow","linear");
 });
 $("button:last").click(function () {
   $("p:last").fadeToggle("fast");
 });
</script>
</body>
</html>

效果:

3.滑动效果

(1)以滑动效果显示隐藏的HTML元素slideDown()

语法:

slideDown([duration],[easing],[complete])

例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      background: #3e8e41;
      margin: 3px;
      width: 80px;
      height: 40px;
      display: none;
      float: left;
    }
  </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<button>click</button>
<script src="jquery.js"></script>
<script>
 $("button").click(function () {
   if($("div:first").is(":hidden")){
     $("div").slideDown("slow");
   }else {
     $("div").hide();
   }
 });
</script>
</body>
</html>

效果:滑动显示

(2)滑动隐藏HTML元素slideUp()

语法:

slideUp([duration],[easing],[complete])

(3)以滑动的方式切换显示和隐藏HTML元素slideToggle()

语法:

slideToggle([duration],[easing],[complete])

例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button>切换</button>
<p>滑动方式隐藏和显示元素</p>
<script src="jquery.js"></script>
<script>
$("button").click(function () {
  $("p").slideToggle("slow");
});
</script>
</body>
</html>

效果:

4.自定义动画

        调用animate()函数可以根据一组css属性实现自定义动画,语法:

$(selector).animate(properties,duration,easing,complete)

properties                产生动画的CSS属性和值

例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="div" style="background: #3e8e41;height: 100px;width: 100px;margin: 6px;"></div>
<button id="btn1">变长</button>
<button id="btn2">变短</button>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
  $("#btn1").click(function () {
    $("#div").animate({height:"300px"});
  });
  $("#btn2").click(function () {
    $("#div").animate({height:"100px"});
  });
});
</script>
</body>
</html>

效果:

5.动画队列

        jQuery动画队列是指将一组动画放如队列里,实现动画播放

(1)queue()方法

        该方法用于管理指定动画队列中要执行的函数,语法:

queue([queueName])

queueName是队列的名称,默认是“fx”,即jquery队列

例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button>开始显示动画</button>
<p>队列长度:<span></span></p>
<div style="width: 50px;height: 50px;background-color: #3e8e41;position: absolute"></div>
<script src="jquery.js"></script>
<script>
function runIt(){
  var div=$("div");
  div.animate({height:300},"slow");
  div.animate({width:300},"slow");
  div.animate({height:100},"slow");
  div.animate({width:100},"slow");
}
$(document).ready(function () {
  $("button").click(function () {
    runIt();
    $("span").text($("div").queue("fx").length);
  });
});
</script>
</body>
</html>

效果:

(2)dequeue()方法

        该方法可以执行匹配元素的动画队列中的下一个函数,同时将其出队列,语法:

dequeue(quenueName)

(3)删除动画队列中的成员clearQueue()

        该函数可以删除匹配元素的动画队列中所有未执行的函数,语法:

clearQueue(queuename)

例如:

$("button").click(function(){
var mydiv=$("div");
mydiv.clearQueue();
});

(4)延迟动画delay()

        该函数可以延迟动画队列中的函数的执行,语法:

delay(duration,queuename)

例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<style>
 div{
   position: absolute;
   width: 100px;
   height: 100px;
   /*float: left;*/
 }
 #first{background-color: #3e8e41;left: 0;}
 #second{background-color: #FF0000;left: 80px}
</style>
</head>
<body>
<p><button>run</button></p>
<div id="first">1</div>
<div id="second">2</div>
<script src="jquery.js"></script>
<script>
$("button").click(function () {
  $("#first").slideUp(300).delay(800).fadeIn(400);
  $("#second").slideUp(300).fadeIn(400);
});
</script>
</body>
</html>

效果:点击run按钮,div元素执行slideUp()方法,然后在执行fadeIn()方法,只不过第一个div有延迟

(5)停止正在执行的动画

        a.使用stop()方法

语法:

stop([queue],[clearQueue],[jumpToEnd])

clearQueue        是否删除队列中的动画,默认False

jumpToEnd        是否立即完成当前动画,默认False

        b.使用finish()方法

语法:

finish(queuename)

        c.jQuery.fx.off属性

将该属性设置为True可以关闭所有动画,设置为False后开启所有动画

        d.jQuery.fx.interval属性

该属性可以设置动画的显示帧数

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

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

相关文章

html 边缘融合加载

html 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>边缘融合加载</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;padding-bottom: 80px;b…

No141.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

【STM32】IAP升级00 预备知识

IAP&#xff08;In Application Programming&#xff09;简介 Flash够大的情况下&#xff0c;上电后的程序通过修改 MSP 的方式&#xff0c;可以在一块Flash上存在多个功能差异的程序。 IAP是为了在执行正常功能前&#xff0c;为了升级功能&#xff0c;提前运行的一段程序。这…

26608-2011 工业用回收一氯甲烷 学习笔记

声明 本文是学习GB-T 26608-2011 工业用回收一氯甲烷. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了工业用回收一氯甲烷的要求、试验方法、检验规则及标志、包装、运输、贮存及安全。 本标准适用于副产回收生产的工业用一氯甲…

一些杂题(9.23)

八月赛 A. Extra Large Knapsack 我的思路 是否可行只要看所有异或在一起是否为0就可以了 可行的方案只要有一个在第一个包里&#xff0c;剩下的都在第二个包里就可以了 注意&#xff1a;n1的时候不可行&#xff0c;要特判 代码 #include<bits/stdc.h> using name…

手写Hystrix基本原理

本文已收录于专栏 《中间件合集》 目录 概念说明什么是HystrixHystrix解决的问题 提供服务工作流程代码实现HystrixSDKMyHystrixCommand注解MyHystrixProperty注解MyAspect注解解释器 发送请求端引入Hystrix的依赖调用代码 接收请求端执行效果发送请求端 总结提升 概念说明 什…

树莓集团又一力作,打造天府蜂巢成都直播产业园样板工程

树莓集团再次推出惊艳之作&#xff0c;以打造成都天府蜂巢直播产业园为目标。该基地将充分展现成都直播产业园的巨大潜力与无限魅力&#xff0c;成为一个真正的产业园样板工程。 强强联手 打造未来 成都天府蜂巢直播产业园位于成都科学城兴隆湖高新技术服务产业园内&#xff0…

毕业设计选题之Java+springboot线上蔬菜销售与配送系统(源码+调试+开题+lw)

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1f495;&…

基于Java的药品管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

国庆节难忘回家路:趣事、风景、反思

文章目录 前言趣事游记旅途风光在人气爆棚的小七孔古桥大七孔在喯珠泻玉的拉雅瀑布奇异罕见的水上森林在云雾缭绕的鸳鸯湖在天然地宫——天钟洞飞瀑流泉 反思人们在死亡之前自己会有预感吗&#xff1f;求索生死大问 中秋国庆的规划后记 前言 中秋国庆&#xff0c;双节汇在一起…

8、绩效看板与日清计划

6、片花关联长视频 7、脏话检测 内容仓的办公区挂着几台电视&#xff0c;显示每个人目前完成的工作量&#xff0c;这就是绩效看板&#xff08;如下图&#xff09;&#xff0c;每位来参观的领导&#xff0c;都觉得这个绩效看板的想法很有意思。绩效看板是制造业常用的管理方法&…

【数据结构初阶】六、线性表中的队列(链式结构实现队列)

相关代码gitee自取&#xff1a; C语言学习日记: 加油努力 (gitee.com) 接上期&#xff1a; 【数据结构初阶】五、线性表中的栈&#xff08;顺序表实现栈&#xff09;_高高的胖子的博客-CSDN博客 1 . 队列&#xff08;Queue&#xff09; 队列的概念和结构&#xff1a; 队列…

基于Java的食堂管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统功能具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域…

【设计模式】备忘录模式

文章目录 1.备忘录模式定义2.备忘录模式的角色3.备忘录模式实现3.1.场景说明3.2.结构类图3.3.代码实现 4.备忘录模式优缺点5.备忘录模式适用场景6.备忘录模式总结 主页传送门&#xff1a;&#x1f481; 传送 1.备忘录模式定义 备忘录&#xff08;Memento Pattern&#xff09;模…

图像处理: 马赛克艺术

马赛克 第一章 马赛克的历史渊源 1.1 马赛克 艺术中的一种表面装饰&#xff0c;由紧密排列的、通常颜色各异的小块材料&#xff08;如石头、矿物、玻璃、瓷砖或贝壳&#xff09;组成。与镶嵌不同的是&#xff0c;镶嵌是将要应用的部件放置在已挖空以容纳设计的表面中&#xff0…

ubuntu20安装nvidia驱动

1. 查看显卡型号 lspci | grep -i nvidia 我的输出&#xff1a; 01:00.0 VGA compatible controller: NVIDIA Corporation GP104 [GeForce GTX 1080] (rev a1) 01:00.1 Audio device: NVIDIA Corporation GP104 High Definition Audio Controller (rev a1) 07:00.0 VGA comp…

国庆周《Linux学习第三课》

国庆周《Linux学习第三课》 国庆周《Linux学习第二课》_IHOPEDREAM的博客-CSDN博客 总结 用户的管理 增加一个用户 删除一个用户 修改一个用户 查看一个用户 用户组的管理 增加一个组 删除一个组 修改一个组 查看一个组 将用户成员增加到该组中去 移除组的成员 1 用户

怎样在CSDN插入代码块 怎么变色?

添加代码块&#xff0c;通常有三种方式&#xff1a; 文章目录 ①点击 工具栏中的代码块 代码块 </>&#xff0c;② 快捷键 ctrlshiftk③ 先粘贴上代码&#xff0c;在选中 ctrlshiftk4 如果代码没有变彩色 ①点击 工具栏中的代码块 代码块 </>&#xff0c; 例如 选…

UWB技术在汽车智能制造的应用

返修区车辆管理项目 应用背景 在车辆总装生产线中&#xff0c;车辆下线后检测与返修是最后一个关键环节&#xff0c;整车一旦下线&#xff0c;由于流水线装配工艺、来料等原因&#xff0c;可能会出现部分整车存在瑕疵&#xff0c;进而进入返修区域待检。由于可能出现问题的不确…

探索设计模式:从组合到享元的软件架构之旅 (软件设计师笔记)

&#x1f600;前言 设计模式是软件开发中常见和经常使用的一种最佳实践方式&#xff0c;它们是为了解决在软件设计中反复出现的一类问题而提出的通用解决方案。本文主要探讨了四种设计模式&#xff1a;Composite&#xff08;组合&#xff09;、Decorator&#xff08;装饰器&…