JavaScript学习笔记(2) -基本封装类型和正则表达式

最新推荐文章于 2024-07-31 11:27:39 发布

suwu150

最新推荐文章于 2024-07-31 11:27:39 发布

阅读量2.1k

点赞数 2

分类专栏： JavaScript 文章标签：正则表达式 javascript css

本文链接：https://blog.csdn.net/suwu150/article/details/53992218

版权

JavaScript 专栏收录该内容

56 篇文章 4 订阅

订阅专栏

一.基本包装类型

   1)为了便于操作基本类型值，ECMAScript提供了3个特殊的引用类Boolean, Number, String
       每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型对象，从而可以使我们调用一些方法操作这些数据。
           var s = "suwu";
           s.substring(2);
    2)基本包装类型的实例调用typeof返回"object",从而所有基本包装类型对象转换为布尔类型的时候都会是true.
       String是一个函数
       //显示结果为:function
       console.log(typeof(String));

       所以我们可以使用:String(值)把其他类型的值转换为字符串
       console.log(String(123));

       同时String还是一个构造函数,所以可以使用new关键字创建对象
       //注意console中输出对象的话,先显示出大括号的
       console.log(new String(123));

    3) Boolean,Number,不建议直接使用这两种类型
2.javascript中的异常
   1)try-catch

       try{
           alert1("test");
           alert("hello");
       }
       catch(err){
           alert(err);
       }

   注意:如果是语法错误SyntaxError,catch就捕获不到

   2)throw

       try{
           var x = 3;
           if(x=="")    throw "empty";
           if(isNaN(x)) throw "not a number";
           if(x>10)     throw "too high";
           if(x<5)      throw "too low";
       }
       catch(err){
           alert(err);

}

再来看以下示例：

//异常
var add=function (a,b){
    if(typeof a !=='number' || typeof b !='number'){
        throw{
            name:'TypeError',
            message:'add needs numbers',
            describe:'这是一个类型异常'
        }
    }
    return a+b;
}
var try_it=function (){
    try{
        add('seven');
    }catch(e)
    {
        console.log(e.name+"-------"+e.message+"--------"+e.describe);
    }
}
try_it();
console.log(add('3',5));

结果为：

3.void关键字
   javascript:void(0) 是我们经常在超链接中用到的代码.

   href="#"与href="javascript:void(0)"的区别:
       # 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
       而javascript:void(0), 仅仅表示一个死链接。
       <a href="javascript:void(0);">点我没有反应的!</a>
       <a href="#pos">点我定位到指定位置!</a>
   href=""表示当前页面,点击之后会刷新页面,href="#"点击之后不会刷新页面
4.javascript中的常见的全局函数(window对象中)
   escape()    对字符串进行编码。
   unescape()    对由 escape() 编码的字符串进行解码。
   encodeURI()    把字符串编码为 URI。
   decodeURI()    解码某个编码的 URI。
   encodeURIComponent()    把字符串编码为 URI 组件。
   decodeURIComponent()    解码一个编码的 URI 组件。
   eval()        计算 JavaScript 字符串，并把它作为脚本代码来执行。
   isFinite()    检查某个值是否为有穷大的数。
   isNaN()    检查某个值是否是数字。
   Number()    把对象的值转换为数字。
   parseFloat()    解析一个字符串并返回一个浮点数。
   parseInt()    解析一个字符串并返回一个整数。
   String()    把对象的值转换为字符串。
   注意:
   escape()不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值。比如"你好"的返回结果是%u4F60%u597D,escape()不对"+"编码主要用于汉字编码。
   encodeURI()是Javascript中真正用来对URL编码的函数。编码整个url地址，但对特殊含义的符号"; / ? : @ & = + $ , #"，也不进行编码。对应的解码函数是：decodeURI()。
   encodeURIComponent() 能编码"; / ? : @ & = + $ , #"这些特殊字符。对应的解码函数是decodeURIComponent()。它与encodeURI()的区别是，它用于对URL的组成【部分】进行个别编码，而不用于对整个URL进行编码。假如要传递带&符号的网址，就可以使用encodeURIComponent()
