1387809421166477_社区达人页

2023年01月

• 01.11 16:30:11
  发表了文章 2023-01-11 16:30:11

  如何用最简单的代码制作带定时器的轮播图

  如何用最简单的代码制作带定时器的轮播图 前几天写了一篇有关轮播图制作的博客，但当时没有添加定时的效果，说白了就是没有自动轮播的效果，今天来说一下怎样添加自动轮播效果。如图： 在这里插入图片描述 HTML代码： <div class="box" id="box"> <img src="img/1.jpg" alt=""> <!-- <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> -->

  
• 01.11 16:25:56
  发表了文章 2023-01-11 16:25:56

  简单解析JavaScript的默认事件及如何阻止默认事件

  简单解析JavaScript的默认事件及如何阻止默认事件 上篇文章就提到，在JavaScript中提到事件冒泡两个必不可少也要提的就是事件捕获和默认事件，现在来聊一聊什么是默认事件，及如何阻止默认事件。 1.什么是默认事件 顾名思义，默认事件就是默认执行的事件，比如 a标签，点击a标签，页面会自动跳转。如图： 在这里插入图片描述 HTML代码： <form action=""> <input type="submit" id="submit"> <input type="image" src="../../CSS/0421/car.jpg"

  
• 01.11 16:22:13
  发表了文章 2023-01-11 16:22:13

  简单解析事件捕捉

  简单解析事件捕捉 上篇博客说到了事件冒泡，其实在JavaScript中，说到事件冒泡还有两个个不得不提的事件捕获和默认事件，我们先来说一下事件捕获。效果如下图： 在这里插入图片描述 HTML代码： <div class="box1"> <div class="box2"> <div class="box3"> <div class="box4"></div> </div> </div> </div> 1 2 3 4 5

  
• 01.11 16:19:02
  发表了文章 2023-01-11 16:19:02

  简单解析js的事件冒泡及如何取消事件冒泡

  简单解析js的事件冒泡 1.什么是事件冒泡？ 以click点击事件为例。假如我们有一个多层结构标签。如下图，是4个div嵌套。每个div都有点击的监听事件，分别alert(“box4”),alert(“box3”),alert(“box2”),alert(“box1”)。当我们点击最里面的div时，点击事件开始传递。出现的效果是alert(“box4”)-alert(“box3”)-alert(“box2”)-alert(“box1”)。这就是事件冒泡阶段。效果如下： 在这里插入图片描述 HTML代码： <div class="box1"> <div clas

  
• 01.11 16:15:45
  发表了文章 2023-01-11 16:15:45

  JavaScript实现鼠标拖拽效果

  JavaScript实现鼠标拖拽效果 前几篇博客一直在讲鼠标的移动事件相关的效果，今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果。效果如图： 在这里插入图片描述 HTML代码： <div id="box"></div> 1 CSS代码： * { margin: 0; padding: 0; } #box { width: 200px; height: 200px; background: red

  
• 01.11 16:11:01
  发表了文章 2023-01-11 16:11:01

  JavaScript实现一串div跟随鼠标移动效果（幻影效果）

  JavaScript实现一串div跟随鼠标移动效果 上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果。现在来讲一个进阶版，实现一串div跟随鼠标移动效果，鼠标幻影效果。如图： 在这里插入图片描述 HTML代码： <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div

  
• 01.11 16:07:29
  发表了文章 2023-01-11 16:07:29

  JavaScript实现div块跟随鼠标移动效果

  JavaScript实现div块跟随鼠标移动效果 前面讲了这么多DOM事件有关的属性等，现在我们进行一些相关的练习，实现div块跟随鼠标移动效果，如图： 在这里插入图片描述 HTML代码： <div id="box"></div> 1 CSS代码： *{ margin: 0; padding: 0; } body{ width: 2000px; height: 2000px; } #box{ width: 200px; heigh

  
