![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
JavaScript
kino2046
这个作者很懒,什么都没留下…
展开
-
GIT:版本控制
什么是版本控制?版本控制是指对软件开发过程中各种程序代码、说明文档等文件的变更进行管理,它将追踪文件变化,记录文件的变更时间、变更内容、甚至变更执行人进行记录,同时对每一个阶段性变更(不仅仅只是一个文件的变化)添加版本编号,方便将来进行查阅特定阶段的变更信息,甚至是回滚什么是Git?人工版本控制器通过人工...原创 2020-03-19 15:53:28 · 139 阅读 · 0 评论 -
封装获取元素$、css、获取样式
function$(cssSelector){varels=document.querySelectorAll(cssSelector);returnels.length>1?els:els[0];};functioncss(el,attr,val){if(val===undefined){retu...原创 2019-09-14 23:43:39 · 141 阅读 · 0 评论 -
JavaScript-输出内容 document .write( )
document.write()可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。第一种:输出内容用""括起,直接输出""号内的内容。<script type="text/javascript"> document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出。</script>...原创 2018-08-27 14:09:01 · 2624 阅读 · 0 评论 -
console.log-打印-alert-弹出-用来调试
我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。语法:alert(字符串或变量); 看下面的代码:<script type="text/javascript"> var mynum = 30; alert("hello!"); alert(...原创 2018-08-27 14:16:09 · 2550 阅读 · 0 评论 -
获取元素id或者CSS选择器
获取元素id或者CSS选择器: 1. document.getElementById("idName");a.通过指定id获取元素b.返回第一个符合条件的元素c.如果获取一个不存在的元素,则返回nulld.只有document下有存在getElementById,id是当前页面总唯一的 2. parent.querySelector("CSS 选择...原创 2019-08-27 19:48:20 · 595 阅读 · 0 评论 -
classList 类数组
classList 类数组 [ ]下标 元素的第几个class名字 length 返回类列表中类的数量,该属性是只读的 varx = document.getElementById("myDIV").classList.length; value className add('name') 给元素添加一个 clas...原创 2019-09-01 13:57:37 · 563 阅读 · 0 评论 -
标识符命名规则-关键字和保留字
关键字:[关键字]https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#%E5%85%B3%E9%94%AE%E5%AD%97 - 当前语法中正在使用的单词保留字:[保留字]https://developer.mozilla.org/zh-CN/docs/We...原创 2019-09-01 13:45:20 · 302 阅读 · 0 评论 -
JS 中两种操作属性的方法.和[' '] / 常用 JS 属性 / 注意事项及常见问题
. 点运算符 .style[ ] 方括号运算符 [style]常用 JS 属性 - id - className - value - style - background - color - width - height - …… - cssText - innerHTML...原创 2019-08-27 21:13:27 · 179 阅读 · 0 评论 -
style操作 / cssText / innerHtml / tagName / harf / src
JS中两种操作属性的方法1 点 . (代表“的”) 元素.属性box.onclick = function(){box.style.width='300px'};2 方括号[ ] 元素['属性'] 比较好,可修改box['onclick'] = fu...原创 2019-09-01 11:45:01 · 389 阅读 · 0 评论 -
字符串 / 数组 / length长度 / null空值
由一对双引号号或单引号包起来的0个或者多个字符组成的串" "或' 'alert(1+1); //2alert('1'+1); //11alert('1'+'1'); //11数据类型: 数字类型 number 字符串: 包在一对引号之间的 0 到 多个字符 , 字符串连接: 如果 + 碰到了字符串,就会做一个连接功能,把 ...原创 2019-08-28 12:41:38 · 1143 阅读 · 0 评论 -
switch判断 / if / 布尔值 / 比较运算符 / 逻辑运算符 / && 与 / || 或 / ! 非
switch语句语法具有穿透性,会执行到底,要加break中断 switch(表达式 || 变量){ case value1: console.log('满足1的条件'); break;case value2: ...原创 2019-08-28 13:40:56 · 3286 阅读 · 0 评论 -
for,forEach数组字符串 / 对象for...in / 对象取值for...of / 循环里用this / 函数不可以用i要自定义索引 / break打破 / continue持续
for(初始值;结束条件;循环变化值或自增){执行语句};初始值-->判断-->执行语句-->循环变化值-->判断-->执行语句-->判断-->跳出循环for(var i = 0; i < *.length; i++){用this代表触发当前事件的元素}for里用了一个函数,里面可以用ifor(var i=0;i<aIn...原创 2019-08-30 13:51:20 · 876 阅读 · 0 评论 -
想建立“匹配”“对应”关系,就用自定义属性-索引值-btn[ i ].index = i
重点:1、添加索引值的作用:建立匹配、对应的关系。 比如:使每一个按钮对应数组里的每一张图,arrImg[this.index]. 2、不要在for循环的函数里面使用i. 3、添加索引值的方法aBtn[i].index=i;//索引值 给每一个li添加了自定义属性index为i,它的作用是一旦和其他数组相匹配,就可以找到相应数组里的东西aBtn[0].abc=...原创 2019-09-01 14:56:47 · 361 阅读 · 0 评论 -
while前测试循环 / do while后测试循环 / 和for循环的差别
for循环:更适合已知执行次数的情况,例如:我们要获取数组中的每一位的值while循环:更适合未知执行次数的情况while前测试循环语句 先判断条件,后执行代码while(判断条件){ // 需要循环的代码}var num = 0;while(num<10){ num+=2; console...原创 2019-09-09 15:23:25 · 1977 阅读 · 0 评论 -
三目运算(三元运算):( 判断条件? 条件成立返回的结果: 条件不成立返回的结果 )
三目运算(三元运算):( 判断条件? 条件成立返回的结果: 条件不成立返回的结果 )console.log(2>1?'a':'b') //返回avar onOff = true;icon.src =(onOff?'链接a':'链接b')...原创 2019-09-01 13:42:10 · 1577 阅读 · 0 评论 -
+ 加法 / - 减法 / *乘法 / /除法 / %取摸 / 取反运算 /隐式类型转换规则
如果加号两侧的操作数有其中任何一个是字符串(String)类型的,这时候+ 起到的是字符串拼接作用alert('1' + 10); //110作为加法运算,注意以下几点: - Number类型 - 如果左右两侧的 操作数 都是数值,那么作为正常的加法进行运算 alert(1...原创 2019-09-04 13:22:34 · 645 阅读 · 0 评论 -
%取模取余运算 / 管道符丨
javascript取模运算是一个表达式的值除以另一个表达式的值,并返回余数。取模在js里就是取余数的意思。a%b //是求余数;a/b //是求商;Math.abs(x) //是求x的绝对值;12除以5=2,余数是2,即5*2+2=12,所以12%5=27除以3=2,余数是1,即3*2+1=7,所以7%3=1...原创 2019-09-01 13:43:44 · 2767 阅读 · 0 评论 -
递增递减++ / 赋值运算符 / 大于小于 / 相等操作符 / 运算符优先级
递增递减运算符前置型:把运算符写到变量的前面 ++num1后置型:把运算符写到变量的后面 num2++单独对一个操作数使用 递增或递减 不和别的发生计算,是没有关系的,结果都是一样的 一旦需要和别的发生计算: 前置型:num1基础上,进行+1的操作,然后和2进行相加 ...原创 2019-09-04 14:09:45 · 2261 阅读 · 0 评论 -
ECMAScript数据类型 / typeof检测类型
ECMAScript 数据类型- 基本类型(原始类型,简单类型,存值类型): number、string、boolean、null、undefined、Symbolnumber 数字 运算string 字符串 拼接boolean 布尔值 true 真 / false 假null 空值undefined 未定义Symbol 唯一的 ...原创 2019-09-05 23:21:17 · 158 阅读 · 0 评论 -
JS当中小数运算不精准 / toFixed(n) 省略小数点后面几位
不建议使用小数做运算 var num1 = 0.1; var num2 = 0.2; var num3 = num1 + num2; console.log(num3) // 0.30000000000000004计算机 在做小数运算时产生的误差保留小数后2位toFixed...原创 2019-09-05 23:23:23 · 673 阅读 · 0 评论 -
parseInt转换为整数 / parseFloat小数 / Number数字 / String转成字符串 / Boolean布尔值
强制数据类型转换1.强制转换为数字parseInt(string, radix) 将数据转换为整数返回 - 第一个参数接受的是个字符串也就是我们要转换的数据 - 第二个参数 基数,也可以理解为 标注出我们要转换的这个字符串是几进制的数字parseFloat(string) 转换成浮点数(也就是小数)Number(val) 将数据转...原创 2019-09-05 23:30:18 · 1518 阅读 · 0 评论 -
function命名函数 / 匿名函数-函数表达式 / 事件调用&非事件调用 / 匿名函数包( )自执行 / return返回值
函数在js当中一等公民(很重要)声明函数-命名函数functionname(){//花括号,写的是函数执行语句alert('他来了')}调用函数name()匿名函数-函数表达式varfn=function(){...原创 2019-09-08 22:54:55 · 225 阅读 · 0 评论 -
不定参arguments求和取最大 / push()数组添加新元素 / 形参&实参 / 传值&传址 / 案例8-封装选项卡
什么是参数函数当中有参数( )就是用来传递参数的形参&实参functionfn(n){ //n形参形式上的参数- 可以理解为变量名 alert(n)};fn(5) //5实参实际传递的参数值传值和传址 vara=12;...原创 2019-09-08 23:37:42 · 240 阅读 · 0 评论 -
getComputedStyle获取非行间样式-currentStyle兼容方法验证浏览器
<bodyclass="body"><div></div><script>vardiv=document.querySelector('div');//console.log(div.style.width);行间样式获取非行间样式-不兼容...原创 2019-09-09 00:07:00 · 155 阅读 · 0 评论 -
JS 预解析机制(变量提升 Hoisting) / var的提升和function的提升 / 作用域(scope) / 作用域链 (scope chain) / 打断点 / dir展开对象属性
JS预解析机制(变量提升Hoisting)变量提升(Hoisting)被认为是,Javascript中执行上下文(特别是创建和执行阶段)工作方式的一种认识扩展:从概念的字面意义上说,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中var的提升:...原创 2019-09-09 00:35:46 · 202 阅读 · 0 评论 -
闭包 / 全局污染 / 作用域
闭包:形式:函数嵌套函数概念:子函数可以使用父函数作用域中局部变量,但是父级不能访问子级https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures函数对象可以通过作用域链相互关联起来,函数体内的数据(变量和函数声明)都可以保存在函数作用域内,这种特性在计算机科学文献中被称为“闭包”...原创 2019-09-09 13:14:46 · 328 阅读 · 0 评论 -
this当前执行代码的环境对象 / call、apply修改this指向 / bind绑定this指向
this当前执行代码的环境对象-全局环境-函数(运行内)环境在函数内部,this的值取决于函数被调用的方式-扩展:严格模式(usestrict)下function的this指向 "严格模式"体现了Javascript更合理、更安全、更严谨的发展方向this 指向:1.函数外this指向windo...原创 2019-09-09 13:15:47 · 141 阅读 · 0 评论 -
ECMAscript流程控制(顺序、分支、循环)
程序中的三种基本流程结构1.顺序结构 // 代码按照顺序一条条执行,从上至下,一条路走到黑2.分支结构 // 执行的时候,可以根据条件进行选择,条件越多对应的结果越多,分值也就越多 if else3.循环结构 // 重复的做一件事情,如果不给条件,就会无限执行,可以限制重复的次数 for循环...原创 2019-09-14 12:00:33 · 175 阅读 · 0 评论 -
定时器 / setTimeout延迟 / setInterval间隔 / clearTimeout、clearInterval清除定时器 / 定时器管理 / 定时器的问题
定时器的作用:每隔一段时间或者延迟一段时间,执行一段指定的代码。定时器的分类: 1.延迟定时器 setTimeout (timeout超时)2.间隔定时器 setInterval (interval间隔)清除(关闭)定时器: clearTimeout(index);clearInterval(index);定时器管理...原创 2019-09-14 13:16:26 · 2175 阅读 · 1 评论 -
日期对象Date / 获取系统时间 / 设置日期对象 / 时间戳
日期对象一个和日期有关的对象,用来处理日期和时间,是由js已经提供给我们的,我们成为内置对象传入参数1.如果没有任何参数,会根据系统设置的当前时间来创建一个Date对象2.至少提供两个参数,其余的参数均会默认为1或者03.通过函数直接调用返回的是String,通过new调用的是Object4.通过第三种方式设置的值,一旦超出会进行自动计算获取系统时间...原创 2019-09-14 23:39:42 · 768 阅读 · 0 评论 -
JSON = '{"key":value}' 轻量级的数据交换格式/ JSON.parse()转对象 / JSON.stringify()转字符串
JSONJSON是一种轻量级的数据交换格式。因为语言种类繁多,且不同语言对于数据有不同的定义,例如:php中的数组,分为两种形式,一种:索引数组,这个与我们JS中的数组类似;还有一种,关联数组,它更像是我们JS中的对象,但是在php中他们都是数组。JSON='{"key":value}';JSON是一个字符串,所以有'单引号',key一定要加双引号,value可以不加引号。va...原创 2020-03-16 17:52:22 · 394 阅读 · 0 评论 -
Math数学操作 / ceil向上取整 / floor向下取整 / random随机数 / round四舍五入 / max / min / abs绝对值
Math 对象Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()。ceil-天花板向上取整得到一个比当前值大的整数或者和当前值一样的整数floor-地板向下取整得到一个比当前值小的整数或者和当前值一样的整数round-四...原创 2020-03-16 17:52:27 · 353 阅读 · 0 评论 -
递归-在函数内部调用自己 / 递归封装 / 递归执行流程 / 栈的特点 / 尾递归
递归在函数内部调用自己function fn (){ fn();}数组扁平化:把多层嵌套的数组中的内容都取出,变成一维的数组思路:比较繁琐递归-封装递归执行流程栈数据存储结构,这些数据都被放在内存中。特点,先进后出,后进先出(Last In First Out)栈溢出...原创 2020-03-16 17:51:16 · 821 阅读 · 0 评论 -
ES6新增-1:let声明 / const常量 / let解构赋值 / ...展开运算符 / repeat重复
let和var的差异1.let允许声明一个在作用域限制在块级中的变量、语句或者表达式,块级作用域{} var声明的变量只能是全局或者整个函数块的2.let不能重复声明3.let不会被预解析手册地址:https://developer.mozilla.org/zh-CN/docs/Web/Java...原创 2020-03-16 17:52:46 · 414 阅读 · 0 评论 -
ES6新增-2:Set对象 / Map对象 / =>箭头函数
Set对象 new Set([iterable])Set对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。Set中的元素只会出现一次,即 Set 中的元素是唯一的。Set相关属性与方法-size属性-clear()、delete()、has()、add()手册地址:https://developer.mo...原创 2020-03-16 17:52:50 · 429 阅读 · 0 评论 -
Babel兼容IE编译器
Babel是一个JavaScript编译器,用来兼容IE手册地址:https://www.babeljs.cn/Babel基本语法方法原创 2020-03-16 17:53:25 · 880 阅读 · 0 评论 -
DOM (document object model) 文档对象模型
DOM(documentobjectmodel)文档对象模型,javascript的组成部分DOM树DOM节点1.节点分类a.元素节点:每个HTML元素-属性节点:HTML元素的属性b.文本节点:HTML元素内的文本-注释节点:注释<!----...原创 2020-03-17 20:10:22 · 122 阅读 · 0 评论 -
DOM操作-1:attributes属性 / getAttribute获取 / setAttribute设置 / removeAttribute移出 / hasAttribute / 自定义属性
DOM属性操作注意.和[ ]都是ECMAScript中,对象的属性操作,对象属性的值会被存在内存中,想要直接获取存在文档中属性,或者想把一个属性设置在文档中我们需要使用DOM的属性操作只要操作了innerHTML元素的所有子元素上,存在内存中的事件和相关的属性都会丢失。如果希望元素的某些属性在操作了父级的innerHTML之后,还存在就把这个属性加在DOM中...原创 2020-03-17 20:12:03 · 816 阅读 · 0 评论 -
DOM操作-2:createElement创建节点 / appendChild添加 / insertBefore添加前 / replacChild替换 / removeChild / cloneNod
createElement 创建节点语法:elementdocument.createElement("tagName")参数:tagName标签名称返回值:创建好的节点appendChild 添加节点el.appendChild(node)在元素的末尾添加一个子级insertBefore 在旧节点前添加节点 el.inse...原创 2020-03-17 20:15:06 · 899 阅读 · 0 评论 -
DOM操作-3:元素的尺寸获取:offset可视 / client不含边框 / scroll内容高度 / getBoundingClientRect()元素距离可视区 / 表格相关操作
offset1.offsetWidth可视宽度width+padding+border2.offsetHeight可视高度3.offsetLeft距离定位父级的left坐标4.offsetTop...原创 2020-03-17 20:15:42 · 273 阅读 · 0 评论