5.DOM 文档对象模型
    当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
   在页面中用document来表示浏览器创建出来的文件对象模型,document对象是window对象的一个属性，因此可以直接调用
   document对象中的常见属性:
       //documentElement属性始终指向HTML页面中的<html>元素
       console.log(document.documentElement);
       //body属性直接指向<body>元素
       console.log(document.body);
       //doctype属性访问<!DOCTYPE>, 浏览器支持不一致，很少使用
       console.log(document.doctype);
       //title属性获取文档的标题
       console.log(document.title);
       //URL属性取得完整的URL
       console.log(document.URL);
       //domain属性取得域名，并且可以进行设置，在跨域访问中经常会用到
       console.log(document.domain);
       //referrer属性取得链接到当前页面的那个页面的URL，即来源页面的URL
       console.log(document.referrer);
       //images属性获取所有的img对象，返回HTMLCollection类数组对象
       console.log(document.images);
       //forms属性获取所有的form对象，返回HTMLCollection类数组对象
       console.log(document.forms);
       //links属性获取文档中所有带href属性的<a>元素
       console.log(document.links);
   1)查找 HTML 元素
       通过 id 找到 HTML 元素
           document.getElementById("...");
           返回某一个元素对象,默认id是唯一的
       通过name找到 HTML 元素
           document.getElementsByName("...");
           返回一个集合
       通过标签名找到 HTML 元素
           document.getElementsByTagName("...");
           返回一个集合
       通过class找到 HTML 元素
           document.getElementsByClassName("...");
           返回一个集合
   2)找到元素之后干什么
           1.改变元素中的内容
               利用innerHTML 或者 value来改变元素中显示的内容
           2.改变元素的属性
               document.getElementById("image").src="2.jpg";
               <img id="image" src="1.jpg"></img>
           3.改变元素的css样式
               document.getElementById("p1").style.color="blue";
               <p id="p1">今天天气很好.</p>
           4.给元素添加事件处理(覆盖之前的事件)
               document.getElementById("myBtn").οnclick=function(){
                   //...
               };

           5.给元素添加事件监听(不覆盖之前的事件)
               document.getElementById("myBtn").addEventListener("click",function(){.....});
           6.添加或删除元素
               添加:
                   //创建新元素对象 <p></p>
                   var para=document.createElement("p");
                   //创建文本节点
                   var node=document.createTextNode("大家好");
                   //把文本节点添加到<p></p>中
                   para.appendChild(node);
                   //获得指定div
                   var element=document.getElementById("div1");
                   //把<p></p>添加到div中
                   element.appendChild(para);
               删除:
                   <div id="div1">
                       <p id="p1">大家好</p>
                       <p id="p2">你们好</p>
                   </div>

                   <script>
                       var parent=document.getElementById("div1");
                       var child=document.getElementById("p1");
                       parent.removeChild(child);
                   </script>