• 01.11 16:02:16
  发表了文章 2023-01-11 16:02:16

  详细区分offsetX，clientX，pageX，screenX，layerX和X的区别

  详细区分DOM事件中鼠标指针的坐标问题 前面博客中我们讲解到了DOM事件的event对象，里边包含了鼠标事件的指针坐标属性。比如event.offsetX,event.clientX,event.pageX,event.screenX等等。现在我们来解析一下这些坐标属性的区别。 HTML代码： <div class="box"></div> <div class="box2"></div> 1 2 CSS代码： .box{ width: 200px; height: 200px; backgro

  
• 01.11 15:55:21
  发表了文章 2023-01-11 15:55:21

  详细解析DOM事件的event事件对象（二）

  详细解析DOM事件的event事件对象（二） 上篇博客说到了DOM的键盘事件和鼠标事件的event对象，这次我们再来聊一聊event对象剩下的属性。 HTML代码： <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> 1 2 3 4 5 CSS代码： *{ margin: 0;
• 01.11 15:53:10
  发表了文章 2023-01-11 15:53:10

  详细解析DOM事件的event事件对象（一）

  JavaScript 86 篇文章 7 订阅 订阅专栏 详细解析DOM事件的event事件对象（一） 近期我们一直在学习DOM，马上到了尾期了，今天来说一下DOM事件的event事件对象。这里我们先解析一下键盘和鼠标事件的event对象属性。 HTML代码： <form> <input type="text" id="text"> <!-- <input type="submit"> --> <button>登录</button> </form> 1 2 3 4 5 1.键盘事件
• 01.11 15:37:18
  发表了文章 2023-01-11 15:37:18

  JavaScript实现省市区三级联动

  JavaScript实现省市区三级联动 之前的文章中我们说到过如何利用JavaScript实现二级联动，这次我们来说说如何利用JavaScript实现三级联动。效果如图： 在这里插入图片描述 HTML代码： 请选择省份：<select name="" id="province"> <option value="">请选择省份......</option> </select> 请选择城市：<select name="" id="city"> <option value="">请选择城市......</option> </sel

  
• 01.11 15:19:05
  发表了文章 2023-01-11 15:19:05

  最简单的利用原生js模拟电视机屏保效果

  最简单的利用原生js模拟电视机屏保效果 小的时候记得家里刚用彩色电视机时，看电视还要用天线，当天线信号不好时，电视屏幕就会进入到屏保状态，有一串文字在屏幕内“撞来撞去”。下面我们来讲一下如何实现下图这个效果： 在这里插入图片描述 HTML代码： 调速：<input type="number" name="" id="num"> <div id="box"></div> 1 2 CSS代码： * { margin: 0; padding: 0; } #box { width:

  
• 01.11 14:21:28
  发表了文章 2023-01-11 14:21:28

  利用JavaScript实现键盘控制小方块移动

  利用JavaScript实现键盘控制小方块移动 HTML代码： <div class="box"></div> 1 CSS代码： *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } 1 2 3 4 5 6 7 8
• 01.11 14:18:54
  发表了文章 2023-01-11 14:18:54

  史上最详细的DOM事件之框架事件

  史上最详细的DOM事件之框架事件 上篇博客讲了DOM的拖动事件，这篇博客我们来讲一讲DOM的媒体事件。 HTML代码： <img src="../../CSS/0421/car.gif" alt=""> 1 JS代码： var oImg=document.getElementsByTagName("img")[0]; // 属性 描述 DOM // onload 一张页面或一幅图像完成加载。 // window.onloda=function(){ // } oImg.onload=function(ev)
• 01.11 13:52:01
  发表了文章 2023-01-11 13:52:01

  史上最详细的DOM事件之媒体事件

  史上最详细的DOM事件之媒体事件 上篇博客讲了DOM的拖动事件，这篇博客我们来讲一讲DOM的媒体事件。 HTML代码： <audio src="念旧-阿悠悠.mp3" controls></audio> 1 JS代码： var oAudio=document.getElementsByTagName("audio")[0]; // 事件 描述 DOM // onabort 事件在视频/音频（audio/video）终止加载时触发。 // oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
• 01.11 13:49:00
  发表了文章 2023-01-11 13:49:00

  史上最详细的DOM事件之拖动事件

  史上最详细的DOM事件之拖动事件 上篇博客讲了DOM的剪贴板事件，这篇博客我们来讲一讲DOM的拖动(DragEvent)事件。 HTMl代码： <img src="../../CSS/0421/car.jpg" draggable="false"> 1 JS代码： var oImg=document.getElementsByTagName("img")[0]; // DragEvent 拖动事件 // ondrag 该事件在元素正在拖动时触发 oImg.ondrag=function(ev){ console
• 01.11 13:42:46
  发表了文章 2023-01-11 13:42:46

  史上最详细的DOM事件之剪贴板事件

  史上最详细的DOM事件之剪贴板事件 上篇博客讲了DOM的表单事件，这篇博客我们来讲一讲DOM的剪贴板（ClipboardEvent）事件。 HTML代码： <div id="box">hello world</div> <p>这是一个段落标签</p> <input type="text" id="text"> 1 2 3 1.oncopy(赋值)事件 var oBox = document.getElementById("box"); var oText=document.getElementById("text");
• 01.11 13:40:03
  发表了文章 2023-01-11 13:40:03

  史上最详细的DOM事件之表单事件

  史上最详细的DOM事件之表单事件 上篇博客讲了DOM的键盘事件，这篇博客我们来讲一讲DOM的表单事件。 HTML代码： <form action=""> <input type="text" autofocus> <br> <input type="text"><br> <input type="search"><br> <input type="reset"><br> <input type="submit"><br> <textarea name="" id="area" cols
• 01.11 13:35:48
  发表了文章 2023-01-11 13:35:48

  史上最详细的DOM事件之键盘事件

  HTML代码： <input type="text" name="" id="text"> <input type="text" name="" id="text2"> 1 2 1.onkeydown事件 var oText=document.getElementById("text"); var oText2=document.getElementById("text2"); // onkeydown 某个键盘按键被按下。 针对所有键 oText.onkeydown=function(event){ co
• 01.11 13:32:21
  发表了文章 2023-01-11 13:32:21

  史上最详细的DOM事件之鼠标事件

  史上最详细的DOM事件之鼠标事件 说到JavaScript的DOM，不得不提的就是DOM事件，当然DOM中事件包含好多，我们先来讲一讲DOM的鼠标事件。 HTMl代码： <h1>01DOM的鼠标事件</h1> <div id="wrap"> <div class="box">onclick</div> <div class="box">oncontextmenu</div> <div class="box">ondblclick</div> <div class="box">onmousedown</div> <div class
• 01.11 13:28:30
  发表了文章 2023-01-11 13:28:30

  JavaScript中DOM节点的增删改查

  JavaScript中DOM节点的增删改查 前面一篇文章我们讲到了DOM节点的查询(遍历)，这篇文章把剩下的增删改一一进行讲解。 HTML代码： <h1>04DOM节点的增删改</h1> <div class="box"> <p class="text1">这是一个段落标签01</p> <p class="text2">这是一个段落标签02</p> <p class="text3">这是一个段落标签03</p> <p class="text4">这是一个段落标签04</p> </div>
• 01.11 13:25:46
  发表了文章 2023-01-11 13:25:46

  JavaScript中DOM节点的查找(遍历)

  JavaScript中DOM节点的查找(遍历) 这篇文章讲一下DOM节点的查找，即DOM节点的遍历。说道遍历大家应该不陌生了，在js中，通过DOM节点的遍历，我么可以通过任意一个元素找到另外的任意一个元素。前期把这个学到位，到了后期开始学习jQuery时会感觉方便很多。 整个DOM中，节点与节点之间的关系只有两种，兄弟(同胞)关系和父子关系。遍历节点用到的属性也主要是这个两类。 HTML代码： <div class="wrap" style="position:relative"> <div class="box"> 盒子01
• 01.11 13:22:24
  发表了文章 2023-01-11 13:22:24

  史上最简单的原生JS实现轮播图效果

  原生JS实现轮播图效果 上篇文章我们说到了怎样利用原生JS实现Tab切换的效果，现在我们来说一下Tab切换的“升级版”。如何利用原生JS实现轮播图效果。如图： 在这里插入图片描述 HTML代码： <div class="box"> <img src="img/0.jpg" alt=""> <!-- <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> --> <div class="

  
• 01.11 13:16:25
  发表了文章 2023-01-11 13:16:25

  原生js实现Tab切换(排他)功能

  原生js实现Tab切换(排他)功能 在前端的面试中，一旦遇到笔试题，基本上都会有Tab切换，今天我们来说一下如何使用原生js实现Tab切换功能。如图： 在这里插入图片描述 HTML代码： <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <ul> <li></li> <

  
• 01.11 13:01:18
  发表了文章 2023-01-11 13:01:18

  通过DOM对HTML文档的元素内容和CSS样式进行操作

  通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到，通过DOM我们可以操作HTMl文档中的任意的元素及属性，文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码： <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">
• 01.11 12:55:18
  发表了文章 2023-01-11 12:55:18

  通过DOM对元素的属性进行获取、设置、移除

  通过DOM对元素的属性进行获取、设置、移除 在DOM的学习中有一个知识点我们一定不可以忽略，那就是DOM中元素的属性。接下来讲解如何让通过DOM对HTML中元素的属性进行获取，设置，以及移除。 HTMl代码： <div class="wrap" id="wrap"> <p id="text" class="text">这是一个段落</p> <ul class="list"> <li class="item">列表01</li> <li>列表02</li> <li>列表03</l
• 01.11 12:51:59
  发表了文章 2023-01-11 12:51:59

  DOM中的node(节点)有关的三个属性--nodeType、nodeName、nodeValue

  DOM中的node(节点)有关的三个属性–nodeType、nodeName、nodeValue 上篇博文我们讲到了如何通过DOM获取HTML文档中的元素，在这里要明白一点，当我们获取到具体的某一个元素的时候这个元素就是一个元素节点。说到节点，我们不可避免的有三个属性很有必要了解一下：nodeType、nodeName、nodeValue。 1.nodeType属性 每个节点都有一个 nodeType 属性，用于表明节点的类型，节点类型由 Node 类型中定义12个常量表示： 常量名 常量(返回)值 节点类型 描述 Node.ELEMENT_NODE 1 Element 代表元素 Nod
• 01.11 12:46:55
  发表了文章 2023-01-11 12:46:55

  最详细通过DOM获取元素的方法

  最详细通过DOM获取元素的方法 上一篇你博文中我们简单的介绍了什么DOM，DOM可以做什么。其中最基本的就是如何通过DOM来获取HTML文档中的元素。这篇文章我们来详细聊一下如何通过DOM获取HTML文档中的元素。 获取HTML文档中的元素从大的方面来区分主要分为两类： 通过元素的标签名，id名等获取。 通过选择器的方法获取 HTML代码： <ul> <li class="item">列表01</li> <li class="item">列表02</li> <li>列表03</li> <li>列表0
• 01.11 12:43:35
  发表了文章 2023-01-11 12:43:35

  简单认识JavaScript中的DOM(文档对象模型)

  JavaScript中的DOM(文档对象模型) // DOM：文档(Document) 对象(Object) 模型(Model) // 通过DOM，可以访问HTML文档的所有元素 // 当网页被加载时，浏览器会创建一个DOM。 // HTML的DOM树。 // DOM 操作 html // 获取元素 // 文本 内容 // 属性 // 节点 增删改查 // DOM 操作 css // style // DOM 事件 // 鼠标事件
• 01.11 12:41:44
  发表了文章 2023-01-11 12:41:44

  简单解析JavaScript中的正则表达式(三)

  简单解析JavaScript中的正则表达式(三) 本片博客主要来和大家讲一下正则表达式实际的应用。 1.正则表达式的范围 [] 中括号用于查找某个范围内的字符： // [abc] 查找方括号之间的任何字符。 // [^abc] 查找任何不在方括号之间的字符。 除去 // [0-9] 查找任何从 0 至 9 的数字。 // [a-z] 查找任何从小写 a 到小写 z 的字符。 // [A-Z] 查找任何从大写 A 到大写 Z 的字符。 // [A-z] 查找任何从大写 A 到小写 z 的字符。 // [adgk] 查找给定集合内的任
• 01.11 12:39:07
  发表了文章 2023-01-11 12:39:07

  简单解析JavaScript中的正则表达式(二)

  简单解析JavaScript中的正则表达式(二) 上篇文章讲解了JavaScript中正则表达式的创建以及怎样在字符串方法中使用。这篇文章主要讲解正则表达式的属性和方法。 1.正则表达式的方法 // test() 测试 检索字符串中的值是否符合匹配的条件 true false var str="hello world"; var reg=/hellO/; console.log(reg.test(str)); // exec() 检索字符串中指定的值。 返回值的索引 没有 返回 null console.log(reg.ex
• 01.11 12:37:08
  发表了文章 2023-01-11 12:37:08

  简单解析JavaScript中的正则表达式对象

  简单解析JavaScript中的正则表达式对象 今天这篇篇博客来和大家讲一下JavaScript中的RegExp对象。 正则表达式：RegExp(Regular Expression)对象，简称正则式。时用来描述字符模式的对象，可以对字符串进行检索，匹配，替换等操作。 1.创建正则表达式 // 字面量 // 语法：var reg1=/表达式/修饰符 var reg=/a/igm; // 构造函数 // 语法：var reg2=new RegExp(表达式,修饰符) var reg2=new RegExp("a","igm"); /
• 01.10 20:12:05
  发表了文章 2023-01-10 20:12:05

  利用JavaScript实现二级联动

  利用JavaScript实现二级联动 要实现JavaScript二级联动效果，首先要确定需要哪些技术： 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码： <!-- <input type="text" id="text"> --> 请选择省份： <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
• 01.10 19:56:09
  发表了文章 2023-01-10 19:56:09

  简单解析JavaScript的Boolean对象

  简单解析JavaScript的Boolean对象 Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false)。 1.Boolean对象的创建 var bool=true;//true var bool2=new Boolean();//false 1 2 注意:当布尔对象没有初始值时或其值为 0，-0，null，""，false，undefined，NaN时，对象值为fasle，其他值都false。这个在后面的其他数据类型转换为布尔类型时有用到。 2.Boolean对象的属性 //
