js基础知识

标签：标签 基础知识 获取 事件 var div js 节点

1. JS有三种方式

• 行内式
  • <a javascrip="JS代码"></a>
  • <div onclick="fn()"></div>
• 内嵌式 => <script>JS代码</script>
• 外链式 => 外部引入的方式

2. JS的数据类型

• 基本数据类型
  • number,string,null,undefined,boolean
• 复杂数据类型(引用数据类型)
  • 函数
  • 对象
  • 数组
• 运算符
  • 算术运算符 => +,-,*,/,%
  • 赋值运算符 => =,+=,-=,*=,/=,%=
  • 比较运算符 => >,>=,<,<=,==,===,!=,!==
    • == => 比较的内容,进行隐式类型的转换
    • === => 比较的内容
  • 逻辑运算符 => &&,||,!
a && b => 当a为false的时候,后的b就不用管了
    a || b => 当a为true的时候,后面的b也不用管了
  • 自增自减
    • ++,--
    • a++ => 先赋值,后运算
    • ++a => 先运算,后赋值

1. if => if语句,if/else语句,多重if语句
2. Switch
3. 三元运算符(三目运算符)
   boolean类型?'为true的执行这里:为false的执行这里'
var res = 'boolean类型?为true返回的结果:为false的返回结果'
4. 数据类型的转换

• 直接拼接一个字符串
• +转换成数字
• parseInt => 123.123 => parseInt只认得数字

1. while
2. do_while
3. for
4. break => 终止当前循环
5. continue => 停止这一次循环,继续一下次循环

• 函数
  • 匿名函数
  • 赋值式函数(声明式函数)

  var fn = function(){}
  

  • 普通的函数

  function fn(){}
  

• 函数的四种情况

  • 无参无返

  • 无参有返

  • 有参无返

  • 有参有返

  • 形参和实参

  function fn(a,b){//形参
  
  }
  fn(1,2);//实参
  

• return
  • 返回阻止代码在函数当中往后走
  • return a 在返回值后面写一个数据,可以返回一个数据函数调用者
• arguments
  • 我们马上就不再使用了
• 预解析
  • 对var关键字声明的变量进行提升 => 只提升变量
  • 对var关键字声明的函数进行提升 => 值提升函数名
  • 对整个函数进行提升
• 递归函数 => 函数自己调用自己
• 对象
  • 创建对象 => var obj = {}
  • 修改对象属性
    • 点语法 => 有则修改,无则添加
    • 中括号语法

    var obj= {
        name:"张三"
    }
    obj[name] => "张三"
    var key = 'name1'
    obj[key] => 
    

  • 删除对象的属性
  • 遍历对象

数组

1. 冒泡排序
2. 选择排序
3. 核心点 => 数组的方法
   • 7个改变原数组的方法
     • push,pop,shift,unshift,splice,reverse,sort
   • 5个不改变元素的方法
     • concat,join,indexof,lastindexOf,slice
   • 7个高阶数组方法
     • forEach,map,every,some,find,findIndex,reduce,filter
4. 字符串的方法() => 百度查找,能看懂,能会用就可以
   • slice,split,trim,toUpperCase,toLowerCase => 这三个,一定要背下来
   • charAt,chartCodeAt,toUpperCase,toLowerCase,substr,substring,concat,indexOf,lastIndexOf,repeat,replace,endsWith,
     其他的 => 百度查找,能看懂,能会用就可以
5. 时间对象

• 获取时间
  • set=>设置
  • get=>获取

  //1. 创建时间对象
  var d = new Date();
  //获取年
  var yea = d.getFullYear()
  //获取月 => 获取到的是从0~11之间,0表示的1月份,11表示12月,所以我们需要+1
  var mon = d.getMonth()+1
  //获取日
  var day = d.getDate()
  //获取时
  var hou = d.getHours()
  //获取分
  var min = d.getMinutes()
  //获取秒
  var sec = d.getSeconds()    
  //获取周几
  var week = d.getDay()
  

• 事件戳

var d1 = +new Date()
var d2 = new Date().getTime()
var d3 = new Date().valueOf();
console.log(Date.now());

• 数学方法

