JavaScript的学习整理（一）

目录：

1.换皮肤功能
2.显示/隐藏（点击切换）
3.显示/隐藏(onmouseover/onmouseout)
4.选项卡
5.全选/不选/反选(checkbox)
6.简易日历

1、换肤功能——实质是改变链接的css文件

step 1.先通过id获取需要修改的部分（link）；       step 2.通过 href 改变 需要链接的css文件；

下面我写了一个小的代码，只是用于改变页面背景颜色来供大家参考学习。

  1.  
    <input type="button" value="skin1" onclick="skin_1()"/>
  2.  
    <input type="button" value="skin2" onclick="skin_2()"/>
  3.  
    <script>
  4.  
    function skin_1()
  5.  
    {
  6.  
    var oL=document.getElementById('11');
  7.  
    oL.href="1.css";
  8.  
    }
  9.  
    function skin_2()
  10.  
    {
  11.  
    var oL=document.getElementById('11');
  12.  
    oL.href="2.css";
  13.  
    }
  14.  
    </script>

其中，1.css文件：

  1.  
    body{
  2.  
    background:#2A5698;
  3.  
    }

2.css 文件：

  1.  
    body{
  2.  
    background:pink;
  3.  
    }

2、显示隐藏效果（点击切换）

其中，none:隐藏    block：显示

  1.  
    <input type="button" value="显示/隐藏" onclick="showHide()"/>
  2.  
    <div id="div1">点击显示，点击隐藏</div>
  3.  
     
  4.  
    <style>
  5.  
    #div1{width:200px; height:100px; background:lightblue; display:none;}
  6.  
    </style>
  7.  
     
  8.  
    <script>
  9.  
     
  10.  
    function showHide()
  11.  
    {
  12.  
    var oDiv=document.getElementById('div1');
  13.  
    if(oDiv.style.display=='block')
  14.  
    {
  15.  
    oDiv.style.display='none';
  16.  
    }
  17.  
    else
  18.  
    {
  19.  
    oDiv.style.display='block';
  20.  
    }
  21.  
    }
  22.  
    </script>

3、显示/隐藏（当鼠标悬浮在区域时显示文字，离开则隐藏效果）

  1.  
    <input type="text" value="显示/隐藏" onmouseover="document.getElementById('div2').style.dispaly='block';" onmouseout="document.getElementById('div2').style.display='none';">
  2.  
    <div id="div2">这里是需要显示的内容：</div>
  3.  
     
  4.  
    <style>
  5.  
    #div2{width:200px; height:100px; background:green; }
  6.  
    </style>

4、选项卡

选项卡：主要是改变 当前显示的div，通过改变className。   用到的知识有：①循环；②初始化；③this指针；

  1.  
    <!DOCTYPE HTML>
  2.  
    <html>
  3.  
    <head>
  4.  
        <meta charset="utf-8">
  5.  
        <title>JAVAscript</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <div id="div3">
  9.  
    <input class="active" type="button" value="教育"/>
  10.  
    <input type="button" value="培训"/>
  11.  
    <input type="button" value="招生"/>
  12.  
    <input type="button" value="出国"/>
  13.  
    <br/>
  14.  
    <div style="display:block;">11111</div>
  15.  
    <div>22222</div>
  16.  
    <div>33333</div>
  17.  
    <div>44444</div>
  18.  
    </div>
  19.  
     
  20.  
    <style>
  21.  
    #div3 .active{background:yellow;}
  22.  
    #div3 div{width:300px; height:200px;border:1px solid green;background:lightpink;display:none;}
  23.  
    </style>
  24.  
     
  25.  
    <script>
  26.  
    /*
  27.  
    *4、选项卡：主要是改变 当前显示的div，通过改变className。
  28.  
    */
  29.  
    window.onload=function()
  30.  
    {
  31.  
    var oDiv=document.getElementById('div3');
  32.  
    var aBtn=oDiv.getElementsByTagName('input');
  33.  
    var aDiv=oDiv.getElementsByTagName('div');
  34.  
     
  35.  
    for(var i=0;i<aBtn.length;i++)
  36.  
    {
  37.  
    aBtn[i].index=i;
  38.  
    aBtn[i].onclick=function()
  39.  
    {
  40.  
    for(var i=0;i<aBtn.length;++i)
  41.  
    {
  42.  
    //初始化
  43.  
    aBtn[i].className='';
  44.  
    aDiv[i].style.display='none';
  45.  
    }
  46.  
    //alert(this.value);
  47.  
    this.className='active';
  48.  
    aDiv[this.index].style.display='block';
  49.  
    };
  50.  
    }
  51.  
     
  52.  
    };
  53.  
    </script>
  54.  
    </body>
  55.  
    </html>