• 01.10 19:52:27
  发表了文章 2023-01-10 19:52:27

  最快掌握JavaScript的Number对象

  最快掌握JavaScript的Number对象 这篇博客主要和大家分享一下JavaScript中Number对象。 一、Number对象 JavaScript中只有一种数字类型，包含整数型和浮点小数型。如下： 1.数字的声明 var num=1; var num2=new Number(10); console.log(num,num2); console.log(typeof num,typeof num2); var num3=new Number("a"); console.log(num3);//NaN var num4=
• 01.10 19:42:36
  发表了文章 2023-01-10 19:42:36

  最快掌握JavaScript的Math对象

  最快掌握JavaScript的Math对象 今天来教大家一个在JavaScript中很重要的对象Math对象，字面意思数学。所以Math对象就是解决数学问题的对象。 1.Math对象的属性 // Math对象用于 解决数学问题 // Math对象没有构造函数 // 属性： // E 返回算术常量 e，即自然对数的底数（约等于2.718）。 console.log(Math.E); // LN2 返回 2 的自然对数（约等于0.693）。 console.log(Math.LN2); // LN10 返回 10 的自然对数（约
• 01.10 19:37:39
  发表了文章 2023-01-10 19:37:39

  JavaScript中Date对象的方法解析

  JavaScript中Date对象的方法解析 上篇文章讲到了JavaScript的Date对象，对Date对象的创建和属性进行了讲解，这篇博客我们来讲一讲Date对象的方法有哪些。 1.获取日期的方法 // 获取当前的日期 var oDate=new Date(); // 方法 描述 // getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 console.log(oDate.getDate()); // getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 c