random => 获取随机数
round => 四舍五入
ceil => 向上取证
floor => 向下取整
abs => 求绝对值
sqrt => 开平方
pow => 求幂次方
max => 求最大值
min => 求最小值
PI => 求π
toString    => 转换进制的
toFixed     => 保留小数点

• 定时器
  • 一次性定时器 => setTimeout(function(),时间)
  • 循环定时器 => setInterval(function(),时间)
  • 给定时器取名
  • 关闭定时器
    • 关闭一次 => clearTimeout(定时器名)
    • 关闭永久 => clearInterval(定时器名)
• 同步异步
  • 同步就是代码只能从头到尾的执行
  • 异步可以让代码不一定从头到尾的执行
  • 同步会阻塞，异步非阻塞

BOM

window可以省略不写的

• 获取浏览器的窗口的宽和高
  • 获取浏览器的窗口的宽 => innerWidth
  • 获取浏览器的窗口的高 => innerHeight
• 浏览器的事件
  • 加载事件 => onload
  • 窗口改变事件 => onresize
  • 滚动条事件 => onscroll
• 弹出层
  • 弹出框 => alert()
  • 输入框 => prompt()
  • 确认框 => confirm()
• location对象
  • location.href => 输入一个网址
  • location.reload => 刷新
• history对象
  • forward
  • back
  • go
    • go(1) => 前进一页
    • go(-1) => 后退一页
    • go(0) => 刷新
• 浏览器滚动到
  • scrollTo("")
  • scrollTo({})
• 浏览器卷出的高度
  • var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
• 标签页
  • open => 打开一个标签页
  • close => 关闭一个标签页
• storage => 类似于我们前端一个数据库
  • localStorage
    • 存储 => localStorage.setItem(key,value)
    • 获取 => console.log(localStorage)
    • 删除 => localStorage.remove(key)
  • sessionStorage
    • 存储 => sessionStorage.setItem(key,value)
    • 获取 => console.log(sessionStorage)
    • 删除 => sessionStorage.remove(key)
  • 特点,不能存储对象
  • localStorage可以永久性的存储,除非人为删除,或者是使用localStorage.removeItem来进行删除
  • sessionStorage,当我们浏览器关闭的时候,他会自动删除掉

DOM

1. 获取元素
   • ID可以直接获取 => 返回的单个
   • document.getELementById()通过ID来获取的方式 => 返回的是单个
   • document.getElementsByClassName() 根据类名来获取 => 返回的是多个
   • document.getElementsByTagName() 根据标签名来获取 => 返回的是多个
   • document.querySelector() 根据选择器来获取 => 返回的是单个,或者是多个当中第一个
   • document.querySelectorAll() 根据选择器来获取 => 返回的是多个
2. 操作元素的属性
   • 原生属性
     • 设置 => 标签名.id = "wenyuan"
     • 获取 => 标签名.id
   • 自定义属性
     • 设置 => setAttribute("key","value")
     • 获取 => getAttribute("key")
     • 删除 => removeAttribute("key")
   • dataset
     • 设置 => 标签.dataset.abc = 'wenyuan'
     • 获取 => console.log(标签.dataset.abc)
     • 删除 => delete 标签.dataset.abc
     • 弊端 => 将驼峰命名会-进行隔开,将大写修改成小写
3. 操作元素的类名
   • 标签.className
     • 设置 => 标签.className='abc'
     • 获取 => console.log(标签.className)
     • 追加 => 标签.className += ' abc'
   • 标签.classList
     • 设置 => 标签.classList.add('abc')
     • 删除 => 标签.classList.remove("ABC")
     • 切换 => 标签.classList.toggle("ABC") =>有就删除,没有就添加
4. 操作元素的样式
   • 行内
     • 设置 => 标签.style.color= 'red'
     • 获取 => console.log(标签.style.color)
   • 非行内(只能获取,不能设置)
     • window.getComputedStyle[标签].样式
5. 操作元素的内容

• innerHTML => 识别HTML标签
  • 设置 => 标签.innerHTML = "wenyuan"
  • 获取 => console.log(标签.innerHTML)
