javascript(学习笔记)

---

一、js有三种书写位置，分别为行内、内嵌和外部。

1.内嵌：写在head里

<script>
alert('hello world')
</script>

2.行内：直接写在元素内部

①可以单行或少量js代码写在html标签

3.外部 从外部引入 不要往里写代码（在my.js里里可以直接写javascript代码）

`<script src="my.js"></script>`

二、注释

1.单行注释 // ctrl+a
2.多行注释 /**/ shift+alt+a

三、javascript输入输出语句

 1.alert()         浏览器弹出警示框
 2.console.log()   浏览器控制台打印输出信息
 3.prompt()		  浏览器弹出输入框，用户可以输入

四、变量

1.声明所有类型的变量 var age

① 由字母（A-Za-z）、数字（0-9）、下划线（_）、美元符号组成
②严格区分大小写
③不能以数字开头
④不能是关键字
⑤变量名必须有意义
⑥遵守驼峰命名法则

五、数据类型

1.简单数据类型（Number,String,Boolean,Undefined,Null）

⑴.isNaN()用来判断是否是非数字

⑵.字符串（一般用单引号，外单内双，外双内单）

⑶.转义字符
①.\n 回车
②.\ 斜杠
③.’ 单引号
④.* 双引号
⑤.\t tab缩进
⑦.\b 空格

⑶.检测获取字符串的长度 length
①.str.length

⑷.将字符串用加号拼接起来

⑸boolean 只有true和false

2.复杂数据类型（Object）

3.用typeof+变量 可以输出变量的数据类型

4.转换为字符串

①toString()
②String()强制转换
③用加号进行拼接（隐式转换）

5.转换为数字

①parseInt('')
②parseFloat('')
③Number(str)
④· * /利用算术运算转换为数值型

6.转换为boolean类型

空格、0、NAN、null、undefined可以转换false，其余都是true

六、函数

function 函数名(){
		函数体
}
function getsum(num1,num2)

七、return

有返回参数，就返回参数
没有返回参数就返回underfined

八、arguments

1.伪数组 并不是真正意义上的数组
2.具有数组的length属性
3.按照索引的方式存储的
4.它没有真正数组的一些方法pop() push()等等

九、预解析

预解析操作：声明>函数体>赋值>调用>函数内部的变量

十、在类里面的属性（变量）不需要声明

var shuzu=[];			//数组
var obj=new Object()	//类
obj.name='dzy'
var obj={
obj.name='dzy'
}

十一、构造函数的语法格式

构造函数名字的首字母要大写
我们构造函数不需要return 就可以返回结果

function 构造函数名(){
	this.属性=值;
	this.方法=function(){}
}
new 构造函数名();

十二、for…in 遍历对象

for(var k in obj){
	console.log(k);//k 变量 输出 得到的是属性名
	console.log(obj[k])//obj[k] 得到的是属性值
}
一般用k变量

十三、javas内置对象

1.math 不是一个构造函数，所以我们不需要new来调用 而是直接使用里面的属性和方法即可

max:function(){
}用来构造函数
2.math.abs('-1') 可以隐式转换
  math.abs('pink') 输出NaN

十四、date

var date=new Date();
var date1=new Date('2019-10-1')
var date2=new Date(2019,10,1)比正常的少一月份

date.getfullYear()		返回当前日期的年
date.getMonth()			返回的月份小一月份
date.getDate()			返回的是 几号
date.getDay()           周一是1 周六是6 周日是0
date.getHours()         时
date.getMinutes()       分
date.getSeconds()		秒

时间显示的时候要显示出 08 08 08 这样的用三元运算符 如果大于10则不在前面加0，小于就在前面加0

获得Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1日过了多少毫秒

console.log(date.valueOf());//就是我们距离1970年1月1日的毫秒
var date1=+new Date();// 简单写法
console.log(date.now());//H5新增的

十五、利用new Array()

var arr1=new Array();//创建了一个空的数组
var arr1=new Array();//这个2表示 数组的长度为2 里面有2个空的数组元素
var arr1=new Array(2,3);//等价[2,3] 这样写表示 里面有2个数组元素 2和3

十六、instanceof 运算符 它可以用来检测是否为数组

var arr=[];
var obj=[];
console.log(arr instanceof Array);
console.log(obj instanceof Array);

Array.isArray();

十七、添加删除数组元素的方法

push()     
pop()
unshift() 向数组开头添加一个或更多元素
shift()    删除数组的第一个原始 数组长度减一

十八、数组排序

arr1.sort(function(a,b){
	return a-b;按照升序排列
});
arr1.sort(function(a,b){
	return b-a;按照降序排列
});