• 01.10 19:31:01
  发表了文章 2023-01-10 19:31:01

  JavaScript的Date对象的创建和属性

  JavaScript的Date对象的创建和属性 今天我们来学习一下js中的Date对象。Date 对象主要用于处理日期与时间。 1.Date对象的声明/创建 // 1.创建日期 var oDate=new Date(); console.log(oDate); // 2.定义自定义的日期 // new Date(year,month,day,hour,minute,second,millisecond); var oDate3=new Date(2020,5,27,12,0,0); console.log(oDate3);
• 01.10 19:25:31
  发表了文章 2023-01-10 19:25:31

  JavaScript的字符串之HTML包装方法

  JavaScript的字符串之HTML包装方法 前面以前文章我们讲解了字符串的各种方法。这篇文章对字符串的方法进行一些补充。 1.字符串的indexOf()和lastIndexOf()方法的补充 var str='hello world'; // indexOf() lastIndexOf() // 不加第二个参数 console.log(str.indexOf("l");// 2 console.log(str.lastIndexOf("l");// 9 console.log(str.indexOf("l",5));// 9 5之后
• 01.10 19:23:08
  发表了文章 2023-01-10 19:23:08

  JavaScript字符串对象的方法详解

  JavaScript字符串对象的方法详解 前面的博客我们说到了字符串对象的创建，属性及字符串的拼接。现在来详细讲一下字符串的方法。 1.ES6之前的方法 // js字符串的方法 var str="hello"; var str1="world"; // concat() 连接两个或更多字符串，并返回新的字符串。 拼接字符串 console.log(str+str1); console.log(str.concat(str1)); console.log(str);//hello // indexOf() 返回某个指定的字符串值
