JS基础

javascript
一.js简介
   1.什么是js
     js可以嵌套到HTML中（基于对象）和（事件触发）的（脚本语言）
           特点：
           1）交互性
           2）安全性 js不能直接访问本地磁盘
           3）跨平台  浏览器只要具备js解析器
   2.js能做什么
     1）js可以动态修改（新增、删除）HTML和CSS的代码
     2）js动态校验数据
   3js的历史及组成
     ECMAScript(基本语法和对象)    BOM(浏览器对象模型)   DOM(文档对象模型)
   4.js的引用方式**
     A.内嵌脚本
       <input type="button" value="button" οnclick="alert('XXX')"/>
     B.内部脚本**
       <input type="button" value="button" />
       <script type="text/javascript">
           alert("XXX");
       </script>
      C.外部脚本***
        1.创建一个js文件  .js
        2.在HTML中引入JS脚本文件
          <script type="text/javascript" src="demo1.js"></script>
      总结：
        1.JS往哪放？
               在不影响HTML加载效果的情况下  越晚加载越好
        2.建议<script>标签因为外部js文件了 标签中不建议写脚本内容
二.js的基本语法
   1）变量
     var a=5;
     a='javascript';
     a="哈哈";
     var b=true;
    2)原始数据类型
      1）number :数字类型
      2）string：字符串类型
      3）boolean:布尔类型
      4）null:空类型
      5）undefined：未定义
      
      注意点：
        number string  boolean:伪对象
                  数据类型转换
          number    boolean  转      string
          toString();
          
          string    boolean  转  number
          parseInt();
          parseFloat();
          
          boolean 类型 不能转 number类型  NaN
          string 类型 转 number  能转   如果"123哈哈789" 准换完 "123"
          
          string  number 转boolean 
                       注意：
            number类型  能转布尔  非0为true   0为false
            string 类型 能转布尔类型 非空为true  空为false
            
          string   boolean  转  number
          Number()
          boolean类型 可以转 number  true为1  false 为0
          string类型    转 number  如果值为数字可以转  如果"123哈哈" 转NaN
          
   3).引用数据类型
     java：Object obj=new Object();
     js：   var obj=new Object();   
    4)运算符
      1.赋值运算符
        =
        var a=5;
      2.算术运算符
        + - * / % ++ --
        +:遇到字符串  连接符  （拼接作用）
        -：遇到字符串 转为数字再计算
        *：遇到字符串 转为数字再计算
        /:遇到字符串 转为数字再计算  7/2=3.5
      3.逻辑运算符
        && ||
      4.比较运算符
         >  <  >= <= == !=
         == :忽略数据类中比较 比较值  内容
         ===:全等  比较值和类型
      5.三目运算符
        3>2?"大于":"小于"
      6.void运算符
        <a href="javascript:void(0)">点击我吧</a>
      7.类运算符
       typeof():判断数据类型   返回类型
       instanceof(): 判断类型  返回 true  or  false
       alert(typeof(obj));//object
       alert(obj instanceof Object);//true
   5逻辑语句
      if:条件
             number类型  能转布尔  非0为true   0为false
            string 类型 能转布尔类型 非空为true  空为false
      switch:
         jdk1.7  string
         
       for
       
       for
          for in
          var arr=[1,2,3,4,5,"aa",true];
             for(index in arr){
                 alert(arr[index]);
             }
   
    
