一、JavaScript的组成
常见的事件
mouseenter鼠标事件 mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发之所以这样，就是因为mouseenter不会冒泡
location对象
offset 与 style
| 书写方式 | 行内式 内嵌式 引入式 |
| 注释 | 单行// 多行/* */ |
| 警示框 | alert(‘没有哦’)浏览器弹出 |
| 输出 | console.log()浏览器控制台输出 |
| 输入框 | prompt('请输入') |
| 变量 | var全局 let块级部 const函数 |
| 数据类型 | Mumbrer数字默认0 Boolean布尔默认false String字符串默认'' Undefined未定义 Null空 |
| 绑定是否为数字类型 | isNaN(x)为数字 false 不为true |
| 字符串拼接 | " "+" " |
| 检测x的变量类型 | console.log( typeof x) |
| 转换为字符串 | String()强制转换 toString() 拼接转换 join('分隔符') |
| 转换为数字型 | parseInt 整数型 paresFloat 浮点型 Number 强制转换 '12'-0算法隐式转换 |
| 转换为布尔 | Boolean()函数 |
| 或 与 非 | || && ！ |
| if语句 | if(条件1){ 满足执行} else if{条件2}elss{ } |
| 三元表达式 | a<1? :a=2:a=6 条件？表达式1 : 表达式2 |
| switch语句 | switch(表达式){ case value1: 执行语句1;break; case value2: 执行语句2;break; default: 最后执行;} |
| 循环语句 | for(let i=1 ; i<=100; i++ ) |
| do while循环 | do{ 条件为ture}while(条件) |
| continue关键字 | 退出本次循环 执行i++ |
| break关键字 | 退出整个循环 |
| 遍历数组 | for for( key in arr) forEach(item,index,arr) |
| 函数 | function(实参1,实参2){} 调用function(实参1,实参2) |
| 立即执行函数 | (function( ){ } ) ( ) 或者( function ( ) { } ( ) ); |
| 函数this指向 | 谁调用this指向谁 |
| 箭头函数 | ()=>{ }没有this指向 |
| return返回值 | return 需要返回的结果 |
| arguments伪数组 | 为实参 具有数组的length 属性 无pop() push()等方法 |
| 对象 | let obj ={ name:''你好啊"} |
| new关键字 | let obj = new Object(); |
| 构造函数对象 | function Star(){} new Star(); |
| js内置对象 | Math数字 Date时间 Array数组 String等 查文档使用 |
| 年月日星期 | getFullYear() Month() Date() Day() |
| 时分秒 | getHours() Minutes() Seconds() |
| 检查是否为数组 | instanceof Array |
| 添加数组元素 | push()数组后面加 unshift()数组前面追加 |
| 删除数组 | pop()删除最后一个 shift()删除第一个 |
| 数组排序 | arr.reverse()倒序 sort()冒泡排序 |
| 连接多个数组 | arr1.concat(arr2) |
| 数组截取 | arr.slice(第几个开始,选几个) |
| 数组删除 | arr.splice(第几个开始,删除几个) |
| 查找元素的索引号 | arr.indexOf('第一个开始') obj.indexOf(需要找的字符,第几关开始)找字符串对象 arr.lastIndexOf(最后开始找)找字符串只找第一个匹配的 str[index]获取指定位置处的字符 |
| 字符串操作 | concat(str1,str2)连接字符串 substr(start,length)从start位置开始(索引号) , length 取的个数重点记住这个 slice(start, end)从start位置开始，截取到end位置，end取不到(他们俩都是索引号) substring(start, end)从start位置开始，截取到end位置，end取不到基本和slice相同但是不接受负 toUpperCase0I/转换大写toLowerCase0/转换小写 replace('被替换的字符,‘替换为的字符) 字符转换为数组split('分隔符") |
| 获取DOM元素 | document.getElementById( 'time " );获取id为time document.getElementgByTagName( "li');获取li元素集合 document.getElementsByClassName( " box " );类名获得 document.queryselector( " .box") #box li; document.queryselectorAll( " .box") ;获取所有的.box |
| 事件三要素 | 事件源 事件类型 事件处理程序 获取 注册 执行 |
| innerText和innerHTML的区别 | 不识别标签去掉空格换行 识别标签保留空格换行 |
| 修改样式属性 | this.style.width（需要修的样式） = '250px' element.className=‘类名’类名样式操作 |
| 节点操作 | parentNode最近的父节点 childNodes,children所有子节点 children[0]第一个 children.length-1最后一个 常用 firstChilde第一个子节点 lastChilde最后一个子节点 first lastElementChild返回第一 最后个子节点元素 |
| 兄弟节点 | nextElementsibling上一个兄弟元素 previousElementsibling下一个兄弟元素 |
| 创建元素节点 添加元素 | createElement('li') ul(父).appendChild(li 子)插入节点后面追加 添加节点 ul父.insertBefore(child，指定元素)追加 |
| 删除节点 | 父元素.removechild ( child)删除子节点 |
| 复制节点 | 父元素.cloneNode(false) false浅拷贝 true深拷贝 |
| 注册事件 | .addEventListener('click',function( ){ }) |
| 删除事件 | .removeEventListener('什么事件',匿名函数) |
| 事件对象 | .addEventListener('click',function(e){ }) |
| 事件对象属性和方法 | e.target返回触发事件的对象 e.srcElement返回触发事件的对象 e.type返回事件的类型比如click mouseover不带on e.cancelBubble该属性阻止冒泡非标准ie6-8使用 e.returnValue该属性阻止默认事件(默认行为)非标准ie6-8使用比如不让链接跳转 e.preventDefault()该方法阻止默认事件(默认行为)标准比如不让链接跳转 e.stopPropagation()阻止冒泡标准 |
| 事件委托 | 父元素添加影响子元素 |
| 页面加载事件 | window . onload = function (){} window .addEventListener ( "load" ,function(){}); |
| win窗口宽度 | window.onresize = function(){ } window . addEventListener ("resize" , function (){); window.innerwidth当前屏幕宽度 |
| 定时器 | setTimeout(function(){ } ,2000); |
| 清除定时器 | clearTimeout (清除定时器的名称) clearInterval(名称) |
| 不断调用定时器 | setlnterval(function(){},1000)每一秒执行一次 |
| 偏移量 | offsetTop上 offsetLeft左 offsetHeight高 offsetWidth宽 |
| 类class和对象 | class Star{ constructor(共有属性) fn(){ 方法 } } new Star(参数) |
| 类继承 super() | class Father{} class son extends Father{}super调用父类的构造函数 |
| 原型对象 | prototype |
| 原型对象this指向 | this指向的是实例对象 |
| 筛选数组 | arr.filter(function(数组当前项的值,索引,本身)) |
| 查找满足条件的元素 | arr.some(function(value){ return value=='red'}) |
| forEach与some | 在forEach里面return不会终止迭代 在some里面遇到return true就是终止遍历迭代效率更高 |
| 去除字符串空格 | .trim() |
| 对象方法 | object.defineProperty(目标对象, 需要改的属性,目标属性拥有的特性) |
| 改变this指向 | call()继承 apply()数组 bind() call apply都会执行 bind不会 |
| 闭包 | 一个函数可以访问另外一个函数的局部变量 延长变量使用范围 |
| 递归函数 | 自己调用自己 |
| 拷贝 | 浅拷贝只拷贝一层 深拷贝每一级别都拷贝 |
| 正则表达式 | new RegExp(/123/) ^开始 $结束 []包含 菜鸟工具 - 不止于工具 |
| 正则表达式替换 | replace(/ 激情 | 狗 / g, '**') /g全局/i忽略大小写/gi全+忽 |
| 扩展运算符 数组arr | ...arr 扩展运算符可以将数组拆分成以逗号分隔的参数序列 |
| 合并数组 | [...arr1,...arr2] arr1.push(...arr2) 并且可以将伪数组转换真数组 |
| 转换真数组 | Array.from(arr1,()=>{方法 }) arr1必须属性 方法可不写 |
| 查找符合的成员 | arr.find(item,index)=>{ return item.id ==2} arr.find(item => item.id == 2) |
| 查找符合第一个的位置 | ary .findIndex ( (value , index) => value > 9) ; |
| 查找是否包含 | arr.includes(2) 返回布尔值 |
| 模板字符串 | ` 可以解析变量 可以换行 可以调用函数` |
| 查字符串 | str.startsWitho('以这个开头') endsWitho('以这个结尾')返回布值 |
| 字符串重复 | ‘x’.repeat (3) x重复三次 |
| set 创建数据结构 | const s1= new Set(); 它类似于数组，但是成员的值都是唯一的，没有重复的值。s1.size里面总计的数据 |
| set遍历 | s1.forEach(value =>{ console.log(value)}) |
978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