• 01.10 16:51:14
  发表了文章 2023-01-10 16:51:14

  利用js的数组制作二级联动

  利用js的数组制作二级联动 前面的博客我们讲解js的数组及相关属性和方法，今天我们来说一下如何利用js的数组制作二级联动效果。当然，说到二级联动，跳不过的就是多维数组。 1.多维数组 // 多维数组：数组作为数组的项 // 二维数组 两层数组 // 二维数组的创建 var arr=[1,2,3,4];//一维数组 // 1.字面量方式声明 var arr2=[[1,2,3],[1,2,3],[4,5,6]]; // 2. 采用构造函数 使用 new 关键字 var arr3=new Array([1,2,3],[4,5
• 01.10 16:48:04
  发表了文章 2023-01-10 16:48:04

  JavaScript字符串的拼接和转义字符

  JavaScript字符串的拼接和转义字符 这篇博文主要讲一下字符串的拼接和转义字符的简单使用。 1.字符串的拼接 // js字符串的拼接 + var str="hello"; var str1="world"; console.log(str+str1); // var str=``;//模板字符串 console.log(`${str}${str1}`); // 外单内双 外双内单 var str3='"'; var str4="'"; console.log(str3); doc
• 01.10 16:45:16
  发表了文章 2023-01-10 16:45:16

  JavaScript字符串对象的创建和属性

  JavaScript字符串对象的创建和属性 字符串对象同样是JavaScript的内置对象，用来储存和处理文本。 1.字符串的创建 // 创建字符串 // 1.字面量的方式 "" '' `` var str="hello"; var str1='world'; var str2=`hello China`;//模板字符串 // 2.使用 new 关键字创建 构造函数 var str3=new String("hello Nanjing"); console.log(typeof str);// String