6.javascript中的事件
   1)事件三要素：
       事件目标（event target）
           发生的事件与之相关联或与之相关的对象
       事件处理（event handler）
           处理或相应事件的函数
       事件对象（event object）
           与特定事件相关且包含有关该事件详细信息的对象。
   2)事件处理
       给页面元素添加事件的三种方式
       1. 在元素标签中使用事件属性
           页面中的大多数元素都有事件处理属性,这些属性的名字都是以on开头的,例如onclick onload等等
           例如1:
           <input type="button" value="clickMe" οnclick="javascript:alert('clicked');">
           或者
           <script type="text/javascript">
               function showMsg(){
                   alert("clicked");
               }
           </script>
           <input type="button" value="clickMe" οnclick="showMsg()">


           例如2:
           <script type="text/javascript">
               function showMsg(obj){
                   console.log(obj);
               }
           </script>
           <input type="button" value="clickMe" οnclick="showMsg(this)">
           注意:调用showMsg(this)的时候把this当做参数传给了该函数,因为showMsg函数的调用是写在onclick属性值中的,而且这个onclick属性又是这个input标签中的,所以这个this代表的是当前input元素对象,在函数中输出即可知道

           例如3:
           <script type="text/javascript">
               function showMsg(obj){
                   console.log(obj);
                   console.log(this);
                   console.log(this==window);//true
               }
           </script>
           <input type="button" value="clickMe" οnclick="showMsg(this)">
           注意:每个函数中有一个this,用来表示当前函数是由哪个对象来调用,就是java中所描述的当前对象

       2. 在js中访问元素的事件属性并且赋值
           var btn = document.getElementById("btn");
           btn.onclick = function(){
               console.log(this);
               console.log(this == btn);//true
           }
           //删除事件处理程序
           btn.onclick = null;
           注意:这里函数中的this代表当前btn对象,因为函数是作为btn对象中的一个属性值出现的,所以这个函数就属于btn对象,那么函数中的this就代表这个btn对象
           注意:如果之前btn对象中已经有了onclick事件处理了,那么这种方式会覆盖之前的事件
       3. 使用指定函数给元素添加事件处理
           事件绑定使用addEventListener函数
               var btn = document.getElementById("btn");
               btn.addEventListener("click",function(){
                   console.log(this);
                   console.log(this == btn);//true
               });
               注意函数中this代表的含义
               注意第一个参数所写的事件名称中不带on
               注意这种方式【不会】覆盖之前的事件
           事件删除使用removeEventListener函数
               var btn = document.getElementById("btn");
               var handler = function(){
                   console.log(this);
                   console.log(this == btn);//true
               }
               btn.addEventListener("click",handler);
               //移除事件
               btn.removeEventListener("click",handler);

               注意:可以添加多个事件处理程序，并且按照添加她们的顺序触发。添加事件时如果使用匿名函数将无法删除

               注意:这个时候使用btn.οnclick=null是【不能】移除事件处理的
       4. IE事件处理
           在低版本的IE中绑定事件和解除事件可以分别使用attachEvent()函数和detachEvent()函数
   3)事件对象
       1. DOM中的事件对象
           在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件相关的信息，包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。兼容DOM的浏览器默认会将event对象传入到事件处理函数中
           element.onclick = function(event){
                console.log(event);
            }
            element.addEventListener("click",function(event){
                console.log(event);
            });

       2. 事件对象event的特殊属性
           1)客户区坐标位置
               clientX,clientY 事件发生时，鼠标指针在视口中的水平和垂直坐标
           2)页面坐标位置
               pageX,pageY 事件发生时，鼠标指针在页面本身而非视口的坐标，页面没有滚动的时候，pageX和pageY的值与clientX和clientY值相等
           3)屏幕坐标位置
               screenX,screenY

   4)事件类型
       1. UI事件
           onload
               在浏览器完成对象的装载后立即触发
           onunload
               在浏览器完成对象的卸载后立即触发(有些情况需要浏览器支持)
           onselect
               当用户选择文本框（<input>,<textarea>）中的一个或多个字符时
           onresize
               当浏览器窗口被调整到一个新的高度或者宽度时，会触发
        2. 焦点事件
           onblur
               元素失去焦点的时候触发
           onfocus
               元素获得焦点的时候触发
           //IE支持
           onfocusin
               与onfocus等价
           onfocusout
               与onblur等价
        3. 鼠标与滚轮事件
           onclick
               在用户用鼠标左键单击对象时触发。只有在一个元素上相继发生onmousedown,onmouseup事件，才会触发click事件
           ondblclick
               当用户双击对象时触发.只有在一个元素上相继触发两次click时间才会触发dbclick事件
           onmousedown
               任意鼠标按钮按下时触发
           onmouseup
               释放鼠标按钮触发
           onmousemove
               鼠标在元素内部移动的时候重发触发
           onmousewheel
               滚轮事件
               火狐浏览器中需要以下方式来添加该事件
               div.addEventListener("DOMMouseScroll",function(event){
                   //如果是负值说明滚轮是向上滚动，如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数
                   console.log(event.detail);
               });
           onmouseover
               鼠标位于元素外部，将其首次移入另一个元素边界之内时触发
           onmouseenter
               鼠标光标从元素外部首次移动到元素范围内激发
           onmouseout
               在位于元素中的鼠标光标移入到另外一个元素中
           onmouseleave
               在位于元素中的鼠标光标移动到元素范围之外时触发

        4. 鼠标按钮
           onmousedown,onmouseup，该事件的event对象中包含了button属性，表示按下或释放的按钮。
           例如:
           function test(event){
               //event.button=0 左键
               //event.button=1 中键
               //event.button=2 右键
           }
           <input type="button" value="点击" οnmοusedοwn="test(event)" />

       5. 键盘事件
           onkeydown 当用户按下键盘任何按键时触发。
           onkeypress 当用户按下字母数字键时触发。
           onkeyup    当用户按下并释放键盘按键时触发
       6. 表单事件
           onreset 当用户重置表单时触发
           onsubmit 当表单将要被提交时触发。
           onchange 当对象或选中区的内容改变时触发。

