JavaScript相关

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>           
            //创建一个没有任何元素的数组
            var arr = new Array();
            //增加数组元素
            arr[0] = "张三";          
            arr[1] = "男";          
            arr[2] = 25;          
            arr[3] = "安徽";          
            document.write(arr);         
        </script>
    </head>
    <body>
    </body>
</html>

使用[]创建

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>          
            //使用[]方式创建一个数组
            var arr = ["张三","男",25,"安徽"];         
            document.write(arr);         
        </script>
    </head>
    <body>
    </body>
</html>

二维数组

函数

定义函数格式

function functionName([参数1][,参数2][,参数N]){
    函数的功能代码;
    [return 参数r]
}

全局和局部变量

使用函数范围划分变量范围，函数内位局部变量，函数外为全局变量

拷贝传值和引用传值

拷贝传值

基本数据类型都是“拷贝传值”。

拷贝传值，就是将一个变量的值“拷贝”一份，传给了另一个变量。
拷贝传值完之后，两个变量之间没有任何联系，修改其中一个变量的值，另一个不会改变。
这两个变量之间，是相互独立的，没有任何联系

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 <script>
 var a=10;
 var b=a;
 a++;
 document.write("a的值为:"+a+"<br/>");
 document.write("b的值为:"+b);
 </script>
 </head>
 <body>
 </body>
</html>

引用传址

复合数据类型都是“引用传地址”

引用传址：将一个变量的数据地址，“拷贝”一份，传给另了另一个变量。这两个变量，指向“同一个地址”。

大家共享同一份数据。

如果其中一个变量的值发生了改变，那么，另一个变量的值也得变。要变一起变。

因此，这两个变量是有联系的，要变大家一起变

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
            var arr1=[10,20,30,40];
            var arr2=arr1;
            arr1[1]=100;
            document.write("arr1[1]的值为:"+arr1[1]+"<br/>");
            document.write("arr2[1]的值为:"+arr2[1]);
        </script>
    </head>
    <body>
    </body>
</html>

匿名函数

即没有名字的函数。

匿名函数，不能单独定义的，也不能单独调用。
匿名函数，一般是作为数据给其它变量赋值的。可以给普通变量、数组元素、对象的属性赋值

事件

事件：指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码

事件处理程序

我们用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：onclick、mousemove、load等都是事件的名称。响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器

鼠标单击事件(onclick)

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
            function fun1(){
                window.alert("欢迎来到php.cn")
            } 
            function fun2(){
                window.alert("你看，你还是点了我")
            }
        </script>
    </head>
    <body>
        <form>
            <input name="点我看看" type="button" value="点我看看" onclick="fun1()"/>
            <p onclick="fun2()">不要点我</p>
        </form>
    </body>
</html>

鼠标经过事件(onmouseover)

鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
            function fun(){
                window.alert("请确认四周没有人再点击提交")
            } 
        </script>
    </head>
    <body>
        <form>
            机密：
            <input name="txt" type="text" >
            <input name="" type="button" value="提交" onmouseover="fun()"/>
        </form>
    </body>
</html>

鼠标移开事件(onmouseout)

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
            function fun(){
                window.alert("提交成功了")
            } 
        </script>
    </head>
    <body>
        <form>
            机密：
            <input name="txt" type="text" >
            <input name="" type="button" value="提交之后移开鼠标"  onmouseout="fun()"/>
        </form>
    </body>
</html>

光标聚焦事件（onfocus）

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

如下代码, 当将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数fun()。

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 <script>
 function fun(){
 window.alert("请输入真实姓名")
 } 
 </script>
 </head>
 <body>
 <form>
 姓名：
 <input name="username" type="text" value="请输入姓名" onfocus="fun()" >
 </form>
 </body>
</html>

光标失焦事件（onblur）

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 <script>
 function fun(){
 window.alert("请确认这是您的真实姓名")
 } 
 </script>
 </head>
 <body>
 <form>
 姓名：
 <input name="username" type="text" value="请输入姓名" onblur="fun()" >
 </form>
 </body>
</html>

