js笔记

luckyJian
145 阅读10分钟

1、运算符运算顺序

  1. ()小括号大于一元运算符
  2. 一元运算++ -- ！ 大于算数
  3. 先算数*（乘法）/（除法）后算+（加）-（减）大于关系运算
  4. 关系运算>(大于) >=（大于或等于） <（小于） <=（小于或等于）大于相等运算
  5. 相等运算 ==（等于）!=（不等于）===(觉得等于)!==（绝对不等于）大于逻辑运算
  6. 逻辑运算先运算 &&（且或and）后运算||(或)大于赋值运算
  7. =（ 赋值运算）大于逗号
  8. ,（逗号）

2、流程控制

  1. if(){}表达为真执行大括号否则不执行
  2. if(){}else{}语句只能执行其中一个
  3. if()else if(){}else{}多个判断只能执行一个
  4. 三元运算符执行返回为true输出表达式一的值否则输出表达二的值
  5. switch(输入值){ case --- break; default}执行思路执行case匹配成功执行里面语句，否则执行default

3、循环

  1. fro(初始化变量；条件表达式；操作表达式){循环体}一般用来计算
  2. 双层for循环逻辑是内循环完成所有后，再外层执行
  3. while()循环当条件满足才会停止循环，需要一个计时器
  4. do{}while()先执行循环体，在执行条件满足再执行循环体，否则退出，至少执行一次
  5. continue 跳过本次循环，继续执行下次循环
  6. break退出整个循环

4、数组

  1. array 一组数据的集合，用逗号隔开
  2. 获取数组具体元素通过索引array[0]，索引从0开始
  3. array.length动态监测数组长度
  4. 新增数组元素，可以通过length来实现，也可以通过修改索引追加数组元素
  5. 不要直接给数组名赋值否则数组消失
  6. 冒泡排序执行顺序从左到右比较，外层循环length-1，里层循环length- i -1，内部交换2个变量，前一个和后面一个数组进行元素比较

5、函数

  1. 声明函数function,可以大量调用
  2. 函数可以接受实参和行参，执行过程先调实参再去调用行参，多个参数用逗号隔开
  3. 函数的返回值通过return实现值返回，且后面不会进行执行
  4. arguments中求任意数组的最大值
  5. 利用函数关键字进行自定义函数命名
  6. 全局变量和局部变量，全局变量能在全局使用，局部变量只能在局部变量
  7. 全局变量比较消耗内存，浏览器关闭才能销毁
  8. 局部变量函数执行完成即销毁，比较节省资源
  9. 作用域链：内部函数查找外部作用域链，站在目标出发，一层一层往外查找
  10. 预解析先按预解析排列好，再按照作用域链查找结果

对象

  1. 对象是是由属性和方法组成
  2. 对象创建采取键词对形势，键：属性，多个函数方法使用逗号隔开，方法冒号后面跟的是一个匿名函数
  3. 使用对象方法 调用对象方法采用对象名.属性，调用属性的另一种方法可以使对象['属性名']

构造函数 构造函数语法格式

function 构造函数(){
    this.属性 = 值；
    this.方法 = function(){}
}
new 构造函数数名();
  1. 构造函数首字母需要大写
  2. 构造函数不需要return就能返回结果
  3. 构造函数必须使用new，调用一个函数就能创建对象
  4. 构造函数方法必须使用this指向
  5. new执行过程 new 构造函数可以创建一个空对象 this会指向这个空对象 执行构造函数的代码，给这个对象添加方法和属性 返回这个对象
  6. 对象可以通过for...in遍历

内置对象

  1. JavaScript提供的内置对象有Math、Date、Array、String等
  2. 查阅对象的MDN:developer.mozilla.org/zh-cn/
  • math不是一个构造函数，不需要new math中的randown返回一个随机小数，创建一个随机数
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
  • Date是构造函数，必须需要new来调用 使用date没有参数返回系统当前时间 参数的常用类型包括数字型和字符串类型
