第三章 JavaScript常用内置对象
02.字符串及应用于表单
2.1 字符串对象
字符串对象是 JavaScript 最常用的内置对象，当使用字符串对象时，并不一定需要用关键字new。任何一个变量，如果它的值是字符串，那么，该变量就是一个字符串对象。因此，下述两种方法产生的字符串变量效果是一样的。如
var mystring="this sample too easy! ";
var mystring=new String("this sample too easy! ");
- 字符串相加
字符串中最常用的操作是字符串相加，前面在介绍运算符号时已经提到过，只要直接使用加号“+”就可以了，例如：
var mystring="this sample"+" too easy! ";
也可以使用“+=”进行连续相加，即： mystring+="<br>";
等效于： mystring= mystring+"<br>";
如果字符串与变量或者数字相加时，需要考虑字符串与整数、浮点数之间的转换。如果要将字符串转换为整数或者为浮点数，只要使用函数 parseInt(s,b)或 parseFloat(s)就可以了，其中 s 表示所要转换的字符串，b 表示要转换成几进制的整数。
- 字符串中使用特殊字符
JavaScript 的字符串既可以使用单引号，也可以使用双引号，但是，前后必须一致。前后不一致则会导致运算时出错。如果字符串中需要加入引号，可以使用与字符串的引号不同的引号，也可以使用反斜杠\，如果要在字符串中加入回车符，可以使用\n如：
var mystring='this sample too "easy "! ';
var mystring= "this sample too \"easy! \"";
- 字符串比较
比较两个字符串是否相等，只要直接使用逻辑比较符“==”就可以了。例如下述的函数用于判断字符串变量是否为空字符串或 null，如果是，则返回 true，否则，返回 false。
function isEmpty（inputString）
{
if (inputString==null || inputString== "")
retrun true;
else
return false;
}
2.2 字符串的常用属性与方法
示例字符串为var myString="this sample too easy!"
| 方法名称 | 意义 | 示例 |
|---|---|---|
| length | 返回字符串的长度 | myString.length结果为21 |
| charAt(位置) | 字符串对象在指定位置处的字符 | myString.charAt(2)结果为i |
| charCodeAt(位置) | 字符串对象在指定位置处的字符的Unicode值 | myString.chaCoderAt(2)结果为105 |
| indexOf(要查找的字符串) | 返回字符串中检索指定字符第一次出现的位置 | myString.indexOf(“too”)结果为12 |
| lastIndexOf(要查找的字符串) | 返回字符串中检索指定字符最后一次出现的位置 | myString. lastIndexOf (“s”)结果为18 |
| substr(开始位置[,长度] ) | 截取字符串 | myString. substr(5,6)结果为sample |
| substring(开始位置,结束位置 ) | 截取字符串 | myString. substring(5,11)结果为sample |
| split([分隔符]) | 分隔字符串到一个数组中 | var a= myString.split() |
| replace(需替代的字符串，新字符串) | 替代字符串 | myString.replace(“too”,”so”)，结果为this sample so easy! |
| toLowerCase() | 变为小写字母 | 本串使用本函数后效果不变，因为原本都是小写 |
| toUpperCase() | 变为大写字母 | |
| big() | 增大字符串文本 | 与<big></big>效果相同 |
| bold() | 加粗字符串文本 | 与<bold></bold >效果相同 |
| fontcolor() | 确定字体颜色 | |
| italics() | 用斜体显示字符串 | 与<I></I>效果相同 |
| small() | 减小文本的大小 | 与<small ></small >效果相同 |
| strike() | 显示带删除线的文本 | 与<strike ></strike >效果相同 |
| sub() | 将文本显示为下标 | 与<sub ></sub >效果相同 |
2.3 form对象-表单及访问
2.3.1 form对象
Form 对象代表一个 HTML 表单。在 HTML 文档中<form> 每出现一次，Form 对象就会被创建。表单用户通常用于收集用户数据，包含了 input 元素如：文本字段，复选框，单选框，提交按钮等待。表单也可以说选项菜单, textarea, fieldset, legend, 和 label 元素。表单用于向服务端发送数据。
Form 对象收集
elements[] 包含表单中所有元素的数组。
Form 对象属性
acceptCharset //服务器可接受的字符集。
action //设置或返回表单的 action 属性。
enctype //设置或返回表单用来编码内容的 MIME 类型。
length //返回表单中的元素数目。
method //设置或返回将数据发送到服务器的 HTTP 方法。
name //设置或返回表单的名称。
target //设置或返回表单提交结果的 Frame 或 Window 名。
Form标准属性
className //设置或返回元素的 class 属性。
dir //设置或返回文本的方向。
lang //设置或返回元素的语言代码。
title //设置或返回元素的 title 属性。
Form 对象方法
reset() //重置一个表单
submit() //提交一个表单
Form 对象事件句柄
onreset //在重置表单元素之前调用。
onsubmit //在提交表单之前调用。
Form示例
<form action="a.php " name="form1",method="get" >
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
2.3.2 表单及其控件的访问
- 表单的访问有以下两种格式：
document.forms[索引]
document.表单名称
- 通过表单对象访问表单属性和方法，格式如下：
HTML对象.getAttribute(属性名)。
document.forms[索引].属性
document.forms[索引].方法（参数）
document.表单名称.属性
document.表单名称.方法（参数）
2.4 input控件
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：是指文本框或处于未输入状态并且未获得光标焦点时，降低显示输入提示文字不透明度，如搜索框效果：<input type="text",placeholder="点击这里搜索">，由于placeholder是html5的新属性，仅支持html5的浏览器才支持placeholder。
实现form表单提交的onclick和onsubmit：
type= “submit” and type=“reset”，分别是“提交”和“重置”两按钮。submit主要功能是将form中所有内容进行提交action页处理，reset则起快速清空所有填写内容的功能。在表单中加上οnsubmit="return false;"可以阻止表单提交。
onsubmit只能表单上使用,提交表单前会触发, onclick是普通按钮等控件使用, 用来触发点击事件。在提交表单前，一般都会进行数据验证，可以选择在按钮上的onclick中验证,也可以在表单上的onsubmit中验证。
表单对象常用方法
| 方法 | 意义 | 示例 |
|---|---|---|
| reset() | 将表单中各元素恢复到缺省值，与单击重置按钮（reset）的效果是一样的 | myForm.reset() |
| submit() | 提交表单，与单击提交按钮（submit）效果是一样的 | myForm.submit() |
表单控件元素对象常用方法
| 方法 | 意义 |
|---|---|
| blur() | 让光标离开当前元素 |
| focus() | 让光标落到当前元素上 |
| select() | 用于种类为text，textarea，password的元素，选择用户输入的内容 |
| click() | 模仿鼠标单击当前元素 |
表单对象常用事件
| 方法 | 意义 |
|---|---|
| onfocus | 在表单元素收到输入焦点时触发 |
| onblur | 在表单元素失去输入焦点时触发 |
后续持续更新……
原创不易，如果觉得不错，就点个赞吧！
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
