- 函数都有返回值……
而方法的本质也是函数,所以也有返回值。
Document.getElementById() 返回的是获取的标签
getElementsByClassName()和getElementsByTagName()返回的是一个数组
Document.getElementsByClassName(“name”)[2].innerHTML=”hahha”
2.改变标签的属性
元素.属性名 属性单词 attribute
var pic=document.getElementsByTagName("img")
pic[0].src="2.jpg"
3.修改和添加css样式
元素.style.css属性名=”属性值”
var pic=document.getElementsByTagName("img")
pic[0].style.width="500px";
4.事件:用户在网页中所触发的行为
点击 鼠标滑动种类很多 键盘 表单特列
点击 onclick
鼠标进入 onmouseenter鼠标离开 onmouseleave
鼠标移动 onmousemove
鼠标悬浮 onmouseover 鼠标移除 onmouseout
鼠标按下 onmousedown 鼠标抬起 onmouseup
表单聚焦 onfocus 表单失去焦点 onblur 表单内容修改 onchange
浏览器加载完成 onload
事件的使用方法:必须跟一个函数配合
- 事件 将事件当做标签属性使用
var pic=document.getElementsByTagName("img")
pic[0].onclick=function(){
alert(123)
} - 通过事件绑定 将事件当成一个元素的属性
- var pic=document.getElementsByTagName("img")
pic[0].onclick=function(){
alert(123)
}特列
对于class,html中的class在js中是关键字,获取class这个属性时必须使用className来获取或修改。
var pic=document.getElementsByTagName("img")
pic[0].onclick=function(){
pic[0].className="pic"Js中的for循环和事件的关系
事件的执行和for循环没有关系,都是相互独立的。
解决事件中的i和for匹配
-
var arr=["3.jpg" ,"4.jpg" ,"5.jpg" ,"6.jpg" ]
// var tupian=document.getElementById("imgs")
// var lis=document.getElementsByTagName("li")
// for(var i=0;i<arr.length;i++){
// (function(i){
// lis[i].onclick=function(){
// tupian.src=arr[i]
// }
// })(i)方法二
人为定义属性 将索引存在属性里,需要的时候,调用属性(用this)
-
var arr=["3.jpg" ,"4.jpg" ,"5.jpg" ,"6.jpg" ]
var tupian=document.getElementById("imgs")
var lis=document.getElementsByTagName("li")
for(var i=0;i<arr.length;i++){
lis[i].ind=i;
lis[i].onclick=function(){
console.log(this.ind)
tupian.src=arr[this.ind]
}
}This
This 是js的一个关键字,他是一个对象,一般用在函数里用于指向函数内部的关系。
Div.onclick=function(){this}
如果函数在定义的时候前面有.,那么this就指向点前面的对象。
fn()
如果函数定义时没有. 那么this就是window