学习笔记
一， javascript简介
1. javascript是什么？
javascript是一门解释型语言， 是世界上最流行的语言之一， 他运行在客户端的脚本语言
2.js的组成
js = js语法 + 页面对象(dom) + 浏览器对象(bom)
二，变量
1.什么是变量
存储在堆中的数据。复杂变量堆中存储的是引用地址，内容存在栈中
2.变量的使用 赋值
var age #声明变量
var age = 10 #声明赋值
age = 11 #赋值
let age = 10 #es6语法中的let，let有块级作用域
三，数据类型
1.简单数据类型
数字型number 1111
字符串string '111'
布尔型boolean 只有真(true)和假(false)
undefined 未定义
null 空
Symbol es6中新蹭的类型 唯一值
2.类型转换
①转换为字符串
toString()
String() #强制转换
js隐式转换 1 + ''
②转换为数字
parseInt() #转换为整数
parseFloat() #转换为浮动数
Number() #强制转换
js隐式转换 '12' - 1
③转换为布尔行 大多情况直接判断 是否空 空代表 false
Boolean() #转换为布尔值
3.类型检测
①typeof typeof 1 #number typeof '11' #string
四，运算符
1.算数运算符
+ - * / %
2.比较运算符
< > >= <= == != === !==
3.逻辑运算符
&& 与 一个为假 皆为假
|| 或 一个为真 皆为真
! 取反
4.赋值运算符
= += -= *+ /+ %=
5.递增
++ # 自增一
-- # 自减一
五，流程控制
1. if判断
if (1 ==2) {
alert('1等于2')
}else if (1 == 1) {
alert('1等于1')
}else{
alert('以上都不等于')
}
2. switch判断
var num = 6
switch(num){
case 1:
alert('num等于1')
break;
case 2:
alert('num等于2')
break;
case 3:
alert('num等于3')
break;
case 4:
alert('num等于4')
break;
case 5:
alert('num等于5')
break;
case 6:
alert('num等于6')
break;
}
3. 三元表达式
var n = 10
var b = 100
n > b ? alert('n大于b') : alert('n小于b')
六，循环
1.for循环 通过次数在循环
for (let index = 0; index < 10; index++) {
console.log(index)
}
2.while循环 为真就一直循环，为假就跳转循环
while (true) { #会一直循环
console.log('循环的内容');
}
3.do-while循环 先循环一次，在进行判断是否循环
4.continue 跳出本次循环，继续下一次循环
for (let index = 0; index < 10; index++) {
if index === 5{
continue; #跳过本次循环 继续下一次循环
}
console.log(index)
}
5.break 跳转循环
for (let index = 0; index < 10; index++) {
if index === 5{
break; #终止循环
}
console.log(index)
}
七，数组
1.数组是什么
数组就是将一组数据集合，放在一起，方便提取
2.定义数组
var arr = []
var arr = new Array()
var arr = [1,2,3]
3.遍历数组
var arr = [1,5,9,4,6]
for(var i = 1; i < arr.length;i++){
console.log(arr[i]); #循环出了 数组中的每一项
}
八，函数
1.什么是函数
封装一段重复服用的代码
2.函数声明
function obj(a){
console.log(a);
return 111
}
obj('111')
var fn = function(){
console.log(arguments);
return 2222
}
fn('121','555')
九，对象
var app = {} #字面量创建
var andy = new Object() #new object 创建
function obj(a,b,c){ #构造函数创建
this.a = a
this.b = b
this.c = c
}
var o = new obj('1','2','3')
十，内置对象
1.Math对象
Math.celi() 向上取整
Math.floor() 向下取整
Math.round() 四舍五入
Math.abs() 取绝对值
Math.random() 取 0到1 之间 的随机数
2.日期对象 Date
Date() #返回当前时间
getDate() # 返回对象中的某一天
getDay() # 返回对象中的某一天
getFullYear() #返回年份
3.数组对象 Array
length # 查看数组的条目 arr.length
concat() # 链接两个数组 arr.concat(arr1)
join() #把数组以指定的字符分隔成字符串 arr.join(',')
pop() #删除并返回数组的最后一个元素 var a = arr.pop()
push() #像数组 末尾添加一个内容，返回一个新长度 arr。push('11')
reverse() #颠倒数组中的元素 arr.reverse()
shift() #删除数组中第一个元素 arr.shift()
slice() #选取数组的元素 arr.slice(1,3) 就会把 下标1到 3之间的数据选出来
sort() #对数组进行排序 arr.sort() 倒序 arr.sort((a,b)=>{return a-b})
splie() #删除元素，并添加 arr.splice(1,1,'123')替换 arr.splice(1) #删除第一个元素
toString() #将数组 转换为字符串 arr.toString()
unshift() 向数组的开头添加一个元素
4.字符串对象 String
length # 查看字符串的长度
charAt() #返回指定位置的字符串 str.charAt(1)
charCodeAt() #返回指定位置的字符 unicode编码
concat() #链接字符串 str.concat(str1,str2)
indexOf() #检查字符串是否存在 ，存在返回下标，不存在返回91 str.indexOf('2')
search() #检索字符串 和 indexOF() 差不多
replace() #替换字符串 str.replace('1','2') 把str字符串中1替换为2
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分 str.slice(6)
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。 str.substr(6)
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
split() 方法用于把一个字符串分割成字符串数组。 str.split()
十一，获取元素
1.根据id获取元素 document.getElementById('id')
2.根据标签名获取元素 document.getElementsByTagName('h2')
3.h5新增获取元素 document.querySelector('.con')
4.获取body，html元素 document.body // 返回body元素 document.documentElement // 返回html元素
5.事件三要素
事件源 => 事件类型 => 事件处理程序
var div = document.querySelector('div')
div.onclick = function(){
alert('div点击了')
}
6.改变元素内容
e.innerText // 改变元素内容 不能识别html元素
e.innerHTML // 改变元素内容 可以识别html元素
7.元素的属性操作
var as = document.querySelector('a')
as.href = 'http://www.baidu.com'
as.id = 'aa'
as.style.width = '250px'
as.className = 'aa bb'
8.自定义属性
div.getAttribute('names') // 获取自定义属性
div.setAttribute('names','1212') // 设置自定义属性
div.removeAttribute('names') // 移除自定义属性
十二，节点操作
父节点 e.parentNode
所有子节点 e.childNodes
子元素节点 e.childNode
第一子节点 e.firstchild
最后一个子节点 e.lastchild
第一给子元素节点 e.fiestElementChild
最后一个子元素节点 e.lastElementChild
兄弟节点 e.sibling
创建节点/元素 var a = document.createElement('h1')
在指定节点末尾添加节点 e.appendChild(a)
在指定节点前面添加 e.insertBefore(a,a.children[0])
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function() {
if (text.value == '') {
alert('您没有输入内容');
return false;
} else {
// console.log(text.value);
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = text.value;
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
}
}
删除节点 e.removeChild(div.children[0])
克隆节点 e.cloneNode(true) 深拷贝节点 不加 true是浅拷贝
创建节点
document.write
innerHTML
createElement
添加节点
appendChild
insertBefore
删除节点
removeChild
十三，js事件
1.注册事件的2种方式
①传统方式 e.onclick 只能处理一个事件
②事件监听 e.addEventListener(事件参数,事件处理函数) 可以处理多个事件
2.事件对象
当然事件触发时产生的事件对象
div.addEventListener('click',function(e){
console.log(e,'e就是事件对象');
})
3.DOM流事件(冒泡)
就是当你 点击div 会触发 页面的 注册事件 这就是 事件流
ie 事件冒泡 从内内外
网景 事件捕获 从外往内
4.阻止默认行为
div.addEventListener('click',function(e){
console.log(e,'e就是事件对象');
e.preventDefault() // 组织默认行为
})
5.阻止冒泡
div.addEventListener('click',function(e){
console.log(e,'e就是事件对象');
e.stopPropagation() // 组织冒泡
})
6.事件委托
事件委托就是 利用冒泡原理 只给父节点添加注册事件 当子元素被点击，冒泡到父元素，然后控制在事件对象里面 控制响应的子元素
7.常用的鼠标点击事件
onclick 鼠标点击触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 鼠标获得角度触发
onblur 鼠标失去角度触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发
8.常用的键盘事件
onkeyup 按需某键被松开时触发
onkeydown 按需某键被按下时触发
onkeypress 按需某键被按下时 触发 不能识别 箭头
e.keyCode 返回键盘的code码
十四，常用的bom对象 bom对象就是操作浏览器
1.顶级对象是 window
2.页面文档内容全部加载完毕执行 window.onload = function(){}
3.页面dom加载完毕，图片，css还没有加载玩 执行 document.addEventListener('DOMContentLoaded', function(){})
4.监听浏览器窗口大小 window.onresize = function(){}
5.定时器 window.setTimeout(function(){},1000)
6.重复定时器 window.setInterval(function(){},2000)
7.停止重复定时器 window.clearInterval(定时器地址 || 变量 || 定时器赋值的变量)
8.停止定时器 window.clearTimeout(定时器地址)
9.this执行，百分之80的this 指向调用者本身，箭头函数没有this
10.location对象，url信息
window.location.href = 'http://baidu.com' #跳转
window.location.href # 获取url
window.location.host #获取当前域名
window.location.port # 获取当前的端口
11.navigator对象 包含了浏览器相关的信息
12.history对象 浏览器历史记录
window.back() #可以后退
window.forward() # 前进功能
window.go() #前进 ，后端到某个页面 1 前 -1 后
十五，本地存储
1.sessionStorage 页面关闭就没了
window.sessionStorage.setItem('user','张三')
window.sessionStorage.getItem('user')
window.sessionStorage.removeItem('user')
window.sessionStorage.clear() // 清楚所有
2.localStorage 页面关闭还有，必须手动删除，不然一直在
window.localStorage.setItem('user','张三')
window.localStorage.getItem('user')
window.localStorage.removeItem('user')
window.localStorage.clear() // 清楚所有
十六，面向对象
1.面向过程，就是分析需求的步骤，然后用函数一步一步的实现，一次调用函数
2.面向对象，就是把需求分成多个对象，然后对象之间的分工合作
3.类
class name{
constructor(name,age){
this.name = name;
this.age = age ;
}
a(){
console.log('我是a链接');
}
}
var names = new name('张三',19)
console.log(names)
4.类的继承
class name{
constructor(name,age){
this.name = name;
this.age = age ;
}
a(){
console.log('我是a链接');
}
}
class son extends name{
constructor(name,age,a){
super(name,age);
this.a = a
}
}
var sons = new son('张三',19,'999')
十七，构造函数和原型
1.构造函数的问题
构造函数很好用，但是存在浪费内存的问题
function son(name,age){
this.name = name;
this.age = age;
this.a = function(){
console.log('111')
}
}
var zs = new son('张三',19)
var ls = new son('李四',19)
上面实例对象 会在new的时候 创建2个函数出来
如果把 函数放到原型prototype上，就每次都会访问这个原型上的实例
2.构造函数的原型
每个函数都有原型，原型上的方法都是共享的，
都是通过 __proto__ 指向 prototype原型的
3.constructor构造函数 是指向构造函数本省的
4.原型链 每个实例对象 都有 __proto__属性，一层一层的找到 object.prototype 这就是原型链
5.原型继承
function Foo(name,age){
this.name = name ;
this.age = age ;
}
Foo.prototype.sex = function(){
console.log('我是Foo')
}
function son(name,age,score){
Foo.call(this,name,age); # 更改this指向
this.score = score;
}
son.prototype = new Foo(); #原型继承
son.prototype.constructor = son; # constructor 更改构造函数指向
var sons = new son('张三',18,100)
十八，es5新增的方法
forEach 遍历数组
filter 过滤器 返回过滤后的数据
some 查找满足条件的数据，只要满足条件 里面终止循环
trim 去除2端空格
object.keys() 返回一个属性名数组
(()=>{console.log('立即执行函数')})() 立即执行函数
this指向
普通函数指向 window
构造函数指向 实例对象
事件绑定函数指向 绑定事件本身
立即执行函数指向 window
定时器函数指向 window
更改this指向
call方法 fn.call(fn1,1,2) 把fn函数里面的this改变成 fn1函数里面的this 顺便传值
apply方法 fn.apply(fn1,[1,2]) 传值是 数组格式
bind方法 fn.bind(fn1,1,2) 不会调用函数，就改变this了
高阶函数 当把函数当参数传入，函数返回一个函数，满足时就是一个高阶函数
闭包 一个作用域中 能访问另外一个作用域中的变量 也可以是说 内存泄漏把
递归 在函数体内部调用自身 类似循环
十九，ES6语法
let 声明变量具有块级作用域 不存在变量提升
const 声明常量的 值不能改变
结构赋值
let [a,b,c] = [1,2,3]
let {name,age} = {name:'张三',age:19}
箭头函数 this指向父级 ()=>{} const fn = ()=>{}
剩余参数 ... let [a,...b] = [1,2,3,5] // a =1 b = [2,3,5]
扩展运算符 let arr = [1,2,3] let arr1 = [4,5,6] let arr3 = [...arr,...arr1]
Array.from() 将伪数组转换为真数组 let arr = {'0':1,'1':2,length: 0} let arr1 = Array.from(arr)
find 查找复合条件的成员 不复合 返回 undefined arr.find((item,index)=>{item.id == 2})
findindex() 查找复合条件的成员位置 没有返回-1 arr.findIndex((item,index)=>{item.id ==2 })
includes() 判断数组是否包含给定的值 返回布尔型 arr.includes(2)
模板字符串 `<div>${a}</div>`
repeat() 将原字符串重复n次 '1'.repeat(100) 100个1
set数据结构 他类似于数组 没有重复值
let arr = [1,1,2,2]
const s= new Set(arr) // s 等于 [1,2]
s.add('1') #添加一个set 数组成员为 字符串1
s.delete(1) #删除第一个set 数组成员
s.clear() #清楚所有成员
发表评论