- 概述 - JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 - 作用:给页面添加动态效果,校验用户信息等. - 入门案例 - js和html的整合 - 方式1:内联式 "通过<script></script>标签实现,在标签体中编写js代码即可" - 方式2:外联式 "编写外部的js文件,通过srcipt标签的src属性引入即可" - 注意事项: " script标签可以放在页面的任何位置,一般放在head中 一个页面可以有多个srcipt标签 script标签一旦使用了src属性,它的标签体就会失效" - 组成部分 - ECMAScript:核心语法 - 变量声明 - 格式: var 变量名称 = 初始化赋值; - 注意事项: - var可以省略,但是不建议省略 - 末尾的分号也可以省略,但是不建议 - 数据类型 - 原始类型(5种) - Undefined:undefined - Null:null - Number:一切数字 - String:一切被引号引起来的字符串 - Boolean: true 或 false - 运算符typeof "用来判断给定值的数据的所属类型 例如: typeof age;" - 引用类型:javaScript第二天内容 - 运算符 - 等性运算符 - == != "判断数值" - === !== "判断数值和类型" - 关系运算符 - > < >= <= - 逻辑运算符 - && || ! - 非空对象 非0数字 非空字符串 都为true 其他为false - 语句 "几乎和java一样" - if ... else ... - for(){}方式 - 函数 "用来完成指定操作的代码片段,在java中叫方法,在js中叫函数" - 方式1: 普通函数 " function 函数名称(参数列表){ ... }" - 方式2(匿名函数): "var 函数名称 = function(参数列表){ ... }" - 函数返回值:在函数中直接使用return返回结果即可 - 注意事项:参数列表中的参数可以不写类型 - 事件 "具体的某件事情" - 单击事件: onclick "单击鼠标时触发" - 表单提交事件: onsubmit "提交form表单时触发" - 页面加载成功事件: onload "当页面加载完毕后触发" - 事件和事件源的绑定 - 方式1:绑定事件 " 实现方式:通过标签的事件属性 例如:<xxx onclick="函数名(参数列表)"></xxx>" - 方式2:派发事件 " 实现方式:获取标签对象(元素) 对象.事件名称=function(){}" - 使用步骤: - 1.确定事件 - 2.编写函数 - 获取元素 - 处理元素 - BOM(浏览器对象模型):操作浏览器 - window 窗口 - 常用属性 "通过它获取其他的四个对象 eg:window.history == history 注意:使用window的对象或属性时,window可以省略不写" - 常用方法 - 定时器 - var 定时器id = setInterval() 设置周期执行定时器 - 格式1:setInterval(函数名称,毫秒值); "周期执行,每隔多少毫秒执行一次指定函数" - 注意:每个定时器都会返回一个定时器id,定时器id主要用在清除定时器时. - 格式2:setInterval("函数名称(参数列表)",毫秒值); - "周期执行,每隔多少毫秒执行一次指定函数 可传递参数" - clearInterval() 清除周期执行定时器 - 使用方式:clearInterval(定时器id) "作用:将正在使用的定时器清除" - setTimeout() 单次执行定时器 - 格式1:setTimeout(函数名称,毫秒值); "单次执行,多少毫秒后执行指定函数,只执行一次" - 格式2:setTimeout("函数名称(参数列表)",毫秒值); "单次执行,多少毫秒后执行指定函数,只执行一次 可传递参数" - 注意:每个定时器都会返回一个定时器id,定时器id主要用在清除定时器时. - clearTimeout() - 使用方式:clearTimeout(定时器id) - 警告框 - alert(); - 对话框 - prompt(); "可以传入两个参数,第一个为提示信息,第二个为默认值" - 确认框 - confirm(); "可以传入一个参数,为确认信息" - 扩展 - 打开 open(url); - 关闭 colse(); - history 历史 - 常用方法 - forward(); 下一个页面 - back(); 返回上一个页面 - go(Number); ★ - go(number); 向后跳转几个页面 - go(-number); 向前跳转几个页面 - location 连接 ★★ - 常用属性 - href - location.href; 得到当前页面的路径 - location.href=url; 跳向指定的页面 - navigator 了解 - screen 了解 - DOM(文档对象模型):操作文档 (明天内容) - 获取一个元素(标签)对象 - var obj = document.getElementById("id值"); "通过id获取一个标签对象" - 获取对象中的value值 "通过对象的value属性 对象.value;" 回顾: javaScript:直译式的脚本语言,直接嵌入html使用即可 js和html整合: 方式1:内联式 通过script标签实现,直接在标签体中编写js代码即可 方式2:外联式(首先要编写外部的js文件,后缀名以*.js结尾) 通过script标签的src属性实现 js组成部分: ECMAScript:核心语法 变量声明 var 变量名称 = 初始化值; 数据类型 原始类型:(5种) Undefined: undefined var age; Number: String: Null: null Boolean: typeof 对象; 引用类型: 运算符 等性运算符: == != === !== 关系运算符: > < >= <= 逻辑运算符: && || ! "abc" || false "abc" || "123" "abc" && "123" "abc" && false 语句 if("123"){} for(){} 函数 方式1:普通函数 function 函数名(){} 方式2:匿名函数 var 函数名 = function (参数,参数){} 调用函数: 函数名(参数,参数); 返回值: return 返回值; 事件 onclick:单击事件 onsubmit:表单提交事件 onload:页面加载成功事件 事件和事件源绑定 方式1:绑定事件 通过标签的事件属性 <xxx onclick = "func()"></xxx> 方式2:派发事件 a.获取事件源(获取标签对象) var 对象 = document.getElementById("id"); b.给事件源派发事件 对象.事件名称 = function(){ .... } BOM:操作浏览器 window:窗口 属性: 通过window获取其他的四个对象即可.使用window的属性或方法的时候window可以省略不写 方法: 定时器: 周期执行: var interId = setInterval(); setInterval("函数名称()",毫秒值); setInterval(函数名称,毫秒值); clearInterval(id); 单次执行: var timeId = setTimeout(); clearTimeout(id); 警告框: 对话框: 确认框: 打开和关闭: history:历史 方法: forward(); back(); go(number); location:连接 ★★ 属性: href location.href; location.href = url; DOM:操作文档 var 对象 = document.getElementById("id"); 对象.属性名称; 获取 对象.属性名称 = 值; 设置 ///////////////////////////////// 案例1-完善表单校验 需求分析: 当表单提交的时候,校验表单中的用户名和密码是否符合格式,如果不符合,则在相应的输入框后面填写提示信息且不允许表单提交, 反之可以提交 技术分析: 事件 正则表达式: DOM对象: /////////////////////////// DOM: 操作value属性 获取value属性的值: 获取一个标签对象: var 标签对象 = document.getElementById(); 获取value属性的值: 标签对象.value; 设置value属性的值: 获取一个标签对象: var 标签对象 = document.getElementById(); 设置value属性的值 标签对象.value = 值; 操作标签体: 获取标签体内容: 获取一个标签对象: var 标签对象 = document.getElementById(); 获取标签体的内容: 标签对象.innerHTML; 设置标签体内容: 获取一个标签对象: var 标签对象 = document.getElementById(); 设置标签体的内容: 标签对象.innerHTML = "<xxx>值</xxx>"; 正则表达式: 1.编写正则表达式 用户名：var zz = /^[a-z0-9_-]{3,16}$/; 密码：var zz = /^[a-z0-9_-]{6,18}$/; 校验为空: /^s*$/ 2.校验 var str = "123"; zz.test(str); Boolean /////////////////////// 步骤分析: 1.确定事件(表单提交事件) <form onsubmit="retrun checkForm()"></form> <form id="formId"></form> 2.编写checkForm函数 function checkForm(){ //0/设置全局开关 var flag = true; //a.获取用户名和密码输入框对象 var 对象 = document.getElementById("id"); //b.获取用户名和密码的值 var val = 对象.value; //c.编写正则表达式 //d.校验 if(zz.test(val)){ //校验不通过 给对应的span标签中填写提示信息 flag = false; }else{ //校验通过 给对应的span标签中填写提示信息 } //e.返回值 return flag; } 案例2-表格各行换色 需求分析: 当页面加载成功后,给表格的奇数行和偶数行添加不同的背景颜色 技术分析: 事件 DOM: ////////////////////// 步骤分析: 1.确定事件(页面加载成功事件) onload = function(){ } 2.编写匿名函数 a.获取当前页面所有行对象 var trObjArr = document.getElementsByTagName("tr"); b.遍历数组对象,给计数行和偶数行添加不同的背景颜色 for(var i=0;i<trObjArr.length;i++){ if(i%2==0){ trObjArr[i].style.backgroundColor = "颜色"; }else{ trObjArr[i].style.backgroundColor = "颜色"; } } 案例3-复选框全选和全不选 需求分析: 当点击头部的复选框的时候,要使其他复选框的状态和头部的保持一致. 技术分析: 单击事件 DOM 操作元素的checked属性 ///////////////////////////// 步骤分析: 1.确定事件(单击事件) 给头部的复选框添加单击事件 2.编写函数 a.获取头部复选框状态 对象.checked; b.获取其他的复选框对象 c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性 案例4-省市二级联动 需求分析: 当省份的下拉选改变的时候,根据选中的省份查询其所对应的市,将所对应的市,展示到市的下拉选中. 技术分析: 改变事件 数组 Dom操作 ///////////////////// 步骤分析: 1.确定事件(改变事件) 给省份的下拉选添加改变事件 2.编写changePro函数 function changePro(){ a.获取选中省份所对应的市数组(value) var cityArr = arr[value]; b.获取市的下拉选对象 var cityObj = document.getElementById("cityId"); c.遍历市数组,将每一个市拼成option追加到市的下拉选中 cityObj.innerHTML += ""; }