d=parseInt(总秒数/60/60/24)计算天
h=parseInt(总秒数/60/60%24)计算小时
m=parseInt(总秒数/60%60)计算分数
s=parseInt(总秒数%60)计算秒数
  1. 检查是否为数组instanceof Array 用来检测是否为数组
  2. push添加一个元素到数组元末尾，返回结果都是新数组长度
  3. unshift在数组前面添加数组，返回结果都是新数组长度
  4. pop删除数组最后一个元素，不跟参数，一次只能删除一个元素
  5. shift可以删除数组元素的第一个元素，每次只能删除一个元素
  6. 翻转数组reverse
  7. 冒泡排序sort
numbers.sort(function (a, b) {
  return a - b;
});
  1. indexof返回数组索引号（值，位置查找），从前查找只会获取第一个索引号元素，找不到会返回-1
  2. lastindexof返回数组索引号，从后查找只会获取第一个索引号元素，找不到会返回-1
  3. tostring将数组转换成字符串
  4. join可以使用任意分隔符
  5. concat连接任意两个字符串
  6. splice从第几个开始删除数组

数组对象

  1. 字符串类型不可变，不要使用拼接值
  2. charAt(index)根据位置返回字符串
  3. chatcodeAt(index),返回字符串AsCII值
  4. str[index]h5 5. 数据类型简单数据类型，string，number,null,boolen,undefind
  5. 简单数据类型放在栈里，用十六进制，复杂类型数据放堆里面

web Apls

  1. wwb APl是浏览器提供的一套操作浏览器功能和页面元素
  2. web apl一般都有输入输出
  3. 获取节点
  4. dom是文档对象模型，叫dom树
  • 一个页面就是一个文档，dom中使用document表示

  • 元素，页面中所有标签都是元素，dom中使用element表示

  • 节点，网页中所有内容都是节点，dom中使用node表示

  • 文档执行是从上往下加载

  • document.getElementById()根据id获取节点,返回的是一个对象

  • document.getElementsByTagName()根据节点获取，返回也是一个对象以伪数组形式存储，如果没有节点返回undefind
  • document.getElementsByName()根据calss获取节点，返回的也是一个对象，h5新增
  • document.querySelector()指定选择器第一个元素，需要加选择器符号
  1. 事件类型 onclick
  2. 事件处理程序
const bent = document.querySelector('#btn')
const time = document.querySelector('.tims')
 btnon.onclick= function(){
tim.innerText='2000000'
}
  • #innerText改变元素内容不识别标签，innerHtml可以识别html标签标准的w3c标准
  • value改变输入框值，disabled禁止点击
  • this.disabled=true,this指向函数调用者
  • 获取焦点onfoucus获取焦点，失去焦点onblur
  • this.className = 'css样式'，变更需要绑定css样式
  • getAttribute('属性')是获取程序员自己添加的属性，querySelector获取的是元素属性
  • removerAttirbute('属性')删除某个元素
  • 节点操作parentNode获取父节点操作
  • chidNode获取子节点，包含元素节点和文本节点
  • children只获取元素的子节点 -实际开发使用children[参数]解决获取某一个节点
  1. 创建节点
document.appendChild('li')
li.appendChild('ul')
  • insertBefore()从后往前发布
  • appendChild()从前往后发布
  • removeChild()删除节点
  • document.write()是直接将内容写入内容流，文档流执行完毕会导致页面全部重绘
  • createElement()创建多个源效率比较低
  • innerHtml()创建多个元素效率更高（不用采取拼接字符串，采取数组形式拼接）

注册事件

  1. addEventListener('')事件监听方式,里面的时间是个字符串，需要价格引号，同一个时间同一个时间可以加多个监听器
  2. removeEventListener('click','事件方法')移除点击事件方法
  3. dom事件流的三个阶段分为捕获阶段、当前目标阶段、冒泡阶段
  4. e.target返回的是触发事件对象元素
  5. preventDefault()阻止跳转dom标准方式
  6. 阻止冒泡stopPropagation()
  7. contextmenu阻止选中，selectstart阻止选中
  8. clientx可视窗口X的坐标clienty可视窗口y的坐标
  9. pageX文档流的x多坐标，pagey文档流的y坐标
  10. mousemove()鼠标每次移动都会触发事件
  11. onkyup弹起触发，onkydown按下触发，onkypress不能识别功能键