5、全选/不选/反选

选择--checked   其中：checked=true 勾选，  checked=false  不选,     **注意没有引号。

  1.  
    <input type="button" id="btn11" value="全选"/> 
  2.  
    <input type="button" id="btn22" value="不选"/> 
  3.  
    <input type="button" id="btn33" value="反选"/> <br/>
  4.  
    <div id="div4">
  5.  
    <input type="checkbox">1<br/>
  6.  
    <input type="checkbox">2<br/>
  7.  
    <input type="checkbox">3<br/>
  8.  
    <input type="checkbox">4<br/>
  9.  
    <input type="checkbox">5<br/>
  10.  
    <input type="checkbox">6<br/>
  11.  
    </div>
  12.  
     
  13.  
    <script>
  14.  
    /*
  15.  
    *7、选择--checked
  16.  
    *checked=true 勾选， checked=false 不选,
  17.  
    *注意没有引号。
  18.  
    */
  19.  
    window.onload=function()
  20.  
    {
  21.  
    var But1=document.getElementById('btn11');
  22.  
    var But2=document.getElementById('btn22');
  23.  
    var But3=document.getElementById('btn33');
  24.  
    var oDiv=document.getElementById('div4');
  25.  
    var oCh=oDiv.getElementsByTagName('input');
  26.  
     
  27.  
    //全选
  28.  
    But1.onclick=function()
  29.  
    {
  30.  
    for(var i=0;i<oCh.length;i++)
  31.  
    {
  32.  
    oCh[i].checked=true;
  33.  
    }
  34.  
    };
  35.  
    //不选
  36.  
    But2.onclick=function()
  37.  
    {
  38.  
    for(var i=0;i<oCh.length;i++)
  39.  
    {
  40.  
    oCh[i].checked=false;
  41.  
    }
  42.  
    };
  43.  
    //反选
  44.  
    But3.onclick=function()
  45.  
    {
  46.  
    for(var i=0;i<oCh.length;i++)
  47.  
    {
  48.  
    if(oCh[i].checked==false)
  49.  
    {oCh[i].checked=true;}
  50.  
    else
  51.  
    {oCh[i].checked=false;}
  52.  
    }
  53.  
    };
  54.  
    };
  55.  
    </script>

6、简易日历

