学习AJAX+JQUERY必看（JavaScript基础对象篇）

什么是对象

简单点说，编程语言中的对象是对现实中事物的简化。例如，我们一个人就是一个对象，但是编程语言很难完全描述一个这样复杂的对象。所以我们必须做出简化，首先，将人简化成属性和行为的组合，然后仅仅保留对程序有意义的几个属性以及行为。例如，我们做一个统计某学校的人的身高的程序，那么我们在这个程序中就可以把人的行为省略掉，只保留行为，并且只保留身高这一个属性。这样，我们就得到了一个最简单的对象。

JavaScript字符串对象

本节介绍字符串的属性和方法，它主要用来处理文本。

对象的属性

其实我们之前在HTML DOM中已经就是在使用对象了。例如，我们知道，DOM节点有一些信息、例如nodeName、nodeType等，其实这些信息就是节点对象的属性。下面我们以字符串为例来看看对象的属性。

字符串的属性

var s = "我有个7个字符";

定义了s这个字符串之后，我们就有了一个字符串对象，我们可以访问它的长度属性(length)，这个属性不需要我们定义，它是一个内置的属性。访问的方式如下:

s.length

点击下面的按钮看看字符串的长度。

窗体顶端

alert(s.length)

窗体底端

字符串对象的方法(行为)

同样，对象也可以有行为，以字符串对象为例，我们可以让字符串返回某一个位置的字母或文字，这就是一个行为。可以用后面的按钮简单地体验一下字符串的各个属性与方法，本文最后会详细地解释各个方法的使用方法。

<script type="text/javascript">
var s = "我有个7个字符";
var str = "字符" + "串";       //两个字符串相加
</script>

 

窗体顶端

alert(str)

使用字符串的length属性为字符串的长度。

alert(str.length)

使用charAt方法返回指定位置的字符。

alert(str.charAt(0))
alert(str.charAt(1))

substring方法从字符串中截取一个子字符串。

alert(str.substring(0,2))

indexOf返回字符串中指定字符或字符串的位置，如果字符不存在就返回-1。