• 01.10 16:43:15
  发表了文章 2023-01-10 16:43:15

  简单解析JavaScript中数组的冒泡排序和选择排序

  简单解析JavaScript中数组的冒泡排序和选择排序 上篇博客我们讲解了数组的sort()方法，这篇博客我们来讲一下数组的另外两种排序方法：冒泡排序和选择排序。其中冒泡排序在前端面试中笔试部分经常会被问到。 1.冒泡排序 冒泡排序：简单解释，就是相邻两元素之间两两比较，比较出大值进行赋值互换，再依次与相邻的元素比较，层层递进互换元素位置，相互赋值，最后得出排序的结果。 在这里插入图片描述 var arr = [100, 20, 9, 3, 22, 111, 28, 55]; // js数组的冒泡排序 // var arr=[1,2,3,4] // 第一层

  
• 01.10 16:36:29
  发表了文章 2023-01-10 16:36:29

  JavaScript数组的简单排序

  JavaScript数组的简单排序 前面的博客分两章分别讲解了数组对象的基本属性和方法，以及数组迭代方法的使用。今天我们再来讲一讲数组的排序问题。 1.数组的sort()方法 说到数组的排序，大家可能第一反应是前面学过一个数组排序的方法sort(),但是使用这个方法时要注意，sort()本身时可以传参数的，如果不传参数，那我们对数组项进行排序时就会按照ASCII字符顺序排序(也可以理解为字典的排序方式)。比如： var arr=["a","A",10,1,20,2]; console.log(arr.sort());//[1,10,2,20,"A","a"] 1

  
