HTML-JavaScript
01. JavaScript写在哪里
- head部分: 用于声明变量，函数，类型，为事件绑定处理函数
- body部分: 调用脚本执行
- 外部脚本: 用于定义函数，类型
- 执行顺序: 在代码中从上往下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="0605-01-HtmlJavaScript.js"></script>
<title>Document</title>
<script>
alert("head");
</script>
</head>
<body>
<script>
alert("body")
</script>
</body>
</html>
02.基础语法
- 大小写敏感
- 弱类型语言
- 分号结尾
- 字符串可使用单引号和双引号
2.1数据类型
- 因为JavaScript为弱类型语言，故变量声明只需要使用var ，关键字即可申明任何类型
- 虽然var关键字可申明为任何类型，但是JavaScript仍有数据类型
boolean number string Underfined Null Object
Underfined Null类型只有一个值的数据类型，值分别为underfined与null - 查看变量类型可使用typeof方法
2.2 集合
- 数组 {}
- 键值对 {"kay1":"value1","kay2":"value2"}
- 对象数组 {{"kay1":"value1","kay2":"value2"},{"kay3":"value3","kay4":"value4"}}
- 属性 方法
- 类型转化
2.3方法的使用
- 使用关键字function定义方法
- 方法名使用驼峰命名法
- 方法可以设置参数和返回值，js中不存在方法的重载
<script>
var num1 = 3;
var num2 = 4;
function ShowInfo(item1,item2){
return item1 + item2;
}
alert(ShowInfo(num1,num2));
</script>
2.4 匿名方法
- 匿名方法可以简单的理解成不需要写方法名称的方法
- 匿名方法一般常用两种写法
var fun = function(params){
....
}
//这种方法可以把匿名方法赋值给一个变量，调用这个变量即可使用该方法
(function(param1,param2){
....
})(1,2);
// 这种方法可以在定义匿名方法的同时传参及调用
03.闭包
目前可以简单的理解成子方法可以使用父方法的变量
04.DOM
- DOM用于操作html文档，准确的来说是html标签中的内容
- JavaScript中将每一个标签当作对象处理，每隔标签都有自己的属性，也拥有触发事件 方法
- 操作DOM对象，一般使用document关键字调用
4.1 Js获取元素的方法
- document.getElementById(id): 根据id获取元素节点
- document.getElementByClassName(classname): 根据class的值获取一组元素节点
- document.getElementByName(name): 根据name获取一组元素节点
- document.getElementByTagName(tag): 根据标签名获取一组元素节点
<div id="dv1" class="dv">dv1</div>
<div id="dv2" class="dv">dv2</div>
<div id="dv3" class="dv">dv3</div>
<div id="dv4" class="dv">dv4</div>
<script>
alert(document.getElementById("dv1").innerText + " "+document.getElementsByClassName("dv")[0].innerText)
</script>
4.2 注册事件
事件常用的注册方式有多种，此处介绍两种，一种直接在元素上注册事件，一种在获取的对象上注册事件
-
元素注册法
<input id="text1" type="text" onclick="ClickMe1()"> <script> function ClickMe1(){ alert("点我1"); } </script> -
对象注册法
<input id="text2" type="text" onclick="ClickMe2()">
<script>
document.getElementById("text2").onclick = function(){
alert("点我2");
}
</script>
4.3 动态操作元素
- document.creatElement(): 创建元素
- document.appendChild(): 添加子元素
- document.insertBefore(newEl,orgEl): 在莫元素前添加元素
- document.firstChild; 获取第一个元素
4.4获取元素内容
- innerHTML 获取与赋值开闭标签的元素中的全部内容 赋值可以添加html标签
- innerText 获取与赋值开闭标签的元素中的部分内容
4.5 操作样式
操作style属性
- style属性可以设置或返回样式
- style设置css特征值时，需要把特征的 短横线命名法改成驼峰命名法后使用
HTMLElementObject.style.cssFloat
操作className属性
className 属性设置或返回元素的class属性
设置属性值：HTMLElementObject.className = classname
05. BOM
BOM用于操作浏览器行为，一般使用windows关键字调用
5.1 常用方法
-
alert(): 弹出提示对话框
-
confirm(): 弹出确认对话框，返回bool值类型
-
prompt(): 弹出用户输入对话框，返回输入的内容，如果取消则返回null
-
setInterval(code,milliseconds): 计时器方法可以按照指定的周期（毫秒）来调用函数或者计算表达式，直到clearInterval()被调用
-
setTimeout(code,milliseconds): 一次性计时器方法用于在指定的毫秒数后调用函数或计算表达式，由setTimeout()返回的计时器ID值作为clearInterval()方法的参数
-
location 浏览器地址栏对象
hash 返回一个URL的锚部分
host 返回一个URL的主机名和端口
hostname 主机名
href 完整的URL
pathname URL的路径名
port 端口号
protocol URL协议 -
onload 页面加载完成后调用