Bom

  1. bom包含dom
  2. Window对象是顶级对象
  3. Window.load,等页面所有元素加载完成才会执行，包括dom、图片、flash、css等
  4. window.DOMCoententLoaded,只要dom加载完毕，就能执行，比load加载快
  5. setTimeout(回调函数，延时时间)，Window调用可以省略，调用时间默认是毫秒，省略默认是0，可以直接调用函数，页面存在很多定时器时用名字标识,clearTimeout()停止定时器 7.setInterval(回调函数，延时时间)定时器与setTimeout不同，会反复调用函数，clearInterval()停止定时器

js执行机制

  1. js是单线程进程，同步和异步，前任务执行完在执行后面任务，异步多个任务共同执行
  2. 同步任务，都存在主执行栈中，异步任务存在任务队列中（消息队列中）
  3. 执行机制是先执行主执行栈中的任务，主执行栈执行完成后再调用回调函数中的异步任务
  4. 由于主线任务会不断重复获取任务执行、再执行，这种机制被叫做（event loop）

location对象

  1. href(网址)host(主域名)/post/search（参数）/hash
  2. location.search获取？及后面字符串
  3. location.assign()，跳转按钮可以记录后退
  4. navigation获取浏览器属于手机还是电脑
  5. forworld页面实现后退，go()也能实现页面前进后退
  6. offse获取div盒子宽高
  7. offset与style的区别，style只能获取行内样式表，offset可以得到任意样式表，更改样式值用style，获取用offset
  8. scroll拖动滚动就出触发事件
  9. mouseenter只有经过自身盒子才会触发，mouseover经过自身经过子盒子都会触发

移动端

  1. toush事件
  2. toushstart触摸事件
  3. toushmove移动事件
  4. toushend离开事件
  5. tousches正在触摸所有事件的列表
  6. targatouches正在触摸当前元素列表
  7. changedtouche手指发生改变的列表
  8. e.preventDefault阻止屏幕默认滚动
  9. transitionend监听是否过度完成
  10. classlist类名
  11. classlist.add()添加类名
  12. classlist.remove()删除类名
  13. classlist.toggle()切换类名
  14. 解决移动端300毫毛问题，两种方法设置不允许缩放、封装记录触摸时间方法

本地存储

  1. window.sessionStorage最大存储5m,生命周期为关闭浏览器窗口，同一面数据共享键值对方式存储
  2. window.localStorage最大存储20m,不同页面可以进行调用

jQuery jquery效果地址htmleaf.com 是jquery名称juqery对dom对象进行了包装，dom对象不能等同于jqueryjuqery对象可以通过数组或者get进行转化为dom对象，是jquery名称 juqery对dom对象进行了包装，dom对象不能等同于jquery juqery对象可以通过数组或者get进行转化为dom对象，90[0].paly(),().get(),play()juqery修改属性().get(),play() juqery修改属性('节点').css('修改内容') ().mousover鼠标经过().mousover鼠标经过 ().parent()查找父类 ().childrn()子代选择器().childrn()子代选择器 ().sibings() 兄弟选择器 ().find()后台选择器().find()后台选择器 ().show（）显示元素 ().hide()隐藏元素().hide()隐藏元素 ().on多事件绑定，也可以实现事件委托，可以用未来动态创建事件绑定 ().one事件只能触发一次().one事件只能触发一次 ().off()触发解除 .extend()数据拷贝，会覆盖前数据，目标属性不冲突会会进行合并如果.extend()数据拷贝，会覆盖前数据，目标属性不冲突会会进行合并 如果符号冲突和自身定义的，我们可以使用jQuery,也可以使用noConflict()释放，我们可以使用jQuery,也可以使用noConflict()释放符号控制权 图片懒加载jQ22.com 地图地址：echarts.apache.org

avatar
文章
阅读
粉丝