javaScript基础入门

javaScript:  js 基于面向对象的一门脚本语言


变量  表达式  分支结构 循环结构  数组  变量类型 函数




javascript与java
两者没有任何关系，名字相似，语法有所相同 
javascript:是一种客户端脚本语言
java:是一种服务端语言


基于面向对象 和 面向对象的区别:
  基于面向对象是在对象的基础上实现编程，也就是说对象已经存在，在程序中调用对象所拥有的属性和方法.
  面向对象(oop)是一种编程方式，在oop 中产生对象必须new实例化类.




js 弱语言类型  php   js是存在于客户端的一门语言
  js基于对象：
  每一个对象都有它的属性和方法；
  属性： 名词----------有什么------------------变量
  方法： 动词----------能做什么----------------函数


JavaScript的作用： 


1、检测表单的正确性
2、实现ajax数据交互
3、增删改dom元素
4、对事件作出响应
5、检测浏览器信息
6、制作酷炫的网页效果


起源
1992 网景(netscape) livescript
microsoft windows jscript
欧洲计算机制造商协会 ECMAScript




组成部分
ECMAScript(语法)
DOM (document Objects) 文本对象模型
BOM (Brower Objects) 浏览器对象模型


为什么要学习javascript
别无选择,只有javascript能够控制所有常见的浏览器，
它还是世界上最重要的编程语言之一，学习web技术必须要学会javascript




语法
1、区分大小写
2、弱类型变量(不用特定声明类型)
3、每行结尾的分号可有可无
注意：为了良好的编程习惯，建议都统一带上分号
4、括号用于代码块 { }
5、注释
单行注释 //
多行注释/* */




--.声明变量：
   1.  变量名;  
    2.  var 变量名;
 变量的命名规则
1、首字符必须是字母（大小写均可）、下划线（_）、美元符号（$）
2、其余字符可以是下划线、美元符号、任意字母或者数字
3、不能使用关键字和保留字




二.变量赋值
        1.先声明后赋值
         2.边声明边赋值
      变量的数据类型是由值决定。
  






三. <script type="text/javascript">   </script>  
     注释: 单行注释：//   多行注释：/*   */


四. 输出
alert();消息框弹出
document.write();网页中写出


五.运算符
     1.算术运算符   +   -   *  /  %    ++   ---
     2.条件运算符   >  <  >=  <=   ==  !=
     3.逻辑运算符   &&  ||  ！  and     or  
     4.三元运算符   表达式?true:false; 
     5.+：运算 同时也是 字符串连接


六:  分支结构
      if(){......}
      if(){......}else{.......}




     switch(){
        case  value1:  语句 ; break;
         case  value2:  语句; break;
        ...................
        default:  语句  break;  
      }


七.循环
    for(var i=0;i<=10; i++){
               循环体
       }
   
    建议：数组使用for...in
    for(  var  args   in   array  ){
           数组
      }


 八.数组
      1.数组分为：  索引数组  下标是数字     索引下标从0开始
            关联数组    下标字母


     2.数组声明:
       new Array();
      new Array(size);
      new Array(element0, element1, ..., elementn);
      var arr2=[4,5,6];
       var arr={"name":"小张","age":10,"sex":"女"};


  3. 数组赋值
      arr[0]=1;
     arr3['name']="eduask";


  4.数组的访问
    索引数组：   arr[index]
    关联数组:      arr.下标


  5. 数组的属性和方法
      length     获取数组长度 （对关联数组无效）
      concat() 连接两个或更多的数组，并返回结果。 （对关联数组无效）
      join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 （对关联数组无效）
      slice(start,end)从某个已有的数组返回选定的元素 （对关联数组无效）
    toString() 把数组转换为字符串，并返回结果。（对关联数组无效） 


6. 循环
     for(var args in arr3){
              document.write(arr3[args]);
         }


  实现全选、反选案例
<input type="checkbox" name="box">444<br>
<input type="checkbox" name="box">555<br>
<button type="button" onclick="allbox()">全选</button>
<button type="button" onclick="fanbox()">返选</button>
<script type="text/javascript">
   function allbox(){
        var o = document.getElementsByName('box');
        for(var i=0;i< o.length;i++){
            if(!o[i].checked)
                o[i].checked = true;
        }
    }
    function fanbox(){
        var o = document.getElementsByName('box');
        for(var i=0;i< o.length;i++){
            if(o[i].checked)
                o[i].checked = false;
            else
                o[i].checked = true;
        }
    }
