JavaScript的学习笔记

<script src="index.js" defer></script>，defer的作用是延迟加载index.js文件

定义变量

变量的类型分为两大类：基本类型和复合类型

JavaScript是一种弱类型语言，所以没有强类型语言所具有的int,float,char等等，而任何变量的定义都是以var来实现的，只会根据所赋值来确定其类型。

基本类型

基本类型分为五种：数值类型，字符串类型，布尔类型，undefined类型，null类型

var a=0.8;
var b="abcdef";
var c=true;
var d=undefined;//与var d;且不给d赋值是一样的

我们可以使用运算符typeof来查看类型

typeof "John" // 返回 string 
typeof 3.14// 返回 number 
typeof false// 返回 boolean 
typeof [1,2,3,4]// 返回 object 
typeof {name:'John', age:34}// 返回 object

复合类型

复合类型分为：数组类型，对象类型，函数类型

对象类型的访问方式有两种使用.或者对类数组的访问方式。例如

var obj=
{
    name:"张三",
    age:29,
    banks:["工商银行","建设银行"],
}
console.log(obj.banks[0]);
console.log(obj["banks"][0]); //这两种访问方式都可以访问到 工商银行

值得注意的是，第一种访问方式并不是任何条件下都可以正确访问。例如

for(var key in obj)
{
	console.log(obj.key);// 在这中情况下key只是被obj当作一个类似与name、age这类的值，所以只会输出undefined
	console.log(obj[key]);// key只是一个字符串，所以是可以的
}

函数变量

命名函数与匿名函数

