517799134
commented
6 years ago 一、DOM对象 (一)简介 DOM：Document object model 文档对象模型，可以用来操作HTML文档。一个html页面，必须被加载到浏览器内存当中才可以显示到页面上。浏览器会把HTML里所有的标签、标签的属性、标签的文本全部都按照层级结构转换成一棵“家谱树“，叫dom树，html里的所有内容都会变成dom树上的节点对象。 (二)操作标签 怎样获取标签 document.getElementById(“id值”) ---获取到一个Element对象 document.getElementsByName(“name属性值”) ---获取到一批Element对象，类似于数组，可以循环遍历 document.getElementsByTagName(“html标签名称”) --获取到一批Element对象，可以循环遍历 document.getElementsByClassName(“类名”) --获取到一批Element对象，类似于数组，可以循环遍历
以上方法，Element对象也可以使用。区别在于：查找的范围不同，document是从整个html文档里查找的 怎样创建标签 var opt = document.createElement(“option”); 创建出来的标签不会显示到页面上，需要插入到dom树里才会显示 怎样插入标签 父标签对象.appendChild(子标签对象) 是剪切插入 怎样删除标签 标签对象.remove(); 怎样操作标签体 获取标签体：var inner = 标签对象.innerHTML; 设置标签体：标签对象.innerHTML = “
html代码会生效
”; 扩展： 获取标签体里的文本：var txt = 标签对象.innerText; 设置文本标签体：标签对象.innerText = “html代码不会生效，原封不动的显示到页面上
”; (三)操作属性 获取属性 var value = 标签对象.属性名; var value = 标签对象.getAttribute(“属性名”); 设置属性 标签对象.属性名 = 值; 标签对象.setAttribute(“属性名”, 值); 删除属性 标签对象.removeAttribute(“属性名”); 二、引用数据类型（内置类） 有9个引用数据类型。 (一)Array数组 创建数组对象 var arr = new Array(); //长度为0的空数组对象 var arr = new Array(3); //长度为3的空数组对象 var arr = new Array(“a”,”b”,”c”); //初始化好数据的数组对象var arr = [“a”,”b”,”c”];//初始化好数据的数组对象 循环遍历 for(var i=0; i<arr.length; i++){ alert(arr[i]); } 常用的属性 length： 获取数组的长度，或者是 设置数组的长度 常用的方法 arr = arr1.concat(arr2, arr3,…); 把多个数组合并成一个，返回合并后的数组对象 var str = arr.join(“分隔符”); 把数组拼接成字符串 arr.reverse(); 把数组里的元素顺序反转，不会产生新数组 (二)Date日期 创建日期 var date = new Date(); var date = new Date(年,月,日); 月从0开始 var date = new Date(年,月,日,时,分,秒); 月从0开始 常用方法 date.getTime(); 获取日期的毫秒值 date.setTime(毫秒值); 通过毫秒值设置日期 date.toLocaleString(); 转换成本地日期格式的日期字符串 (三)Math数学工具类 这是个工具类，不需要创建对象，直接使用它的方法就行 常用方法 Math.abs() 求绝对值 Math.ceil() 向上取整 Math.floor() 向下取整 Math.round() 四舍五入 Math.random() 取随机数 Math.pow(x,y) 计算x的y次幂 (四)RegExp正则表达式 创建对象 var reg = new RegExp(“正则表达式字符串”); var reg = /正则表达式/; 常用方法 var isMath = reg.test(“字符串”); 校验字符串是否符合格式要求，返回boolean结果
一、概述 (一)简介 JavaScript：简称js。是web前端开发中不可缺少的脚本语言，不需要编译就可以运行（解释性语言）。它“寄生”在html体内，随网络传输到客户端，在浏览器内存中解析运行。 (二)作用 可以操作浏览器。比如：网址跳转，历史记录切换 可以操作html文档。比如：创建标签、删除标签、操作属性、操作样式。（改的是浏览器内存当中的那一份） (三)js的组成 网景 netscape 网景浏览器 火狐浏览器 LiveScript JScript ECMA ECMAScript：是js的核心，基本语法规范 BOM：Browser Object Model 浏览器对象模型。可以理解为是把整个浏览器窗口封装成的对象，通过js代码调用BOM对象的属性和方法，可以操作浏览器。 DOM：Document Object Model 文档对象模型。可以理解为是把整个html文档封装成的对象，通过js代码调用DOM对象的属性和方法，可以操作html文档 (四)js的引入方式 内部js
外部js
注意： 1.一个script标签不能即写内部代码，又引入外部文件，不要混用 2.js代码在页面里任意位置都可以执行，但是越晚加载越好 二、基本语法规范（ECMAScript） (一)变量定义 js里所有变量定义都使用关键字：var。 弱类型语言，动态类型语言 (二)数据类型 js的数据类型有： 原始数据类型 和 引用数据类型 原始数据类型 boolean number：数字类型 string： null：空类型，只有一个值：null undefined：未定义类型，只有一个值：undefined 引用数据类型（内置类） 只有9个引用数据类型，下节课讲。 js的对象创建，也使用关键字new： var date = new Date(); (三)运算符 js的运算符和Java非常相信，这里列出来几个不同的： ==和=== ==比较值，值相同就是true ===比较值和类型，都相同才是true &&和||：js的boolean运算只有&&和||，没有&和| +-/ +：有字符串的+是拼接字符串 -/：会尝试把字符串转换成数字后再运算，如果转换不成功，结果是NaN (四)逻辑语句 js里的逻辑语句和Java非常相似，也有if、else、for、switch等等。要特殊说明的是if判断： js的if可以判断任意类型的数据：false、0、””、null、undefined是false，其它都是true (五)函数（重点） 普通函数 定义函数 function 函数名(形参1, 形参2,…){ //js代码 } 调用函数 var result = 函数名(实参1, 实参2,…); //如果函数有return，result就是返回值；如果函数没有return，result就是undefined 匿名函数 定义函数 function(形参1, 形参2,…){ //js代码 } 调用函数
(六)事件（重点） js的事件相关概念 事件源：被监听的对象，通常是html标签对象 事件：用来监听事件源上发生的某些动作或者状态变化，js提供好的 响应行为：监听到事件源状态变化之后，要执行的代码 常用事件
事件绑定
var btn = document.getElementById("btn3"); btn.onclick = function(){ alert("动态绑定"); } 三、BOM对象 (一)有哪些bom对象 window：浏览器窗口对象，是所有bom对象的顶级对象。 location：浏览器地址信息对象，可以更改当前网址，获取网址 history：浏览历史记录信息对象，可以进行历史记录切换 navigator：浏览器信息对象，只读的，可以获取浏览器的版本、内核、操作系统信息 screen：浏览器屏幕显示信息对象，可以获取浏览器窗口的大小、位置、颜色信息等 (二)window对象 提供了弹窗方法：弹窗方法是阻塞方法 普通弹窗：alert(“内容”)，没有返回值 确认弹窗：confirm(“确定要…？”)，返回boolean值 输入弹窗：prompt(“请输入…”) 返回输入内容或者 null 提供了定时器 执行多次的定时器 设置：var timer = setInterval(函数对象, 间隔毫秒值); 清除：clearInterval(timer); 执行一次的定时器（延时器） 设置：var timer = setTimeout(函数对象, 延迟毫秒值); 清除：clearTimeout(timer); 提供了全局函数 parseFloat：转换成小数 parseInt：转换成整数 eval：把字符串作为js代码来执行 (三)location对象 获取当前网址：var url = location.href; 设置当前网址：location.href = “”; --在当前窗口中打开的页面 在新窗口中打开页面: window.open(“”); (四)history对象 前进一步：history.forward(); 后退一步：history.back(); 切换n步：history.go(n); 如果n是正数，前进n步；如果n是负数，后退n步