十九、数组索引

indexOf()      数组查找给定元素的第一个索引（不存在返回-1）
lastIndexOf()  在数组中的最后一个开始索引（不存在返回-1）

二十、数组转换为字符串

1.toString()	  将数组转换为字符串，但是分隔符为，
2.join('分隔符')  把数组转换为字符串
3.concat()    	  连接两个或多个数组 不影响原数组
4.slice()   	  数组删除splice（第几个开始，要删个数）

二十一、字符串对象

1.基本包装类型

var temp=new String('andy');
str=temp;
temp=null;

二十二、字符串的不可变(每new一个，就会开辟新的储存空间)

var str=new String('andy');
str=new String('red');

在重新赋值的过程中，之前得到值不会被删掉，
因为重新赋值会重新开辟存储空间，再将str指针指向这个值
注意：因为字符串不可变，所以不要大量的拼接字符串

二十三、字符串对象 根据字符返回的位置

1.str.indexOf('要查找的位置',[起始的位置])
2.charAt()     根据位置返回字符
3.charCodeAt   获取字符的ascall码
4.str[index]   获取位置的字符//H5新增的
5.有一个对象 判断是否有该属性 对象['属性名']
var o={
	age:18
}
if(o['sex']){
console.log('里面有该属性');
}else{
console.log('没有该属性');
}

二十四、字符串操作方法

1.concat()     			用于拼接两个字符串
2.substr(start,length)  从start开始取length的个数
3.slice(start,end)		从start位置开始取到end位置(end的位置取不到)
4.substr(start,end)		从start位置开始取到end位置(基本slice相同，但不接受负值)
5.replace('被替换的字符','替换为的字符')   只会替换第一个字符
6.toUpperCase()		转换为大写
7.toLowerCase()		转换为小写

二十四、WEB APIs

1.DOM

①获取元素
document.getElementByld(String)   可以获取带有ID的元素对象

//console.dir()           打印我们返回的元素对象 更好的查看里面的属性和方法

②getElementsByTagName() 方法可以返回带有指定标签名的对象的集合 
以伪数组的形式存储

H5新增的
③document.getElementsByClassName('类名') 根据类名返回元素对象集合

④document.querySelector('选择器');		 根据指定选择器返回第一个元素

⑤document.querySelectorAll() 			 根据指定选择器返回所有元素

⑥获取body元素
document.body
⑦获取html元素
document.documentElement()

2.事件基础

触发–响应机制
1.事件是有三部分组成 事件源 事件类型 事件处理程序
唐伯虎
（1）事件源 事件被触发的对象 谁 按钮
var btn=document.getElementByld(‘btn’);
（2）事件类型 如何触发 什么事件 比如鼠标点击（onclick）还是鼠标经过，还是键盘按下
（3）事件处理程序 通过函数赋值的方式 完成
btn.οnclick=function(){
alert=‘点秋香’
}

onclick			鼠标点击左键触发
onmouseover		鼠标经过触发
onmouseout		鼠标离开触发
onfocus			获得鼠标焦点触发
onblur			失去鼠标焦点触发
onmousemove		鼠标移动触发
onmouseup		鼠标弹起触发
onmousedown		鼠标按下触发

3.操作元素

element.innerText  从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML  从起始位置到终止位置的内容，包含html标签，保留空格和换行

表单元素修改
input.value='';

如果想要某个表当被禁用 不要再点击 disabled
btn.disabled=true;

时间函数的调用者
this.disabled=true;

element.style=''  获取修改元素样式  如果样式较少 或者 功能简单的情况

复杂的情况
this.className=''

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

# 二十五、自定义属性
自定义属性目的：是为了保持并使用数据，有些数据保存到页面中不同保存到数据库
## 1.设置H5自定义属性data-开头做为属性名并且赋值
<div data-index="1"> </div>

JS

element.setattribute('data-index',20);

dataset是一个集合里面存放了所有以data开头的自定义
element.dataset.index
element.dataset['index'];

二十六、节点操作

nodeType   节点类型
nodeName   节点名称
nodeValue  节点值

· 元素节点  nodeType 为 1
· 属性节点  nodeType 为 2
· 文本节点  nodeType 为 3

1.父级节点 parentNode

得到离元素最近的父节点

2.子级节点

childNodes         所有子级节点
children           获取所有的子元素节点
firstchild         第一个子节点
lastchild          最后一个子节点

只支持i9，又兼容性问题
firstelementchild  第一个子元素节点
lastelementchild  最后一个子元素节点

实际开发的写法  既没有兼容性问题，又返回第一个元素
children[0]
children[ol.ol.children.length-1]