• innerText => 不识别HTML标签
  • 设置 => 标签.innerText = 'wenyuan'
  • 获取 => console.log(标签.innerText)
• value => 一般是针对文本框
  • 设置 => 标签.value = 'wenyuan'
  • 获取 => console.log(标签.value)

6. 节点

• 节点的属性

/* 
            文本节点      元素节点    注释节点    属性节点
nodeType      3             1           8          2
nodeName     text          标签大写   comment      key
nodeValue 文本内容\n换行    null     注释的内容     value
*/

• 操作节点1

获取所有的子节点    => `div.childNodes`
获取所有的子元素    => `div.children`

获取所有的父节点    => `div.parentNode`
获取所有的父元素    => `div.parentElement`

获取哥哥节点        => `div.previousSibling`
获取哥哥元素        => `div.previousElementSibling`

获取弟弟节点        => `div.nextSibling`
获取弟弟元素        => `div.nextElementSibling`

获取第一个节点      => `div.firstChild`
获取第一个元素      => `div.firstElementChild`

获取最后一个节点    => `div.lastChild`
获取租后一个元素    => `div.lastElementChild`

获取所有的属性      => `div.attributes`

• 操作节点2

创建节点         => `div.createTextNode()`
创建元素         => `div.createElement()`
追加节点         => `div.appendChild(儿子)`    
插入节点         => `div.insertBefore(新儿子,旧儿子)`     
删除节点         => `div.remove()`
删除元素         => `div.removeChild(儿子)`
修改元素         => `div.replaceChild(新儿子,旧儿子)`
克隆元素         => `div.cloneNode(true/false)`

事件

1. DOM0
   只能绑定一个事件

示例

//绑定
div.onclick = function(){

}
//解绑
div.onclick = null;

2. DOM2
   可以绑定多个事件

示例

//绑定一个匿名事件
div.addEventListener("click",function(){})
//绑定一个具名函数
div.addEventListener("click",fn)
//解绑
div.removeEventListener("click",fn)

常见的事件

1. 鼠标事件

• click => 单击事件
• dblclick => 双击事件
• contextmenu => 右键事件
• mousedown => 鼠标按下
• mouseup => 鼠标抬起
• mousemove => 鼠标移动事件
• mouseover => 鼠标移入
• mouseout => 鼠标移出
• mouseenter => 鼠标移入
• mouseleave => 鼠标移出

2. 键盘事件

• keyup => 按键抬起
• keypress => 按键按下再抬起
• keydown => 按键按下

3. 表单事件

• focus => 获取焦点
• blur => 失去焦点
• reset => 重置
• change => 改变
• input => 输入
• submit => 提交
  => 第一种方式 => 在提交的代码中写 => return false
  => 第二种方式 => 在表单上写onsubmit="return false"

4. 触摸事件

• touchstart => 开始触摸
• touchmove => 触摸移动
• touchend => 触摸结束

5. 其他事件

• selectstart => 开始选中
• transitionend => 过渡事件

事件对象

1. 获取事件对象的目标
   e.target => 获取当前触发事件的目标
2. 获取事件对象的按键
   e.keyCode
3. JS的两大家族

• offset

  • offsetWidth => 获取盒子的宽(内容+内边距+边框)

  • offsetHeight => 获取盒子的高(内容+内边距+边框)

  • offsetLeft => 定位父级,如果没有定位父级,那么就是浏览器的左上角

  • offsetTop => 定位父级,如果没有定位父级,那么就是浏览器的左上角

  • offsetX => 获取距离当前盒子的坐标(参考点是当前盒子)

  • offsetY => 获取距离当前盒子的坐标(参考点是当前盒子)

• client

  • clientWidth => 获取盒子的宽(内容+内边距)

  • clientHeight => 获取盒子的高(内容+内边距)

  • clientLeft => 获取的自己的左边框

  • clientTop => 获取的自己上边框

  • clientX => 获取浏览器的左上角的坐标

  • clientY => 获取浏览器的左上角的坐标

  • pageX => 获取的是距离网页的坐标

  • pageY => 获取的是距离网页的坐标

标签：标签,基础知识,获取,事件,var,div,js,节点
From： https://www.cnblogs.com/maxiaohu/p/16844802.html