JavaScript笔记(全)

JavaScript第一章

     1. 为什么要学习Js
        a. 表单验证(减轻服务端的压力)
        b. 页面动态效果
     2. 什么是JavaScript
        是一种基于对象和事件驱动的,跨平台的并且具有安全性的脚本语言
     3. JavaScript的特点
        a. 向HTML页面添加交互行为
        b. 语法与Java类似
        c. 解释性语言(边执行边解释)
     4. JavaScript的组成
        a. ECMAScript(Js的内核)
        b. DOM(文档对象模型,动态的访问程序和脚本.更新其内容)
        c. BOM(浏览器对象模型,可以与浏览器窗口进行互动的对象结构)
     5. JavaScript的语法结构
        由标签包裹,可以省略type属性,可以包含在文档中的任何地方,只要保证它已被加载到内存中即可
     6. 引入方式
        a. 在页面使用script标签
        b. 外部Js文件引入(通过src)
        c. 在HTML中直接引用
     7. 核心语法
        1. 变量
          a. 先声明后赋值
          b. 边声明边赋值
        2. 数据类型
          a. undefined(设置变量但未赋值)
          b. number(浮点或整型)
          c. String(''或"")
          d. null(空值和undefined相等)
          e. boolean(true或false)
      8. String对象/数组/系统函数/事件/全局和局部变量
        a. 对象名.length:获取String长度
        b. 对象名.charAt(下标):获取下标对应的字符 [下标是从0开始]
        c. 对象名.indexOf(""):返回原字符首次出现的位置  [获取字符对应的下标]
        d. 对象名.substring(index1,index2):返回指定index1和index2之间的字符
           [返回的字段包含index1,不包含index2(index是指下标)]
        e. 对象名.split(""):将字符串分割为字符串数组
        f. 对象名.join(""):把数组的所有元素组合为一个字符串通过一个分隔符进行分割
        g. 对象名.sort():对数组进行排序
        h. 对象名.push():向数组末尾添加一个或多个元素并返回新的长度
        i. ==:只比较表面值/===:不仅比较表面值还比较数据类型
        j. alert(""):警告对话框
        l. prompt("提示信息","提示信息"):提示对话框
        m. parseInt/parseFloat:将字符串转换为整数/浮点
        n. isNaN:检查参数是否为为非数字
        o. function  变量名(参数1,参数2)        分有参数和无参
        p. 局部变量:只能在当前声明它的方法中进行调用其他方法不能调用
        q. 全局变量:声明在函数方法外,任何函数都可以调用,当一个函数方法既有局部变量和全局变量时调用
        r. onload:在页面加载后立即执行Js，常用于body元素中
           用于在网页完全加载所有内容（包括图像、脚本文件、css文件等）后执行Js函数
           通常用于进入页面即加载的动态数据的获取
        s. onclick：会在元素被点击时出发对绝大多数HTML元素都可以使用
           不可/可用:head br iframe(内联框架) script style/div input(button)
           通常用于(鼠标)点击页面的按钮 进行切换或者是添加登陆等
        t. onmouseover:鼠标指针移入元素中调用(规则和onclick一致)
           多用于导航的新增列表鼠标移入显示
        u. onchange:当域的内容被改变时触发 这个事件也可以用于单选框与复选框
           input select textarea
           多用于input文本框输入完毕之后的校验
        v. onkeydown:用户按下任意一个按钮执行的事件,根据event这个参数去调用该参数里面的keyCode(键盘编码)
           然后根据固定的键盘编码执行相应的事件
           addEventListener:给元素添加事件
           第一个keydown:表示按键盘
           第二个keydown:表示触发的事件
           eg: document.addEventListener("keydown",keydown);
                  function keydown(event) {//表示键盘监听所触发的时间,同时传递参数event
                     document.write("键盘编码==>"+event.keyCode);
                     if (event.keyCode==13){
                         alert("登陆成功");
                     }else{
                         alert("点击的键盘不对");
                     }
                  }
        w. typeOf:检测变量的数据类型

