- 博客(34)
- 收藏
- 关注
原创 Sass
语法:注释:多行注释: /* */单行注释: //变量:变量以$开头,$+变量名:变量值;全局变量与局部变量:定义在任何选择器之外的变量称为全局变量,定义在选择器内的变量称为局部变量。要在局部修改全局变量,需要添加!global(sass 3.4版本后可用)默认变量 !default,假如有两个变量重名,下面的变量引用了 !default,则不会覆盖上面的变量。变量特殊用法:用于属性的时候要以#{$变量名}形式使用 $color: #333; // 全局变量 .box.
2021-04-09 20:53:04
107
原创 Gulp_运行环境及使用&&gulp插件
gulp当下最流行的自动化工具,可以自动化完成开发过程中大量的重复工作编译:es6->es5sass->cssless->csscoffeescript->js合并:css,js压缩:css,js,html优化:图片优化准备工作1.安装NodeJS环境2.了解npm命令的使用3.了解nodeJS模块化4.了解gulp安装环境前提是安装了nodeJS环境全局安装gulpnpm install --global gulp说明:
2021-04-08 20:51:11
285
原创 JavaScript_继承与闭包
构造函数,实例对象和原型对象:原型链:原型链原型链:实例与Object原型对象之间的链条称为原型链原型对象构造函数.prototype得出来的对象,万物皆对象,一切对象都存在原型对象(原型)内置原型对象NumberStringArrayBooleanFunctionDateRegExp…扩展内置原型对象添加方法解决兼容问题String.prototype.trim 在IE低版本浏览器中无法使用 if(!String.prototype.
2021-04-08 16:22:33
178
原创 JavaScript_call和apply的使用&&判断数据类型
call:- 格式:父类.call(子类实例,参数1,参数2,参数3...)apply:格式:父类.apply(子类实例,[参数1,参数2,参数3...])实例后面为数组call案例: <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <bu..
2021-04-07 19:53:50
125
原创 JavaScript_正则&&正则案例
正则正则:由一些符号和一些特殊符号组成的一种模式作用:检测字符串是否符合规则的一种模式 定义正则模式: var reg = /正则规则/ var reg = new RegExp(正则规则)正则的元字符\d:表示数字\D:表示非数字\s:表示空格\S:表示非空格\w:表示数字,字母,下划线\W:表示费数字,字母,下划线. :表示换行以外的任意字符正则的限定符主要限定字符出现的次数*:表示符号前面的字符可以出现0-正无穷次+:表示符号前面的字符可以出现1-正无
2021-04-06 19:54:36
264
原创 JavaScript_classList
classList:获取元素class的集合length : class的个数add() : 给元素添加class,是以追加的形式,不会覆盖之前已经存在的classcontains() : 判断元素是否包含指定的class名,返回值为布尔值remove() : 移除指定的class名toggle() : 切换指定的class名,如果存在就将这个class名移除,如果不存在就添加...
2021-04-06 17:46:51
197
原创 JavaScript_阻止浏览器的默认行为
阻止浏览器的默认行为 e.perventDefault(); e.returnValue = false;
2021-04-06 17:42:09
122
原创 JavaScript_事件传播&&事件委托
事件传播事件传播的机制:事件冒泡事件捕获事件冒泡:事件会从触发这个事件的元素开始,往父元素一级一级冒泡触发.事件捕获:事件会从传播路径中最顶层的window开始,往下捕获,知道捕获到真正触发这个事件的元素就停止传播 事件监听:addEventListener('事件类型',事件处理函数,设置事件的传播机制布尔值) 第三个参数为true的时候,这个事件的传播方式为事件捕获 false则为事件冒泡阻止事件传播e.cancelBubble = truee.stopPropagat
2021-04-06 17:36:37
84
原创 JavaScript_键盘事件
键盘事件keydown 按下键盘的时候触发的事件keyup 抬起键盘的时候触发的事件keypress 按下字符键的时候触发的事件注:这些事件只能给一些可以输入内容的元素(input/textarea) 和 document 和 window 绑定btn.onkeydown = function(){ var e = window.event; /* keyCode 得到的是键盘的编码 altKey 判断按下的是否是 alt ctrlKey 判断按下的是否是
2021-04-01 11:51:50
248
原创 JavaScript_DOM
DOMDOM: document object model 文档对象模型,主要提供一些操作文档的属性和方法操作元素节点的属性和方法获取元素的方法:根据id名来获取元素 document.getElementById(‘id名’)返回值:获取的元素根据class名来获取 document.getElementsByClassName(‘class名’)返回值:是一个伪数组,需要通过索引的形式 获取里面的元素根据标签名来获取 document.getElementsByTagName(‘标
2021-03-23 15:11:32
193
原创 JavaScript_BOM
JavaScript的组成JavaScript的组成ECMAScript : js中核心语法BOM: browser object model 浏览器对象模型,主要提供一些操作浏览器的方法和属性DOM: document object model 文档对象模型,主要提供一些操作文档的属性和方法window:BOM范畴中的顶级对象,es中的全局对象es中的全局对象: 当全局定义了一个变量的时候,那么会把这个变量存储在window对象中获取浏览器的窗口尺寸 window.innerWid
2021-03-17 20:27:47
128
原创 JavaScript_date对象&创建固定的时间对象&时间格式化函数&时间差函数
date对象date对象: 提供操作时间的一些方法 var date = new Date(); console.log(date); //当前计算机的时间 Wed Mar 17 2021 17:15:25 GMT+0800 (GMT+08:00) 获取年份: var years = date.getFullYear(); 获取月份: getMonth()得到的月份默认从0开始,一般获取的时候需要+1 var month = date.getMonth()+1; // 获取月份
2021-03-17 19:14:59
288
原创 JavaScript_定时器
定时器间隔执行函数:setInterval() 格式:setInterval ( function ( ) { 需要执行的代码 },时间) 执行的次数:不限次()只要不手动清除这个定时器,它就会一直执行 var timer = setInterval(function(){ console.log(1); },1000);延迟执行函数:setTimeout() 格式:setTimeout(function(){ 需要执行的代码 },时间) 执行的次数:一次 也称炸
2021-03-17 17:12:38
112
原创 JavaScript_math对象
Math对象Math对象,主要是元素js提供的一个对象对象提供一些方法,用来操作数字的方法Math.random() 随机数: 得到一个0-1的随机数Math.round() 四舍五入Math.floor() 向下取整Math.ceil() 向上取整Math.pow(n,m) 求n的m次方Math.sqrt() 开方Math.max() 求一堆数据的最大值,参数不能为数组Math.min() 求一堆数据的最小值,参数不能为数组 console.log(Math.min(1,2,
2021-03-17 16:55:15
96
原创 JavaScript_字符串&&字符串的方法
字符串定义字符串1.字面量定义 : var str = ’ ’ || " " || ``;2.内置构造函数定义 var str = new String(); var str = "1234"; var str = new String(1234) console.log(str[1]); // 2 console.log(str.length);// 4字符串的属性字符串有索引,也有length属性可以通过索引获取字符串中的某个字符字符串是可读不可写(只可以
2021-03-17 16:43:20
667
原创 JavaScript_伪数组转换成真数组
把伪数组转换成真数组ES5的方法:Array.prototype.slice.call(元素对象)ES6的方法:Array.from(元素对象)运用…运算符(扩展运算符)元素对象 = […元素对象]arr = […arr]案例: <div> <input type="checkbox" class="box"> <input type="checkbox" class="box"> <in
2021-03-16 20:26:44
191
原创 JavaScript_数据在内存的存储方式&不同数据类型作为参数的区别
数据在内存中的存储方式栈栈:存储 变量名 和 基本数据类型堆堆:存储 复杂数据类型 var num = 10; var num1 = num; num = 20; console.log(num,num1); //10 20复杂数据类型的存储:当有多个变量指向同一个地址的时候,无论通过哪个变量去修改地址中的数据,其他的变量去使用的时候得到的都是被修改过后的数据(共享同一个地址) var obj = {name: 'aaa'};
2021-03-13 14:53:35
136
原创 JavaScript_对象
数据类型分类复杂数据类型:对象函数数组正则…对象万物皆对象对象的组成:键值对的形式 key:value ==> 属性:属性值每一对键值对用逗号隔开创建对象 var obj = {}; //字面量定义(常用) var obj1 = new Object();//内置构造函数定义创建一个有内容的对象 var obj = { name:'旺旺雪饼', age:'28', }; console.log(obj);...
2021-03-13 14:33:57
116
原创 JavaScript_函数_递归&回调函数
递归递归:一种编程方式直接或者间接调用自身的一种程序包含一种隐式的循环执行一些代码,不需要循环去控制必须要有结束的条件(出口)如果递归中没有结束条件的时候,会造成死递归(一直执行这个递归函数)递归实现5的阶乘 function jc(n){ if(n == 1){ return 1; } return n * jc(--n); } var res = j
2021-03-13 11:27:41
203
原创 JavaScript_常见的事件&获取元素的方法
常见的事件鼠标鼠标事件:利用鼠标去触发的事件1.onclick 单击事件2.onmousedown 鼠标按下事件3.onmouseup 鼠标抬起事件4.ondblclick 鼠标双击事件(两次快速单击事件组成)5.onmouseover 鼠标移入事件6.onmouseenter 鼠标移入7.onmouseout 鼠标移出事件8.onmouseleave 鼠标移出9.onmousemove 鼠标移动事件inputinput事件:在input元素中操作触发的事件1.oninp
2021-03-13 10:19:14
594
原创 JavaScript_函数_this
函数中的thisthis:是函数中的一个关键字this指向一个对象当主动调用函数this的时候,this指向window. function fun() { console.log(this); } fun(); //输出window当用事件驱动程序调用函数this的时候,this指向事件源(即绑定事件的元素) <input type="submit" id="btn"> <script> function fu
2021-03-13 09:48:23
95
原创 JavaScript_函数_预解析
预解析预解析(提前解析,变量提升)提前解析var声明的变量只会预解析变量名(在代码执行之前告诉浏览器,这个变量已经存在,只不过还没有赋值)提前解析 声明式定义的函数声明式定义函数会预解析这个变量,并且给变量复制一个函数地址当出现变量声明和函数同名的时候,只会对函数声明进行提升,变量会被忽略。???? 当声明式定义的函数 的函数名 和 var定义变量名冲突 会预解析声明式定义的函数 预解析的过程: 【1】声明式定
2021-03-13 09:12:02
135
原创 JavaScript_函数_return返回值
return 返回值当定义了函数没有给返回值return的时候,那么函数默认返回undefined.当函数中写了return,但是return后面没有值的时候,返回值也为undefined.return的作用给函数添加返回值:return后面的值就是这个函数的返回值.终止函数的执行,当函数中遇到return的时候,return后面的代码都不会执行.不是每一个函数都需要返回值,当执行函数需要代码的结果进行另一些计算或者操作的时候才需要添加返回值...
2021-03-13 09:11:25
375
原创 JavaScript_函数_参数和作用域
函数的参数形参行参就是写在定义函数的时候括号里面,相当于在函数内部写了一个变量实参实参就是在调用函数的时候传递参数,就是给形参赋值实参给形参赋值的时候,要一一对应赋值参数个数的关系【1】形参和实参个数相等的时候,一一对应【2】当形参的个数 比实参的个数多的时候,多出来的形参的值为 undefined【3】当实参的个数 比形参的个数多的时候,多出来的实参没有形参变量去接收案例 function fun(a, b, c) { console.log(a, b
2021-03-12 20:23:21
268
原创 JavaScript_函数_函数的定义和调用
函数的定义和调用当使用函数的时候,必须有两个阶段:【1】定义阶段 赋值式定义函数(函数表达式) var fun = function(){} 声明式定义函数 function fun(){}赋值式定义函数和声明式定义函数的区别:区别:调用函数的时候,调用位置的关系。声明式定义的函数可以为任何位置调用。赋值式定义的函数,只能再定义之后去调用变量提升:当使用赋值式定义函数的时候,会存在一个变量提升,把变量名提升到代码的最前面,但是并没有把赋值提升,如果在赋值之前调用,变量的值
2021-03-12 19:53:02
225
原创 JavaScript_函数_定义
JS函数定义:JavaScript 函数是被设计为执行特定任务的代码块。JavaScript 函数会在某代码调用它时被执行。作用:把重复功能的代码封装起来,需要使用的时候就调用案例 //打印n行的三角形 function fun(n) { for (var i = 1; i <= n; i++) { for (var j = 1; j <= i; j++) { document.write('*');
2021-03-12 19:36:58
71
原创 JavaScript_语句_循环嵌套
循环嵌套for(){ for(){ }}当执行一次外层循环的时候,i=0会执行5次内层循环 j=0 , j=1 , j=2 , j=3 , j=4i++ i=1 进行第二次外层循环会执行5次内层循环 j=0 , j=1 , j=2 , j=3 , j=4i++ i=2 进行第三次外层循环会执行5次内层循环 j=0 , j=1 , j=2 , j=3 , j=4…当你需要输出的结构是有行和列的时候 一般情况会使用循环嵌套 外层循环决定行,内层循环决定列 for (
2021-03-12 17:50:33
107
原创 JavaScript_语句_分支和循环语句
流程控制语句1. 顺序结构> 代码默认执行的结构,从上到下,从左到右2. 分支结构(选择结构)有多条代码,选择性执行[1] if 分支 1.单分支结构 if(条件){ 条件满足(true)的时候就会执行这里的代码 } 案例: var age = 6; if (age >= 7){ console.log('你可以上小学了'); }] 2.双分支结构 if(条件){ 条件满足执行这里代码 }else{ 条件
2021-03-12 17:36:57
143
原创 JavaScript_基础_运算符
JS中的运算符1.关系运算关系运算返回的是布尔值 < > == <= >= === != !==== 和 ===的区别:==:只判断值是否相等,不管数据类型为什么,只要值相等就可以===:数据的值要相等,数据类型也要相等,才会返回true! =:只有值不相等的时候,才会得到true!= =:当数据的值不相等,或者数据的数据类型不相等的时候都会得到true2.赋值运算把右边的值赋值给左边的变量 = += -= *= /=
2021-03-12 16:49:13
130
原创 JavaScript_基础_数据类型转换
数字的进制转换计算机只识别二进制的数据,只输出十进制的数据二进制数据以0b 或者 0B开头的数据称为二进制数据二进制数据只能由0 1组成八进制数据:以0o 或者 0O开头八进制数据只能由0-7组成十六进制数据以0x 或者 0X开头只能由0-9 a-f之间的数据组成进制转换 二进制转十进制: 0b101010 ↑↑↑↑↑↑ 543210 1*2^1 + 1*2^3 + 1*2^5 = 42 十六进制转十进制: 0xab 11*16^0 + 12*16^
2021-03-12 15:38:06
143
原创 JavaScript_基础_数据类型
数据类型的分类基本数据类型数字(number)字符串(string)布尔值(boolean)未定义(undefined)空(null)复杂(复合)数据类型数组对象函数正则…基本数据类型数字数字在控制台打印出来的颜色是蓝色字体 var num = 123;字符串,用引号引起来的数据 在控制台打印出来的颜色是黑色 var str = '123';布尔:只有两个值 : true || false var flag = true; 4
2021-03-12 14:56:48
200
原创 JavaScript_基础_变量
变量变量:相当于一个容器,用来存储计算结果 或者 存储一个值.定义一个变量: 用var声明 var number = 20;语法:var 变量名 = 值 || 计算结果变量名规则一个变量只能存储一个值变量名严格区分大小写变量名由数字,字母和下划线组成变量名首字母不能以数字开头变量名不能是关键字和保留字...
2021-03-12 14:40:12
90
原创 JavaScript_基础_调试输出
document.write('js代码写入的内容'); 把内容写入文档 alert(1); 普通弹窗 console.log(2); 输出到控制台 prompt('请输入名字'); 有输入提示的弹窗 返回值:如果点击确定的时候,返回值为输入的内容 点击取消的时候返回值为null; confirm(1); 确认弹窗 点击确定返回true 点击取消返回false...
2021-03-12 14:32:23
106
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人