基础篇(三)-JS对象使用

Posted by Suzeyu on 2016-04-12

自学小笔记

JS内置对象

String对象:字符串对象,提供了对字符串进行操作的属性和方法。

方法名 说明
length 获取字符换长度
toLowerCase() 将str转为小写
toUpperCase() 将str转为大写
charAt(index) 指定下标位置的字符,没有找到返回空字符串
indexOf(strsub) 某一个字字符串所在的下标值,没有则返回-1
lastIndexOf() 同上,但是从右往左查找。
substr(startIndex[,length]) 从startIndex下标起,返回length个字符
substring(startIndex[,endIndex]) 返回从startIndex下标起到endIndex结束之间的所有字符
split(str) 按照传入的字符切割原字符串,返回一个数组

Array对象:数组对象,提供了数组操作方面的属性和方法。

方法名 说明
lenght 返回数组的长度
join(连接号) 将一个数组,用指定的连接号连接成一个字符串
reverse() 将数组的元素反转
shift() 删除数组中第一个元素,返回删除的值,并将长度减1
pop() 删除数组的最后一个元素,返回删除的值,并将长度减1
unshift(boject[,object…]) 往数组前面添加一个或读个数组元素,长度要改变
push([,object…]) 往数组结尾添加一个或多个数组元素,长度改变

Date对象:日期时间对象,可以获取系统的日期时间信息。

Date对象的使用,必须使用new关键字来创建实例对象。

1.创建当前日期对象的实例,不带任何参数。

var today = new Date();

2.指定毫秒值(参数为时间戳)

时间戳:是指某一个时间距离1970年1月1日0时0分0秒,过去了多少毫秒值。

var timer = new Date(99999);

3.指定一个字符串日期时间信息(参数是一个时间字符串)

var timer = new Date("2016/4/6 12:00:00");

4.指定多个数值参数

var timer = new Date(2015,4,20,19,29,59); //顺序为: 年、月、日、时、分、秒。 年月日时必须的。

方法名 说明
getFullYear() 获取四位年份
getMonth() 获取月份,取值0-11
getDate() 获取几号,取值1-31
getHours() 获取小时数
getMinutes() 分钟数
getSeconds() 获取秒
getMilliseconds() 获取毫秒
getDay 获取星期
getTime() 毫秒值 距离1970的毫秒值

Boolean对象:布尔对象,一个布尔变量就是一个布尔对象(没有可用的属性和方法)

Number对象:数值对象。一个数值变量就是一个数值对象。

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

Math对象:数学对象,提供了数学方面运算的属性和方法

Math对象会一个静态对象,可以直接使用。

方法名 说明
PI 圆周率
abs() 绝对值。如:Math.abs(-9)=9
ceil() 向上取整(整数加1,小数去掉)。
floor() 向下取证(直接去掉小数)
round() 四舍五入
pow(x,y) 求x的y次方。
sqrt() 求平方根
random() 返回一个0到1之间的随机小数

form对象

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

1.form对象属性

  • name:表单名称,让js来控制表单。
  • action:表单的数据处理程序(PHP文件)。
  • method:表单的提交方式,取值:GET、POST。
  • enctype:表单数据的编码方式。

2.form对象的方法

  • submit(): 提交表单,与功能一样。
  • reset():重置表单,与重置按钮功能一样。

3.form对象的事件

  • onSubmit:当单机提交按钮时发生,并数据发往服务器之前。主要用来表单验证。
  • onreset:当单机重置按钮时发生。

获取表单元素的方法

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

事件返回值

事件的返回值,会影响对象的默认动作。
如果事件返回false,则阻止默认动作的执行;如果事件返回true或空,则默认动作继续执行。例如<a href="www.baidu.com" onclick="return false"> 连接默认跳转会失效。

提交和验证方法总结

1.使用submit按钮,结合onsubmit事件来实现(最常用).

2.submit按钮,结合onclick事件,实现表单的验证和提交。

3.button按钮,结合submit()方法,实现表单验证提交。

input对象

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

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

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

2.input对象方法

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

3.input对象的事件

  • onfocus:当获取焦点时
  • onblur:当失去焦点时

select对象

select对象属性

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

option对象属性

  • text:指<option></option>之间的文本
  • value:指<option>标记的属性。

简单小实例