</script>








7.二维数组
    var arr=new Array()
     arr[0][0]='111' ;  不推荐使用   


    var arr5 =[['a','b','c','d'],[1,2,3]];   //{ json 格式}   [数组格式]


十.变量类型
 1、未定义 undefined
 2、空 null
 3、布尔 Boolean (true false)
 4、字符串 String
 5、数值 Number
 6、对象 Object
 7、引用 Reference
 8、列表 List
 9、完成 Completion




 
 类型转换 
  把字符串强制转换成int，parseInt()
  document.write(parseInt("10") ) ;  如果被转化变量为非数字，返回 NaN


十一.函数
   function 函数名(形参1，形参2)
   {
           函数体；
            return;
    }


1\ 函数的功能--  决定去不去用
2、函数有没有形参：---怎么用
3、函数有没有返回值 ---调用完如果使用


分类： 
无返回值，无参数
无返回值，有参数
有返回值，无参数
有返回值，有参数


函数调用：
   直接作用普通语句调用：-----无返回值
    直接输出--------------- 有返回值
    作为表达式---------------有返回值的


十二.应用：


  1: <a href="javascript: js代码 "></a>
  2:外部文件 <script src="文件路径"></script>
  3.
    alert(信息字串) 弹出警告信息 
    confirm(信息字串) 显示确认信息对话框  返回用户选择的 true  或者  false
    prompt(提示字串[，默认值]) 显示提示信息，并提供可输入的字段 返回用户输入的字符串 


 3.js中内置的对象（常用的）
    数组对象   -------前面讲过
   字符串对象
   数学对象
   时间对象


字符串对象：String
 1、快速创建
    var s="sdfsf";
 2、var s=new String("字符串");




属性：
  length:字符串的长度


方法：
  charAt 方法 返回指定索引位置处的字符。strObj.charAt(index)
  indexOf 方法 返回 String 对象内第一次出现子字符串的字符位置。 strObj.indexOf(subString[, startIndex])
  lastIndexOf 方法 返回 String 对象中子字符串最后出现的位置。strObj.lastIndexOf(substring[, startindex])
  bold() 粗体 
  italtics() 斜体 
  strike() 删除线 
  fontsize(字级大小) 文字大小 
  fontcolor(#rrggbb) 文字颜色
  search("字串") 返回字串在对象中的索引位置 
  replace("字串1","字串2") 字串2替换字串
  split(["字串"]) 以字符的方式分割字符串 返回数组
  match("world")方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。








 数学对象Math
  ceil(数值) 大于等于该数值的最小整数 
 floor(数值) 小于等于该数值的最大整数 
 random() 0倒1的随机数 






 时间对象 Date
  日期对象名称=new Date([日期参数]) 
  日期参数：1.省略；
　　　　　　　2.英文-数值格式：月 日，公元年 [时：分：秒] 
　　　　　　　　　如：today=new Date("October 1,2008 12:00:00")
　　　　　　　3.数值格式：公元年，月，日，[时，分，秒] 
　　　　　　　　　如：today=new Date(2008,10,1)


getYear() 返回年份数 
getMonth() 返回月份数（0--11） 注意是从0开始的
getDate() 返回日期数（1--31） 
getDay() 返回星期数（0--6)
getHours() 返回时数（0--23） 
getMinutes() 返回分数（0--59） 
getSeconds() 返回秒数（0--59） 
getMilliseconds() 返回毫秒数（0--999）
getTime() 返回对应日期基线的毫秒 
Date.parse(日期字串) 返回对应日期基线的毫秒 


定时器:
  [定时器对象名=] setTimeout(“<表达式>”，毫秒)  执行<表达式>一次
  clearTimeout(定时器对象名)


  [定时器对象名=] setInterval(“<表达式>”，毫秒)
  重复执行<表达式>，直至窗口、框架被关闭或执行clearInterval 