3.兄弟节点 下一个兄弟节点（元素节点，文本节点等等）

nextsibling
previousSibling
有兼容性问题 支持ie9.0以上
nextElementSibling
previousElementSibling

function getNextElementSibling(element){
	var el=element;
	while(el=el.nextSibling){
	if(el.nodeType===1){
	return el;
	}
	}
	return null;
}

4.创建节点

document.createElement('tagName');//动态创建节点

5.添加节点

node.appendChild(child)            node 是父级   child 是子级
node.insertBefore(child,指定元素)  在child前面加一个元素

6.删除节点

node.removeChild(child)

7.复制节点

node.cloneNode()         //括号为空或者里面false 浅拷贝 只复制标签不复制里面的内容
node.cloneNode(false)
node.cloneNode(true)     //深拷贝 括号为true   复制标签复制内容

二十七、阻止链接跳转

1.<a href="javascript:;"></a>
2.var a = document.querySelector('a');
        a.addEventListener('click', function (e) {
            e.preventDefault();//dom 标准写法（低版本浏览器不支持）
        })

二十八、写入

document.write()		是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

document.innerHTML()	

document.innerText()

二十九、注册事件

1.传统方式    onclick  具有唯一性 

2.方法监听注册方式（w3c标准 推荐方式）ie9之前不兼容，可以使用attachEvent()
addEventListener()    同一个元素同一个事件可以添加多个注册事件

3.eventTarget.addEventListener(type,listener[,useCapture])
  eventTarget.attachEvent(eventNameWithOn,callback) 
                        事件类型字符串  事件处理函数，当回调函数使用
4.注册事件兼容性解决方案
function addEventListener(element,eventName,fn){
//判断当前浏览器是否支持addEventListener方法
if(element.addEventListener){
element.addEventListener(eventName,fn);
}else if(element.attachEvent){
element.attachEvent('on'+eventName,fn)
}else{
//相当于element.οnclick=fn;
element['on'+eventName]=fn;
}
}

5.删除事件（事件只会用一次）（比如说弹窗只能弹一次）

eventTarget.onclick= null;          divs[0].onclick=null;
eventTarget.removeEventListener(type,listener[,useCapture])
divs[1].addEventListener('click', fn);
    function fn() {
         alert(22);
         divs[1].removeEventListener('click', fn);
}

删除事件兼容性解决方案

function removeEventListener(element,eventName,fn){
//判断当前浏览器是否支持removeEventListener方法
if(element.removeEventListener){
element.removeEventListener(eventName,fn);
}else if(element.detachEvent){
element.detachEvent('on'+eventName,fn)
}else{
//相当于element.οnclick=fn;
element['on'+eventName]=fn;
}
}

三十、DOM事件

1.事件传播过程

事件的捕获阶段
document–>html–>body–>div
事件的冒泡阶段
document<–html<–body<–div

dom 事件流 三个阶段
1.JS代码中只能执行捕获或者冒泡其中的一个阶段
2.onclick 和 attachEvent(ie) 只能得到冒泡阶段
3.捕获阶段 如果addEventListener 第三个参数是true 捕获阶段
// body–>father–>son
onblur、onfocus、onmouseenter、onmouseleave没有冒泡

1.event就是一个事件对象，写到我们侦听函数的小括号里面 当形参来看
2.事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数
3.事件对象 是 我们事件的一系列相关数据的集合，跟事件相关的，
比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的信息 比如说用户按下了那个键
4.这个事件的对象我们可以自己命名
5.事件对象也有兼容性问题 i678通过window.event

6.event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

事件对象属性方法          说明 
e.target                  返回触发事件的对象      标准
this 					  指向的是绑定事件
e.srcElement              返回触发事件的对象     非标准ie6-8使用
e.type                    返回事件的类型   比如click mouseover 不带on
e.cancelBubble            该属性阻止冒泡 非标准 ie6-8使用
e.returnValue             该属性阻止默认事件（默认行为） 非标准 ie6-8使用 比如不让链接跳转
e.preventDefault()        该属性 阻止默认事件（默认行为） 标准            比如不让链接跳转
e.stopPropagation()       阻止冒泡标准

兼容性问题处理
div.onclick=function(){
e=e||window.event;
var target=e.target||e.srcElement;
console.log(target);
}
了解跟 this有个非常相似的属性 currentTarget ie678认识 

8.事件对象阻止默认行为

var a = document.querySelector('a');
        a.addEventListener('click', function (e) {
            e.preventDefault();//dom 标准写法（低版本浏览器不支持）
        })