JavaScript第二章

    window:浏览器对象模型
       常用的属性
         1. location:根据详情的url信息跳转
             eg:
                 window.location="http://www.yuntuzhilian.com";
         2. history:对访问过的url的信息进行处理
             a. history.forWard():会加载历史列表中的最新的一个url
             b. history.back():加载历史列表中的上一个url
             c. history.go(0):刷新页面
             d. history.go(1):前进1个页面
             e. history.go(-1):后退一个页面
              eg:
                  window.history.属性;
       常用方法
          1. alert(""):带有提示信息和确定按钮的警示框
          2. prompt(""):显示可提示的用户可输入的对话框
          3. confirm(""):带有提示信息的,确定按钮(true)和取消(false)的对话框
          4. open("url路径","name","属性"):
             属性:
                  a. height/width:显示的高度/宽度
                  b. left/top:窗口距离显示屏左/上的距离
                  c. resizable: yes|no 窗口是否可调节尺寸 默认yes
                  d. fullscreen: yes|no 全屏模式浏览器 默认yes
          5. close():直接关闭窗口,可用于所有事件
          6. setTimeout:在指定的毫秒数后调用函数和计算表达式
                      eg: var time = setTimeout("","");
                          a. 第一个参数:调用函数或者是计算表达式
                          b. 第二个参数:多少毫秒   1s=1000毫秒
                      清除方法:
                                clearTimeout(函数名);
          7. setInterval :第二个定时函数(每隔几秒调用)
                      eg: var day = setInterval("","");
                          a. 第一个参数:调用的函数
                          b. 第二个参数:调用函数的周期 单位毫秒
                      清除方法:
                                clearInterval(函数名);
           eg:
               window.对象名("");

location对象

       常用属性
          1. host:返回主机名和当前url的端口号
          2. hostname:只返回主机名
          3. href:返回完整的url路径
       常用方法
          1. reload:重新加载
          2. replace:用文档地址替换当前文档地址
           eg:
              window.location.属性/方法

document对象

       常用属性
          1. referrer:返回的是载入当前文档的网址
          2. URL:返回的是当前自身的的网址
       常用方法
          1. getElementById("id名")
             返回对拥有指定id的第一个对象引用
              a. innerText:改变相应文本
              b. innerHTML:将内容以html代码的格式插入
               eg:
                   document.getElementById("id名").innerText/HTML=变量/"文本";
          2. getElementsByName("name名")
             返回带有指定名称的对象的"集合"
          3. getElementsByTagName("标签名")
             返回带有指定标签名的对象的"集合"
          4. write("");
             清空页面(在函数内调用)
            eg:
               document.对象名("");
               document.getElementByName[下标].属性;

Date对象

          1. getFullYear():获取年份
          2. getMonth()+1:获取月份,范围是0~11 0是一月,11是12月
          3. getDate():获取日期
          4. getHours():获取时间
          5. getMinutes():获取分钟
          6. getSeconds():获取秒
          7. getDay()+1:获取星期,范围是0~6 0是周一,6的周日
          8. getTime():返回自1970年1月1日-至今的毫秒数
           eg:
               var date = new Date();
               var dates = date.Date对象;

Math的四种方法

          1. Math.ceil():向上取整数
          2. Math.floor():向下取整数
          3. Math.round():四舍五入
          4. Math.random():返回0-1的随机数
          5. toFixed():取几位小数
           eg:
               var num = Math.方法;

JavaScript第三章

节点:构成HTML文档最基本的单元

      节点分成了四类
       1. 文档节点(Document)
           整个HTML文档的相关信息被封装后的对象
       2. 元素节点(Element)
           构成HTML文档最基本的元素,对应HTML文档中HTML标签
       3. 文本节点(Text)
           HTML标签中的文本内容
       4. 属性节点(Attribute)
           元素的属性

节点的访问:
        parentNode: 返回节点的父节点
        childNodes: 返回子节点集合
        firstChild: 返回第一个子节点
        lastChild: 返回最后一个子节点
        nextSibling: 返回"同级"的下一个子节点
        previousSibling: 返回"同级"的上一个子节点

        firstElementChild: 返回第一个子节点   (只返回element元素不返回text和comment)
        lastElementChild: 返回最后一个子节点
        nextElementSibling: 返回"同级"的下一个子节点
        previousElementSibling: 返回"同级"的上一个子节点

          #text:文本(空格)
          #comment:注释

        获取的节点是一个[object ...]类型的
        根据ID, name, Tagname 是通过 .value获取对应值
        根据层级关系获取的是通过  .nodeName:节点名字  .nodeValue:节点值  .nodeType:节点类型

        类型返回的是数字
                1.元素 element
                2.属性 attr
                3.文本 text
                8.注释 comment
                9.文档 document