动态时间显示(封装插件):
    var interval=null; //定义定时器的返回id
    function  showtime(id,showtype){  //显示时间函数
     var  nowDate,year,month,day,hour,minu,sec,showtimeStr;  // 声明变量
       showtype=(showtype == null)?1:showtype; //三元运算符设置参数值


      nowDate=new Date(); //实例化时间对象
      year=nowDate.getFullYear();  //获取年
      month=nowDate.getMonth()+1; //获取月
      day=nowDate.getDate();  //获取天
     hour=nowDate.getHours();  //获取小时
     minu=nowDate.getMinutes();  //获取分钟
     sec=nowDate.getSeconds();  //获取秒
     //给时间加上前置 0
      hour=(hour < 10)?'0'+hour:hour;
      minu=(minu < 10)?'0'+minu:minu;
      sec=(sec < 10)?'0'+sec:sec;
      //构建字符串
      switch (showtype){//不能写1，2，3因为是字符比较，所以要加引号
            case '1':showtimeStr=year+'年'+month+'月'+day+'日'+hour+':'+minu+':'+sec;break;
            case '2':showtimeStr=year+'/'+month+'/'+day+'&nbsp;'+hour+':'+minu+':'+sec;break;
            case '3':showtimeStr=year+'-'+month+'-'+day+'&nbsp;'+hour+':'+minu+':'+sec;break;
            default:showtimeStr=year+'年'+month+'月'+day+'日'+hour+':'+minu+':'+sec;break;
       }
        document.getElementById(id).innerHTML=showtimeStr;  //显示字符串
            /**
              *interval=setTimeout("showTime('"+id+"','"+showtype+"')",1000);  //使用递归的时候，使用setTimeOut();
              */
      
  
      }
    //安装显示时间函数
    function  setUPTime(id,showtype){
        if(interval){
            interval=clearInterval(interval)
        }
        interval=setInterval("showtime('"+id+"','"+showtype+"')",1000);
    }


    //用户调用安装函数
    setUPTime('showtime',3);
   
倒计时案例；
function runResort(str,id1)
{
    var  nowDate;  //定义当前时间
    nowDate=new Date(); //实例化时间对象
    nowDates= nowDate.getTime();  //获取当前时间的毫秒
    var runRes = Date.parse(str);  //得到用户的时间毫秒, 注意用户参数格式 8/13/2014 17:30:00
      sTime=(runRes-nowDates)/1000;  //获取秒数
    if(sTime>=0)
    {
        day =Math.floor( sTime/(3600*24));    //得到天
        hour=Math.floor((sTime-day *86400)/3600) ;  //得到小时
        minu=Math.floor((sTime-day *86400- hour*3600)/60);   //得到分钟
        sec=Math.floor((sTime-day *86400- hour*3600-minu*60));  //得到秒数
        showtime=day+'天'+hour+':'+minu+':'+sec;
        document.getElementById(id1).innerHTML=showtime;
    } else
    {
        document.getElementById(id1).innerHTML="时间截止！";
        return;
    }
    setTimeout("runResort('"+str+"','"+id1+"')");
}


function main(id,id1)
{
  var str=document.getElementById(id).value;
    runResort(str,id1)


}


调用:


<img src="image/11.jpg" onload="main('sp1','sb1')">
<input id="sp1" value="8/13/2014 17:30:00"  style="display:none" /><span id="sb1"></span>






事件：用户对浏览器所做的特定的动作（操作），是实现交互操作的一种机制。事件通常与函数配合使用，当事件发生时函数才会执行。
            在html中所有的元素都有事件
onload 和 onUnload  当用户进入或离开页面时就会触发 onload 和 onUnload 事件。 属于body
onFocus, onBlur 和 onChange 事件通常相互配合用来验证表单。  属于表单事件  input     select  onchange事件时获取option的文本  select[ select.selectedIndex].innerText
onSubmit 用于在提交表单之前验证所有的表单域。  属于 form
  表单验证案例: 
<form name="form1" action="1.php" method="post" onsubmit="return checkForm();">
     用户名:  <input type="text" name="uname" onblur="validate(this)"> <br>
     密码:  <input type="password" name="upwd" onblur="validate(this)" > <br>
     重复密码:  <input type="password" name="upwds" onblur="validate(this)" > <br>
     邮件:  <input type="text" name="uemail" onblur="validate(this)" > <br>
    <input type="submit" name="sub" value="提交">
  </form>