简易日历：（综合应用）   涉及到的知识点有：①循环；②数组；③选项卡切换；④this.index；⑤innerHTML

  1.  
    <!DOCTYPE HTML>
  2.  
    <html>
  3.  
    <head>
  4.  
        <meta charset="utf-8">
  5.  
        <title>JAVAscript</title>
  6.  
     
  7.  
    <style>
  8.  
    #div5{height:650px;width:370px;border:1px solid black;font-family:Arial;
  9.  
    font-size:15px;background:#E6E6E4;}
  10.  
    #div5 li{list-style-type:none;border:1px solid gray;width:90px;height:90px;float:left;margin-right:5px;
  11.  
    margin-top:5px;background:black;color:white;}
  12.  
    .text{margin-left:40px;margin-top:0px;width:285px;height:200px;border:1px solid #F7F7F5;float:left;background:#EEEEEE;}
  13.  
    #div5 .active{background:white;color:#BC647B;border:1px solid black;}
  14.  
    </style>
  15.  
    <pre name="code" class="html"></head>
  16.  
    <body>
  17.  
    <div id="div5">
  18.  
    <center>
  19.  
    <ul>
  20.  
    <li class="active"><h2>1</h2><p>JAN</p></li>
  21.  
    <li><h2>2</h2><p>FEB</p></li>
  22.  
    <li><h2>3</h2><p>MAR</p></li>
  23.  
    <li><h2>4</h2><p>APR</p></li>
  24.  
    <li><h2>5</h2><p>MAY</p></li>
  25.  
    <li><h2>6</h2><p>JUN</p></li>
  26.  
    <li><h2>7</h2><p>JUL</p></li>
  27.  
    <li><h2>8</h2><p>AUG</p></li>
  28.  
    <li><h2>9</h2><p>SEP</p></li>
  29.  
    <li><h2>10</h2><p>OTC</p></li>
  30.  
    <li><h2>11</h2><p>NOV</p></li>
  31.  
    <li><h2>12</h2><p>DEC</p></li>
  32.  
    </ul>
  33.  
    <br/><br/>
  34.  
    <div class="text">
  35.  
    <h2>1月活动</h2>
  36.  
    <p>一月活动... </p>
  37.  
    </div>
  38.  
    </center>
  39.  
    </div>
  40.  
     
  41.  
    <script>
  42.  
    /**
  43.  
    *6、简易日历：
  44.  
    涉及：①循环；②数组；③选项卡切换；④this.index；⑤innerHTML
  45.  
    */
  46.  
    window.onload=function()
  47.  
    {
  48.  
    var arr=['一月活动...','二月活动...','三月活动...','四月活动...','五月活动...','六月活动...','七月活动...','八月活动...','九月活动...','十月活动...','十一月活动...','十二月活动...'];
  49.  
    var oDiv=document.getElementById('div5');
  50.  
    var aLi=oDiv.getElementsByTagName('li');
  51.  
    var aTxt=oDiv.getElementsByTagName('div')[0];
  52.  
     
  53.  
    for(var i=0;i<aLi.length;++i)
  54.  
    {
  55.  
    aLi[i].index=i;
  56.  
    aLi[i].onmouseover=function()
  57.  
    {
  58.  
    for(var i=0;i<aLi.length;++i)
  59.  
    {
  60.  
    aLi[i].className='';
  61.  
    }
  62.  
    this.className='active';
  63.  
    aTxt.innerHTML="<h2>"+(this.index+1)+"月活动</h2><p>"+arr[this.index]+"</p>";
  64.  
    };
  65.  
     
  66.  
    }
  67.  
    };
  68.  
    </script>
  69.  
    </body>
  70.  
    </html> 

javascript的学习整理（二）——小练习

题目要求：

1.      请设计一个HTML文档，文档名为html1.htm,当打开该文档时，将显示出如下的页面：

该页面为一表格：

姓名       数学     计算机     外语     总分

张三       78      92         85       255

此处总分是通过计算得到！

还有两个按钮   “修改成绩” 和“关闭窗口”

要求：1）．当点击“关闭窗口”时，提示“确定关闭窗口？”，点击确定则关闭当前窗口。

2）．当点击“修改成绩”按钮时，可以在屏幕的中心位置打开html2.htm文档，

html2页面为一表格，文档结构如下：

数学       计算机      外语

文本框1    文本框2     文本框3

三个文本框：分别供输入数学、计算机、外语三门课的新成绩。

另有一个按钮：“修改数据”。 点击此按钮时，提示“是否确定修改？”，如果确定则修改。将所输入的新成绩修改到父窗口中的相应位置，同时重新计算总分的值。

HTML1：

  1.  
    <!doctype html>
  2.  
    <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>第三题</title>
  6.  
    <style>
  7.  
    table{width:400px;height:60px; text-align:center;}
  8.  
    input{width:55px;height:20px;}
  9.  
    .div1{width:400px;height:120px;}
  10.  
    #btn1{cursor:pointer;width:70px;height:30px;}
  11.  
    #btn2{cursor:pointer;width:70px;height:30px;}
  12.  
    /*#A{text-decoration:none;}*/
  13.  
    </style>
  14.  
    <script language="javascript">
  15.  
    //自定义提示关闭窗口
  16.  
    function custom_close()
  17.  
    {
  18.  
    if(confirm("确定关闭窗口?"))
  19.  
    {
  20.  
    window.opener=null;
  21.  
    window.open('',' _self ');
  22.  
    window.close();
  23.  
    }
  24.  
    else{}
  25.  
    }
  26.  
    function EntryPoint()
  27.  
    {
  28.  
    var style = 'dialogHeight:600px;dialogWidth:800px;center:Yes;status:no;help:0;scrool:yes';
  29.  
    var a = window.showModalDialog('html2.html', '', style);
  30.  
    //var a=window.showModalDialog("html2.html?temp="+Math.random(),"",style);
  31.  
    if (a == undefined)
  32.  
    {
  33.  
    a = window.returnValue;
  34.  
    }
  35.  
    // debugger;
  36.  
    if (a != null && a.length > 0)
  37.  
    {
  38.  
    document.getElementById("math").value = a[0];
  39.  
    document.getElementById("computer").value = a[1];
  40.  
    document.getElementById("English").value = a[2];
  41.  
    document.getElementById("sum").value =parseInt(a[0])+parseInt(a[1])+parseInt(a[2]);
  42.  
    }
  43.  
    }
  44.  
    </script>
  45.  
    </head>
  46.  
     
  47.  
    <body>
  48.  
    <div class="div1">
  49.  
    <table>
  50.  
    <tr>
  51.  
    <th>姓名</th>
  52.  
    <th>数学</th>
  53.  
    <th>计算机</th>
  54.  
    <th>外语</th>
  55.  
    <th>总分</th>
  56.  
    </tr>
  57.  
    <tr>
  58.  
    <td>张三</td>
  59.  
    <td><input type="text" name="math" id="math" value="78" style="border:0px;"/></td>
  60.  
    <td><input type="text" name="computer" id="computer" value="92" style="border:0px;"/></td>
  61.  
    <td><input type="text" name="English" id="English" value="85" style="border:0px;"/></td>
  62.  
    <td><input type="text" name="sum" id="sum" value="255" style="border:0px;"/></td>
  63.  
    </tr>
  64.  
    </table>
  65.  
    <br/>
  66.  
    <center>
  67.  
    <input type="button" value="修改成绩" id="btn1" onclick="EntryPoint()"/>
  68.  
                
  69.  
    <input type="submit" value="关闭窗口" id="btn2" onClick="custom_close()" />
  70.  
    </center>
  71.  
    </div>
  72.  
    </body>
  73.  
    </html>

HTML2：

    1.  
      <!doctype html>
    2.  
      <html>
    3.  
      <head>
    4.  
      <meta charset="utf-8">
    5.  
      <title>html2</title>
    6.  
      <style>
    7.  
      input{width:60px;}
    8.  
      #btn1{cursor:pointer;width:70px;height:30px;}
    9.  
      </style>
    10.  
       
    11.  
      <script type="text/javascript">
    12.  
      function postValue()
    13.  
      {
    14.  
      alert("是否确定修改？");
    15.  
      var math = document.getElementById("math").value;
    16.  
      var computer = document.getElementById("computer").value;
    17.  
      var English = document.getElementById("English").value;
    18.  
      var a = new Array();
    19.  
      a[0] = math;
    20.  
      a[1] = computer;
    21.  
      a[2]=English;
    22.  
      //debugger;
    23.  
      if (window.opener != undefined)
    24.  
      {
    25.  
      //for chrome
    26.  
      window.opener.returnValue = a;
    27.  
      }
    28.  
      else
    29.  
      {
    30.  
      window.returnValue = a;
    31.  
      }
    32.  
      window.close();
    33.  
      }
    34.  
      </script>
    35.  
      </head>
    36.  
       
    37.  
      <body>
    38.  
      <table>
    39.  
      <tr>
    40.  
      <th>数学</th>
    41.  
      <th>计算机</th>
    42.  
      <th>外语</th>
    43.  
      </tr>
    44.  
      <tr>
    45.  
      <td><input type="text" name="math" id="math"/></td>
    46.  
      <td><input type="text" name="computer" id="computer"/></td>
    47.  
      <td><input type="text" name="English" id="English"/></td>
    48.  
      </tr>
    49.  
      </table>
    50.  
      <input type="button" value="修改数据" id="btn1" onclick="postValue();"/>
    51.  
      </body>
    52.  
      </html>

javascript的学习整理（三）

目录 ：

1、函数传参（arguments）

2、css函数的应用

3、获取非行间样式

4、数组的应用

5、json与数组的比较

1、函数传参：arguments---参数个数不确定。  arguments相当于数组。

  1.  
    <!DOCTYPE HTML>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>arguments的使用</title>
  6.  
    <script>
  7.  
    window.onload=function()
  8.  
    {
  9.  
    function sum()
  10.  
    {
  11.  
    var result=0;
  12.  
    for(var i=0;i<arguments.length;i++)
  13.  
    {
  14.  
    result+=arguments[i];
  15.  
    }
  16.  
     
  17.  
    return result;
  18.  
    }
  19.  
    //alert(sum(2,3,4,5));
  20.  
    alert(sum(2,3,4,5,6,7,8));
  21.  
    };
  22.  
    </script>
  23.  
    </head>
  24.  
    <body></body>
  25.  
    </html>

2、css函数的使用：

  1.  
    <!DOCTYPE HTML>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>arguments的使用</title>
  6.  
    <script>
  7.  
    /*
  8.  
    *2、css函数：①判断arguments.length；----通过参数的长度来判断是获取样式还是设置样式。②给参数取名。增强可读性。
  9.  
    *
  10.  
    * css(对象,'属性')------获取样式；
  11.  
    * css（对象,'属性','属性值'）-------设置样式
  12.  
    */
  13.  
    function css(obj,name,value)
  14.  
    {
  15.  
    if(arguments.length==2)
  16.  
    {
  17.  
    return obj.style[name];
  18.  
    }
  19.  
    else
  20.  
    {
  21.  
    obj.style[name]=value;
  22.  
    }
  23.  
    }
  24.  
    window.onload=function()
  25.  
    {
  26.  
    var oDiv=document.getElementById('div1');
  27.  
     
  28.  
    //alert(css(oDiv,'width')); //获取样式
  29.  
    css(oDiv,'background','lightblue');//设置样式；
  30.  
    };
  31.  
    </script>
  32.  
    </head>
  33.  
    <body>
  34.  
    <div id="div1" style="width:200px;height:100px;background:pink;">
  35.  
    2、css函数示例。
  36.  
    </div>
  37.  
    </body>
  38.  
    </html>

3、获取非行间样式：

① oDiv.style.width------获取行间样式
② oDiv.currentStyle.width------获取非行间样式-----------兼容性问题：只兼容IE。
③ getComputedStyle(oDiv,false).width;----火狐+chrome；（第二个参数false处，可写任意东西）-------在IE下不兼容。
④ 用if语句来解决兼容性问题

  1.  
    if(oDiv.currentStyle)
  2.  
    {
  3.  
    //IE
  4.  
    alert(oDiv.currentStyle.width);
  5.  
    }
  6.  
    else
  7.  
    {
  8.  
    //Firefox chrome
  9.  
    alert(getComputedStyle(oDiv,fasle).width);
  10.  
    }

⑤ 将常用的功能封装成一个函数，方便调用使用；

  1.  
    function getStyle(obj,name)
  2.  
    {
  3.  
    if(oDiv.currentStyle)
  4.  
    {
  5.  
    //IE
  6.  
    return obj.currentStyle[name];
  7.  
    }
  8.  
    else
  9.  
    {
  10.  
    //Firefox chrome
  11.  
    alert(getComputedStyle(obj,fasle).[name];
  12.  
    }
  13.  
    }

使用时：

getStyle(oDiv,width);

⑥ 复合样式：background、border等
    单一样式：width、height、backgroundColor等
  上述函数只能用于单一样式参数的提取。

4、数组的应用：

（1）定义：

  1.  
    var a=[1,2,3,4,5,6];
  2.  
    var a=new Array(1,2,3,4,5,6);

（2）常用属性的使用：length-----即可获取，也可设置
（3）数组的使用方法

a.push(元素);   //在数组尾部添加元素；
    a.pop();     //在数组尾部删除元素；
    a.shift();   //在数组头部删除元素；
    a.unshift(元素);//在数组头部添加元素；
    a.splice（起点，长度）；//从（起点）开始删除（长度）个元素；
    a.splice（起点，0，元素,元素...）；//从（起点）开始添加元素；
    a.plice（起点，长度，元素...）；//替换

例子：

  1.  
    <script>
  2.  
    var a=[1,2,3,4,5,6];
  3.  
    //a.push(10); //a=[1,2,3,4,5,6,10]
  4.  
    //a.pop(); //a=[1,2,3,4,5]
  5.  
    //a.shift(); //a=[2,3,4,5,6]
  6.  
    //a.unshift(9);//a=[9,1,2,3,4,5,6]
  7.  
    //a.splice(2,2);//a=[1,2,5,6];
  8.  
    //a.splice(2,0,'x','b','c');//a=[1,2,x,b,c,3,4,5,6]
  9.  
    a.splice(2,2,'x','b');//a=[1,2,x,b,5,6]
  10.  
     
  11.  
    //alert(a);
  12.  
    </script>
  13.  
     

（4）数组的链接concat    

  1.  
     
  2.  
    var a=[1,2,3];
  3.  
    var b=[4,5,6];
  4.  
    a.concat(b); //1,2,3,4,5,6
  5.  
    b.concat(a); //4,5,6,1,2,3

（5）数组的拼接join

  1.  
     
  2.  
    a.join('-'); //1-2-3(拼接符是 - )
  3.  
    a.join('--p');//1--p2--p3（拼接符是 --p）
  4.  
    //拼接符号可以自由设置

（6）数组的排序sort---只认识字符串

①字符串的排序：从左向右按字母顺序排序。

  1.  
    var arr=['float','width','height','color'];
  2.  
    arr.sort();
  3.  
    alert(arr); //arr=['color','float','height','width']

②数字的排序：----将数字当字符串处理

  1.  
    var arr=[12,114,8,24,245];
  2.  
    arr.sort();
  3.  
    alert(arr); //arr=[114,12,24,245,8]

改进：------处理数字

  1.  
    arr.sort(function(n1,n2)
  2.  
    {
  3.  
    if(n1<n2)
  4.  
    {
  5.  
    return -1;
  6.  
    }
  7.  
    else if(n1>n2)
  8.  
    {
  9.  
    return 1;
  10.  
    }
  11.  
    else
  12.  
    {
  13.  
    return 0;
  14.  
    }
  15.  
    });

简化：

  1.  
    arr.sort(function(){
  2.  
    return n1-n2;
  3.  
    });

5、json与数组之间的比较

①什么是json?

  1.  
    <script>
  2.  
    /*
  3.  
    *注意事项：
  4.  
    *1、json类似于数组，但是使用的事花括号{}；
  5.  
    *2、定义：var json={变量名：变量值， 变量名：变量值，....};
  6.  
    *3、提取json中的元素：json.变量名
  7.  
    *4、提取到的元素可以进行相应的处理
  8.  
    */
  9.  
    var json={a:12,b:7,c:'xdef'};
  10.  
     
  11.  
    // alert(json.a); //提取json中的元素
  12.  
     
  13.  
    json.b++; //对json中的元素b进行自增处理
  14.  
    alert(json.b);
  15.  
    </script>

②区别

  1.  
    var arr=[1,3,4];
  2.  
    var json={a=1,b=3,c=4};
  3.  
     
  4.  
    alert(arr[0]); //弹出1
  5.  
    alert(json.a); //弹出1
  6.  
    alert(json['a']); //弹出1

由上可以观察出：区别1：json的下标是字符，而数组的下标是数字

  1.  
    //循环(两种表示)：
  2.  
     
  3.  
    //① 使用到length
  4.  
     
  5.  
    for(var i=0;i<arr.length;i++)
  6.  
    {
  7.  
    alert('第'+i+'个东西:'+arr[i]);
  8.  
    }
  9.  
    //② 未使用到length
  10.  
     
  11.  
    for(var i in arr)
  12.  
    {
  13.  
    alert('第'+i+'个东西:'+arr[i]);
  14.  
    }
  15.  
     
  16.  
     
  17.  
    for(var i in json)
  18.  
    {
  19.  
    alert('第'+i+'个东西:'+json[i]);
  20.  
    }

区别2：json没有length，而数组有length;(涉及循环的使用)。所以json循环时用 for --in  结构。

JavaScript的学习整理（四）

目录：

1、类型转换

2、全局变量

3、命名规范

4、运算符（%）的使用

1、类型转化（强制类型转换）

  1.  
    var a='12';
  2.  
    parseInt(a); //a=12(字符串转化成数字)
  3.  
    parseFloat(a);//转换成浮点数

功能：从左到右开始扫描，碰见非数字的字符时就跳出。

例子：

  1.  
    var a='12px';
  2.  
    parseInt(a);//a=12
  3.  
     
  4.  
    var a='23pn45';
  5.  
    parseInt(a);//a=12

(1) isNAN(a);  判断变量a是否为NAN；

应用：求两数之和；

  1.  
    <input type="text" id='txt1'/> 
  2.  
    <input type="text" id='txt2'/> 
  3.  
    <input type='button' id='btn1' value="求和"/>
  4.  
     
  5.  
    <script>
  6.  
    window.onload=function()
  7.  
    {
  8.  
    var oTxt1=document.getElementById('txt1');
  9.  
    var oTxt2=document.getElementById('txt2');
  10.  
    var oBtn1=document.getElementById('btn1');
  11.  
     
  12.  
    oBtn1.onclick=function()
  13.  
    {
  14.  
    var n1=parseInt(oTxt1.value);
  15.  
    var n2=parseInt(oTxt2.value);
  16.  
     
  17.  
    if(isNaN(n1))
  18.  
    {
  19.  
    alert("您输入的第一个值有误！请重新输入");
  20.  
    }
  21.  
    else if(isNaN(n2))
  22.  
    {
  23.  
    alert("您输入的第二个值有误！请重新输入");
  24.  
    }
  25.  
    else
  26.  
    {
  27.  
    alert(n1+n2);
  28.  
    }
  29.  
    };
  30.  
     
  31.  
    };
  32.  
    </script>

（2）隐式类型转换

==   先转换类型，然后再进行比较；
    ===  直接进行比较。

例子：

  1.  
    var a=2;
  2.  
    var b='2';
  3.  
     
  4.  
    alert(a==b); //true
  5.  
    alert(a===b);//false
  6.  
    //所以一般最好用'==='(三个等号)来进行比较，更加严谨。

（3）+ ：①字符串链接 ②数字相加
            - ：只有数字相减的功能

  1.  
    var a='12';
  2.  
    var b='3';
  3.  
     
  4.  
    alert(a+b); //123
  5.  
    alert(a-b); //9
  6.  
     

2、全局变量

  1.  
    <script>
  2.  
     
  3.  
    var a=3;//全局变量(在任何地方都能使用和修改)
  4.  
     
  5.  
    function aaa()
  6.  
    {
  7.  
    a=12;
  8.  
    }
  9.  
    function bbb()
  10.  
    {
  11.  
    a+=12;
  12.  
    }
  13.  
     
  14.  
    aaa();
  15.  
    bbb();
  16.  
     
  17.  
    //alert(a);//弹出24
  18.  
     
  19.  
    </script>

3、命名规范：

类型    前缀     类型

数组     a        Array
 布尔值   b        Boolean
 浮点数   f        Float
 函数     fn       Function
 整数     i        Integer
 对象     o        Object
 字符串   s        String
 变体变量 v        Variant

4、运算符（%）

例子1：隔行变色

  1.  
    <ul>
  2.  
    <li></li>
  3.  
    <li></li>
  4.  
    <li></li>
  5.  
    <li></li>
  6.  
    <li></li>
  7.  
    <li></li>
  8.  
    <li></li>
  9.  
    <li></li>
  10.  
    </ul>
  11.  
     
  12.  
    <script>
  13.  
    window.onload=function()
  14.  
    {
  15.  
    var aLi=document.getElementsByTagName('li');
  16.  
     
  17.  
    for(var i=0;i<aLi.length;i++)
  18.  
    {
  19.  
    if(i%2==0)
  20.  
    {
  21.  
    aLi[i].style.background='#CCC';
  22.  
    }
  23.  
    else
  24.  
    {
  25.  
    aLi[i].style.background='';
  26.  
    }
  27.  
    }
  28.  
     
  29.  
    };
  30.  
    </script>

例子2：秒转时间

  1.  
    var a=125;
  2.  
    alert(parseInt(a/60)+'分'+a%60+'秒'); //2分5秒

JavaScript学习整理（转载）的更多相关文章

  1. 【JavaScript学习整理】DOM对象(location history screen navigator)

    DOM: 描述网页各个组成部分之间的关系. parentNode: 父节点 childNode: 子节点 firstChild: 第一个子节点 lastChild: 最后一个子节点 nextSibli ...

  2. 【JavaScript学习整理】js基础

    HTML,CSS属于标记语言, JavaScript是基于客户端的脚本语言. 变量: 语法  var 变量名 = value var是系统内部关键字,用来声明变量 变量名规则:  1.不能以数字开头  ...

  3. JavaScript学习总结-技巧、有用函数、简洁方法、编程细节

    整理JavaScript方面的一些技巧.比較有用的函数,常见功能实现方法,仅作參考 变量转换 //edit http://www.lai18.com var myVar = "3.14159 ...

  4. JavaScript 精髓整理篇之一（对象篇）postby:http://zhutty.cnblogs.com

    废话篇头: 由于工作关系,所以写博文的时间有那么点~~,其实是输入法太懒了,都是输入法的错~~ 这一系列的博客将总结所有关于JavaScript语言的精髓,适合0基础到大师级别人物阅读. <Ja ...

  5. Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. JavaScript学习（3）：函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

  7. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  8. Java程序猿JavaScript学习笔记（2——复制和继承财产）

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  9. Java程序猿的JavaScript学习笔记（3——this/call/apply）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. 《深入理解Java虚拟机》笔记02 -- 垃圾收集算法

    1. 标记 - 清除算法 先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象.它是最基础的收集算法.其他收集算法都是根据其思路,改进其不足之处. 缺点:1) 标记和清除两个阶段的效率都不 ...

  2. [Xcode 实际操作]七、文件与数据-(4 )遍历文件夹中的文件

    目录:[Swift]Xcode实际操作 本文将演示如何遍历文件夹下的内容. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class V ...

  3. vue、React Nactive的区别（转载）

    Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...

  4. $("body").animate({"scrollTop":top})无效的问题

    问题 我在个人站点的左下角和右下角各自使用了如下代码来将页面滚动到顶部和底部: $("body").animate({scrollTop:0},800); $("body ...

  5. VxWorks实验六 基于优先级的抢占式调度及实验的源程序和实验步骤

    基于优先级的抢占式调度及实验的源程序和实验步骤 1 实验目的    1．学习并验证基于优先级的抢占式调度2 实验内容    在实验一建立的 project 中,创建3 个任务,对这三个任务使用基于优先 ...

  6. postman的安装和使用方法详解

    文章来源:http://www.cnplugins.com/tool/specify-postman-methods.html 非官网安装 这是一种直接通过打包已经安装的扩展程序的方式,来进行我认为的 ...

  7. vim如何删除行首、行位空格、空格行

    删除空格行: 非编辑状态下输入:g/^$/d 删除行首空格: 非编辑状态下输入:%s/^\s*//g 删除行尾空格: 非编辑状态下输入:%s/\s*$//g

  8. Codeforces Round #566 (Div. 2) A. Filling Shapes

    链接: https://codeforces.com/contest/1182/problem/A 题意: You have a given integer n. Find the number of ...

  9. c++笔记3

    一基本语法: 1.1 字符串:支持标准C的 const char* pch=0/"";//不指向任何对象和指向空字符串.C++提供的string类可提供字符串的所有操作,最好是融合 ...

  10. abp(net core)+easyui+efcore仓储系统——ABP总体介绍(一）

    在前面我已经介绍了ASP.NET MVC.ASP.NET Razor.WEBAPI等技术.我准备通过一个实践项目来整体应用一下之前介绍的技术.本系列是介绍基于ABP+EasyUI的Web开发框架的形成 ...