js学习笔记

JavaScript笔记

一、js的简介
 1、js是什么
  js是可以嵌入到html中，是 基于对象 和 事件驱动 的 脚本语言
  特点：
   （1）交互性：
   （2）安全性：js不能访问本地磁盘
   （3）跨平台：浏览器中都具备js解析器
 2、js能做什么
  （1）js能动态的修改（增删）html和css的代码
  （2）能动态的校验数据
 3、js的历史及组成
  ECMAScript BOM(浏览器对象模型) DOM(文档对象模型)
 4、js被引入的方式
  (1)内嵌脚本
  示例：<input type="button" value="button" οnclick="alert('朱聪是憨熊')" />
  (2)内部脚本
  示例： <script type="text/javascript">
     alert("朱聪是憨熊");
    </script>
  (3)外部脚本
   首先先创建一个js文件
   其次在html中引入
    <script type="text/javascript" src=""></script>
    
  js代码放在哪？
   放在哪都可以，但是在不影响html功能的前提下越晚加载越好
二、js基本语法
 1、变量
  （1）：
   var x=5;
   var y="hello";
   var b=true;
  （2）：
   x=5;
 2、原始数据类型
  (1)number:数字类型
  (2)string:字符串类型
  (3)boolean:布尔类型
  (4)null:空类型  (object)
  (5)underfind:未定义
  
  注意：number、boolean、string是伪对象
  类型的转换：
   number\boolean转成string
    toString();
    b.toString()
   string\boolean转成number
    parseInt()
    parseFloat()

    boolean不能转
    string可以将数字字符串转换成number 如果“123a3sd“会转成123
   强制转换
    Boolean() 强转成布尔
     数字强转成布尔 非零就是true 零就是false
     字符串强转成布尔 非“”(空字符串)就是true 空字符串“”就是false
    Number()  强转成数字
     布尔转数字 true转成1 false转成0
     字符串转数字不能强转
 3、引用数据类型
  java：Object obj =new Object();
  js:   var obj=new Object();
     var num=new Object();
    
 4、运算符
  (1)赋值运算符
   var x=5;
  (2)算数运算符
   + - * / %
   +:遇到字符串是变成连接符
   -:先把字符串转成数字然后进行运算
   *:先把字符串转成数字然后进行运算
   /:先把字符串转成数字然后进行运算
  (3)逻辑运算符
   只有&&  ||
  (4)比较运算符
   < > >= <= != == ===为全等：类型与值都要相等
  (5)三元运算符
   3>2?1:2  和java一模一样
  (6)void运算符
   <a href="javascript:void(0);">xxxxx</a>不跳转
  (7)类型运算符
   typeof:判断数据类型
   instanceof:判断数据类型是否是某种类型
   var obj=new Object();
   alert(typeof obj); //object
   alert(obj instanceof Object); //true
 5、逻辑语句
  (1)if-else  条件：数字非0 字符串非空 就是true
  (2)for
   for(var i=0;i<4;i++){}
  (3)switch
   同jdk1.7以后中java的switch 一样
  (4)for in
   var arr=[1,3,5,7,"js"];
   for(index in arr){ //index 代表角标
    
三、js的内建对象
 (1)Number
  创建方式:
   var a=new Number(value);
   var myNum=Number(value);
   属性和方法:
    常用toString(); 
    valueOf();返回Number对象的基本数值
 (2)Boolean
  创建方式:
   var a=new Boolean(value);
   var myBool=Boolean(value);
   属性和方法:
    常用toString(); 
    valueOf();返回一个Boolean对象的基本值
 (3)String
  创建方式:
   var str=new String(value);
   var str=String(value);
   属性和方法:
    属性：length:字符串的长度
    方法：
    charAt():返回索引的字符
    charCodeAt():返回索引字符Unicode
    indexOf():返回字符的索引
    lastIndexOf():逆向返回字符的索引
    split():将字符串按照特殊字符切割成数组
    substr():从起始索引号提取字符串中制定数目的字符
    substring():提取字符串中两个指定的索引号之间的字符
    toUpperCase:转大写
  
 (4)Array
  创建方式：
   var arr=new Array();  //空数组
   var arr=new Array(size);  //创建一个指定长度的数据
   var arr=new Array(element0,element1.....elementn); //创建数组直接实例化元素
   var arr=[];//空数组
   var arr=[1,2,5,"java"]; //创建数组直接实例化元素
  属性和方法：
   属性：
    length: 数组长度
   方法:
    join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分割一个
    pop():删除并返回数组最后的一个元素
    push():向数组的末尾添加一个或更多元素，并返回心得长度
    reverse():反转数组
    sort():排序
   
 (5)Date
  创建方式：
   var myDate=new Date();
   var myDate=new Date(毫秒值); //代表1970-1-1到现在的一个毫秒值
  属性和方法：
   getFullYear():年
   getMonth():月  0-11
   getDate():日 1-31
   getDay():星期 0-6  0位星期日
   getTime():返回1970-1-1到指定日期（字符串）的毫秒值
   toLocaleString():获得本地时间格式的字符串
   
 (6)Math
  创建方式：
   Math对象并不像Date 和 String 那样是对象的类，因此没有构造函数Math(),像Math。sin()这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把Math作为对象使用就可以调用其所有属性和方法。
  属性和方法：
   PI：圆周率
   abs():绝对值
   ceil():对数进行上舍入
   floor():对数进行下舍入
   pow(x,y):返回x的y的幂次方
   random():0-1之间的随机数
   round():四舍五入
 (7)RegExp
  创建方式： 
   var reg=new RegExp(pattern);
   var reg=/^正则规则$/;
   规则的写法：百度
   
   方法：
    test():检索字符串中指定的值。返回true 或 false
   需求：校验邮箱
四、js的函数
 1、js函数的定义的方式
  (1)普通方式
   语法：function 函数名(参数列表){函数体}
  (2)匿名函数
   语法：function(参数列表){函数体}
   示例：var method= function(){alert("xxx");}
  (3)对象函数
   语法：new Function(参数列表,函数体);
   注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
   var fun=new Function("a","b","alert(a+b)");
   fun(2,5);
 2、函数的参数
  (1)形参没有var去修饰
  (2)形参和实参个数不一定相等
  (3)arguments 对象 是个数组 会将传递的实参进行封装
 3、返回值
  (1)在定义函数的时候不必表明是否具有返回值
  (2)返回值仅仅通过return关键字就可以了 return后的代码不执行
 
 4、js的全局函数
  (1)编码和解码
   encodeURI()编码   decodeURI()解码
   encodeURIComponent()   decodeURIComonent
   escape()    unescape()
   三者区别：进行编码的符号范围不同，实际开车中常使用第一种
  (2)强制转换
   Number()
   String()
   Boolean()
  (3)转成数字
   parseInt()
   parseFloat()
  (4)eval()方法
   将字符串当做脚本进行解析运行的
   function print(str){
    eval(str);
   }
   print("自定义逻辑")
   
五、js的事件
 事件：
 事件源
 响应行为
  1、常用事件：
   onclick:点击事件
   onchange:域内容被改变的事件
    需求：实现二级联动
    <select id="city">
     <option value="bj">北京</option>
     <option value="tj">天津</option>
     <option value="sh">上海</option>
    </select>
    <select id="area">
     <option>海淀</option>
     <option>朝阳</option>
     <option>东城</option>
    </select>
    
    <script type="text/javascript">
     var select= document.getElementById("city");
     select.onchange =function(){
      var optionVal = select.value;
      switch(optionVal){
       case 'bj':
        var area =document.getElementById("area");
        area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
        break;
       case 'tj':
        var area =document.getElementById("area");
        area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
        break;
       case 'sh':
        var area =document.getElementById("area");
        area.innerHTML = "<option>浦东</option><option>杨浦</option>";
        break;
       default:
        alert("error");
      }
     }
    </script>
   onfocus:获得焦点的事件
    需求：当输入框获得焦点的时候，提示输入的内容格式
   onblur:失去焦点的事件
    需求：当输入框失去焦点的时候
    
    
   onmouseover:鼠标悬浮的事件
   onmouseout:鼠标离开的事件
    需求：鼠标移入变色，移出恢复颜色
   onload:加载完毕的事件
    等到页面加载完毕在执行onload事件所指向的函数
    <span id="span"></span>
    <script type="text/javascript">
     window.οnlοad= function(){
      var=span =document.getElementById("span");
      alert(span);
      span.innerHTML="hello js";
     };
    </script>
     2、事件的绑定方式
   (1)将事件和响应行为都内签到html标签中
    <input type="button" value="button" οnclick="alert('xxxx')" />
   (2)将事件内嵌到html中而响应行为用函数进行封装
    <input type="button" value="button" οnclick="fn()" />
    <script type="text/javascript">
     function fn(){
     alert("yyy");
     }
    </script>
   (3)将事件与响应行为完全与 html标签完成分离
    <input id="btn" type="button" value="button"/>
    <script type="text/javascript">
     var btn=document.getElementById("btn");
     btn.οnclick=function(){
     alert("zzz");
     };
    </script>
    
   ******this关键字
    this经过事件的函数进行传递的是html标签对象
  3、阻止事件的默认行为
   IE：window.event.returnValue = false;
   W3c:传递过来的事件对象.preventDefault();
   
   //通过事件返回false也可以阻止
   <a href="http://www.baidu.com" οnclick="return false">点击我吧</a>
  4、阻止事件的传播
   IE：window.event.cancelBubble = true;
   W3c: 传递过来的事件对象.stopPropagation();
六、js的bom
 (1)window对象
  弹框的方法
   提示框：alert("提示信息");  没有返回值
   确认框：confirm("确认信息");
    有返回值：如果点击确认返回true 如果点击取消
   输入框：prompt("请输入密码？");
    有返回值：如果点击确认返回输入框的文本 点击取消返回null
  open方法：
   window.open("url地址");
   示例：open("../jsCore/demo10.html");
  定时器：
   setTimeout(function,毫秒值);
   示例：
    setTimeout(function(){
     alert("xx");
     },
     3000
    );
   clearTimeout(定时器的名称);
    var timer;
    var fn=function(){
     alert("x");
     timer =setTimeout(fn,2000);
    };
    var closer = function(){
     clearTimeout(timer);
    };
    fn();
   setInterval(function,毫秒值);  //一直调用
   clearInterval(定时器的名称);
   需求：注册后5秒钟跳转首页
   恭喜您注册成功，<span id="second" style="color:red;">5</span>秒后跳转到首页，如果不跳转情<a href="../jsCore/demo10.html">点击这里</a>
   <script type="text/javascript">
    var time =5;
    var timer;
    timer =serInterval(
     function(){
      var second = document.getElementById("second");
      if(time>=1){
       second.innerHTML= time;
       time--;
      }else{
       clearInterval(timer);
       location.href="../jsCore/demo10.html"
     },
     1000
    );
   </script>
 (2)location
  location.href="url地址";
 (3)history
  back();
  forward();
  go();
 <a href="demo.html">后一页</a>
 <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.90(1)">下一页
     

七、js的dom
 1、理解一下文档对象模型
  html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改
  在dom树当中，一切皆为节点对象
 2、dom的方法和属性
  三种节点：元素节点  属性节点 文本节点
  笔记见代码
  (1)getElementById
  (2)getElementsByName （查找元素节点） 一般通过name获得一个数组
  (3)getElementsByTagName （查找元素节点  通过标签名字查找）
  (4)hasChildNodes (查看节点是否含有子节点)
  (5)nodeName  只读属性
  (6)nodeType  只读属性
  (7)nodeValue(返回给定节点的当前值)  读写属性