// 命名函数
function 方法名(参数列表）
{
	...
	...
}
// 匿名函数
function(参数列表)
{
	...
	...
}

而匿名函数是没有方法名的，所以他必须当作一个值赋给一个变量，但是命名函数也可以赋给一个变量。

函数的使用

在js中没有函数重载，只有覆盖（根据代码的出现位置，越晚出现的就会覆盖掉越早出现的），而且在使用函数时的参数不是必须的。例如

function test()
{
    console.log("我是无参函数")
}
function test(a,b)
{
    console.log("我是有参函数 "+a+","+b)
    return 8;
}
test()
test(4)
test(4,5)

运行结果：

在使用函数时有两种使用方法：

1. 函数整体作为值来使用

   var a=test
   console.log(a)
   a(4,5)
   

   运行结果：

   

   setInterval(test,1000) //等同于setInterval("test()",1000)
   					   //这个函数的意思是每1000ms执行一次test()
   //setInterval("test(4,5)",1000) 每1000ms执行一次test(4,5)
   

   运行结果：

   

2. 函数返回值作为值来使用

   var a=test()
   console.log(a)
   

   运行结果：

   

事件

在js中事件就是与人绑定的函数，认为触发函数就叫做事件。事件是具有传播机制的，传播机制的必备条件是元素嵌套以及相同的事件（函数）。

事件的传播机制：

• 由内到外的冒泡机制（浏览器默认机制）
• 由外到内的捕获机制

下边是具有嵌套的html

<div class="par" style="width:100px;height:100px;background-color: #2ac">
    <div class="ch" style="width:50px;height:50px;background-color: pink">
    </div>
</div>

冒泡机制

var p=document.querySelector(".par")
var c=document.querySelector(".ch")

c.onclick=function(){
    console.log("子级元素触发了")
}
p.onclick=function(){
    console.log("父级元素触发了")
}

点击粉色区域(子元素)后的运行结果：

捕获机制

var p=document.querySelector(".par")
var c=document.querySelector(".ch")

c.addEventListener("click",function(){
    console.log("子级元素触发了")
},true)
p.addEventListener("click",function(){
    console.log("父级元素触发了")
},true)

点击粉色区域(子元素)后的运行结果:

在设置捕获机制是使用到了函数addEventListener(event,function,bool),他有三个参数，第一个是事件的种类例如click，mouseenter等等；第二个参数是触发的方法；第三个参数是一个bool值，true表示捕获机制，false表示冒泡机制，如果不写第三个参数，则是undefined会被js当作false处理。

js中也有阻断传播机制设置。event.stopPropagation()：调用该方法可以阻止事件在当前元素上继续传播，无论是在捕获阶段还是冒泡阶段。如果事件在捕获阶段触发，调用这个方法会阻止影响子元素。如果事件在冒泡阶段触发，调用这个方法会立即停止冒泡，不会再传播给父元素及其祖先元素。如果在同一个元素上有多个事件处理函数，调用这个方法只会阻止事件传播，但不会影响其他处理函数的执行。例如

stopPropagation(),这个方法是由每一个function的隐藏参数调用的，每一个function都有一个隐藏参数代表方法本身，只需在参数列表中只指明参数然后调用即可。

c.onclick=function(e){
    e.stopPropagation();
    console.log("子级元素触发了")
}

p.onclick=function(){
    console.log("父级元素触发了")
}

点击粉色区域(子元素)后的运行结果：

dom 增删改查

查

1. 以id查找 getElmentById()，只会获取复合条件的第一个元素
2. 以class查找getElemnetsByClass()，会获取复合条件的所有元素，存到一个数组之中
3. 以元素名称来查找元素们 getElementsByTagName() 会获取符合条件的所有元素
4. 以选择器来查找元素 querySelector() 只会获取符合条件的第一个元素
5. 以选择器来查找元素们 querySelectorA11() 会获取符合条件的所有元素
6. 根据元素之间的关系查找
   1. partentNode,parentElemnet 当前节点的父亲节点
   2. childNodes 当前节点的所有孩子节点（元素节点和文本节点，可以通过NodeType属性来筛选）
   3. children 当前节点的所有孩子节点（只包含元素节点）
   4. previousSibling 获取当前节点的上一个节点，注意文本节点的存在
   5. previousElementSibling 获取当前节点的上一个元素节点
   6. nextSibling 获取当前节点的下一个节点，注意文本节点的存在
   7. nextElementSibling 获取当前节点的下一个元素节点
   8. firstChild 获取当前节点的第一个孩子节点，注意文本节点的存在
   9. firstElementChild 获取当前节点的第一个元素孩子节点
   10. lastChild 获取当前节点的最后一个孩子节点，注意文本节点的存在
   11. lastElementChild 获取当前节点的最后一个元素孩子节点

删

removeChild(TargetNode)，删除其孩子节点TargetNode

删除改节点时，只需找到他的父亲节点即可。例如

x.parentNode.rmoveChild(x);//就是删除x元素

改

修改内容

修改 | 获取，要修改内容就要先获取内容所以修改和获取本质是一样的。

1. innerHTML(非表单元素，包含html元素)
2. innerText(非表单内容，只包含纯文本 )
3. value(表单控件)

例如：

    <div class="d1" style="background:#2ac">innerHTML</div>
    <div class="d2" style="background:#2ac">innerText</div>

document.onclick=function(){  //点击页面任意位置
    var d1=document.querySelector(".d1")
    d1.innerHTML="<h3>123</h3>"
    var d2=document.querySelector(".d2")
    d2.innerText="<h3>123</h3>"
}

修改属性

修改属性 setAttribute() 有两个参数第一个是属性的名称，第二个是属性的值；获取属性getAttribute()

修改各个标签的属性，可以通过console.dir()来查看标签的各种属性。以上两种方法对于原生属性以及自定义属性都可以使用。而通过直接用.来获取并修改只适用于原生属性（例如value，class等）

增

增加元素是分为两步，第一步是创建或复制元素，第二步是添加到已有元素中

创建或复制元素。创建元素createElement()，复制元素cloneNode(boolean) true 深度复制，false 浅复制

添加到已有元素中。追加parentNode.appendChild(newnode)，插入parentNode.insertBefore(newNode,refNode)。都是作为parentNode的孩子节点

定时器

周期定时器 setInterval(function,time) 延时定时器 setTimeout(function,time)。第一个参数是函数，第二个参数是时间间隔，单位时ms。

他们都有一个返回值，这个返回值就是每一次定时器的标志，可以通过标志来停止定时器。例如

var timer=setInterval(function(){
	...
},1000)
clearInterval(timer) //停止定时器 clearTimeout(timer)