JavaScript
文章平均质量分 55
向上的二狗
这个作者很懒,什么都没留下…
展开
-
less基础(24)
less它是CSS预编译语言,和它类似的还有sass/stylus...css是标记语言,不是编程语言,没有类、实例、函数、变量等东西;而less等预编译语言就是让css具备面向对象编程的思想;但是浏览器不能直接识别和渲染less代码,需要我们把less代码预先编译为正常的css后,再交给浏览器渲染解析;less的编译 在开发环境下编译(产品没有开发完,正在开发中,这个是开发环境) 导入less.js即可//=>rel="stylesheet/less" 这块有修改原创 2021-09-19 21:48:49 · 149 阅读 · 0 评论 -
基于事件委托实现无限级折叠菜单(42)
事件委托(事件代理) 一个容器中,很多后代元素的点击行为都要处理一些事情,之前的思路是把需要操作的元素一一获取,然后再一一做事件绑定,在不同的方法中完成不同的需求;现在不用了,基于事件的冒泡传播,我们可以只给容器的CLICK绑定一个方法,这样不管以后点击的是容器中的哪一个后代元素,都会通过事件的冒泡传播机制,把容器的CLICK行为触发,把绑定的方法执行,我们在方法执行的时候,根据事件对象中的事件源(EV.TARGET)来做不同的业务处理即可,这种机制即使事件委托机制 1.容器中很多...原创 2021-10-13 01:13:44 · 130 阅读 · 0 评论 -
放大镜案例(39)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>放大镜案例</title> <link rel="stylesheet" href="css/reset.min.css"> <link rel="stylesheet" href="css/magnifier.css"></head><b.原创 2021-10-12 21:35:05 · 103 阅读 · 0 评论 -
事件委托(41)
* 事件委托(事件代理)* 利用事件的冒泡传播机制,如果一个容器的后代元素中,很多元素的点击行为(其它事件行为也是)都要做一些处理,此时我们不需要在像以前一样一个个获取一个个的绑定了,我们只需要给容器的CLICK绑定方法即可,这样不管点击的是哪一个后代元素,都会根据冒泡传播的传递机制,把容器的CLICK行为触发,把对应的方法执行,根据事件源,我们可以知道点击的是谁,从而做不同的事情即可...原创 2021-10-12 20:00:25 · 66 阅读 · 0 评论 -
鼠标跟随案例(40)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>鼠标跟随案例</title> <link rel="stylesheet" href="css/reset.min.css"> <style> .container { position: relative; .原创 2021-10-11 17:48:15 · 134 阅读 · 0 评论 -
事件的基础理论(38)
* [DOM事件]** 1.什么是事件?* 事件就是一件事情或者一个行为(对于元素来说,它的很多事件都是天生自带的),只要我们去操作这个元素,就会触发这些行为* “事件就是元素天生自带的行为,我们操作元素,就会触发相关的事件行为”** 2.事件绑定:给元素天生自带的事件行为绑定方法,当事件触发,会把对应的方法执行* oBox.onclick=function(){}** 3.元素天生自带的事件?* [鼠标事件]* cli...原创 2021-10-11 10:42:47 · 261 阅读 · 0 评论 -
完整精准版选项卡案例(37)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>珠峰培训</title> <link rel="stylesheet" href="css/reset.min.css"> <style> /*==选项卡样式(用户决定)==*/ .tabBox { mar.原创 2021-10-10 15:26:03 · 113 阅读 · 0 评论 -
渐隐渐现轮播图以及插件的封装(36)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>珠峰培训</title> <link rel="stylesheet" href="css/reset.min.css"> <link rel="stylesheet" href="css/banner-fade.css"></head>...原创 2021-10-05 22:16:49 · 165 阅读 · 0 评论 -
左右运动版轮播图案例(35)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" href="css/reset.min.css"> <link rel="stylesheet" href="css/banner.css"></head><bo...原创 2021-10-02 00:23:23 · 181 阅读 · 0 评论 -
动画基础知识(33)
动画的基础知识*动画*1.CSS3动画(能用C3解决的动画绝对不用JS,因为C3动画性能好)*+transition过渡动画*+animation帧动画*+transform是变形不是动画(经常依托某一种动画让元素在一定时间内实现变形效果)**2.JS动画*+定时器*+requestAnimationFrame(JS中的帧动画)*+所谓的canvas动画就是JS基于定时器...原创 2021-09-30 16:58:03 · 153 阅读 · 0 评论 -
回调函数原理和实战(34)
*回调函数:把一个函数A当做实参专递给另外一个函数B,在B方法执行的时候,把A执行了,我们把这种机制叫做“回调函数机制”**1.根据需求回调函数可以被执行N多次*2.不仅可以把回调函数执行,还可以给传递的回调函数传递实参,这样在回调函数中设置形参(或者使用ARG)接收即可*3.还可以改变回调函数中的THIS指向*4.可以在宿主函数(它在哪执行的,它的宿主函数就是谁)中接收回调函数执行的返回结果*...// let fn = (...原创 2021-09-30 15:03:24 · 167 阅读 · 0 评论 -
定时器基础知识(32)
*定时器:设定一个定时器,并且设定了等到的时间,当到达执定的时间,浏览器会把对应的方法执行**[常用定时器]*setTimeout([function],[interval])*setInterval([function],[interval])**[function]:到达时间后执行的方法(设置定时器的时候方法没有执行,到时间浏览器帮我们执行)*[interval]:时间因子(需要等到的时间MS)*...原创 2021-09-29 18:23:19 · 478 阅读 · 0 评论 -
瀑布流(31)
*瀑布流*效果:多列的不规则排列,每一列中有很多内容,每一项内容的高度不定,最后我们按照规则排列,三列之间不能相差太多高度**实现:首先获取需要展示的数据(假设有50条,共三列),把50条数据中的前三条依次插入到三列中(目前有的列高有的列低),接下来在拿出三条数据,但是本次插入不是依次插入,而是需要先把当前三列按照高矮进行排序,哪个最矮,先给哪个插入内容,以此类推,把50条数据都插入即可<!DOCTYPE html><html><...原创 2021-09-28 13:14:00 · 76 阅读 · 0 评论 -
jQuery源码解析(30)
/* * 类库、插件、UI组件、框架 * 1.类库:JQ/ZEPTO... 提供一些真实项目中常用的方法,任何项目都可以把类库导入进来,调取里面的方法实现自己需要的业务逻辑 * 2.插件:具备一定的业务功能,例如,我们可以封装轮播图插件、选项卡插件、模态框插件等(插件规定了当前这个功能的样式结构,把实现功能的JS进行封装,以后想实现这个功能直接导入插件即可) swiper\iscroll\jquery-dialog\jquery-drag\jquery-datepicker\ECharts.原创 2021-09-27 16:34:23 · 1308 阅读 · 0 评论 -
生成四位验证码案例(16)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>四位验证码</title> <link rel="stylesheet" href="css/reset.min.css"> <style> #codeBox { display: inline-block; .原创 2021-09-13 18:43:15 · 321 阅读 · 0 评论 -
DOM树(17)
dom tree 当浏览器加载HTML页面的时候,首先就是DOM结构的计算,计算出来的DOM结构就是DOM树(把页面中的HTML标签像树桩结构一样,分析出之间的层级关系)<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>珠峰培训</title></head><body><div class="box" id...原创 2021-09-14 19:09:14 · 158 阅读 · 0 评论 -
GIT & NODE 基础知识(18)
NODE安装Node.js 推荐大家使用LTS稳定版本,把安装包下载下来后,直接一路下一步安装即可(最好把它安装到C盘 [默认盘符] ,记好安装目录) 如果安装不了,我们可以把别人安装完成的内容拷贝过来,通过修改环境变量完成安装 高级系统设置 -> 环境变量 -> 系统变量 -> Path,把原有的变量值备份一份,在原有的基础上增加node的安装目录即可2.验证安装是否成功WIN + R => 打开运行窗口 => 输入cmd => 打开DOS窗口原创 2021-09-15 19:20:47 · 432 阅读 · 0 评论 -
GIT工作原理及操作(19)
//扩展知识交换两个变量的数据//方法一var a=10;var b=20;var c=a;a=b;b=c;//方法二var a=10;var b=20;a=a+b;b=a-b;a=a-b;//方法三var a=10;var b=20;[a,b]=[b,a]GIT工作原理及操作当我们在本地创建一个git仓库后,我们可以基于这个仓库管理我们的代码git的工作流程每一个git仓库都划分为三个区域 工作区:编辑代码的地方 暂存区:临时...原创 2021-09-16 00:48:52 · 80 阅读 · 0 评论 -
变量提升(20)
<!-- 一般都把JS放到BODY的末尾 1.为啥? 2.放在HEAD中可不可以? 如何放到HEAD中也可以实现出放到BODY末尾的效果? 3.SCRIPT标签中有两个属性:defer / async,这两个属性是做什么的-->var a = 12;var b = a;b = 13;console.log(a);var ary1 = [12, 23];var ary2 = ary1;ary2.push(100);console.log(ary.原创 2021-09-16 15:33:53 · 74 阅读 · 0 评论 -
闭包(21)
闭包及堆栈内存释放/** JS中的内存分为堆内存和栈内存* 堆内存:存储引用数据类型值(对象:键值对 函数:代码字符串)* 栈内存:提供JS代码执行的环境和存储基本类型值** [堆内存释放]* 让所有引用堆内存空间地址的变量赋值为null即可(没有变量占用这个堆内存了,浏览器会在空闲的时候把它释放掉)** [栈内存释放]* 一般情况下,当函数执行完成,所形成的私有作用域(栈内存)都会自动释放掉(在栈内存中存储的值也都会释放掉),但是也有特殊不销毁...原创 2021-09-17 15:34:34 · 114 阅读 · 0 评论 -
面向对象、原型链(22)
单例设计模式的理论模型/**单例设计模式(singletonpattern)*1.表现形式*varobj={*xxx:xxx,*...*};*在单例设计模型中,OBJ不仅仅是对象名,它被称为“命名空间[NameSpace]”,把描述事务的属性存放到命名空间中,多个命名空间是独立分开的,互不冲突**2.作用*=>把描述同一件事务的属性和特征进行“分组、归类”(存储在同一个堆内存空间...原创 2021-09-18 22:13:26 · 89 阅读 · 0 评论 -
一周练习题复习补充(23)
17.var fullName = 'language';var obj = { fullName: 'javascript', prop: { getFullName: function () { return this.fullName; } }};console.log(obj.prop.getFullName());//=>this:obj.prop =>obj.prop.fullName =&g原创 2021-09-20 23:47:30 · 67 阅读 · 0 评论 -
正则(25)
正则基础*正则:是一个用来处理字符串的规则*1.正则只能用来处理字符串*2.处理一般包含两方面:*A:验证当前字符串是否符合某个规则“正则匹配”*B:把一个字符串中符合规则的字符获取到“正则捕获”**学习正则其实就是在学习如何编写规则,每一个正则都是由修饰“元字符”、“符”两部分组成//=>1.创建正则的两种方式// let reg1 = /^\d+$/g;//=>字面量方式// let reg2 ...原创 2021-09-21 22:58:58 · 174 阅读 · 0 评论 -
ES6基础语法(27)
数组和对象的解构赋值// let ary = [12, 13, 14, 23, 24, 13, 15, 12];// let max = Math.max.apply(null, ary);// console.log(max);//=>基于ES6中的展开运算符完成// let max = Math.max(...ary);// console.log(max);*解构赋值:按照一个数据值的结构,快速解析获取到其中的内容*1.真实项目中一般都是针对于数组或者对...原创 2021-09-23 19:47:02 · 136 阅读 · 0 评论 -
原型深入(26)
*函数有三种角色*1.普通函数*->堆栈内存释放*->作用域链**2.类*->prototype:原型*->__proto__:原型链*->实例**3.普通对象*->和普通的一个OBJ没啥区别,就是对键值对的增删改查**=>三种角色间没有什么必然关系/*function Fn() { ...原创 2021-09-24 14:37:52 · 70 阅读 · 0 评论 -
DOM盒子模型(28)
JS盒子模型属性*JS盒子模型属性*=>在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的)**client*top*left*width*height**offset*top*left*width*height*parent...原创 2021-09-26 13:28:22 · 195 阅读 · 0 评论 -
跑马灯案例(29)
在LONGLONGAGO以前,实现跑马灯用的是MARQUEE1.不好实现无缝衔接2.开始显示内容的时候后有空白3.性能消耗大4.目前MARQUEE标签基本上被舍弃了...现如今跑马灯都是基于JS动画或者CSS3动画实现的<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>珠峰培训...原创 2021-09-26 18:35:02 · 171 阅读 · 0 评论 -
函数部分补充(15)
函数中的返回值function fn(n, m) {//=>形参:入口 //=>函数体 var total = 0; total = n + m; console.log(total);}fn(10, 20);//=>实参:给形参传递的具体值/*var a = 12;fn(a, 1 === 1 ? 10 : 0);//=>实参一定是值,即使我们写的是变量或者表达式,也是把变量或者表达式计算的结果作为值传递给形参变量*/.原创 2021-09-13 15:33:09 · 109 阅读 · 0 评论 -
Math中常用的方法(14)
JS中的数学函数MathMath称为数学函数,但是它属于对象类型的typeof Math =>"object"之所以叫做数学函数,是因为Math这个对象中提供了很多操作数字的方法Math中提供的常用方法abs:取绝对值ceil/floor:向上或者向下取整round:四舍五入sqrt:开平方pow:取幂(N的M次方)max/min:获取最大值和最小值PI:获取圆周率random:获取0~...原创 2021-09-12 22:53:03 · 242 阅读 · 0 评论 -
字符串处理案例(13)
真实项目中的需求1.时间字符串格式化有一个时间字符串 “2018-4-4 16:26:8” ,我们想基于这个字符串获取到 “04月04日 16时26分”/* * 1.基于SPLIT按照空格把字符串拆成两部分(数组中的两项) * 2.左边这一部分继续以SPLIT按照中杠来拆 * 3.右边这一部分继续以SPLIT按照冒号来拆 * 4.把需要的信息拼接在一起即可(拼接的时候不足十位的补零) */function addZero(val) { return val < 1..原创 2021-09-12 21:43:11 · 184 阅读 · 0 评论 -
字符串常用的方法(12)
JS中关于字符串的一些细节知识在JS中所有用单引号或者双引号包起来的都是字符串,每一个字符串是由零到多个字符组成var str = 'zhufengpeixun';str.length ->字符串长度str[0] ->'z'str[str.length-1] ->'n'str[100] ->undefined//=>字符串中的每一个字符都有一个自己对应位置的索引,也有类似于数组一样的length代表自己的长度//=>循环遍历字符串,输出每原创 2021-09-12 16:13:13 · 130 阅读 · 0 评论 -
数组去重(11)
数组去重/*==数组去重==*/var ary = [1, 2, 3, 2, 2, 3, 4, 3, 4, 5];/*--解决方案一--*//* * 1.依次拿出数组中的每一项(排除最后一项:最后一项后面没有需要比较的内容) * 2.和当前拿出项后面的每一项依次比较 * 3.如果发现有重复的,我们把找到的这个重复项在原有数组中删除掉(splice) *///=>i<ary.length-1:不用拿最后一项for (var i = 0; i < ary.lengt.原创 2021-09-12 14:42:13 · 79 阅读 · 0 评论 -
关于JS数组常用方法的剖析(10)
关于JS数组常用方法的剖析数组也是对象数据类型的,也是由键值对组成的var ary = [12,23,34];/* * 结构: * 0:12 * 1:23 * 2:34 * length:3 */1. 以数组作为索引(属性名),索引从零开始递增2. 有一个LENGTH属性存储的是数组长度ary[0] 获取第一项ary[ary.length-1] 获取最后一项数组中每一项的值可以是任何数据类型的//=>多维数组var ary = [ {原创 2021-09-11 23:14:27 · 135 阅读 · 0 评论 -
JS中数据类型转换汇总(9)
JS中数据类型转换汇总JS中的数据类型分为【基本数据类型】数字 number字符串 string布尔 boolean空 null未定义 undefined【引用数据类型】对象 object普通对象数组对象 (Array)正则对象 (RegExp)日期对象 (Date)数学函数 (Math) ...函数 function真实项目中,根据需求,我们往往需...原创 2021-09-11 19:38:26 · 80 阅读 · 0 评论 -
鼠标滑过高亮选中(8)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>珠峰培训</title> <link rel="stylesheet" href="css/reset.min.css"> <style> .box { margin: 20px auto; wid.原创 2021-09-11 10:28:03 · 265 阅读 · 0 评论 -
选项卡案例(7)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>选项卡案例</title> <link rel="stylesheet" href="css/reset.min.css"> <style> .tabBox { margin: 20px auto; .原创 2021-09-09 19:36:19 · 135 阅读 · 0 评论 -
函数数据类型(6)
函数在JS中,函数就是一个方法(一个功能体),基于函数一般都是为了实现某个功能var total=10;total+=10;total=total/2;total=total.toFixed(2);//=>保留小数点后边两位(数字由一个方法toFixed用来保留小数点后面的位数)....在后续的代码中,我们依然想实现相同的操作(加10除以2),我们需要重新编写代码var total=10;total+=10;total=total/2;total=total.t原创 2021-09-09 16:48:59 · 425 阅读 · 0 评论 -
隔行变色小案例(5)
基于CSS3实现隔行变色<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>隔行变色</title> <style> * { margin: 0; padding: 0; } ul, ol { list-s.原创 2021-09-09 09:50:56 · 152 阅读 · 0 评论 -
JS基础语法:判断、字符串拼接、数据类型检测、循环(4)
JS中的判断操作语句1、if / else if / elsevar num = -6;if(num>10){ num++; //=>num=num+1 num+=1 在自身的基础上累加1}else if(num>=0 && num<=10){ num--;}else{ num+=2;}console.log(num); //=>-4只要有一个条件成立,后面不管是否还有成立的条件,都不在判断执行了var nu原创 2021-09-09 01:07:13 · 781 阅读 · 0 评论 -
JS的运行机制:堆栈内存(3)
var a = 12;var b = a;b = 13;console.log(a); //=>12var obj1 = {n: 100};var obj2 = obj1;obj2['n'] = 200;console.log(obj1.n); //=>200/**浅分析JS的运行机制*1、当浏览器(它的内核\引擎)渲染和解析JS的时候,会提供一个供JS代码运行的环境,我们把这个环境称之为“全局作用域(global/windowscope)”...原创 2021-09-08 16:30:14 · 167 阅读 · 0 评论