内容选中事件（onselect）

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 <script>
 function fun(){
 window.alert("这是个人简介，禁止复制")
 } 
 </script>
 </head>
 <body>
 <form>
 个性介绍：<br/><textarea name=" introduction" cols="30" rows="4" onselect="fun()">小明：
 PHP高级工程师
 全栈工程师</textarea>
 </form>
 </body>
</html>

文本框内容改变事件（onchange）

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 <script>
 function fun(){
 window.alert("您刚刚修改了个人简介")
 }
 </script>
 </head>
 <body>
 <form>
 个性介绍：<br/><textarea name=" introduction" cols="30" rows="4" onchange="fun()">小明：
 PHP高级工程师
 全栈工程师</textarea>
 </form>
 </body>
</html>

加载事件（onload）

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 <script>
 function fun(){
 window.alert("加载中？？？")
 }
 </script>
 </head>
 <body onload="fun()">
 欢迎来到php.cn
 </body>
</html>

对象

分类

内置对象

数组、日期、字符串等

BOM对象

浏览器组件

DOM对象

文档

自定义对象

如下例

使用new

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
            //使用new关键字结合构造函数Object()来创建一个空的对象
            var info = new Object();
            //增加属性
            info.name = "张三";
            info.age = 20;
            //增加方法：将一个函数定义赋值给了对象属性，这时，对象属性变成了方法
            info.show=function(){
                var str="我叫"+info.name+"今年已经"+info.age+"岁了";
                return str;
            }
            //调用对象方法，并输出结果
            document.write(info.show());
        </script>
    </head>
    <body>
    </body>
</html>

使用{}

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
            //使用大括号{}来创建对象
            var info = {
            //增加属性
            name :"张三",
            age : 20,
            //增加方法：将一个函数定义赋值给了对象属性，这时，对象属性变成了方法
            show:function(){
                var str="我叫"+info.name+"今年已经"+info.age+"岁了";
                return str;
                }
            }
            //调用对象方法，并输出结果
            document.write(info.show());
        </script>
    </head>
    <body>
    </body>
</html>

String

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 <script>
 var str="ASDfgh";
 document.write(str.length+"<br/>");
 document.write(str.toLowerCase()+"<br/>");
 document.write(str.toUpperCase()+"<br/>");
 </script>
 </head>
 <body>
 </body>
</html>

其他方法还有：

charAt(index)

功能：返回指定下标位置的一个字符。如果没有找到，则返回空字符串。
语法：strObj.charAt(index)
参数：index是指定的一个索引号，根据index索引号来返回一个字符。

indexOf()

功能：返回一个子字符串在原始字符串中的索引值(查找顺序从左往右查找)。如果没有找到，则返回-1。
语法：strObj.indexOf(substr)
参数：substr代表要查找的一个子字符串

lastIndexOf()

功能：在原始字符串，从右往左查找某个子字符串。如果没找到，返回-1。
语法：strObj.lastIndexOf(substr)
参数：substr代表要查找的子字符串

substr()

功能：在原始字符串，返回一个子字符串。
语法：strObj.substr(startIndex [ , length])
说明：从下标startIndex起，返回length个字符。
参数：

startIndex表示查找的起始索引号；
length可选，返回几个字符。如果省略，一直返回到结尾

substring()

功能：在原始字符串，返回一个子字符串。
语法：strObj.substring(startIndex [ , endIndex])
说明：返回从startIndex开始索引值到endIndex结束索引值之间的所有字符。
参数：

startIndex：代表开始索引值。
endIndex：可选项，代表结束索引值。如果省略，一般返回到结尾的所有的字符。

注：如果省略第二个参数，那么substr()和substring()结果一样。

注：substring()返回的字符包含startIndex处的字符，不包含endIndex处的字符

split()：将一个字符串转成数组

功能：将一个字符串切割成若干段。返回一个数组。
语法：strObj.split(分割号)
参数：参数是一个分割号的字符串。用指定的分割号将字符串切成若干段。

以空格为分割号，就字符串Hello JavaScript
分割成数组Hello,JavaScript