alert(str.indexOf('符')

lastIndexOf方法返回一个字符串中某字符最后一次出现的位置。

窗体底端

JavaScript字符串length

字符串的length属性可以返回字符串的长度，也就是包含字符的个数。看下面的例子，我们创建了四个字符串，点击后面的按钮可以把它们显示出来，代码如下：

JavaScript代码

<script type="text/javascript">
        var str0 = "";
        var str1 = "短";
        var str2 = "两个";
        var str3 = "这是一个长长的字符串";
</script>

测试字符串的length属性

由于第一个字符串是空的，所以length属性为0。

alert(str0.length)
alert(str1.length)
alert(str2.length)
alert(str3.length)

JavaScript字符串charAt方法

字符串的charAt方法可以返回字符串中指定位置的字符。需要注意，第一个字符为charAt(0)。在下面的例子中，我们创建的一个字符串，然后使用charAt函数来返回各个位置的字符。代码如下：

JavaScript代码

<script type="text/javascript">
        var str = "01234567,我是一个很长很长的字符串……";   
</script>

测试字符串的charAt方法

点击下面的按钮进行测试，可以发现，charAt(0)，也就是字符串的第一个字符，就是0，后面以此类推。

alert(str.charAt(0))
alert(str.charAt(2))
alert(str.charAt(5))

下面的测试可以发现，charAt(8)为一个逗号。而charAt(21)为半个省略号，可见，省略号算两个字符。也可以计算出来，中间的中文文字也算是一个字符。

alert(str.charAt(8))
alert(str.charAt(21))

JavaScript字符串substring方法

字符串的substring方法可以返回字符串中指定两个位置（索引）之间的子字符串。在下面的例子中，我们创建的一个字符串，然后使用substring函数来返回几个子字符串。为了便于观察，字符串为"01234567890",这样0位置的字符恰好为0，1位置的字符恰好为1。代码如下：

JavaScript代码

<script type="text/javascript">
        var str = "01234567890";
</script>

测试字符串的substring方法

点击下面的按钮进行测试，可以发现，substring(0,2)会返回"01"，也就是说，只返回位置0和位置1，而不包括2。可见，传递给substring的两个参数分别为，起始字符的位置，结束字符的位置+1。

可以点击后面的两个按钮用不同的参数测试，可以验证这个结果。

str.substring(0,2)
str.substring(2,5)
str.substring(3,8)

substring方法的第二个参数可以省略，表示“一直到字符串结尾”。例如substring(7)，返回"7890"，也就是，从位置7开始到字符串结尾的子字符串。由此可知，substring(0)也就是字符串本身。

str.substring(4)
str.substring(7)
str.substring(0)

JavaScript字符串indexOf方法

字符串的indexOf函数返回字符串中指定字符或字符串的位置，如果字符不存在就返回-1。在下面的例子中，我们创建的一个字符串，同上一个例子相同，为了便于观察，字符串为"01234567890"。

JavaScript代码

<script type="text/javascript">
        var str = "01234567890";
</script>

测试字符串的indexOf方法

首先，执行indexOf('0')，也就是询问字符串中是否包含0这个字符，如果包含的话，返回它的位置。可以点击下面两个按钮测试。

str.indexOf('0')
str.indexOf('8')

indexOf方法同样也适合字符串，点击下面的按钮就可以发现indexOf('012')返回0，也就是子字符串'012'的起始位置。

str.indexOf('012')
str.indexOf('678')

下面再看看字符不存在的情况。如果字符或者字符串不存在，返回-1。

str.indexOf('i')

JavaScript字符串lastIndexOf方法

我们使用indexOf函数可以知道某个字符在字符串中出现的位置，不过indexOf返回的是字符第一次出现的位置。但是如果想知道一个字符串中某字符最后一次出现的位置呢？那么就需要使用字符串对象的lastIndexOf方法了。

为了便于观察，字符串为"01234567890"。可以看到，字符0出现了两次。

JavaScript代码

<script type="text/javascript">
        var str = "01234567890";
</script>

测试字符串的lastIndexOf方法

首先，执行indexOf('0')，可以看到0第一次出现的位置为0。之后执行lastIndexOf('0'),我们可以知道最后一次出现0字符的位置为10。

str.indexOf('0')
str.lastIndexOf('0')

JavaScript字符串replace方法

使用replace方法可以替换字符串中的指定字符或者子字符串。同样，我们仍然使用前面定义的字符串"01234567890"。那么str.replace('12345','一二三四五')就可以将原字符串中的12345替换为新的一二三四五。

JavaScript代码

<script type="text/javascript">
 var str = "01234567890";
</script>

测试字符串的replace方法

首先，我们点击下面的按钮来观察原来的字符串。

str

然后，点击下面的按钮执行replace方法，可以看到经过替换之后的字符串。"01234567890"变为"0一二三四五67890"。

str.replace('12345','一二三四五')

再次点击上面的按钮来查看str的值，可以发现，replace方法并不会改变原来的字符串的值。

JavaScript字符串split方法

使用split方法可以将字符串分割为一个数组。例如，我们可以将一个英文句子按照空格分开为单词数组。下面我们创建两个字符串来说明split方法。

split方法有两个参数，第一个是分隔符。也就是按照什么来分割字符串，例如可以按照逗号“，”等等；第二个参数是可选的，控制保留分割段数。

split(分隔符,保留分割段数)

JavaScript代码

<script type="text/javascript">
 var str = "一二三四";
 var str1 = "篮球、排球、乒乓球";
 var arr = str.split("");//全部分割
 var arr1 = str1.split("、");//按照顿号分割
 var arr2 = str1.split("、",2);//按照顿号分割,保留两段
</script>

首先，str保存着字符串保存着。

测试字符串的split方法

首先，我们点击下面的按钮来观察原来的字符串。

str

arr保存着str分割后的数组，从上面的JS代码中可以看到，分隔符是一个空字符串，也就是每个字符都分割。可以点击下面的按钮来查看数组的内容。

arrarr[0]arr[2]

下面我们再来看看str1的内容。arr1为它按照顿号分割的数组，有三个元素。而“var arr2 = str1.split("、",2);”一句中，使用了split的第二个参数，仅仅保留两个分段，可以点击按钮来查看它包含的元素。

str1arr1arr2

用字符串的length实现限制文本框长度

本文介绍如是使用JavaScript的字符串的length属性来限制一个文本框内输入文字的多少。

本例使用JS字符串的length属性来限制一个文本框内文本的长度。大致思路如下：每当用户在文本框内输入值的时候（键盘敲击事件），都触发一个名为check的函数，它会获得文本框内字符的长度，并检查该长度是否在5-10之间。如果不是则给出对应的警告。且当输入字符多余10个的时候会自动去掉长出的部分。

实例JavaScript代码

<script type="text/javascript">
function check(){
        var str = document.getElementById("test").value;
        if(str.length < 5){
               update("至少输入5个字符！");
        }else if(str.length > 10){
                update("不能超过10个字符！");
               str = str.substring(0,10);
               document.getElementById("test").value = str.substring(0,10);
        }else{
               update("有效的用户名。")
        }
}
function update(word){
        document.getElementById("feedback").innerHTML = word;
}
</script>

HTML代码

<p>
  <label for="test">帐号：</label>
  <input type="text" name="test" id="test" οnkeypress="check()" maxlength="15" />
  <span id="feedback"></span>
</p>

限制长度文本框效果

试着在下面的表单里输入文字，后面就会给出不同的提示。

帐号：

1.  
2. JavaScript date对象设置（set）方法
3. JavaScript date对象转换（to）方法

JavaScript Date对象应用实例——时钟代码

本代码转自w3schools.com。

<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
//当数字小于10的时候在前面加一个0
m=checkTime(m);
s=checkTime(s);
document.getElementById('clock').innerHTML=h+":"+m+":"+s;
//每隔500毫秒重新执行一次startTime
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>

 

窗体顶端

启动时钟

窗体底端

JavaScript date对象查询（get）方法

JavaScript代码

<script type="text/javascript">
 var today = new Date();       //新建一个Date对象
</script>

年、月、日，日期，星期几

Date对象有一些列以get开头的方法，它们的作用就是返回Date对象的年、月、日等等属性。

只需要使用getDay就可以知道今天是星期几（返回0-6，0表示周日），getDate则返回现在是本月的几号。getMonth返回的是月份（不过是0-11表示，即1月返回0），getFullYear返回的是四位方式表示的年份。点击下面的按钮就可以看到对today这个Date对象调用各个get函数所返回的值了。

today.getFullYear() 年
today.getMonth() 月份（0-11）
today.getDate() 日期
today.getDay() 星期（0-6）

时、分、秒

访问时分秒也是十分简单的，小时为getHours，分为getMinutes，秒为getSeconds，还有毫秒getMilliseconds。

today.getHours() 小时
today.getMinutes() 分钟
today.getSeconds() 秒
today.getMilliseconds() 毫秒

时差

today.getTimezoneOffset() 时差（分钟为单位）

JavaScript date对象设置（set）方法

设置Date对象的属性

与get开头的方法相对，Date对象有一些列以set开头的方法，它们的作用与get系列方法相反，就是设置Date对象的年、月、日等等属性。

只需要使用setDate就可以设置现在是本月的几号。setMonth设置月份，setFullYear是以四位的方式设置年份。setHours设置小时，setMinutes设置分钟，setSeconds设置秒，setMilliseconds则设置毫秒。

JavaScript代码

<script type="text/javascript">
 var today = new Date();       //新建一个Date对象
 today.setFullYear(1);
 today.setMonth(1);
 today.setHours(1);
 today.setDate(1);
 today.setMinutes(1);
 today.setSeconds(1);
 today.setMilliseconds(1);
</script>

经过上面的设置，我们可以点击下面的按钮来看看Date对象today的各个属性。

today.getFullYear() 年
today.getMonth() 月份（0-11）
today.getDate() 日期
today.getDay() 星期（0-6）
today.getHours() 小时
today.getMinutes() 分钟
today.getSeconds() 秒
today.getMilliseconds() 毫秒

JavaScript date对象转换（to）方法

JavaScript代码

<script type="text/javascript">
 var today = new Date();       //新建一个Date对象
</script>

将Date对象转换为字符串

Date对象的toString方法可以把它转换为字符串，从而可以很方便地显示出来或者是做进一步的处理。点击下面的按钮就可以看到toString的结果了。

today.toString()

更有用的一个方法是toLocaleString，它将Date对象转换成符合本地习惯的字符串。

today.toLocaleString()

toDateString与toLocaleDateString则将Date对象转换为字符串之后只保留日期部分。相对的，toTimeString和toLocaleTimeString则保留时间（时、分、秒）部分。

today.toDateString()
today.toLocaleDateString()
today.toLocaleTimeString()
today.toTimeString()

源代码

toSource方法把Date对象转换为源代码的形式，个人感觉没什么用。

today.toSource()