创建和插入节点:
        1. createElement("TagName")
            创建一个标签名为TagName的新元素节点
             eg: var old =document.createElement("img");
        2. setAttribute("属性名","属性值")
            设置新元素节点的属性
             eg: old.setAttribute("src","路径");
        3. getAttribute(B)
            获取属性值
             eg: old.getAttribute("src"); 获取img的路径属性
        4. A.appendnChild(B)
            将B节点追加到A节点的末尾
             eg: var box=document.getElementById("box");
                 box.appendnChild(old);  把old插到box后方
        5. cloneNode(deep?:boolean)
            复制某一个指定的节点
            该方法会接收一个布尔类型的参数,表示本次复制是否深度拷贝
            true: 执行深度拷贝,复制本节点以及整个子节点树
            false: 执行浅拷贝,只复制节点本身
             eg:  var copy = box.空/指定节点.cloneNode(false);
        6. inserBefore(A,B)
            把A节点插入到B节点之前
             eg: box.insertBefore(copy,box.firstElementChild);

删除和替换节点
        1. removeChild(node): 删除指定的节点
            eg: 要删除的元素.parentNode.removeChild(要删除的元素);
        2. replaceChild(A,B): A节点代替B节点
             eg: 要替换的元素.parentNode.replaceChild(新元素,要替换的元素);
        3. onmouseout: 鼠标从元素离开
        4. document.getElementById("Id名").style.要修饰的属性="属性值";
        5. HTML元素.className = "类名";
            eg: document.getElementById("id名").className="添加类名";

元素属性的应用
         1. offsetLeft:是一个只读属性,返回当前元素相对于上级元素节点左边界的偏移量,单位px  外边距
         2. offsetTop: 是一个只读属性,返回当前元素相对于上级元素节点上边界的偏移量,单位px   外边距
         3. offsetHeight: 是一个只读属性,返回当前元素的高度,单位px   边框+内边距
         4. offsetWidth: 是一个只读属性,返回当前元素的宽度,单位px    边框+内边距
         5. offsetParent: 是一个只读属性,返回当前元素的偏移容器(离他最近的被定位的祖先元素)
         6. scrollTop: 返回当前元素的滚动条的垂直位置 单位px
         7. scrollLeft: 返回当前元素的滚动条的水平位置 单位px
         8. scrollHeight: 返回当前元素可见高度 单位px  不返回边框
         9. scrollWidth: 返回当前元素可见宽度 单位px  不返回边框
             如果区域内带有滚动条,还应该减去滚动条不可用高度一般火狐IE大致是17px

JavaScript第四章

     对象: 对象是包含相关属性和方法的集合体
      a. 自定义对象
         基于Object对象的方式创建对象
          eg:
         1.声明
            var first = new Object();
            first.name = "翠花";
            first.age = 88;
            first.height = "200cm";
            first.area = "二龙湖";
            first.uses = function () {
                alert("下雨天往家跑,会买法拉利");
            };
         2.调用
            alert("调用属性=>"+first.name);
            first.uses();
      b. 内置对象

     构造函数:使用一个构造函数来创建多个对象减少冗余代码
      步骤:
        a. 创建特定类型的对象
        b. this变量赋值
        c. New操作符 创建
         eg:
         1. 声明
          function girlFriend(name,age,height,area,uses) {
                 this.name = name;//名字
                 this.age = age;//年龄
                 this.height = height;//身高
                 this.area = area;//地区
                 this.uses = uses;//作用
                 this.girlFriend = function () {//输出作用-方法
                     alert(this.uses);
                 };
          }
         2. 赋值
          var third = new girlFriend("太白金星",1000,"170cm","天庭","给猴练功");
         3. 调用
          alert("构造函数的属性=>"+third.name);
             third.girlFriend();