版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/H_Targaryen/article/details/82712402
（一）JavaScript
（1）基本概念
- JavaScript
- 解释性脚本语言
- 弱类型
- 作用：完成表单的验证
- ECMA：JavaScript的一个国际标准
- BOM：Browser Object Model 浏览器对象模型
- DOM：Document Object Model 文档对象模型
- Javascript和HTML的整合
- 单独.js文件导入
- < script > < /script >
（2）基本类型
（1）变量
- 变量声明
- var 变量名=初始化值;（最好有分号）
- 注释使用//
- 原始类型（使用typeof可以判定）
- undefined
- boolean
- number
- string
- object ：变量是引用类型（typeof运算符对null会返回object）
- 引用类型
- Array
- String
- Boolean
- Number
- Date
- Math
- RegExp
（2）数组
- 声明数组（JS中数组的长度是可变的，类似于ArrayList）
new Array();
new Array(size);
new Array(element0, element0, ..., elementn);- join()方法：打印时数组插入分隔符
- shift()方法：删除并返回数组的第一个元素
（3）函数
- 因为JavaScript是弱类型的
- 所以函数声明不需要返回值类型，参数也不需要类型
//1th way to state a function
function 函数名（参数）{
函数体；
}
//2th way to state a function
var 函数名=function(参数){
函数体
}（4）事件
- 常见事件
- onclick 鼠标单击（例如在input button 中将onclick和事件绑定，编写函数）
- onsubmit 表单提交
- onload 页面加载（例如放在body标签内，当加载页面时调用函数）
- onchange事件（select表单选择时触发）
- 将事件和函数绑定
- 通过标签的属性
- 给元素派发事件
<xxx onclick="函数名（参数）" ></xxx>
<form ... onsubmit="return checkForm()">- 焦点
- onfocus 得到焦点
- onblur 失去焦点
（5）表单校验
- 利用Document对象可以对表单提交的元素进行校验（比如在注册时检查输入是否为空）
- JS从页面中获取元素（利用document）：
var obj = document.getElementById("id值");
var value = obj.value; //获取value属性值- this作为参数传入函数时指的是当前dom对象
（6）DOM
（1）DOM节点
- 节点分类
- document 整个文档
- element 比如head节点
- attribute 比如href属性
- text 具体的文本
（2）Document对象
- 获取对象
- document.getElementById(“id”) //通过id获取元素
- document.getElementsByTagName(“tag”) //通过标签获取元素，返回的是数组类型
- document.getElementsByClassName(“class”)
- document.getElementsByName(“name”)
- 修改属性
- dom对象.value = ; //修改值
- dom对象.innerHTML = ; //设置标签体
- dom对象.style.属性 = ; //设置dom对象的属性
var usernameObj = document.getElementById("username"); //根据元素ID获取对象
document.getElementById("span_1").innerHTML=usernameObj.value; //调用innerHTML方法给span标签赋值（7）BOM
（1）Browser五大对象
- Browser对象
- Window
- History
- Location 定位
- Navigator
- Screen
（2）Window对象
- 通过Window对象可以获取其他四个对象的只读引用
- window.location
- 常用方法
- alert() 警告框
- confirm() 确认提醒，返回值为ture | false
- prompt() 获取用户的输入
- open(url) 打开新页面（广告弹窗中常用）
- close() 关闭当前页面
- 使用BOM-Window构造定时器（window.setInterval可以简写为setInterval）
- setInterval(function,ms)：周期执行函数
- setTimeOut(function,ms) ：延迟ms之后，只执行一次
- clear
//JS操纵HTML对象步骤：
//获取对象
var Obj = document.getElementById("id");
//操纵对象属性
obj.style.backgroundColor="#ff0";（3）Location对象
- location
- 获取当前页面URL
- 设置当前页面URL（完成网页跳转）
var url = window.location.href; //获取地址栏URL
window.location.href = "http://www.baidu.com"; //设置跳转URL（4）History对象
- go(int)方法
function goBack(){ //后退一个网页
history.go(-1);
}（8）Demo练习
- 实现表单的隔行换色
（1）表单隔行换色
<script>
//当前页面加载成功
onload=function(){
//1.获取所有的tr
var arr = document.getElementsByTagName("tr");
//alert(arr);
//alert(arr.length);
//2.判断奇偶数
for(var i = 1; i < arr.length; i++){
if(i%2 == 0){
arr[i].style.backgroundColor = "aqua";
}else{
arr[i].style.backgroundColor = "coral";
}
}
}
</script>（2）复选框全选
- 由一个单选框决定其他所有复选框的状态（比如购物车中常见的全选按钮）
<script>
function checkAll(obj){
//获取当前框的状态
var flag = obj.checked;
//获取所有复选框
var arr = document.getElementsByClassName("itemSelect");
//改变所有复选框的状态
for(var i=0; i < arr.length; i++){
arr[i].checked = flag;
}
}
</script>（3）省市联动
- 在复选框中选中省之后后面的选项中是对应的市区集合选择（比如注册或者购买火车票的时候）
<script>
function selCity(index){
var cities = arr[index];
var cityChoices = document.getElementsByName("city")[0]; //ByName返回的是数组类型，获取市的下拉选项：因为只有一个元素，所以取[0]，
cityChoices.innerHTML = ("<option >-请选择-</option> ");
for(var i=0; i < cities.length; i++){
cityChoices.innerHTML += ("<option>" + cities[i] + "</option>");
}
}
</script>