传统方式
         a.onclick = function () {
            // 普通浏览器方法
            e.preventDefault();
            // 低版本浏览器 ie678 returnValue属性
            e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 
            // 特点：return后的代码不执行，只使用于传统浏览器
            return false;
        }

9.阻止事件冒泡

  var son = document.querySelector('.son');
        son.addEventListener('click', function (e) {
            alert('son');
            e.stopPropagation();//阻止冒泡（标准写法）
            //非标准写法（支持ie678）利用事件对象cancelBubble()方法
            // e.cancelBubble=true;
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, false);
		
兼容性问题处理
if(e&&e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble=true;
}

10.事件委托

事件委托也称事件代理，在jQuery里面称为事件委派
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，
然后利用冒泡原理影响设置每个子节点
事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一子节点

11.使所有li有点击事件

    <script>
        // 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function () {
            alert('知否知否，点我应有弹框在手');
        })
    </script>

12.禁止鼠标右键和禁止选中文字

<body>
    我是一段不愿意分享的文字
    <script>
        // 1.contextmenu 禁止右键
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        })
        // 2.selectstart 禁止选中文字
        document.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })
    </script>
</body>

13.鼠标事件对象

e.clientX()           返回鼠标相对浏览器窗口可视区的X坐标
e.clientY()			  返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX()			  返回鼠标相对于文档页面的X坐标 IE9+ 支持
e.pageY()			  返回鼠标相对于文档页面的Y坐标 IE9+ 支持
e.screenX()			  返回鼠标相对于电脑屏幕的X坐标
e.screenY()           返回鼠标相对于电脑屏幕的Y坐标

14.常见键盘事件

onkeyup               某个键盘按键被松开时触发 
onkeydown             某个键盘按键被按下时触发（比onkeypress先执行）
onkeypress            某个键盘按键被按下时触发（但它不能识别，比如ctrl shift 箭头等）
keyup keydown A,a不区分大小写 a和A keyCode都是65
keypress 事件 区分大小写   a得到的是 97和  A得到的是 65
执行顺序
onkeyup              
onkeydown
onkeypress

三十一、BOM（浏览器对象模型）

                 window

document location navigation screen history

1.窗口加载事件

1.window.load=function(){}   传统方式  只能执行一个，有多个的话执行最后一个
2.window.addEventListener('load',function(){}) 可以写多个
document.addEventListener('DOMContentLoaded',function(){})
仅当DOM加载完成，不包括样式表，图片，flash等等。IE9以上支持
document.addEventListener('DOMContentLoaded',function(){})

2.调整窗口大小事件

window.onresize=function(){}
window.addEventListener('resize',function(){})

window.innerWidth 窗口宽度
window.innerHeight 窗口高度

三十二、定时器

1.setTimeout()
window.setTimeout(调用函数,[延迟的毫秒数]);(window可以省略)  单位是毫秒
window.clearTimeout(timeoutID)
setTimeout(function () {
            console.log('时间到了');
        }, 2000);
		
function calkback() {
            console.log('爆炸了');
        }
        var time1 = setTimeout(calkback, 3000);
        var time = setTimeout(calkback, 5000);
		
停止定时器  window.clearTimeout(timeoutID)里面是定时器的名称
2.setInterval()（执行过程与setTimeout不同）（每隔多少时间就调用函数）（时间到了之后会轮回）
setInterval(function(){
console.log('继续输入');
},1000);

三十三、this指向问题

1.全局作用域的this指向全局对象window
2.方法调用中谁调用this调用this指向谁
3.构造函数中的this指向构造函数的实例

三十四、JS单线程(先执行同步任务，再执行异步任务)

1.同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序一致、同步的。
2.异步（回调函数）
可以同时做多个任务
click resize
load error
setInterval setTimeout

3.主线程执行栈（先进后出）
4.任务消息队列（先进新出）

三十五、location对象

1.URL
protocol 通信协议 http,ftp,maito等
host     主机     www.itheima.com
port     端口号   http默认80
path     路径     由0个和多个'/'符号隔开的字符串
query    参数     以键值对的形式，通过&符号分隔开来
fragment 片段     #后面内容 常见于链接 锚点

location.protocol  获取或设置 整个URL
location.host      返回主机     www.itheima.com
location.port      返回端口号   如果未写 返回空字符
location.pathname  返回路径     
location.search    返回参数     
location.hash      返回片段     #后面内容 常见于链接 锚点

location.assign()   跟href一样，可以跳转页面
location.replace()  替换当前页面，因为不记录历史，所以不能后退页面
location.reload()   重新加载页面，相当于刷新按钮或者F5如果参数为true强制刷新ctrl+f5