Array

一个数组变量，就是一个数组对象

length属性：动态获取数组长度。如：var len = arrObj.length

其他方法还有：

join()

功能：将一个数组转成字符串。返回一个字符串。
语法：arrObj.join(连接号)
说明：将一个数组，用指定的“连接号”连接成一个字符串

reverse()

功能：将数组中各元素颠倒顺序。
语法：arrObj.reverse()
参数：无

数组元素的删除和添加

delete运算符，只能删除数组元素的值，而所占空间还在，总长度没变(arr.length)。以前数组元素的添加，只能向后添加，不能向前添加

shift()：删除数组中第一个元素，返回删除的那个值，并将长度减1。
pop()：删除数组中最后一个元素，返回删除的那个值，并将长度减1。

unshift()：往数组前面添加一个或多个数组元素，长度要改变。arrObj.unshift(“a” , “b” , “c”)
push()：往数组结尾添加一个或多个数组元素，长度要改变。arrObj.push(“a” , “b” , “c”)

Date

Date对象的使用，必须使用new关键字来创建，否则，无法调用Date对象的属性和方法

创建的方法

（1）创建当前(现在)日期对象的实例，不带任何参数

var today = new Date();

（2）创建指定时间戳的日期对象实例，参数是时间戳。

时间戳：是指某一个时间距离1970年1月1日0时0分0秒，过去了多少毫秒值(1秒=1000毫秒)。

var timer = new Date(10000); //时间是 1970年1月1日0时0分10秒

（3）指定一个字符串的日期时间信息，参数是一个日期时间字符串

var timer = new Date(“2016/11/11 10:00:00”);

举例：计算一下你今天多大了？

（4）指定多个数值参数

var timer = new Date(2015+100,4,25,10,20,0); //顺序为：年、月、日、时、分、秒，年、月、日是必须的。

举例：计算自己再活多少天，能活到100岁。

方法

getFullYear()：获取四位的年份。
getMonth()：获取月份，取值0-11。
getDate()：获取几号，取值1-31
getHours()：获取小时数。
getMinutes()：分钟数
getSeconds()：秒数
getMilliseconds()毫秒
getDay()星期
getTime()毫秒值，距离1970年1月1日至今的毫秒值

Math

Math对象是一个静态对象，换句话说：在使用Math对象，不需要创建实例

Math.PI：圆周率。
Math.abs()：绝对值。如：Math.abs(-9) = 9
Math.ceil()：向上取整(整数加1，小数去掉)。如：Math.ceil(10.2) = 11
Math.floor()：向下取整(直接去掉小数)。如：Math.floor(9.888) = 9
Math.round()：四舍五入。如：Math.round(4.5) = 5; Math.round(4.1) = 4
Math.pow(x,y)：求x的y次方。如：Math.pow(2,3) = 8
Math.sqrt()：求平方根。如：Math.sqrt(121) = 11
Math.random()：返回一个0到1之间的随机小数。如：Math.random() = 0.12204467732259783

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>

    </head>
    <body>
    </body>
</html>
<script>
    var min = 100000;
    var max = 999999;
    var random = Math.random() *(max-min)+min; 
     //向下取整
    random = Math.floor(random);
    document.body.bgColor = "#"+random;
</script>

Number

一个数值变量就是一个数值对象

toFixed()

功能：将一个数值转成字符串，并进行四舍五入，保留指定位数的小数。
语法：numObj.toFixed(n)
参数：n就是要保留的小数位数。
举例：

var a = 123.9878;

a = a.toFixed(2); // a = “123.99”

BOM对象模型

简介

BOM是browser object model的缩写，简称浏览器对象模型
BOM提供了独立于内容而与浏览器窗口进行交互的对象
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

Window对象属性与方法

属性

name：指浏览器窗口的名字或框架的名字。这个名字是给a标记的target属性来用的。

设置窗口的名字：window.name = “newWin”

获取窗口的名字：document.write(name);

top：代表最顶层窗口。如：window.top
parent：代表父级窗口，主要用于框架。
self：代表当前窗口，主要用于框架中。
innerWidth：指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。