二、正则表达式(RegExp)

可参考如下链接：正则表达式介绍与使用

    1)正则表达式的基本语法规则
       语法:
           创建正则表达式对象:
           var reg = new RegExp(pattern,modifiers);
           或者
           var reg = /pattern/modifiers;
       注:
       pattern   描述了表达式的模式/规则
       modifiers 用于指定全局匹配、区分大小写的匹配和多行匹配
       对应修饰符modifiers有三个选项:
       i    执行对大小写不敏感的匹配。
       g    执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
       m   执行多行匹配。
       同时在创建正则表达式对象的是也可以不写修饰符,默认即可
   2)pattern内容的分析
       括号:
           [abc]    查找方括号之间的任何字符。
           [^abc]    查找任何不在方括号之间的字符。
           [0-9]    查找任何从 0 至 9 的数字。
           [a-z]    查找任何从小写 a 到小写 z 的字符。
           [A-Z]    查找任何从大写 A 到大写 Z 的字符。
           [A-z]    查找任何从大写 A 到小写 z 的字符。
           (red|blue|green)    查找任何指定的选项。
       元字符:
           .    查找单个任意字符，除了换行和行结束符.如果要表示.这个字符,需要转义
           \w    查找单词字符。     字母数字 _
           \W    查找非单词字符。非字母数字 _
           \d    查找数字。
           \D    查找非数字字符。
           \s    查找空白字符。
           \S    查找非空白字符。
           \b    匹配单词边界。
           \B    匹配非单词边界。
           \0    查找 NUL 字符。
           \n    查找换行符。
           \f    查找换页符。
           \r    查找回车符。
           \t    查找制表符。
           \v    查找垂直制表符。

       量词:
           n+        匹配任何包含至少一个 n 的字符串。
           n*        匹配任何包含零个或多个 n 的字符串。
           n?        匹配任何包含零个或一个 n 的字符串。
           n{X}    匹配包含 X 个 n 的序列的字符串。
           n{X,Y}    匹配包含 X 到 Y 个 n 的序列的字符串。
           n{X,}    匹配包含至少 X 个 n 的序列的字符串。
           n$        匹配任何结尾为 n 的字符串。
           ^n        匹配任何开头为 n 的字符串。
           ?=n    匹配任何其后紧接指定字符串 n 的字符串。
           ?!n    匹配任何其后没有紧接指定字符串 n 的字符串。

   3)支持正则表达式的 String 对象的方法
       使用字符串对象的相关方法按照正则表达式所描述的规则去搜索、匹配、替换、分割.

       search    检索与正则表达式相匹配的值。
       match    找到一个或多个正则表达式的匹配。
       replace 替换与正则表达式匹配的子串。
       split    把字符串分割为字符串数组。

   4)RegExp 对象方法
        使用正则表达式对象(RegExp)的相关方法来对指定字符串进行格式的验证.

       compile 编译正则表达式。
       exec    检索字符串中指定的值。返回找到的值，并确定其位置。
       test    检索字符串中指定的值。返回 true 或 false。


   5)例子
       var v = "aa1a";
       //字符串中包含数字就行
       var reg = /\d/;
       console.log(reg.test(v));

       var v = "aaa1111aa";
       //字符串中连着出现4次(或者更多)数字即可
       var reg = /\d{4}/;
       console.log(reg.test(v));

       var v = "1111";
       //^表示开头 $表示结尾
       //开头和结尾直接必须连续出现4次数字
       var reg = /^\d{4}$/;
       console.log(reg.test(v));


       var v = "1aaa2345";
       //开头一个非0数字,后面跟任意字符0-n个,最后4个数字结尾
       var reg = /^[1-9]{1}.*\d{4}$/;
       console.log(reg.test(v));

       var v = "aaredaa";
       //red go yes 三个单词任意匹配
       var reg = /(red|go|yes)/;
       console.log(reg.test(v));

       var v = "a1";
       //开头是一个字符结尾是一个数字(一共俩个字符)
       var reg = /^\w\d$/;
       console.log(reg.test(v));

       var v = "aasd11111";
       //开头是字符(1-n个),结尾是个数字
       var reg = /^\w+\d$/;
       console.log(reg.test(v));

       var v = "aasd11111.com";
       //开头是字符(1-n个),结尾.com
       var reg = /^\w+(\.com)$/;
       console.log(reg.test(v));

       var v = "aasd )_###11111";
       //开头是字符(1-n个) 中间随意匹配结尾是一个数字
       var reg = /^\w+.*\d$/;
       console.log(reg.test(v));

       //email验证
       var v = "test@briup.com";
       //var reg = /^\w+@\w+(\.[A-z]{2,3}){1,2}$/;
       var reg = /^\w+@\w+\.\w+/;
       console.log(reg.test(v));
