js用法

　　属性（attribute）

　　function fn(){

　　　　　　console.log(123)

　　　　}

　　fn()

　　var a=fn()                 将函数fn()调用结果赋值给a

　　1.函数都有返回值

　　而方法的本质也是函数，所以也有返回值

　　1）获取标签

　　document.getElementById()                                 通过id获取

　　document.getElementByClassName()                  通过class获取

　　document.getElementByTagName()                       通过标签获取

　　2）改变标签属性

　　var pic=document.getElementByTagName("img");

　　　　pic[0].src="01.jpg";

　　3) 改变样式属性

　　　　元素.样式.css属性名="属性值"；

　　　列：pic[0].style.width="100px";

　　dom事件（用户在网页中触发的行为）     比如：点击、鼠标滑动、键盘、表单等

　　鼠标滑动的效果

　　点击 ：onclick

　　鼠标进入：onmouseenter

　　鼠标离开：onmouseleave

　　鼠标悬浮：onmouseover

　　鼠标移除：onmouseout

　　鼠标移动：onmousemove

　　鼠标按下：onmousedown

　　鼠标抬起：onmouseup

　　表单聚焦：onfocus

　　表单失去焦点：onblur

　　表单内容修改：onchange

　　浏览器加载完成: onload

　　事件的使用方法必须跟一个函数配合

　　1.事件，将事件当作标签属性使用     例如<img src="01.jpg"    onclick="alert(123)"  />

　　2.通过事件绑定，将事件当成元素的属性

　　　　pic[0].onclick=function(){

　　　　　　alert(456)

　　　　　　}

　　因为class也是js的关键字

　　　　所以获取class这个属性时必须使用ClassName来修改、获取

　　数组中的元素通过索引进行操作

　　

　　　　<div class="aa">
　　　　　　<div class="bb">
　　　　　　　　<img src="img/03.jpg" class="dd" id="imgs"/>
　　　　　　</div>
　　　　　　<ul class="cc">
　　　　　　　　<li>1</li>
　　　　　　　　<li>2</li>
　　　　　　　　<li>3</li>
　　　　　　　　<li>4</li>
　　　　　　</ul>
　　　　</div>

　　var arr=["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg"]

　　var lis=document.getElementsByTagName("li")                //lis是获取li构成的数组

　　var tupian=document.getElementsById("imgs")

　　　for(var i=0;i<arr.length;i++){

　　　　lis[i].onclick=function(){

　　　　　　console.log(i)           i=4         不管发生什么事，浏览器都向下执行

　　　　　　}

　　　　　}

　　js中for循环和事件的关系

　　　　事件的执不执行，和for循环没有关系，都是相互独立的

　　所以要解决事件中 i 和 for 匹配

　　1.自调用可以解决这个问题

　　（function (i){

　　　　lis[i].onclick=function(){

　　　　　　tupian.src=arrr[i]

　　　　　　}

　　　　})(i)             但是消耗cpu所以不建议使用

　　2.人为定义一个属性，用于存储于for循环 与i

　　　　

　　　　for(var i=0;i<arr.length;i++){
　　　　　　lis[i].index=i     (人为的定义一个属性)
　　　　　　lis[i].onclick=function(){
　　　　　　　tupian.src=arr[this.index];
　　　　　　　　　　}

　　　　　　}

　　this是js一个关键字，他是对象，一般用在函数里用于函数内部的关系

　　如果对象函数定义前面那么this就指定点前面的：

　　　<div onclick="fn(this)"></div>

　　　<script>
　　　　function fn(x){
　　　　　　x.style.background="blue";
　　　　　　}
　　　</script>              如果函数定义时没点，那么this就是window

　　2.人为定义属性，将索引存在属性里，需要时候调用（不会无端的消耗CPU）

　　

　　　for(var i=0;i<arr.length;i++){
　　　　　　lis[i].index=i     (人为的定义一个属性)
　　　　　　lis[i].onclick=function(){
　　　　　　　tupian.src=arr[this.index];
　　　　　　　　　　}

　　　　　　}