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];
}
}
属性（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];
}
}