三.js的内置对象****
   1.Number 
      var myNum=new Number(value);
      var myNum=Number(value);
           方法：
        toString 把数字转换为字符串，使用指定的基数。 
        valueOf 返回一个 Number 对象的基本数字值。 
   
   2.Boolean 
     var flag=new Boolean(value);    //构造函数
     var flag=Boolean(value);        //转换函数
          方法：
        toString() 把逻辑值转换为字符串，并返回结果。 
        valueOf() 返回 Boolean 对象的原始值。 
   3.String
        new String(s);
        String(s);
        
               方法：
               length 字符串的长度 
               charAt() 返回在指定位置的字符。 
               charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 
               indexOf() 检索字符串。 
               lastIndexOf() 从后向前搜索字符串。 
               split() 把字符串分割为字符串数组。 
               substring() 提取字符串中两个指定的索引号之间的字符。 （2，3）【2，3）
               substr() 从起始索引号提取字符串中指定数目的字符。 （2，3）  【2，3个
               toUpperCase() 把字符串转换为大写。 
   4.Array
      new Array();
    new Array(size);
    new Array(element0, element1, ..., elementn);
    
    var arr=[];
    var arr=[1,"a"];
     属性：
        length 设置或返回数组中元素的数目。 
     方法：
        join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 
        pop() 删除并返回数组的最后一个元素 
        push() 向数组的末尾添加一个或更多元素，并返回新的长度。 
        reverse() 颠倒数组中元素的顺序。 
        sort() 对数组的元素进行排序  
       
      
   5.Date
      var myDate=new Date();
      方法：
       getFullYear() 从 Date 对象以四位数字返回年份。 
       getMonth() 从 Date 对象返回月份 (0 ~ 11)。 
       getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 
       getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 
       getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 
       toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串 
   
   6.Math
        var pi_value=Math.PI;
        var sqrt_value=Math.sqrt(15);
         注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 
                   这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
           方法：
         PI 返回圆周率（约等于3.14159）。 
         abs(x) 返回数的绝对值 
         ceil(x) 对数进行上舍入。 
         floor(x) 对数进行下舍入。 
         round(x) 把数四舍五入为最接近的整数。 
         pow(x,y) 返回 x 的 y 次幂。 
         random() 返回 0 ~ 1 之间的随机数。 
         
   7.RegExp
     var reg=new RegExp(pattern);
      //attributes可选参数
      var reg=/^正则规则$/;
               属性方法：
               [0-9]:数字
               [A-Z]:A-Z
               [a-z]:a-z
               [A-z]:所有字母（大小写字母）
               \d:代表数值
               \D：非数值
               \w:单词字符
               \W:非单词字符
               \s:查找空白字符
               \S:查找非空白字符
               n+:至少一次
               n*:出现0次或多次
               n?:出现0次或1次
               {5}：出现5次
               {2，8}：出现2-8次
                 方法：
         test 检索字符串中指定的值。返回 true 或 false。 
四.js的函数
    1.js中函数的定义方式**
      A.普通函数
                     语法：
            function  函数名(参数列表){函数}
                     实例  
            function method(){
             alert("XXX");
           }
           method();
      B.匿名函数(闭包)****
                         语法：
                var 函数名=function(){函数}
                          实例：
              var method=function (){
                 alert("YYY");
               }
               method();
      
      C.对象函数（了解）
                    语法：
                    new Function(参数1，参数2，参数3);
                    注意点：
                    1.形参只能是String类型 ，最后一个只能是函数体
                    2.函数体也是字符串
                    var fn=new Function("a","b","alert(a+b)");
   
                       fn(2,22);
     2.函数中的参数问题
       1.形参不用var来修饰
       2.形参与实参个数可以不一样(只多不能少)
              案例：
         function fn(a,b,c){
           var sum=a+b+c;
           alert(sum);
           //arguments  数组内部对参数进行封装
          /*  for(var i=0;i<arguments.length;i++){
              alert(arguments[i]);
           } */
       }
       fn(1,2,3,4);
       3.函数中的返回值
         1.定义函数的时候不用表明返回值类型 var
         2.返回值可以通过return 体现
          案例：
           function  fn( a,  b){
               return a+b;
           }
           
           alert(fn(2,3)); 
    4.全局函数
      1）编码问题的（了解）
         decodeURI() 解码某个编码的 URI。 
         encodeURI() 把字符串编码为 URI。 
         
         decodeURIComponent() 解码一个编码的 URI 组件。 
         encodeURIComponent() 把字符串编码为 URI 组件。 
         
         unescape() 对由 escape() 编码的字符串进行解码。 
         escape() 对字符串进行编码。 
       2）强转
         
         Number()
         String()
       3)
         parseInt()
         parseFloat()
         
       4)******
       eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。 
         案例：
          var str="var a=2;var b=3;alert(a+b)";
           //alert(str);
           eval(str);
