-概述
-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
"用来判断给定值的数据的所属类型例如:typeofage;"
-引用类型:javaScript第二天内容
-运算符
-等性运算符
-==!=
"判断数值"
-===!==
"判断数值和类型"
-关系运算符
-><>=<=
-逻辑运算符
-&&||!
-非空对象非0数字非空字符串都为true其他为false
-语句
"几乎和java一样"
-if...else...
-for(){}方式
-函数
"用来完成指定操作的代码片段,在java中叫方法,在js中叫函数"
-方式1:普通函数
"function函数名称(参数列表){
...
}"
-方式2(匿名函数):
"var函数名称=function(参数列表){
...
}"
-函数返回值:在函数中直接使用return返回结果即可
-注意事项:参数列表中的参数可以不写类型
-事件
"具体的某件事情"
-单击事件:onclick
"单击鼠标时触发"
-表单提交事件:onsubmit
"提交form表单时触发"
-页面加载成功事件:onload
"当页面加载完毕后触发"
-事件和事件源的绑定
-方式1:绑定事件
"实现方式:通过标签的事件属性
例如:<xxxonclick="函数名(参数列表)"></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(文档对象模型):操作文档(明天内容)
-获取一个元素(标签)对象
-varobj=document.getElementById("id值");
"通过id获取一个标签对象"
-获取对象中的value值
"通过对象的value属性对象.value;"
回顾:
javaScript:直译式的脚本语言,直接嵌入html使用即可
js和html整合:
方式1:内联式
通过script标签实现,直接在标签体中编写js代码即可
方式2:外联式(首先要编写外部的js文件,后缀名以*.js结尾)
通过script标签的src属性实现
js组成部分:
ECMAScript:核心语法
变量声明
var变量名称=初始化值;
数据类型
原始类型:(5种)
Undefined:undefinedvarage;
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:绑定事件
通过标签的事件属性
<xxxonclick="func()"></xxx>
方式2:派发事件
a.获取事件源(获取标签对象)
var对象=document.getElementById("id");
b.给事件源派发事件
对象.事件名称=function(){
....
}
BOM:操作浏览器
window:窗口
属性:
通过window获取其他的四个对象即可.使用window的属性或方法的时候window可以省略不写
方法:
定时器:
周期执行:
varinterId=setInterval();
setInterval("函数名称()",毫秒值);
setInterval(函数名称,毫秒值);
clearInterval(id);
单次执行:
vartimeId=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.编写正则表达式
用户名：varzz=/^[a-z0-9_-]{3,16}$/;
密码：varzz=/^[a-z0-9_-]{6,18}$/;
校验为空:/^\s*$/
2.校验
varstr="123";
zz.test(str);Boolean
///////////////////////
步骤分析:
1.确定事件(表单提交事件)
<formonsubmit="retruncheckForm()"></form>
<formid="formId"></form>
2.编写checkForm函数
functioncheckForm(){
//0/设置全局开关
varflag=true;
//a.获取用户名和密码输入框对象
var对象=document.getElementById("id");
//b.获取用户名和密码的值
varval=对象.value;
//c.编写正则表达式
//d.校验
if(zz.test(val)){
//校验不通过
给对应的span标签中填写提示信息
flag=false;
}else{
//校验通过
给对应的span标签中填写提示信息
}
//e.返回值
returnflag;
}
案例2-表格各行换色
需求分析:
当页面加载成功后,给表格的奇数行和偶数行添加不同的背景颜色
技术分析:
事件
DOM:
//////////////////////
步骤分析:
1.确定事件(页面加载成功事件)
onload=function(){
}
2.编写匿名函数
a.获取当前页面所有行对象
vartrObjArr=document.getElementsByTagName("tr");
b.遍历数组对象,给计数行和偶数行添加不同的背景颜色
for(vari=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函数
functionchangePro(){
a.获取选中省份所对应的市数组(value)
varcityArr=arr[value];
b.获取市的下拉选对象
varcityObj=document.getElementById("cityId");
c.遍历市数组,将每一个市拼成option追加到市的下拉选中
cityObj.innerHTML+="";
}
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56719.shtml
