JS总结

1.JavaScript的基本语法

1-1:为什么要学习JavaScript 例如:a.表单验证 b.页面动态效果等等 1-2:什么是JavaScript a.脚本的基本结构 语法: <script language="JavaScript"> <script language="JavaScript"> <!- <!- JavaScript 语句; JavaScript 语句; --!> --!> </script> </script> b.脚本的执行原理 过程:用户录入信息到IE上面,发送请求(包括JavaScript的页面)给服务器,然后从服务器下载含JavaScript的页面返回响应信息 1-3:JavaScript的基本语法 a.变量的声明和赋值 语法: var 合法的变量名; 声明并赋值,例如:var count=10; 同时声明多个变量,例如:var x,y,z=10; 允许不声明变量直接使用,系统自动会声明该变量。例如:x=88;//没有声明变量,直接使用 document.write(x); b.运算符号 算术运算符 + - * / % ++ -- -(求反) 比较运算符< > <= >= == != 逻辑运算符! && || 赋值运算符包括=及其扩展赋值运算符 c.逻辑控制语句 语法: if(表达式){ for(初始化;条件;增量或减量){ while(条件){ JavaScript 语句1; JavaScript 语句; JavaScript 语句; }else{ } } JavaScript 语句2; } switch(表达式){ case 常量1:JavaScript 语句1; case 常量2:JavaScript 语句2; case 常量3:JavaScript 语句3; ... default:javaScript 语句4; } d.注释 例如: 单行注释以//开始,以行末结束 多行注释以/*开始,以*/结束 e.类型转换 两种:转换为整型和转换为浮点型数字parseInt和parseFloat 如果无法转换第一个字符,此函数将返回NaN(Not a Number,非数字) 1-4:JavaScript的高级语法-自定义函数function a.什么是函数 函数就是一个方法、也可以返回 b.如何使用函数 (1)创建函数 语法: function 函数名(参数1,参数2,...){ function 函数名(){ 语句; 语句; } } 函数的定义放在<script>与</script>之间 c.调用函数 语法:事件名="函数名()"; 1-5:常见错误 声明变量,和使用变量的时候不一致。 2.DOM编程-window对象 2-1:DOM模型介绍 DOM(Document Object Model)由万维网联盟(World Wide Web Consortium,W3C)定义的一套操作HTML文档 a.HTML文档的树状结构(和HTML树状结构基本一致,此处就不在列举P31) b.什么是DOM(DOM是以层次结构的节点或信息片段的集合) c.DOM对象模型(Window下面的三个层次:history、document、location下面的层次此处布列出了P34) 2-2:window对象常用的属性、方法、事件介绍 a.常用属性(status、screen、history、location、document) b.常用方法(alert("提示信息")、confirm("提示信息")、open("url","name")、close、showModalDialog()) c.常用事件 注意:要注意的是,当使用层、框架和多窗口时,就不能省略window对象的名称。例如:必须为document.location.. 例如: 语法: open("打开窗口的url","窗口名","窗口特征")[height、width、toolbars、scrollbars、menubar、location、status、resizable] showModalDialog("打开对话框的url","对话框名","对话框特征")[height、width、toolbars、scrollbars、menubars、location、status、statusbars、resizable] 2-3:Date对象和setTimeout()方法做时钟显示 a.时钟特效(使用定时器setTimeout()方法) b.Date对象常用的方法 语法: var 日期对象=new Date(参数); 或者是 var 日期对象=new Date(); 方法组:setXX和getXX 特殊的:日期:1-31 其它的全都是从0开始 c.setTimeout()方法 语法: setTimeout("disptime()",1000) 隔多久执行一次 clearTimeout 停止 setInternal 永远执行 2-4:history和location对象 a.history对象 back()、forward()、go("url or number") b.location对象 (1)属性(host、hostname、href) (2)方法(assign("url")、reload()、replace("url")) 注意:下拉列表选中是selected默认选中 2-5:常见错误 默认选中:selected 3.DOM编程-document对象