五.js的事件****
       事件
       事件源
       响应行为
    1)事件绑定方式
      A.将事件与响应行为内嵌到HTML代码中
         <input type="button" value="button"  οnclick="alert('XXX')"/>
      B.将事件内嵌到HTML代码中，将响应结果封装成函数
        <input type="button" value="button" οnclick="fn()"/>
        <script type="text/javascript">
            function fn(){
              alert("YYY");
            }
        </script>
      C.事件与响应结果完全重HTML分离出来***
         <input type="button" value="button123" id="btn"/> 
         <script type="text/javascript">
          
            var btn=document.getElementById("btn");
            //alert(btn.value);
            btn.οnclick=function(){
              alert("YYY");
            }
        </script>
  2)js中常见事件
    A)onclick();点击事件
    
    B)onchange();用户改变域的内容****
                实现二级菜单联动
      案例：
      
      <body>
             <select id="city">
               <option value="bj">北京</option>
               <option value="sh">上海</option>
               <option value="tj">天津</option>
             </select>
             <select id="area">
                 <option>海淀区</option>
                 <option>昌平区</option>
                 <option>朝阳区</option>
             </select>
        </body>
        <script type="text/javascript">
             var city=document.getElementById("city");
             city.οnchange=function(){
                var option= city.value;
                //alert(option);
                switch(option){
                  case 'bj':
                      var area= document.getElementById("area");
                      area.innerHTML="<option value='hd'>海淀区</option><option value='cp'>昌平区</option><option value='cy'>朝阳区</option>";
                      break;
                 case 'sh':
                      var area= document.getElementById("area");
                      area.innerHTML="<option value='pd'>浦东区</option>";
                      break;
                  case 'tj':
                      var area= document.getElementById("area");
                      area.innerHTML="<option value='tg'>塘沽区</option><option value='nk'>南开区</option>";
                      break;     
                 
                }
             }
</script>
    C)***
      onblur();//鼠标失去焦点
      onfocus();//鼠标获取焦点
      
      案例：
      <body>
             <label for="txt">用户名：</label>
             <input type="text" name="username" id="txt"/><span id="active"></span>
        </body>
        <script type="text/javascript">
              var txt=document.getElementById("txt");
              //元素获取焦点事件
              txt.οnfοcus=function(){
                //友好提示
                  var span=document.getElementById("active");
                  span.innerHTML="用户名最少长度是六位";
                  span.style.color="green";
              }
              
              //元素失去焦点
              txt.οnblur=function (){
                  //友好提示
                  var span=document.getElementById("active");
                  //alert(txt.value);
                  if(txt.value.length<6){
                    span.innerHTML="对不起格式错误";
                    span.style.color="red";
                  }else{
                     span.innerHTML="";
                  }
              }
        </script>
    D)
      onmouseout();
      onmouseover();
      
      案例：
      <body>
             <div id="d1">div</div>
        </body>
        <script type="text/javascript">
               var div=document.getElementById("d1");
               div.οnmοusemοve=function(){
                  this.style.backgroundColor="green";
               }
               
               div.οnmοuseοut=function(){
                  this.style.backgroundColor="red";
               }
        </script>
      
    E)onload()
        某个图片或某个页面加载完之后 
        等待页面元素加载完之后 再执行onload事件里面的代码
       案例：
        <script type="text/javascript">
           window.οnlοad=function(){
              var span=document.getElementById("s");
              span.innerHTML="HELLOJS";
           }
        </script>
        </head>
        <body>
              <span id="s"></span>
        </body>
        
     3)阻止事件默认行为
       IE:window.event.returnValue=false;(IE低版本)
       w3c:传递过来的事件对象.preventDefault();
         <body>
           <!-- <a href="http://www.baidu.com">点击我吧</a> -->
           <!-- <a href="demo3.html" οnclick="fn(event)">点击我吧</a> -->
           <a href="demo3.html" οnclick="return false">点击我吧</a>
        </body>
        <script type="text/javascript">
            function fn(e){
              //IE:window.event.returnValue=false;(IE低版本8)
              // w3c:传递过来的事件对象.preventDefault();
              if(e&&e.preventDefault){
                 alert("w3c");
                 e.preventDefault();
              }else{
                 alert("ie");
                 window.event.returnValue=false;
              }
            }
       </script>
     4)js的冒泡事件**  阻止事件传播
         IE:window.event.cancelBubble=true;//IE低版本
         w3c:传递过来的事件对象.stopPropagation();
         
         案例：
           <body>
                <div οnclick="fn1()" style="width: 100px; height: 100px; background-color: blue; padding: 50px;">
                  <div οnclick="fn2(event)" style="width: 100px; height: 100px; background-color: red;">
                       XXX
                  </div>
                </div>
            </body>
            <script type="text/javascript">
                function fn1(){
                  window.alert("fn1");
                }
                function fn2(e){
                  // window.alert("fn2");
                  //IE:window.event.cancelBubble=true;//IE低版本
                  //w3c:传递过来的事件对象.stopPropagation();
                  if(e&&e.stopPropagation){
                     alert("w3c");
                     alert("fn2");
                     e.stopPropagation();
                  }else{
                      alert("ie");
                      alert("fn2");
                      window.event.cancelBubble=true;
                  }
                }
            </script>
