鼠标单击事件(onclick)

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。

onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行,通常与按钮一起使用。

比如,我们单击按钮时,触发 onclick 事件,并调用两个数和的函数add2()。代码如下:

<html>
<head>
   <script type="text/javascript">
      function add2(){
        var numa,numb,sum;
        numa=6;
        numb=8;
        sum=numa+numb;
        document.write("两数和为:"+sum);  }
   </script>
</head>
<body>
   <form>
      <input name="button" type="button" value="点击提交" onclick="add2()" />
   </form>
</body>
</html>

注意: 在网页中,如使用事件,就在该元素中设置事件属性。

innerHTML

innerHTML在JavaScript中是双向功能:获取对象的内容 或 向对象插入内容;

如:<div id="aa">这是内容</div> ,

我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容;

也可以对某对象插入内容,如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’;

这样就能向id为abc的对象插入内容。

定义和用法

innerHTML 属性用于设置或返回指定标签之间的 HTML 内容。

语法

Object.innerHTML = "HTML";// 设置

var html = Object.innerHTML;// 获取

例子

获取段落p的 innerHTML(html内容)

<html>
    <head>
    <script type="text/javascript">
    function getInnerHTML(){        alert(document.getElementById("test").innerHTML);
    }
    </script>
    </head><body>
    <p id="test"><font color="#000">嗨豆壳 www.hi-docs.com</font></p>
    <input type="button" nclick="getInnerHTML()" value="点击" />
    </body>
</html>

String 字符串对象

在之前的学习中已经使用字符串对象了,定义字符串的方法就是直接赋值。比如:

var mystr = "I love JavaScript!"

定义mystr字符串后,我们就可以访问它的属性和方法。

访问字符串对象的属性length:

stringObject.length; 返回该字符串的长度。

var mystr="Hello World!"; var myl=mystr.length;

以上代码执行后,myl 的值将是:12

访问字符串对象的方法:

使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写:

var mystr="Hello world!"; var mynum=mystr.toUpperCase();
以上代码执行后mynum 的值是HELLO WORLD!

JavaScript split() 方法

把一个字符串分割成字符串数组:

var str="How are you doing today?"; var n=str.split(" ");

n 输出一个数组的值:

How,are,you,doing,today?

定义和用法

split() 方法用于把一个字符串分割成字符串数组。

提示: 如果把空字符串 (“”) 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

注意: split() 方法不改变原始字符串。

所有主要浏览器都支持 split() 方法


语法

*string*.split(*separator*,*limit*)

参数值

参数 描述
separator 可选。字符串或正则表达式,从该参数指定的地方分割 string Object。
limit 可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。

返回值

类型 描述
Array 一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 string Object 分割成子串创建的。返回的数组中的字串不包括 separator 自身。

省略分割参数:

var str="How are you doing today?"; var n=str.split();

n 输出数组值得结果:

How are you doing today?

分割每个字符,包括空格:

var str="How are you doing today?"; var n=str.split("");

n 输出数组值得结果:

H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?

使用 limit 参数:

var str="How are you doing today?"; var n=str.split(" ",3);

n 将输出3个数组的值:

How,are,you

使用一个字符作为分隔符:

var str="How are you doing today?"; var n=str.split("o");

n 输出数组值得结果:

H,w are y,u d,ing t,day?

JavaScript substring() 方法

定义和用法

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

substring() 方法返回的子串包括 开始 处的字符,但不包括 结束 处的字符。

语法

*string*.substring(from, to)

参数 描述
from 必需。一个非负的整数,规定要提取的子串的第一个字符在 string Object 中的位置。
to 可选。一个非负的整数,比要提取的子串的最后一个字符在 string Object 中的位置多 1。 如果省略该参数,那么返回的子串会一直到字符串的结尾。

所有主要浏览器都支持 substring() 方法

实例

在本例中,我们将使用 substring() 从字符串中提取一些字符::

以上代码输出结果:

lo world! lo w

JavaScript substr() 方法

定义和用法

substr() 方法可在字符串中抽取从 开始 下标开始的指定数目的字符。

提示: substr() 的参数指定的是子串的开始位置和长度,因此它可以替代 substring() 和 slice() 来使用。

注意: substr() 方法不会改变源字符串。

所有主要浏览器都支持 substr() 方法


语法

string.substr(start,length)

参数值

参数 描述
start 必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。
length 可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。

返回值

类型 描述
String A new string containing the extracted part of the text

实例

在本例中,我们将使用 substr() 从字符串第二个位置中提取一些字符:

var str="Hello world!"; var n=str.substr(2)

n 输出结果:

llo world!

form(表单)

form(表单)对于每个Web开发人员来说,应该是再熟悉不过的东西了,它是页面与Web服务器交互过程中最重要的信息来源。表单form的常用属性和常用的控件input如下:

1.form action属性

action 属性规定当提交表单时,向何处发送表单数据。当提交表单时,发送表单数据到名为”a.php “的文件(处理输入):

First name:
Last name:

2.form method属性

method属性可设置或者返回表单method属性值。制订了如何发送表单数据 (表单数据提交地址在action属性中指定)。