function  validate(o){
           if(o.value == ''){
               o.style.border='1px solid red';
               return false;
           }
              //判断类型
              switch (o.name){
                   case 'upwd':pwdVal= o.value;break;
                   case 'upwds':
                      if(pwdVal != o.value){
                              o.style.border='1px solid red';
                          return false;
                       };break;
                  case 'uemail': if(o.value.indexOf('@') == -1){
                              o.style.border='1px solid red';
                      };break;
                  }
           o.style.border='1px solid blue';
          return true;
   }


onmouseover：鼠标移到目标的上方。
onmouseout：鼠标移出目标的上方。
onmousemove：鼠标鼠标指针移动时发生
onMouseOver 和 onMouseOut 用来创建“动态的”按钮。


案例:js实现导航条
 <div class="nav-list">
        <ul class="nav-content">
            <li id='d1' onmouseover="showNews('d1','a')">首页</li>
            <li id="d2" onmouseover="showNews('d2','b')">.NET课程</li>
         </ul>
</div> <div class="nav-bottom">
        <div id="a" >
        <ul>
            <li><a href="#"><span>最近课程更新</span></a></li>
            <li><a href="#"><span>热门推荐</span></a></li>
         </ul>
        </div>
        <div id="b">
            <ul>
                <li><a href="#"><span>静态网页技术</span></a></li>
                <li><a href="#"><span>c#知识</span></a></li>
            </ul>
        </div>