• 01.10 16:32:38
  发表了文章 2023-01-10 16:32:38

  JavaScript数组对象的迭代方法详解

  JavaScript数组对象的迭代方法详解 上一篇博客讲到了数组的方法，当然里边比较复杂的就是数组的迭代方法，因为涉及到了回调函数，所以这篇博客我们来详细讲解一下js数组迭代方法的使用。 1.forEach(funcrion(value,index,arr){})：对数组的每一项运行给定函数，这个方法不进行返回，所以一般用于让数组循环执行某方法。 var arr=[1,2,3,4,5,6]; arr.forEach(function(val,index,arr){ console.log(val,index,arr); }) // 其中：
• 01.10 16:27:37
  发表了文章 2023-01-10 16:27:37

  史上最全JavaScript数组对象详解（二）

  JavaScript数组对象详解（二） 上一篇博客我们讲到了JavaScript数组对象的创建，访问和属性，接下来一篇博客主要讲一下JavaScript数组对象的方法及使用。说到数组的方法，主要分为两大部分，一部分是ES6以前的数组方法，一部分是ES6新增的方法。 1.ES6之前的方法 var arr1 = [1, 2, 3]; var arr2 = ["a", "b", "c"]; var arr3 = ["张三", "李四", "王五", "赵六"]; var arr4 = ["a", "b", "c", "a", "b", "c", "a", "b",
• 01.10 16:25:18
  发表了文章 2023-01-10 16:25:18

  史上最详细JavaScript数组对象详解（一）

  JavaScript数组对象详解（一） 今天我们来聊一下JavaScript中的数组对象。什么是数组，字面意思就是数据的组合(分组)，简单来说就是用单独的一个 变量 来储存一系列的值。 比如说，现在有几个人，张三，李四，王五，赵六，如果我想将他们都储存起来需要声明四个变量分别储存。但是当数据有太多个的时候就有些不方便了，这个是后我们就可以使用数组来进行储存。 // 单独将每个名字用变量储存 var name1="张三"; var name2="李四"; var name3="王五"; var name4="赵六"; ...
• 01.10 16:22:14
  发表了文章 2023-01-10 16:22:14

  如何配置SVN的服务器端和客户端（二）

  3.客户端(tortoisesvn)的配置 1.双击安装包，然后点击下一步 在这里插入图片描述 2.直接点下一步 在这里插入图片描述 3.点击install，进行安装 在这里插入图片描述 4.安装结束后，点击finish 在这里插入图片描述 5.安装汉化语言包，双击安装包，然后点击next 在这里插入图片描述 7.安装结束后配置语言，桌面空白位置右键点击，找到tortoisesvn，选择setting，如下图，语言修改为中文 在这里插入图片描述 8.汉化完之后，在桌面空白位置右键单击选择检出，可以修检出的路径，修改路径后点击确定可能会出现下面的警告框，选择永久接受即可 在这里插入图片描述 9

  
• 01.10 16:15:43
  发表了文章 2023-01-10 16:15:43

  如何配置SVN的服务器端和客户端（一）

  如何配置SVN的服务器端和客户端 好些小伙伴儿在开发的时候都会遇到一个比较麻烦的事情，那就是自己开发的东西不太会整理，或者是团队一起开发，有一些东西不太好整合到一起，那这个时候你们就需要一个版本控制(管理)工具了，当然现在程序用到比较多的是GitHub和国内的码云。但是有一个团队协作也很好用的工具叫SVN，SVN是一个开放源代码的版本控制系统，通过采用分支管理系统的高效管理，简而言之就是用于多个人共同开发同一个项目，实现共享资源，实现最终集中式的管理。今天来和大家说一下怎样配置SVN的服务器和客户端。 1.下载SVN服务器端和客户端安装包 服务器端下载地址：https://www.visu