method 属性可以是get,在 URL 中添加表单数据,也可以使用使用post方法提交表单数据。

<form action="a.php " method="get" >
     学号: <input type="text" name="stuId"> 
      <input type="submit" value="查询">
 </form> 

表单控件

input控件

input表示form表单中的一种输入对象,其又随type类型的不同而分为文本输入框,type=”password”为密码输入框,type=”radio”/type=”checkbox”为单选/复选框,type=”button”为普通按钮等。其中type=”text”,表示输入类型是文本框,输入单行文本,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等。当然这也是input的默认类型。input控件的常用属性如下:

name:同样是表示的该文本输入框名称。

size:输入框的长度大小。

maxlength:输入框中允许输入字符的最大数。

value:输入框中的默认值,根据表单name属性值和文本框name属性值可以访问到文本框对象,再访问文本框value的属性就可以得到文本框中的值。这种方式同样使用于密码框,和下拉列表框。如下:

表单名称.控件名称.value 或 表单名称.elements[下标] .value

readonly:表示该框中只能显示,不能添加修改。

placeholder:是指文本框或处于未输入状态并且未获得光标焦点时,降低显示输入提示文字不透明度,如搜索框效果:,由于placeholder是html5的新属性,仅支持html5的浏览器才支持placeholder。

实现form表单提交的onclick和onsubmit:

type= "submit" and type="reset",分别是“提交”和“重置”两按钮。submit主要功能是将form中所有内容进行提交action页处理,reset则起快速清空所有填写内容的功能。在表单中加上onsubmit="return false;"可以阻止表单提交。

onsubmit只能表单上使用,提交表单前会触发, onclick是普通按钮等控件使用, 用来触发点击事件。在提交表单前,一般都会进行数据验证,可以选择在按钮上的onclick中验证,也可以在表单上的onsubmit中验证。

下表列出了表单对象的常用属性、方法。示例中myForm是一个表单对象。

​ 表单对象常用方法

方法 意义 示例
reset() 将表单中各元素恢复到缺省值,与单击重置按钮(reset)的效果是一样的 myForm.reset()
submit() 提交表单,与单击提交按钮(submit)效果是一样的 myForm.submit()

​ 表单控件元素对象的常用方法

方法 意义
blur() 让光标离开当前元素
focus() 让光标落到当前元素上
select() 用于种类为text,textarea,password的元素,选择用户输入的内容
click() 模仿鼠标单击当前元素

表单对象常用事件:onfocus:在表单元素收到输入焦点时触发;onblur:在表单元素失去输入焦点时触发。如:文本框失去焦点时,以下代码将调用myfun()函数。

<input type="text" value="" name="txtName" onblur ="myfun( )" >

input 控件常用方法

​ 表单控件元素对象的常用方法

方法 意义
blur() 让光标离开当前元素
focus() 让光标落到当前元素上
select() 用于种类为text,textarea,password的元素,选择用户输入的内容
click() 模仿鼠标单击当前元素

表单对象常用事件:onfocus:在表单元素收到输入焦点时触发;onblur:在表单元素失去输入焦点时触发。如:文本框失去焦点时,以下代码将调用myfun()函数。

<input type="text" value="" name="txtName" onblur ="myfun( )" >

Select 对象

Select 对象代表 HTML 表单中的一个下拉列表。

在 HTML 表单中,

您可通过遍历表单的 elements[] 数组来访问某个 Select 对象,或者使用 document.getElementById()。

Select 对象集合

集合 描述
[options] 返回包含下拉列表中的所有选项的一个数组。

Select 对象属性

属性 描述
disabled 设置或返回是否应禁用下拉列表。
form 返回对包含下拉列表的表单的引用。
id 设置或返回下拉列表的 id。
length 返回下拉列表中的选项数目。
multiple 设置或返回是否选择多个项目。
name 设置或返回下拉列表的名称。
selectedIndex 设置或返回下拉列表中被选项目的索引号。
size 设置或返回下拉列表中的可见行数。
tabIndex 设置或返回下拉列表的 tab 键控制次序。
type 返回下拉列表的表单类型。

Select 对象方法

方法描述add()向下拉列表添加一个选项。blur()从下拉列表移开焦点。focus()在下拉列表上设置焦点。remove()从下拉列表中删除一个选项。

Select 对象事件句柄

事件句柄 描述
onchange 当改变选择时调用的事件句柄。

数据验证

数据验证用于确保用户输入的数据是有效的。

典型的数据验证有:

大多数情况下,数据验证用于确保用户正确输入数据。

数据验证可以使用不同方法来定义,并通过多种方式来调用。

服务端数据验证是在数据提交到服务器上后再验证。

客户端数据验证 side validation是在数据发送到服务器前,在浏览器上完成验证。


HTML 约束验证

HTML5 新增了 HTML 表单的验证方式:约束验证(constraint validation)。

约束验证是表单被提交时浏览器用来实现验证的一种算法。

约束验证 HTML 输入属性

属性 描述
disabled 规定输入的元素不可用
max 规定输入元素的最大值
min 规定输入元素的最小值
pattern 规定输入元素值的模式
required 规定输入元素字段是必需的
type 规定输入元素的类型