六.js中BOM
   BOM(浏览器对象模型)
   alert();
   window.alert();
   1)window 对象
             弹框方式
               提示弹框：alert();
               确认弹框：confirm();*****
                     确认框有返回值  点击确定 ：true  点击取消 ：false
               输入弹框：prompt();
                      输入框有返回值  点击确定返回框里输入的值 点击  取消：返回null
              open(url);  window.open("../jsCode/demo1.html");
                            定时器：
               A.setTimeout(函数,毫秒值)：过多少毫秒值后调用该函数（只调用一次）
                   window.setTimeout(function() {
                       alert("XXX");
                  }, 3000);
               B.clearTimeout(参数);
                  window.clearTimeout(参数);
                  <body>
                       <input  type="button" value="button" οnclick="closer()"/>
                    </body>
                    <script type="text/javascript">
                      /* window.setTimeout(function() {
                           alert("XXX");
                      }, 3000); */
                      
                      var timer;
                      var fn=function(){
                         alert("YYY");
                         timer=setTimeout(fn, 3000);
                      }
                      var closer=function(){
                        window.clearTimeout(timer);
                      }
                      
                      fn();
                    </script>
          C.setInterval(函数,毫秒值);过多少毫秒值重复调用该函数
                         案例：
                    <body>
                       <input  type="button" value="button" οnclick="closer()"/>
                    </body>
                    <script type="text/javascript">
                       var timer=window.setInterval(function() {
                             alert("nihao");
                       },3000);
                       var closer=function(){
                          window.clearInterval(timer);
                       }
                    </script>
           需求：
             注册成功后，5秒钟跳转某个页面
             <body>
                恭喜您，终于注册成功了，<span id="second" style="color: red; font-size: 100px;">5</span>秒钟后页面自动跳转，如果不跳转<a href="../jsCode/demo1.html">请点击这里</a>
            </body>
            <script type="text/javascript">
                var time=5;
                var timer;
                timer=window.setInterval(function() {
                    var span=document.getElementById("second");
                    if(time>=1){
                       span.innerHTML=time;
                       time--;
                    }else{
                        //页面跳转  事件结束
                        window.clearInterval(timer);
                        location.href="../jsCode/demo1.html";
                    }
                }, 1000);
                
            </script>
     2.location:对象
       location.href="链接地址";
       location对象不能省
        window.location.reload();//让页面重新刷新
     3.history对象
            历史记录
            back();
            forward();
            go();正整数 负整数
             <!-- <input type="button" value="上一页" οnclick="history.back()"/>
            <input type="button" value="下一页" οnclick="history.forward()"/> -->
            
            <input type="button" value="上一页" οnclick="history.go(-1)"/>
            <input type="button" value="下一页" οnclick="history.go(1)"/>