2.表单验证

   第一种方式:提交的时候验证
   <form action="" οnsubmit="return jsCheck()">
           <input type="text" name="name" /><br>
           ...
           ..
           ..
           ..
           <input type="submit" value="提交" />
   </form>

   注意:οnsubmit="return jsCheck()"表示表单提交之前先调用jsCheck()这个函数进行验证,然后jsCheck()返回true表示通过验证,则表单可以继续提交,返回false表示验证失败,表单不能提交.

   第二种方式:在填写输入框的时候或者输入框失去焦点的时候进行验证,和第一种方式验证的时间点不同,但是验证使用的函数都是一样的.
   例如使用onkeyup事件,可以在用户边输入的时候边验证


   注意:javascript代码也可以提交表单:
       document.forms.myForm.submit();
   例如:使用document拿到name="f"的页面表单并设置提交表单事件
   document.forms.f.onsubmit = function(){
       //这个函数中的this表示当前表单对象f

       //获得name="username"的输入框的值
       console.log(this.username.value);
       //获得name="password"的输入框的值
       console.log(this.password.value);
       //获得name="gender"的单选框(可以是多个)
       console.log(this.gender);
       //可以获得当前用户选的那个单选框的值
       console.log(this.gender.value);
       //可以设置单选框选择男(0)或者女(1)
       this.gender.value = 1;
       //也可以这样俩种方式设置某个单选框被选中
       this.gender[1].checked = "checked";
       this.gender[1].checked = true;
       //可以取消某个已经被选择的单选框注意是取消不是选另一个
       this.gender[1].checked = false;

       //获得表单中name="like"的多选框(可以有多个)
       console.log(this.like);
       //查询每个多选框是否被选中
       console.log(this.like[0].checked);
       console.log(this.like[1].checked);
       console.log(this.like[2].checked);

       //可以自己设置某个多选框被选中
       this.like[2].checked = true;
       this.like[2].checked = "checked";
       //可以取消选中某一个多选框
       this.like[2].checked = false;

       //可以查看被选中的多选框的值
       //不能使用for-in循环 this.like集合对象中除了下标还有其他的属性
       for(var i=0;i<this.like.length;i++){
           if(this.like[i].checked){
               console.log(this.like[i].value);
           }
       }

       //可以给某一个多选框添加点击事件
       //每次点击之后我们可以知道用户是选中了还是取消了此多选框
       this.like[0].onclick = function(){
           console.log(this.checked);
       }
       //获得表单中name="city"的下拉列表
       console.log(this.city);
       //获得下拉列表中当前被选中的值
       console.log(this.city.value);
       //设置下拉列表中哪一个值被选中
       this.city.value = 2;

       //获得此下拉列表中所有option元素对象
       var opt = this.city.getElementsByTagName("option");
       //可以用俩种方式让某一个选项被选中
       opt[2].selected = true;
       opt[2].selected = "selected";

   }

