一、简介
- JavaScript是一门若类型的运行在浏览器端的脚本语言
- JavaScript主要用来实现页面中的动态效果
二、基本语法
1.变量
- 在JavaScript中,使用var关键字声明一个变量,在使用变量的过程中可以给它赋任意值
var a; a=123; a="hello"; a='world'; a=对象;
2.函数
- 在JavaScript中,使用function关键字声明一个函数,在声明函数时不需要指定参数的类型和返回值的类型
//方式一:
function fun(a,b){
return a + b;
}
//方式二:
var fun2 = function(a,b,c){
return a + b + c;
}
- 调用函数:函数名/函数的引用+(参数列表)
//调用通过方式一创建的函数
var result = fun(1,2);
alert(result);
//调用通过方式二创建的函数
var result2 = fun2(1,2,3);
alert(result2);
- 在JavaScript中,一切皆对象
三、事件
-
常用的事件
- 单击事件:onclick
- 获取焦点的事件:onfocus
- 失去焦点的事件:onblur
- 内容改变的事件:onchange
-
函数执行的时机
- 手动调用函数
- 将函数绑定到某个事件上,触发事件自动执行函数
//声明一个函数:函数不会自动执行 function fun(){ //函数体 } //将函数绑定到按钮的单击事件上:函数也不会执行 btnEle.onclick = fun;//赋给单击事件属性的是函数整体,并不是函数的执行结果 //只有当我们单击按钮的时候才会执行函数体中的内容
四、嵌入方式
- 1)写在标签的事件属性中:结构与行为相耦合,不建议使用
<button id="btnId" onclick="alert('Hello JS')">SayHello</button>
-
2)写在script标签中,script标签放在head标签中
- 需要使用window.οnlοad=function(){},否则无法获取元素对象
<head> <meta charset="UTF-8"> <title>load04</title> <!--4.使用window.onload完美解决问题--> <script type="text/javascript"> window.onload = function () { //获取按钮对象 var btnEle = document.getElementById("btnId"); alert(btnEle); //给按钮对象绑定单击事件 btnEle.onclick = function () { //弹出提示框 alert("Hello JS"); }; }; </script> </head>
-
3)写在script标签中,script标签放在body标签后面
<body>
<button id="btnId">SayHello</button>
</body>
<!--3.将JS代码写在script标签中,script标签放在body标签后面:不符合我们的习惯-->
<script type="text/javascript">
//获取按钮对象
var btnEle = document.getElementById("btnId");
alert(btnEle);
//给按钮对象绑定单击事件
btnEle.onclick = function () {
//弹出提示框
alert("Hello JS");
};
</script>
- 4)引入外部的js文件
<script src="script.js"></script>
五、DOM
- DOM全称:Document Object Model,文档对象模型。是W3C发布的一个标准,用来对HTML页面中的内容进行增删改查的操作
- DOM中的核心方法:
- document.getElementById(“id属性值”)
- 根据id属性值获取唯一一个元素节点对象
- document.getElementsByTagName(“标签名”)
- 根据标签名获取一个元素节点数组
- document.getElementsByName(“name属性值”)
- 根据name属性值获取一个元素节点数组
- document.getElementById(“id属性值”)
- DOM中的核心属性
- innerText
- 获取或设置成对出现的标签中的文本内容
- 获取
- DOM对象.innerText
- 设置
- DOM对象.innerText = “新值”
- 获取
- 获取或设置成对出现的标签中的文本内容
- innerHTML
- 该属性与innerText的唯一区别就是该属性可以解析HTML标签
- innerText
- 获取或设置DOM对象的属性值
- 获取
- DOM对象.属性名
- 设置
- DOM对象.属性名 = “新值”
- 获取