3-1:document对象的常用属性和方法介绍 a.属性(getElementById()获得指定的id) b.方法(getElementsByName()获得名称name) 3-2:制作浮动的广告图片 例如: <html> <head> <title>浮动广告</title> <script language="javaScript"> var advInitTop=0;//使层总置于顶端的初始值 function move(){ document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop; } window.onscroll=move;//窗口的滚动事件,当前页面滚动时调用move()函数 <script> </head> <body> <div id="advLayer" style="position:absolute;left:16px;top:129px;width:180px;height:230px;z-index:1;"> <img src="" width="180" height="230" </div> <p> &nbsp; </p> <p> <img src="" width="993" height="1799" </p> <p> &nbsp; </p> </body> </html> 3-3:制作带关闭按钮的浮动窗口 a.带关闭按钮的浮动窗口 <html> <head> <title>浮动广告</title> <script language="javaScript"> var advInitTop=0;//使层总置于顶端的初始值 function inix(){ document.getElementById("advLayer").style.pixelTop; } var advInitTop=0;//使层总置于顶端的初始值 function move(){ document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop; } function closeMe(){ document.getElementById("closeLayer").style.display="none"; document.getElementById("advLayer").style.display="none"; } window.onscroll=move;//窗口的滚动事件,当页面滚动时调用move()函数 <script> </head> <body onload="inix()"> <div id="closeLayer" onclick="closeMe()"style="position:absolute;left:16px;top:129px;width:180px;height:230px;z-index:1;"> <img src="" width="180" height="230" </div> <p> &nbsp; </p> <p> <img src="" width="993" height="1799" </p> <p> &nbsp; </p> </body> </html> b.关闭按钮随滚动条同步滚动的浮动窗口 .... var advInitTop=0;//使层总置于顶端的初始值 function inix(){ advinitTop=document.getElementById("advLayer").style.pixelTop; closeInitTop=document.getElementById("closeLayer").style.pixelTop; } function move(){ document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop; document.getElementById("closeLayer").style.pixelTop=closeInitTop+docuemnt.body.scrollTop; } 3-4:制作实现全选效果 例如: <html> <head> <title>全选或不全选</title> <script language="javaScript"> function checkAll(boolValue){ var allCheckBoxs=document.getElementsByName("isBuy"); for(var i=0;i<allCheckBoxs.length;i++){ if(allCheckBoxs[i].type=="checkbox"){//判断是否是复选框 allCheckBoxs[i].checked=boolValue; } } } </script> </head> <body> ..... <a href="javaScript:checkAll(true)">全选</a> <a href="javaScript:checkAll(false)">全不选</a> ..... </body> </html> 注意:input框的名称必须得一致. 3-5:常见错误 例如:if(allCheckBoxs[i].type="checkbox")或者是<a href="javaScript:checkAll('false或true')">全选或不全选 </a> 4.CSS样式特效 4-1:回顾已学的CSS样式表 a.样式表类型 (1)行内样式 <input name="Button" type="button" style="background-image:url(image/back1.jpg);color="#0000ff";border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;"value="登 录"> (2)内嵌样式 <style type="text/css"> a{/*设置五下划线的超链接样式*/ color:blue; text-decoration:none; } a:hover{/*鼠标在超链接上悬停时变为红色*/ color:red; } .boxBorder{/*设置细边框样式*/ border-width:1px; border-style:solid; } #content{/*ID样式*/ background-color:#e7fbff; } <div id="content"> <input id=txtName class="boxBorder" size=15 name=txtName> ....... <input name=Button type="button" class="pixButton" value="登 录"> <td align=right colspan=2><a href="#">免费注册</a></td> ....... </div> </style> (3)外部样式表 <html> <head> <title>浮动广告</title> <link rel="stylesheet" href="out_file.css" type="text/css"> <script language="javaScript"> <style type="text/css"> a{/*设置五下划线的超链接样式*/ color:blue; text-decoration:none; } a:hover{/*鼠标在超链接上悬停时变为红色*/ color:red; } .boxBorder{/*设置细边框样式*/ border-width:1px; border-style:solid; } #content{/*ID样式*/ background-color:#e7fbff; } </style> </script> </head> <body> ....... </body> </html> b.常用样式 (1)文本框属性(font-size、font-familly、font-style、color、text-align) (2)背景属性(background-color、background-image、background-repeat) (3)组合属性样式a{无下划线 a:hover{ .boxBorder{/*细边框 color:blue; color:red; border-width:1px; text-decoration:none; } border-style:solid; } } .picButton{/*图片按钮样式 background-image:url(image/back2.jpg); border:0px; margin:0px; padding:0px; height:23px; width:82px; font-size:14px; } 4-2:制作改变字体大小的样式特效 例如: <html> <head> <title>全选或不全选</title> <style type="text/css"> a{ color:blue; text-decoration:none; } a:hover{ color:red; } .boxBorder{ border-width:1px; border-style:solid; } .pixButton{ background-image:url(images/back1.jpg); color:0px; border:0px; margin:0px; padding:0px; height:23px; width:82px; font-size:14px; } </style> <script language="javaScript"> ..... </script> </head> <body> ... <input class="boxBorder" id=txtName size=15 name=txtName> ... <a href="#" onMouseOver="this.style.fontSize='24px'" onMouseOut="this.style.fontSize=14px">免费注册</a> ... </body> </html> 4-3:制作改变按钮背景图片的特效 <html> <head> <title>改变按钮背景图</title> <body> <form name="form1" method="post" action=""> <input type="submit" name="Submit" value="提交" style="width:82px;height:23px;background-image:url(images/back1.jpg);"onMouseOver="this.style.backgroundImage='url(images/back2.jpg)' onMouseOut="this.style.backgroundImage='url(images/back1.jpg)'"> </form> </body> </html> 4-4:层的显示/隐藏特效 a.显示属性display 语法:(display属性的语法格式如下) Object.style.display="value"; block换行(添加新行)、none不显示(隐藏)、inline换行(同行显示) b.制作层的显示/隐藏特效 例如: <html> <head> <title>改变按钮背景图</title> <style type="text/css"> #advLayer{ position:absolute; left:62px; top:44px; width:360; height:190px; z-index:2; } </style> <script type="text/javaScript"> function closeMe(){ document.getElementById("closeLayer").style.display="none"; document.getElementById("advLayer").style.display="none"; } function showMe(){ document.getElementById("closeLayer").style.display="block"; document.getElementById("advLayer").style.display="block"; } </script> </head> <body> <p> <input name="placeButton" type="button" onclick="closeMe()" value="关闭层"> <input name="placeButton2" type="button" onClick="showMe()" value="弹出层"> </p> <div id="advLayer"><img src="" width="360" height="190"> </div> <h1>层下方的内容</h1> <h1>层下方的内容</h1> <h1>层下方的内容</h1> <h1>如果修改代码:去掉层DIV的样式</h1> <h1>将出现内容动态隐藏显示的效果。</h1> </form> </body> </html> 4-5:图片的显示/隐藏特效 例如: function showGame(){ document.getElementById("gameTab1").style.display="none"; document.getElementById("mobileTab1").style.display="none"; document.getElementById("gameTab2").style.display="block"; document.getElementById("mobileTab2").style.display="block"; } 注意:visibility:hidden对象任占据着页面的空间,只是该控件看上去是空的。 display:none对象根本就不会显示,在页面中仿佛没有该对象一样。 5.基本的表单验证技术

