1.API的概念:
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。例如:alert()、 prompt()、log()、reverse()、getMonths()
2.DOM概念:
事件基础文档对象模型, 又称为文档树模型
文档:一个网页可以称为文档
节点:网页中的所有内容都是节点(标签、属性、文本、注释等)
元素:网页中的标签
属性:标签(元素)的属性
3.获取元素6种方式:
①根据id获取元素:
var 变量名 =document.getElementById("id")
②根据类名获取元素:
var 变量名=document.getElementsByClass("类名")
这样获取到的是个伪数组
③根据name获取元素:
var 变量名=document.getElementsByName("name名")
④根据标签获取元素:
var 变量名=document.getElementsByTagName("标签名")
⑤根据选择器获取单个元素:
var 变量名=document.getquerySelector("选择器")
获取指定选择器的第一个元素,参数就是选择器的名称
⑥根据选择器获取多个元素:
var 变量名=document.getquerySelectorAll("选择器")
获取指定选择器的所有的元素,参数就是选择器的名称
4.事件:即触发-相应机制
①事件三要素{
触发源:触发事件的元素
事件类型:事件的触发方式(鼠标点击或键盘点击)
事件处理程序:触发事件后要执行的代码
}
②事件的基本使用:
三步走战略:
❶获取元素
❷绑定事件
❸写事件要执行的函数
var box = document.getElementById('box');
box.onclick = function () {
console.log('代码会在box被点击后执行');
};
③非表单元素的属性操作
④表单元素的属性操作
⑤InnerText和InnerHTML
前者指被选元素的文本内容
后者指被选元素的富文本内容(包括文本内容及其style)
5.this指向问题{
function b1() {
console.log(this);
}
b1()
var Person = function (name, sex) {
this.name = name
this.sex = sex
console.log(this);
}
var p1 = new Person("张三", "女")
var penson1 = {
name: "李四",
sex: "男",
kanthis: function () {
console.log(this);
}
}
penson1.kanthis()
var b2 = document.getElementsByTagName("button")[0]
b2.onclick = function () {
console.log(this);
}
}
document.getElementsByTagName("button")[1].onclick = function () {
document.getElementsByTagName("img")[0].src = ""
}
document.getElementsByTagName("button")[2].onclick = function () {
document.getElementsByTagName("img")[1].style.display = "none"
}
document.getElementsByTagName("button")[3].onclick = function () {
document.getElementsByTagName("img")[2].style.visibility = "hidden"
}
document.getElementsByTagName("button")[4].onclick = function () {
document.getElementsByTagName("img")[3].style.opacity = 0
}
}
<a href="http://www.baidu.com" onclick="return false">百度1</a>
<a href="http://www.baidu.com" onclick="return fun2()">百度2</a>
fun2 = function () {
return false
}
document.getElementsByTagName("a")[2].onclick = function () {
return false
}