在IE下，使用 document.documentElement.clientWidth 来代替 window.innerWidth

innerHeight：指浏览器窗品的内高(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。

在IE下，使用 document.documentElement.clientHeight 来代替 window.innerHeight
document.documentElement 就是<html>标记对象
document.body 就是 <body>标记对象

方法

alert()：弹出一个警告对话框。
prompt()：弹出一个输入对话框。
confirm()：弹出一个确认对话框。如果单击“确定按钮”返回true，如果单击“取消”返回false。
close()：关闭窗口
print()：打印窗口

open()方法

功能：打开一个新的浏览器窗口。
语法：var winObj = window.open([url][,name][,options]);
说明：参数可有可无。如果没有指定参数，则打开一个选项卡式的窗口(大小是最大大化)。
参数：

- url：准备在新窗口中显示哪个文件。url可以为空字符串，表示显示一个空的页面。
- name：新窗口的名字，该名字给标记的target属性来用
- options：窗口的规格。

width：新窗口的宽度

height：新窗口的高度

left：新窗口距离屏幕左边的距离

top：新窗口距离屏幕上边的距离

menubar：是否显示菜单栏，取值：yes、no

toolbar：是否显示工具栏。

location：是否显示地址栏。

status：是否显示状态栏。

scrollbars：是否显示滚动条，不能省略s字母。

4.返回值：返回一个window对象的变量，可以通过该名称跟踪该窗口。winObj具备window对象的所有属性和方法。

注：

onload事件：当网页加载完成，指标记的所有内容全部加载完成，才触发该事件(条件)。通过onload事件属性，去调用JS的函数。onload属性只有body标记才有。

延时器方法

setTimeout()

功能：设置一个延时器，换句话说：时间一到，就执行JS代码一次。
语法：var timer = window.setTimeout(code,millisec)
参数：

code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。

举例：window.setTimeout(“close()” , 2000)

举例：window.setTimeout(init, 2000); //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。

millisec：毫秒值。1秒=1000毫秒

返回值：返回一个延时器的id变量，这个id变量给clearTimeout()用来清除。

clearTimeout()

功能：清除延时器id变量
语法：window.clearTimeout(timer)
参数：timer就是由setTimeout()设置的延时器的id变量

定时器方法

setInterval()

功能：设置一个定时器。定时器，重复不断的执行JS代码(周期性)。
语法： var timer = window.setInterval(code , millisec)
参数：

code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。

举例：window.setInterval(“init()” , 2000)

举例：window.setInterval(init, 2000); //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。

millisec：毫秒值。1秒=1000毫秒

返回值：返回一个定时器的id变量，这个id变量给clearInterval()用来清除。

clearInterval()

功能：清除定时器id变量
语法：window.clearInterval(timer)
参数：timer就是由setInterval()设置的定时器的id变量

screen屏幕对象

Width：屏幕的宽度，只读属性。
Height：屏幕的高度，只读属性。
availWidth：屏幕的有效宽度，不含任务栏。只读属性。
availHeight：屏幕的有效高度，不含任务栏。只读属性。

navigator对象

appName：浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器。

如果是IE浏览器的话，返回值为：Microsoft Internet Explorer

如果是Firefox浏览器的话，返回值为：Netscape

appVersion：浏览器软件的核心版本号。
systemLanguage：系统语言
userLanguage：用户语言
platform：平台

Location地址栏对象

href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;
hostname：主机名

history对象

length：历史记录的个数
go(n)：同时可以实现“前进”和“后退。”

history.go(0) 刷新网页
history.go(-1) 后退
history.go(1) 前进一步
history.go(3) 前进三步

forward()：相当于浏览器的“前进”按钮
back()：相当于浏览器的“后退”按钮

DOM对象模型

DOM的分类

核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法。
HTML DOM：针对HTML文档提供的专用的属性方法。
XML DOM：针对XML文档提供的专用的属性和方法。
CSS DOM：提供了操作CSS的属性和方法。
Event DOM：事件对象模型。如：onclick、 onload等

HTML节点树

DOM中节点类型

document文档节点，代表整个网页，不代表任何HTML标记。但它是html节点的父节点。
element元素节点，指任何HTML标记。每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点。
attribute属性节点。指HTML标记的属性。
text节点。是节点树的最底节点。

核心DOM中的公共的属性和方法

节点访问

nodeName：节点名称。
nodeValue：节点的值。只有文本节点才有值，元素节点没有值。nodeValue的值只能是“纯文本”，不能含有任何的HTML标记或CSS属性。
firstChild：第1个子节点。
lastChild：最后1个子节点。
childNodes：子节点列表，是一个数组。
parentNode：父节点。

查找标记的方法

document.firstChild
document.firstChild.lastChild
document.body

对节点的属性操作

setAttribute(name,value)：给某个节点添加一个属性。
getAttribute(name)：获取某个节点属性的值。
removeAttribute(name)：删除某个节点的属性

节点的创建

document.createElement(tagName)：创建一个指定的HTML标记，一个节点

tagName：是指不带尖括号的HTML标记名称。
举例：var imgObj = document.createElement(“img”)

parentNode.appendChild(childNode)：将创建的节点，追加到某个父节点下。

parentNode代表父节点，父节点必须存在。
childNode代表子节点。

举例：document.body.appendChild(imgObj)
parentNode.removeChild(childNode)：删除某个父节点下的子节点。

parentNode代表父节点。
childNode代表要删除的子节点。

HTMLDOM

getElementById()

功能：查找网页中指定id的元素对象。
语法：var obj = document.getElementById(id)
参数：id是指网页中标记的id属性的值。
返回值：返回一个元素对象。
举例：var imgObj = document.getElementById(“img01”)

getElementsByTagName(tagName)

功能：查找指定的HTML标记，返回一个数组。
语法：var arrObj = parentNode.getElementsByTagName(tagName)
参数：tagName是要查找的标记名称，不带尖括号。
返回值：返回一个数组。如果只有一个节点，也返回一个数组。
举例：var arrObj = ulObj.getElementsByTagName(“li”)

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 <script type="text/javascript">
 window.onload = function(){
 //获取id=ulTag的网页对象
 var ulObj = document.getElementById("question");
 //查找<ul>下的所有的<li>标记
 var arrObj = ulObj.getElementsByTagName("li");
 //给所有的<li>标记增加CSS效果
 for(var i=0;i<arrObj.length;i++)
 {
 //给每个<li>标记加style属性
 arrObj[i].style = "color:blue;font-size:24px;";
 }
 }
 </script>
 </head>
 <body >
 <ul id="question">
 <li>mac 中系统自带的apache 误删了怎么恢复</li>
 <li>CURL POST数据量过大，接收不到服务端的信息</li>
 <li>用了构造函数为什么这个还是2？</li>
 <li>cookies登录原理</li>
 </ul>
</html>

CSS DOM动态样式

DOM中Event对象

Form对象

一个<form>标记，就是一个<form>对象。

form对象的属性

name：表单的名称，主要用来让JS来控制表单。
action：表单的数据处理程序(PHP文件)。
method：表单的提交方式，取值：GET、POST
enctype：表单数据的编码方式。

form对象的方法

submit()：提交表单，与<input type = “submit” />功能一样。
reset()：重置表单，与重置按钮功能一样。

form对象的事件

onsubmit：当单击提交按钮时发生，并数据发往服务器之前发生。主要用来“在表单提交之前进行表单验证”。
onreset：当单击重置按钮时发生。

获取表单元素

通过网页元素的id来获取对象。document.getElementById(id)
通过HTML标签名来获取对象。parentNode.getElementsByTagName(tagName)
通过name属性来获取表单元素对象。表单中所有元素的起点都必须是document对象。

语法：document.formObj.elementObj
访问方式是三层结构。其中，formObj代表表单对象，elementObj代表表单元素对象。
举例：document.form1.username.value.length

事件返回值

事件的返回值，会影响对象的默认动作。如：<a>标记的默认动作是打开一个网址。

如果事件返回false，则阻止默认动作的执行；如果事件返回true或空，则默认动作继续执行

提交和验证方法总结

常用：使用submit按钮，结合onsubmit事件来实现

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php.cn</title>
<script type="text/javascript">
function checkForm()
{
    //判断用户名是否为空
    if(document.form1.username.value=="")
    {
        window.alert("用户名不能为空！");
        return false;
    }else
    {
        window.alert("验证通过！");
        return true;
    }
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php" onsubmit="return checkForm()">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="submit" value="提交表单" />
</form>
</body>
</html>

submit按钮，结合onclick事件，实现表单的验证和提交

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php.cn</title>
<script type="text/javascript">
function checkForm()
{
    //判断用户名是否为空
    if(document.form1.username.value=="")
    {
        window.alert("用户名不能为空！");
    }else
    {
        window.alert("验证通过！");
    }
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="submit" value="提交表单" onclick="checkForm()" />
</form>
</body>
</html>

button按钮(普通按钮)，结合submit()方法，实现表单验证提交

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php.cn</title>
<script type="text/javascript">
function checkForm()
{
    if(document.form1.username.value.length == 0)
    {
        //如果用户名为空
        window.alert("用户名不能为空！");
    }else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
    {
        //如果用户名长度小于5或大于20
        window.alert("用户名只能介于5-20个字符！");
    }else if(checkOtherChar(document.form1.username.value))
    {
        //如果用户名含有特殊符号
        window.alert("用户名中含有特殊符号！");
    }else
    {
        //如果验证通过，提交表单
        window.alert("验证通过！");
        //表单提交方法
        document.form1.submit();
    }
}
function checkOtherChar(str)
{
    //定义一个特殊符号的数组
    var arr = ["*","&","<",">","$","\\","/"];
    //循环比较：数组中的每一个字符，与用户名每一个字符进行比对
    for(var i=0;i<arr.length;i++)
    {
        for(var j=0;j<str.length;j++)
        {
            if(arr[i]==str.charAt(j))
            {
                return true;
            }
        }
    }
    //如果没找到
    return false;
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="button" value="提交按钮" onclick="checkForm()" />
</form>
</body>
</html>

input对象

一个<input>标记，就是一个input对象。

input对象的属性(以type=text为例)

name：表单元素的名称。
value：表单元素的值，用户输入的内容，可以通过该属性来获取。
size：表单的长度。
maxlength：表单元素的最大长度(最多可输的字符数)。
disabled：禁用属性。
readonly：只读属性。

input对象的方法

focus()：获得焦点的方法(定位光标)。
blur()：失去焦点的方法(移走光标)。
select()：选中文本的方法。

input对象的事件

onfocus：当获得焦点时
onblur：当失去焦点时

select对象

一个<select>标记，对应一个select对象。

select对象属性

options[]：设置或返回下拉列表中<option>标记构成的数组。
selectedIndex：设置或选中指定<option>的索引号。
length：指定下拉列表中<option>标记的个数。
name：元素名称。

option对象

一个<option>标记，对应一个option对象。

option对象属性

text：指<option>和</option>之间的文本。
value：是指<option>标记的属性

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>php.cn</title>
    <script>
        window.onload=function(){
            var Form = document.form;
            Form.city.options[2].text = "合肥";
            alert(Form.city.options[2].text);
        }
    </script>
</head>
<body>
    <form name="form" method="post" action="">
        城市：
        <select name="city">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">深圳</option>
        </select>
    </form>
</body>
</html>

weixin_38606268

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript相关

目录功能语法注释常用的两个客户端输出方法document.write(str)window.alert(str)变量变量的声明变量的类型数据类型转换运算符流程控制语句数组数组的创建二维数组函数全局和局部变量拷贝传值和引用传值拷贝传值引用传址匿名函数事件事件处理程序鼠标单击事件(onclick)鼠标经过事件(onmouseover)鼠标移开事件(onmouseout)光标聚焦事件（on...
复制链接

扫一扫