5-1:为什么需要表单验证 a.避免信息无法更新或出现新错误 b.减轻服务器端的压力 5-2:表单验证的内容 年、月、日、输入长度、中英文、特殊字符、是否为空、是否为数字、邮件是否有效、年月日是否有效。 5-3:表单验证思路 a.String对象简介 (1)字符串对象的属性【length表示字符串中的字符个数,包括所有符合 如:空格】 语法: 字符串对象.属性名或字符串对象.方法名() 第一种:var newstr="这是我写的 脚本"; 第二种:var newstr=new String("这是我写的脚本"); (2)字符串对象的方法 indexOf("子字符串",起始位置)查找字符串的位置,这个位置是要查找文本框出现的第一个位置 charAt(index)获取位于指定索引位置的字符 substring(index1[,index2])返回位于指定索引index1和index2之间的字符串,并且包括索引index1所对应的字符串,不包括索引index2所对应的字符串,即前闭、后开。 toLowerCase()将字符串转换成小写 toUpperCase()将字符串转换成大写 注意:其中最常用的就是indexOf()方法 字符串对象.indexOf("查找的字符或字符串",查找的起始位置)如果找到了,则返回找到的位置,否则返回-1. 例如: <html> <head> <title>方法indexOf()用法</title> </head> <body> <script language="javaScript"> var str="Hello world"; document.write(str.indexOf("Hello",0)+"<br/>"); document.write(str.indexOf("World")+"<br/>"); document.write(str.indexOf("world")); </script> </body> </html> b.电子邮件格式的验证 例如: <html> <head> <title>验证用户名和密码</title> <script language="javaScript"> function checkUserName(){ var fname=document.myform.txtUser.value;//验证用户名是否合法 if(fname.length !=0){ for(i=0;i<fname.length;i++){ var ftext=fname.substring(i,i+1);//获取字符串中单个字符 if(ftext<9||ftext>0){ alert("名字中包含数字\n"+"请删除名字中的数字和特殊字符"); return false; } } }else{ alert("未输入用户名\n"+"请输入用户名"); return false; } return true; } function passCheck(){ var userpass=document.myform.txtPassword.value; if(userpass==""){ alert("未输入密码\n"+"请输入密码"); return false; } if(userpass.length<6){ alert("密码必须多于或等于6个字符。\n"); return false; } } function validateform(){ if(checkUserName()&&passCheck()){ return true; }else{ return false; } } </script> </head> <body> .... <input name="clearButton" type="button" id="clearButton" value="清 空"> <input name="registButton" type="submit" id="registerButton" value="登 录"> .... </body> </html> 5-4:文本框控件 a.文本框对象简介(事件:onBlur、onFocus、onChange 方法:focus()、select() 属性:value) b.电子邮件格式验证的改进 例如: <html> <head> <title>使用文本框控件</title> <script language="javaScript"> function checkEmail(){ var strEmail=document.myform.txtEmail.value; if(strEmail.length==0){ alert("电子邮件不能为空!"); return false; } if(strEmail.indexOf("@",0)==-1){ alert("电子邮件格式不正确\n必须包含@符号!"); document.myform.txtEmail.focus(); document.myform.txtEmail.select(); return false; } if(strEmail.indexOf(".",0)==-1){ alert("电子邮件格式不正确\n必须包含.符号!"); document.myform.txtEmail.focus(); document.myform.txtEmail.select(); return false; } return true; } function clearText(){ if(document.myform.txtEmail.value=="请输入真实的电子邮箱,我们将发送激活密码"){ document.myform.txtEmail.value=""; document.myform.txtEmail.style.color="red";//修改文本框的颜色 } } </script> <style type="text/css"> .textBorder{ border:1px solid; font-size:15px; } </style> </head> <form name="myform" method="post" action="reg_success.html" onSubmit="return checkEmail()"> ................. <td>您的电子邮件:</td> <td colspan="2"> <input name="txtEmail" type="text" class="textBorder" id="txtEmail" value="请输入真实的电子邮箱,我们将发送激活密码" size="40" onFocus="clearText" style="color:#666666;">*必填 </td> ................. <body> </body> </form> </html> 5-5:常见错误 <form name="myform" method="post" action="reg_success.html" onSubmit="return checkEmail()">不在表单中写 未调用函数 6.表单验证的相关事件和辅助特效 6-1:制作图片代替按钮的提交效果 例如: 简略代码: <div align="center"> <img src="images/requick.jpg" width="114" height="27" onclick="checkForm()"> </div> 6-2:制作回车切换输入的效果 例如: 简略代码: function changeFocus(){ if(event.keyCode==13){//判断按键是否是回车键 event.keyCode=9;//设置按键为Tab键 } } ... <input name="sname" type="text" class="borderBox" id="sname" size="24" onKeyDown=""changeFocus()> ... 6-3:制作输入提示的特效 例如: 简略代码: function checkLogin(){ var myDiv=document.getElementById("loginError"); myDiv.innerHTML=""; var strName=document.userfrm.loginName.value; if(strName.length==0){ myDiv.innerHTML="<font color='red'>用户名不能为空!"; return; } } ... <input name="loginName" type="text" class="borderBox" id="loginName" size="24" onblur="checkLogin()"> ... 6-4:制作内容动态改变的层特效 例如: 简略代码: function InitDIV(){ document.getElementById("DIV1").style.display="none"; } ... <body onload="InitDIV()">//页面加载的时候就自动调用函数InitDIV() ... 7.表单验证的高级特效

7-1:实现简单的省市级联功能 a.下拉列表控件select 事件 onChange当选项发生变化时产生 方法 add(new,old)将新的Option插入到old前面,如果old为空,直接插入到末尾 属性 value 下拉列表框中被选选项的值、 options下标从0开始,表示整个选项数组、selectedIndex 从0开始的下标,为选中的下标、length返回下拉菜单中的选项个数 b.实现简单的省市级联的特效 例如: 省略代码: function changeCity(){ var province=document.myform.selProvince.value; var newOption1,newOption2; switch(province){ case "四川省": newOption1=new Option("成都市","chengdu"); newOption2=new Option("泸州","luzhou"); break; case "湖北省": newOption1=new Option("武汉","wuhan"); newOption2=new Option("襄樊","xiangfan"); break; case "山东省": newOption1=new Option("青岛市","qingdaos"); newOption2=new Option("烟台市","yantaishi"); break; } document.myform.selCity.options.length=0; document.myform.selCity.options.add(newOption1); document.myform.selCity.options.add(newOption2); } ... <select name="selProvince" onChange="changeCity()"> <option>--请选择开户账号的省份--</option> <option value="四川省">四川省</option> <option value="山东省">山东省</option> <option value="湖北省">湖北省</option> ... 7-2:使用数组优化省市级联功能 a.数组用法的介绍 (1)创建数组 语法:var arrayObjectName=new Array(size); (2)为数组元素赋值 var temp; temp=new Array("1","2","3"); (3)访问数组元素 var temp=new Array(3); temp[0]=1; temp[1]=2'; temp[2]=3; (4)数组的常用属性和方法 join 分隔符 sor()排序 默认升序 详细请看P188 语法: for(variable in object){ code to be executed; } b.使用数组优化省市级联效果 详细请看P193

7-3:使用文字下标的数组再次优化 请看P196

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding for love

CSS常用布局实现03-水平垂直居中

其实,水平居中和垂直居中都是水平垂直居中的一部分,所以这一章节所讲到的方法稍微改下就可用于前面两章。说道水平垂直居中,那么居中的元素肯定是有宽度和高度的,要么是...

991
来自专栏柠檬先生

jquery的基本选择器

关于基本选择器包括 “*” ,“.class”,"element","#id","selector1 selementN" "*" 选择器,可以找到文档中的所...

2079
来自专栏不止是前端

Vue:Vue中操作DOM方法

6339
来自专栏前端布道

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、...

4149
来自专栏栗霖积跬步之旅

1.react的基础知识

React 的基础之:JSX 语法 react 使用 JSX 语法,js 代码中可以写 HTML 代码。 let myTitle = <h1>Hello, Wo...

2856
来自专栏JavaEE

jQuery入门前言

上次说到了JavaScript,对其有一定了解,本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库,简单的说就是封装了一些Java...

1003
来自专栏柠檬先生

jquery基本选择器

关于基本选择器包括  “*” ,“.class”,"element","#id","selector1  selementN" "*" 选择器,可以找到文档中的...

1889
来自专栏十月梦想

CSS基础语法

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

794
来自专栏菜鸟前端工程师

JavaScript学习笔记001-变量0获取和操作标签

1212
来自专栏云端架构

【云端架构】前端必备常用CSS语法

属性(property)是你希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

3658

扫码关注云+社区

领取腾讯云代金券