鼠标单击事件(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 “的文件(处理输入):
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 | 规定输入元素的类型 |