3.浏览器对象模型Browser Object Model (BOM)
   BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM的核心对象是window，它表示浏览器的一个实例，在浏览器中window对象有双重角色既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
   1)窗口大小
          innerWidth   页面视图区的宽度
         innerHeight   页面视图区的高度
         outerWidth   浏览器窗口的宽度
         outerHeight   浏览器窗口的高度
       所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意：IE8及更早IE版本不支持这些属性。

       例如:
       console.log(window.innerWidth);
       console.log(window.innerHeight);
       console.log(window.outerWidth);
       console.log(window.outerHeight);
   2)scrren对象
       屏幕总宽度/高度:
           screen.width
           screen.height

       例如:
           console.log(window.screen.width);
           console.log(window.screen.height);


   3)打开/关闭窗口
         window.open()
           例如:
             window.open("http://www.baidu.com","newwindow","height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no");
           打开的新窗口高为100,宽为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏

           或者
           简单的使用window.open("http://www.baidu.com");即可

       window.colse();
           注意firefox浏览器中会不起作用,需要修改为以下写法:
           window.open("","_self").close();
           同时在FireFox需要设置一个浏览器参数:
           在Firefox地址栏里输入 about:config
           在配置列表中找到 dom.allow_scripts_to_close_windows
           把默认的false值修改为true即可。默认是false，是为了防止脚本乱关窗口
   4)location对象
       是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。location是个神奇的对象，既是window的对象也是document的对象。
       console.log(window.location == document.location);//true

       属性：
            host       返回服务器名称和端口号
           hostname   返回不带端口号的服务器名称
           href       返回当前加载页面的完整URL
           pathname   返回URL的目录和文件名
           port       返回URL中指定的端口号
           protocol   返回页面使用的协议
           search       返回URL的查询字符串。这个字符串以问号开头

       方法：
            assign()   传递一个url参数，打开新url，并在浏览记录中生成一条历史记录。
            replace()    参数为一个url,结果会导致浏览器位置改变，但不会在历史记录中生成新记录
           注意:有历史记录就可以回退,没有则不能回退
             reload()   重新加载当前显示的页面，参数可以为boolean类型，默认为false,表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true,强制从服务器中重新加载

       注意:
           以下三句话效果一样
           window.location="http://www.baidu.com";
           location.href="http://www.baidu.com"
           location.assign("http://www.baidu.com");
   5)history对象
       window.history 对象包含浏览器的历史
       例如:
       history.back()    - 与在浏览器点击后退按钮相同
       history.forward() - 与在浏览器中点击按钮向前相同
       history.go(-3);

   6)window的超时调用和定时调用
       javascript是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行
       1.setTimeout();
           该方法返回一个数值ID，表示超时调用，超过指定时间后自动调用一次指定函数。这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID)取消调用
           参数：
             1.要执行的代码
                  2.以毫秒表示的时间。
           例如:
               //一秒后调用
               //只执行一次
               var id = setTimeout(function(){
                   alert("hello");
               },1000);
               console.log(id);

               //清除
               clearTimeout(id);

       2.setInterval();
           按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用

           参数：
               1.要执行的代码
               2.以毫秒表示的时间。
               clearInterval(ID); //取消间歇调用

           例如:
               //每隔五秒钟调用一次函数
               var id = setInterval(function(){
                   alert("hello");
               },5000);
               console.log(id);

               //清除
               clearInterval(id);
-----------------------------------------------------

特殊的css
   1) 元素的显示和可见性
       visibility:
           hidden 元素不可见，但是在文档布局中保留了它的空间。
           visible   元素可见
        display
           none   元素不可见，在文档布局中不给它分配空间，它的各边元素会合拢，就当它不存在过。在展开和折叠轮廓的效果时，display属性很有用。

   2) 颜色，透明度
       opacity 透明度：0~1之间的数字
       filter: IE中表示透明度 0~100之间的数字
       常用表示透明度的方法
               opacity: 0.75;
               filter:alpha(opacity=75);

javascript中设置元素特殊名字的css的属性
   style 属性，该属性的值不是字符串，而是一个CSSStyleDeclaration对象，该对象代表了HTML代码中通过style指定的css属性。javascript中的css属性大多与标签中的css属性相同，但是如果css样式属性在名字中出现了连字符，该属性名的格式应该是移除连字符，将每个连字符后面紧接着的字母大写，如
       background-color =>e.backgroundColor
       其他的例子:
       e.style.fontSize = "24px";
       e.style.fontWeight = "bold";
       e.style.color = "blue";
封装好的函数:获得元素指定的样式属性值
function getStyle(node, styleName) {
       var realStyle = null;
       if (window.getComputedStyle) {
           realStyle = window.getComputedStyle(node, null)[styleName];
       }
       else if (node.currentStyle) {
           realStyle = node.currentStyle[styleName];
       }
       return realStyle;
}