*{margin: 0;padding: 0}
li{list-style-type: none}
a{text-decoration: none}
.nav{position: relative;margin: 0 auto;width: 1200px;height: 66px;color: white}
.nav-list{width: 1200px;height: 33px;background-color: #141011}
.nav-list li{width: 100px;height: 33px;line-height:33px;text-align: center;float: left}
.nav-list ul{margin-left: 100px}
.nav-bottom{width: 1200px;height: 33px;background-color:#F7F8F8}
li{width: 130px;height: 33px;line-height:33px;text-align: center;float: left}
#b,#c,#d,#e,#f,#g,#h,#i{display: none}




function showNews(id1,id2)
{
    var arr1=['d1','d2'];
    var arr2=['a','b'];
switch (id1)
    {
        case "d1":obj_d1.style.backgroundColor="white";
            obj_d2.style.backgroundColor="#141011";
            obj_d1.style.color="#000000";
            obj_d2.style.color="#FFFFFF";
            obj_a.style.display="block";
            obj_b.style.display="none";
           ;break;
        case "d2":obj_d2.style.backgroundColor="white";
            obj_d1.style.backgroundColor="#141011";
       
            obj_d2.style.color="#000000";
            obj_d1.style.color="#FFFFFF";
             obj_b.style.display="block";
            obj_a.style.display="none";
           ;break;
   }
}


onReset form 重置时响应事件
onClick/onDblCli  鼠标单击/双击时响应事件
onKeyDown/onKeyPress/onKeyUp  键盘按下/键盘按下并松开的瞬间/键盘弹起响应事件
 event.keyCode   获取按键的unicode    event事件获取键的unicode 值


onmousedown：鼠标的键钮被按下。
onmouseup：鼠标的键钮被释放弹起。


Event事件状态 对象（描述鼠标事件）
  event.button=0|1|2参数 描述 
                    0 规定鼠标左键。 
                    1 规定鼠标中键。 
                    2 规定鼠标右键。 


this  ---代表当前元素对象
 obj.className='dd';  设置className;




js中的正则
什么是 RegExp？
  RegExp 是正则表达式的缩写


定义 RegExp
 var patt1=new RegExp("e");
var patt2=//;


正则表达式的组成:  由元字符 和限定字符组成
  常用的元字符:
 \d  匹配一个数字字符。等价于 [0-9]。 
\D  匹配一个非数字字符。等价于 [^0-9]。 
\s  匹配任何空白字符，包括空格、制表符、换页符等等 
\S  匹配任何非空白字符。等价于 [^ \f\n\r\t\v]
\w  匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
\W  匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。 
\   转义符号
^  匹配输入字符串的开始位置 ,但是不是必须的
$  匹配输入字符串的结束位置。 
|  “或”操作 
()  分组，标记一个子表达式的开始和结束位置
【】标记一个中括号表达式的开始。只表示匹配自定义的范围
[^ ] 表示匹配非自定义的范围






 常用的限定符：
*  匹配前面的子表达式零次或多次， 等价于{0,}。
+  匹配前面的子表达式一次或多次。  等价于 {1,}。
?  匹配前面的子表达式零次或一次 ，等价于 {0,1}。
{n}  n 是一个非负整数。匹配确定的 n 次 
{n,}  n 是一个非负整数。至少匹配n 次 
{n,m}  m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次 
.    贪婪字符，匹配除换行符 \n之外的任何单字符 


常见案例:
  /(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/  将一个URL解析为协议、域、端口及相对路径 
   http://127.0.0.1:8080/1.php






RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
    patt2.test(str)    返回true 或者 false
   patt.exec(str)     返回匹配到的字符串










 Dom对象(基础)
   document.getElementByName("name");  name用于form内元素,提交需要,得到的是数组
   document.getElementById("id");   id就像身分证号,是唯一的,得到的是单个元素     
   document.getElementByTagName("element");  找到元素对象 ,返回数组
  
 替换元素值
      obj.value ;//获取值
      obj.value="新值";


     obj.innerText;;  //获取元素文本值
     obj.innerText;="新值";


   obj.innerHTML;  获取元素值
  obj.innerHTML="新值";




  form表单通过name属性获取对象
     document.FormName.InputName


window对象
  window.closed    判断窗口是否关闭，如果关闭返回true 
  var mywindow=window.open(URL,name,features,replace)
      URL 一个可选的字符串，声明了要在新窗口中显示的文档的 URL 
     name 一个可选的字符串  声明了新窗口的名称
      窗口特征
     channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。 
    directories=yes|no|1|0 是否添加目录按钮。默认为 yes。 
    fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。 
    height=pixels 窗口文档显示区的高度。以像素计。 
   left=pixels 窗口的 x 坐标。以像素计。 
   location=yes|no|1|0 是否显示地址字段。默认是 yes。 
   menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。 
   resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。 
  scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。 
  status=yes|no|1|0 是否添加状态栏。默认是 yes。 
  titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。 
   toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。 
   top=pixels 窗口的 y 坐标。 
   width=pixels 窗口的文档显示区的宽度。以像素计。 


mywindow.close()   用于关闭指定浏览器窗口   mywindow 代表 window.open() 返回的对象 


<a href="javascript:self.close()" >关闭当前窗口</a>


History 对象（该对象属于window 对象）
  back() 加载 history 列表中的前一个 URL。   表示后退
 forward() 加载 history 列表中的下一个 URL。 表示前进
 go(数字) 加载 history 列表中的某个具体页面。   整数表示前进  负数表示后退


Location 对象
Location 对象包含有关当前 URL 的信息。
 location.search  返回当前 URL 的查询部分（问号 ? 之后的部分）。 
   通过url传递参数，我们称为 get传参，  http://域名/文件地址?参数
location.href=URL
assign() 加载新的文档。location.assign(URL) 
reload() 重新加载当前文档。  location.reload()  类似与 f5
replace() 用新的文档替换当前文档。 
-------------------------------------------------------------------------------------------------------------------------------------------------------------
html  DOM 节点 
 DOM：  document  Object Module  ---文档对象模型
 dom 规定: 网页的每个元素都是节点，dom可以创建或者获取节点对象
  创建元素:  document.createElement("元素名");
  追加对象:  谁.appendChild(节点对象);
  创建文本对象: document.createTextNode("文本字符串");


案例创建三行三列表格:
function createTable(){
        var table = document.createElement("table");
        for(var i=0;i<3;i++){
            var tr = document.createElement("tr");
            for(var j=0;j<3;j++){
                var td = document.createElement("td");
                var text = document.createTextNode("　");
                td.appendChild(text);
                tr.appendChild(td)
            }
            table.appendChild(tr);
        }
        table.border="1px";
        table.width="400px";
        document.body.appendChild(table);
    }


获取或者设置元素对象属性；
          对象.getAttribute('属性名')     获取属性的值
         对象.setAttribute('属性名','value')     设置属性的值
  复制节点对象： 对象. cloneNode(true/false)   如果参数为 true 那么将复制整个元素包含属性以及内容 ，如果为false 那么将只复制元素本身，返回新对象
  删除节点对象:   父对象removeChild(子节点对象);
 已知子节点查找父节点对象:   对象.parentNode;    它允许一层一层的向上查找
已知父节点查找下面的第一个节点:     父对象.firstChild;    返回该父节点对象下面的第一个子节点对象
已知父节点查找下面的最后一个节点:    父对象.lastChild;    返回该父节点对象下面的最后一个子节点对象


已知父节点查找子节点:
     1--判断节点对象下面是否有子节点对象   对象. hasChildNodes()  返回true 或者 false
     2-获取节点对象下面的子节点的长度    对象.childNodes.length
     3--获取节点对象下面的子节点    对象.childNodes   返回一个元素对象数组，在编程中我们可以调用该元素对象的属性或者方法


替换节点对象:    父对象.replaceChild(新对象,旧对象);


将对象插入到目标节点之前：  父对象.insertBefore(新节点对象,目标节点对象);


查找兄弟节点:
     1--查找上一个兄弟节点 :   节点对象.previousSibling 
     
    2--查找下一个兄弟节点:     节点对象.nextSibling


动态添加事件:
   元素对象.attachEvent ("事件名",函数名())  或者    元素对象attachEvent (事件名",function(){................})   该方法只适用于ie


  元素对象.addEventListener("事件名",函数名(),false)  或者    元素对象addEventListener (事件名",function(){................},false)   该方法只适用于非ie  


   注意 attachEvent 的事件带 on，如 onclick，而 addEventListener 不带 on，如 click。


在js中区分ie与其他浏览器


if (document.all){
　　alert(”IE浏览器”);
}else{
alert(”非IE浏览器”);
}


if (!!window.ActiveXObject){
　　alert(”IE浏览器”);
}else{
　　alert(”非IE浏览器”);
}


jquery实现区分浏览器:
 if($.browser.msie){
       window.form1.submit();
   }else{
       $("#form1").submit();}
     }




向绑定事件传入参数；
 sid.attachEvent("onchange",function (){dds(ds)});
function dds(d){
        document.getElementById("xx").innerHTML = d;
}
   


div 拖拽实现
  x=event.clientX   返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
  y=event.clientY  返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的垂直坐标。


  x=event.screenX  返回当某个事件被触发时，鼠标指针的水平坐标。 相对于屏幕
  y=event.screenY  返回当某个事件被触发时，鼠标指针的垂直坐标。 相对于屏幕


Screen 对象
  screen.availHeight  返回显示屏幕的高度   也可以使用   height  代替
  screen.availWidth 返回显示屏幕的宽度    也可以使用   width    代替




获取或者设置窗口的左上角在屏幕上的的 x 坐标和 y 坐标
screenLeft     IE、Safari 和 Opera 支持 screenLeft 和 screenTop
screenTop    IE、Safari 和 Opera 支持 screenLeft 和 screenTop
screenX   Firefox 和 Safari 支持 
screenY  Firefox 和 Safari 支持 


var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; 
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; 


css蔽罩层:
    /*css蔽罩层*/
        #popbg{background-color: #000;filter: alpha(opacity=30);left:0; width: 100%; position: absolute;
            top: 0px; height: 100%; opacity: 0.5; z-index:9999998;display:none;}
<div id="popbg" ></div>


css div居中:
     .cvdiv {
            position: absolute; left: 50%; top: 50%; margin-left: -300px;margin-top: -200px; width: 600px;
            height: 400px;border: 1px solid red;}


<div class="cvdiv">hello</div>






弹出层备课:
  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        a{text-decoration: none;color: cadetblue;text-align:center; font-weight: bold;}
        .butt{display: block;width: 100px; height: 30px; line-height: 30px;background-color: gainsboro; border:
            2px solid gray;}
        .draw{position: absolute; left: 500px; top: 150px;margin: 10px; border: 5px
           solid gray;background-color: white; display: none; /*加入css蔽罩层*/ z-index:9999999;}
       .content{margin: 0; padding: 0;}
       .top{ display: none;  width: 100%; height: 30px;line-height: 30px; margin: 0;padding: 0;   background-color: gainsboro; font-weight: bold; font-size: 14px; font-family: "微软雅黑"}
       .closeDraw{float: right; cursor: pointer;}
        .closeDraw:hover{color: green;}
        .main{margin: 0;padding: 0;width: 100%;height: 170px;}
        /*css蔽罩层*/
        #popbg{background-color: #000;filter: alpha(opacity=30);left:0; width: 100%; position: absolute;
            top: 0px; height: 100%; opacity: 0.5; z-index:9999998;display:none;}
    </style>
</head>
<body>
<!--按钮-->
<a href="#" class="butt" onclick="show('fd');return false;">[打开]</a>


<!--start  显示的弹出层div  -->
<div class="draw" id="fd">
 <div class="content">
     <p class="top" id="topContent">
         <span onclick="closeDraw('fd')" class="closeDraw">[关闭]</span>
     </p>
     <div class="main" id="main">


     </div>
 </div>
</div>


<div id="popbg" ></div>


<!-- end  显示的弹出层div  -->


<div class="login" id="login" style="display: none;">
      <form action="#" method="post" name="loginForm">
            用户名:<input type="text" name="uname"><br>
            密码: <input type="password" name="upwd"><br>
          <input type="submit" name="sub" value="提交">
    </form>
</div>






<script type="text/javascript">
    var openXYid;  //时间定时器打开x方向返回的时间id
    var closeXYId; //时间定时器关闭xy方向返回的时间id


    /**
     * @param id
     * 打开div 的事件
     *
     */
      function show(id){
        openXYid=clearInterval(openXYid);  //关闭定时器
        var o=document.getElementById(id);  //找到弹出层对象
                 o.style.display='block';    //将弹出层设为显示
                o.style.width='1px'; //设置弹出层的宽度
                o.style.height='1px';  //设置弹出层高度
        openXYid=setInterval(function(){openXY(o,300,200)},20);  //不断的增加width  height
          document.getElementById('popbg').style.display='block';
       }
    function openXY(o,x,y){
         var widthX=parseInt(o.style.width); //获取当前对象的宽度 返回  px并转换后返回数字
         var heigthY=parseInt(o.style.height); //获取当前对象的高度 返回  px并转换后返回数字
           if(widthX < x  ||  heigthY < y){  //判读 如果返回的 宽度 小于 我们设定的宽度值 300px
               o.style.width=(widthX+Math.ceil((x-widthX)/5))+'px';  //我们就不断的去追加
               o.style.height=(heigthY+Math.ceil((y-heigthY)/5))+'px';
               document.getElementById('topContent').style.display='block';
           }else{  //否则就把定时器关闭
               openXYid=clearInterval(openXYid);
               var loginoo=document.getElementById('login');
               var mainoo=document.getElementById('main');
                mainoo.innerHTML=loginoo.innerHTML;
               mainoo.style.display='block';
           }
    }


    /**
     * 关闭
     */
   function closeDraw(id){
        closeXYId=clearInterval(closeXYId); //关闭定时器
         var o=document.getElementById(id); //找到对象
         if(o.style.display == 'block'){   //判读该对象的disaplay属性值是否等于 显示
             var mainoo=document.getElementById('main');
             mainoo.style.display='none';
             closeXYId=setInterval(function(){closeXY(o)},20); //就不断的去减少
         }
        document.getElementById('popbg').style.display='none';
    }
     function closeXY(o){
        var widthX=parseInt(o.style.width);
        var heigthY=parseInt(o.style.height);
        if(heigthY > 0  ||  widthX > 0){
            o.style.height=(heigthY-Math.ceil((heigthY)/5))+'px';
            document.getElementById('topContent').style.display='none';
             o.style.width=(widthX-Math.ceil((widthX)/5))+'px'; // (widthX-Math.ceil((widthX)/5))  含义是设置步长
          }else{
            closeXYId=clearInterval(closeXYId);
            o.style.display='none';
         }
     }
</script>
</body>
</html>
  


形参个数 可以 比实参多,实参必须和形参相对应
---------------------------
url 加密、解密.
  encodeURI()       将字符串加密为URI
  decodeURI()       为加密的URI进行解码


 escape(string)      加密一个字符串
 unescape()        使用escape()对一个字符串进行解码


 isNaN(string)      检测一个值是否不是一个有限数字
 Number()         将一个对象的值转换为一个数字
 parseFloat(string)    将一个字符串解析为一个浮点数字
 parseInt(string)     将一个字符串解析为一个整数,不是四舍五入操作,而是切尾