七.js中DOM**
   DOM(文档对象模型)
        文档对象模型：操作页面元素
        DOM:document节点
                       作用：通过他对页面元素进行定位和操作
    NODE操作
       1.NODE的类型
         A.元素类型
         B.文本类型
         C.文档类型
         D.属性类型
         E.注释类型
       2.NODE的获取方式：
          1）通过元素获取
            document.getElementById("elementid");****
            document.getElementsByName("name");***
            document.getElementsByTagName("tagname");***
            document.getElementByClassName("classname");
          2)通过NODE关系获取引用
            document.parentNode;//获取该元素的父节点
            document.childNode;//获取所有子节点
            document.firstChild;//获取该元素第一个子节点
            document.lastChild;//获取该元素最后一个子节点
            document.nextSibing;//获取该元素的下一个兄弟节点
            document.previousSibing;//获取该元素上一个兄弟节点
          3)NODE属性
                节点中文                 nodeType       nodeName         nodeValue
                元素                            1              tagname           null
                属性                            2              attr              属性值
                文本                            3              #text             文本值
                注释                            8              #comment          注释的文字
                文档                            9              #document         null
          4)NODE节点的增删改查
            A.创建一个节点
               1）创建一个元素节点 ：document.creatElement();
               2)创建属性节点：   object.attr=val;
                           object.setAttribute(attr,val);
               3)创建一个文本节点：
                             object.innerHTML=val;
                             object.creatTextNode(text);
             B.添加NODE
                1.parentNode.appendChild(newNode);
                      说明：
                        向节点子节点末尾追加一个新节点，如果文章中存在新节点，将其从文档中移除，重新插入节点
                        appendChild(newNode);
                2.parentNode.insertBefore(newNode,exisingNode);
                        说明：
                        文档已经存在新节点了，将其从文档中移除，重新插入节点
                3.parentNode.replaceChild(newNode,oldNode);
                         说明：
                         文档已经存在新节点了，将其从文档中移除，重新插入节点
                4.parentNode.removeChild(node);
                          说明：     
                             从子节点表中删除某个节点
--------------------------------------------------------------------
总结：
    1.定位页面
      document.getElementById();
      document.getElementsByName();**
      document.getElementsByTagName();**
    2.可以查看和修改属性
       setAttribute(name,value);
       getAttribute(name);
    3.空格换行的处理
               使用层析关系访问节点
      document.parentNode;//获取该元素的父节点
      document.childNode;//获取所有子节点
      document.firstChild;//获取该元素第一个子节点
      document.lastChild;//获取该元素最后一个子节点
      document.nextSibing;//获取该元素的下一个兄弟节点
      document.previousSibing;//获取该元素上一个兄弟节点 去空白
    4.节点操作
               创建节点：createElement("节点名");
                元素前添加新的节点：insertBefore("新节点","旧节点");
                元素后拼接新节点：appendChild(新节点);
                删除子节点：removeChild(节点);
                克隆节点：cloneNode(boolean ) //false只克隆该标签   true 克隆包含的子标签
                替换节点：replaceChild(新，旧);
                
                dom可以操作表格
                table对象中的属性方法
                             属性：rows获取所有行
                             方法：
                             insertRow(行下标);
                             deleteRow(行下标);
                tableRow属性和方法
                   属性：
                    cells:获取所有单元格
                    rowIndex:获取行位置下标
                  方法：
                     insertCell(单元格下标);
                     deleteCell(单元格下标);
                 tableCell属性与方法
                  属性：
                     innerHTML:设置文本<a></a>
                     innerText:设置文本
                     className:类样式
        小结：
           js可以修改CSS样式
           1）元素对象。setAttribute("style","CSS样式");
           2）通过className绑定CSS样式