JavaScript组成

ECMAScript: 解释器、翻译
DOM：Document Object Model（操作html）—>document
BOM：Browser Object Model （操作浏览器）—>window

typeof运算符

常见类型：number，boolean，undefined，object，function
变量本无类型，取决于存放的值
一个变量最好只存放一种类型数据

var a = 12;
    // alert(typeof a);   //number
    a = 'asff';
    // alert(typeof a);    //string
    a = true;
    // alert(typeof a);    //boolean
    a = function() {
        alert('avfv');
    }
    // alert(typeof a);    //function
    a = document;
    // alert(typeof a);    //object
    var b;
    //alert(typeof b);      //undefined
    //1.没定义
    //2.定义，未赋值
    ```

数据类型转换

显示类型转换(强质类型转换）
- 实例：计算两个文本框的值
- parseInt（），parseFloat（）
  - var a='3.5'
    alert(parseInt(a)) //3
    alert(parseFloat(a)) //3.5
- NaN的意义和检测
  - NaN Not a Number
    12+NaN=NaN
    NaN和NaN不相等
    isNaN(a)判断a是否是NaN
隐式类型转换
- == 和 ===
  - ==：先转换类型，然后比较
    ===：不转换类型，直接比
- 减法
  - var a='12',b='5';
    alert(a+b); //125
    alert(a-b); //7
    +:1.字符串链接2.数字相加
    -：1.数字相减
变量作用域
- 局部变量，全局变量
命名规范：
- (匈牙利命名法）类型前缀(变量使用)，首字母大写

运算符

算数：+，-，*，/，%(求模；即整除后留下的余数)

实例：隔行变色，秒转时间

window.onload = function() {		//隔行变色
        var aLi = document.getElementsByTagName('li');
        for(var i=0;i<aLi.length;i++) {
            if(i%2 == 0){
                aLi[i].style.background='yellow';
            }
        }
    }

  var s = 1154;        //秒转时间
  alert(parseInt(s/60)+'分'+ s%60 +'秒');

赋值： =、+=、-=、*=、/=、%=
关系：<、>、<=、>=、、=、!=、!==
逻辑：&& || !
- 实例：全选与反选
运算符优先级：括号

程序流程控制

判断：if、switch、？：
循环：while、for
跳出：break、continue
什么是真、什么是假
- 真：true、非零数字、非空字符串、非空对象
- 假：false、数字零、空字符串（’‘）、空对象（null）、undefined

Json

什么是Json
Json和数组
- 循环数组： for i-length
  json：for in
Json和for in

  var json = {a:12, b:5,c:'abc'};
       var arr = [12,5,4];
       //alert(json.b);
       //alert(json['b']);   //json的下标是字符串
       //alert(arr[1]);  //数组的下标是数字

       for(var i in json) {
           alert(i+'----'+json[i]);
       }

函数返回值

什么是函数返回值
- 函数的执行结果
- 可以没有return
一个函数应该只返回一种类型的值

函数传参

可变参（不定参）：arguments(是一个数组，存了所有参数)

参数的个数可变，参数数组
例子1：求和：求所有参数的和

  window.onload = function() {
          function sum() {
              //alert(arguments.length);    //3
              //alert(arguments[0]);    //12
              var result = 0;
              for(var i = 0;i < arguments.length;i++) {
                  result += arguments[i];
              }
              return result;
          }
          alert(sum(12,3,2));
      }
      ```

例子2：css函数

判断arguments.lenth
给参数取名，增强可读性

  	<script>
      function css(obj,name,value) {
          if(arguments.length == 2) {
              return obj.style[name];
          }
          else{
              obj.style[name] = value;
          }
      }
      window.onload = function() {
          var oDiv = document.getElementById('div1');
          //alert(css(oDiv,'width'));
          css(oDiv,'background','yellow');
      };
  	</script>
  </head>
  <body>
      <div id="div1" style="width: 100px;height: 100px;border: 1px solid 1px;"></div>
  </body>

取非行间样式（不能用来设置）：只能取单一样式
- obj.currentStyle[attr]
- getComputedStyle(obj,false)[attr]
  - alert(getComputedStyle(oDiv,false).width));

复合样式:background、border
单一样式：width、height、position

数组基础

数组的使用
- 定义：
  - var arr = [12,5,8,9];
  - var arr = new Array(12,5,8,9); 不推荐使用
  - 没有任何差别，[]的性能略高，因为代码短
数组的属性
- length
  - 即可以获取，又可以设置
  - 例子：快速清空数组
    - arr.length=0；
数组使用原则：数组中应该只存一种类型的变量
数组的方法：
- 添加：
  - push（元素），从尾部添加
    - arr.push(4);
  - unshift（元素），从头部添加
- 删除
  - pop(),从尾部添加
    - arr.pop();
  - shift(),从头部弹出
- splice
  - splice(开始,长度,元素。。）
  - 先删除，后插入
- 删除
  - splice（开始，长度）
- 插入
  - splice（开始，0，元素。。）
- 替换

排序

sort([比较函数]),排序一个数组

排序一个字符串数组
排序一个数字数组

  var arr = [1,22,3,56,33,5,34];
  alert(arr.sort());      //1,22,3,33,34,5,56 
  arr.sort(function(n1,n2) {
      return n1-n2;
  });
  alert(arr);     			//1,3,5,22,33,34,56

转换类
- concat（数组2）
  - 连接两个数组: arr1.concat(b);
- join（分隔符）
  - 用分隔符，组合数组元素，生成字符串: arr.join('-');
  - 字符串split

定时器的作用

开启定时器
- setInterval 间隔型
- setTimeout 延时型
停止定时器
- clearInterval
- clearTimeout

实例：数码时钟

获取系统对象
- Date对象
- getHours、getMinutes、getSeconds
显示系统时间
- 字符串连接
- 空位补零
设置图片路径
- charAt方法

  	<style>
          body {
              background-color: black;
              font-size: 50px;
          }
      </style>
      <script>
          function toDobStr(n) {
              if(n<10){
                  return '0'+n;
              }
              else{
                  return ''+n;
              }
          }
          
          window.onload = function() {	            
              var aImg = document.getElementsByTagName('img');
              function tick() {
                  var oDate = new Date();
                  var str = toDobStr(oDate.getHours())+toDobStr(oDate.getMinutes())+toDobStr(oDate.getSeconds());
                  //alert(str);
                  for(var i=0;i<aImg.length;i++) {
                      aImg[i].src = 'imgs/'+str[i]+'.jpg'; 
                  }
              }
              setInterval(tick,1000);
              tick();
          }
      </script>
  </head>
  <body>
      <img src="" alt="">
      <img src="" alt="">:
      <img src="" alt="">
      <img src="" alt="">:
      <img src="" alt="">
      <img src="" alt="">
  </body>

Date对象其他方法
- 年：getFullYear()
- 月: getMonth()
  - 从0 算起，记得加一
- 日: getDate()
- 星期: getDay()
  - 0是星期日

DOM

DOM节点

childNodes nodeType
nodeType==1 ->元素节点
nodeType==3 ->文本节点
- 获取子节点
- children(只包括元素)

parentNode

例子：点击链接，隐藏整个li

  		<script>
          window.onload = function() {
              var aLi = document.getElementsByTagName('a');
              for(var i=0;i<aLi.length;i++) {
                  aLi[i].onclick = function() {
                      this.parentNode.style.display='none';
                  }
              }
          }
      </script>
  </head>
  <body>
      <ul>
          <li>asdadff<a href="javascript:;">隐藏</a></li>
          <li>fsfvccc<a href="javascript:;">隐藏</a></li>
          <li>ccccc<a href="javascript:;">隐藏</a></li>
          <li>vvvvv<a href="javascript:;">隐藏</a></li>
          <li>ddddd<a href="javascript:;">隐藏</a></li>
      </ul>
  </body>

offsetParent (获取元素用来定位的父级)
- 例子：获取元素在页面上的实际位置
首尾子节点
- firstChild、firstElementChild
- lastChild、lastElementChild
兄弟节点
- nextSibling、nextElementSibling
- previousSibling、previousElementSibling

元素属性操作
- 第一种：oDiv.style.display = ‘block’;
- 第二种：oDiv.style[‘display’] = ‘block’;
- 第三种：Dom方式

DOM方式操作元素属性

获取：getAttribute(名称)
设置：setAttribute(名称，值)
删除：removeAttribute(名称)

<script>
        window.onload = function() {
            var oTxt = document.getElementById('txt1');
            var oBtn = document.getElementById('btn1');

            oBtn.onclick = function() {
                // oTxt.value = 'dfagarg';
                // oTxt['value']='sdfaerhbr';
                oTxt.setAttribute('value','dfdhbethn');

            }
        }
    </script>
</head>
<body>
    <input type="text" id='txt1'>
    <input type="button" value="点击" id='btn1'>
</body>

DOM元素灵活查找
- 用className选择元素
创建DOM元素
- createElement(标签名) 创建一个节点
- appendChild(节点) 追加一个节点
- 例子：为ul插入li
插入元素
- insertBefore(节点，原有节点) 在已有元素前插入
- 例子：倒序插入li 13
删除DOM元素
- removeChild(节点) 删除一个节点
- 例子：删除li 15

表格

获取
- tBodies、tHead、tFoot、rows、cells
隔行变色
- 鼠标移入高亮onmouseover/onmouseout
添加、删除一行
- DOM方法的使用
搜索
- 基础 – 字符串比较
- 忽略大小写 – 大小写转换
- 模糊搜索 – search的使用
- 多关键词 – split
排序
- 移动Li
- 元素排序：转换 ----- 排序 ----- 插入

表单

表单基础知识
- 什么是表单
  - 向服务器提交数据，比如：用户注册
- action：提交到那里
表单事件
- onsubmit 提交时发生
- onreset 重置时发生
表单内容验证
- 阻止用户输入非法字符 阻止事件
- 输入时、失去焦点时验证 onkeyup、onblur
- 提交时检查 onsubmit
- 后台数据检查

在这里插入图片描述

JS运动基础

运动基础
- 让div运动起来
- 速度----物体运动的快慢
- 运动中的Bug
  - 不会停止
  - 速度取某些值会无法停止
  - 到达位置后再点击还会运动
  - 重复点击速度加快
匀速运动
- 速度不变
运动框架
- 在开始运动时，关闭已有定时器
- 把运动和停止隔开（if/else）
- 实例
  - 1.“分享到”侧边栏
    - 通过目标点，计算速度值
  - 2.淡入淡出的图片
    - 用变量存储透明度
缓冲运动
- 逐渐变慢，最后停止
- 距离越远，速度越大
  - 速度由距离决定
  - 速度=(目标值-当前值)/缩放系数
- 例子：缓冲菜单
  - Bug：速度取整
  - 跟随页面滚动的缓冲侧边栏
    - 潜在问题：目标值不是整数时
匀速运动的停止条件
匀速运动：距离足够近
缓冲运动：两点重合

p17

AJAX基础

什么是服务器
- 网页浏览过程分析
- 如何配置自己的服务器程序（AMP、tomcat）
什么是Ajax
- 无刷新数据读取
- 用户注册、在线聊天室
  - 异步、同步
使用Ajax
- 基础：请求并显示静态TXT文件
  - 字符集编码
  - 缓存、阻止缓存（new date）
- 动态数据：请求JS（或json）文件
  OM创建元素
- 局部刷新：请求并显示部分网页文件
Ajax原理
- HTTP请求方法
  - GET ---- 用于获取数据（如：浏览帖子）
  - POST ---- 用于上传数据（如：用户注册）
  - GET、POST的区别
    - get是在url里传数据：安全性、容量
    - 缓存

编写Ajax

创建Ajax对象
- ActiveXObject(“MicrosoftXMLHTTP”)--------------IE6使用
- XM LHttpRequest()
连接服务器
- open（方法，文件名，异步传输）
  - 同步和异步
发送请求
- send()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function() {
            var oBtn = document.getElementById('btn1');
            oBtn.onclick = function() {
                //1.创建Ajax对象
                var oAjax = new XMLHttpRequest();
                // alert(oAjax);
                //2.连接服务器
                oAjax,open('GET','a.txt',true);
                //3.发送请求
                oAjax.send();
                //4.接收返回
                oAjax.onreadystatechange = function() {
                    // oAjax.readyState //浏览器和服务器，进行到哪一步
                    if(oAjax.readyState==4 && oAjax.status==200) {
                        alert('成功'+oAjax.responseText);
                    }
                };
            }; 
        }
    </script>
</head>
<body>
    <input type="button" id="btn1">
</body>
</html>

请求状态监控
- onreadystatechange事件
- readyState属性：请求状态
  - 0（未初始化）还没有调用open()方法
  - 1（载入）已调用send()方法，正在发送请求
  - 2（载入完成）send()方法完成，已收到全部响应内容
  - 3（解析）正在解析相应内容
  - 4（完成）响应内容解析完成，可以在客户端调用了
- status属性：请求结果
- responseText
数据类型
- 什么叫数据类型 – 英文、中文
- xml、json
字符集
- 所有文件字符集相同

JS面向对象基础

什么是对象
- 对象是一个整体，对外提供一些操作
什么是面向对象
- 使用对象时，只关注对象提供的功能，不关注其内部细节
- 比如JQuery
面向对象是一种通用思想，并非只有编程中能使用，任何事情都可以使用
JS中的面向对象
面向对象编程（OOP）的特点
- 抽象：抓住核心问题，把主要的特征、跟问题相关的特征抽出来
- 封装：不考虑内部实现，只考虑功能使用
- 继承：从已有对象上，继承出新的对象
  - 多重继承
  - 多态
对象的组成
- 方法-----函数：过程、动态的
- 属性-----变量：状态、静态的
为对象添加方法和属性
- this详解、事件处理中this的本质
  - window
  - this----函数属于谁
- 不能在系统对象中随意附加方法、属性、否则会覆盖已有方法、属性
- object对象
  - Date 日期
  - Array 存东西
  - RegExp 正则
  - Object 没有功能

<script>
    function createPerson(name,qq) {
        var obj = new Object();
        obj.name = name;
        obj.qq = qq;
        obj.showName = function() {
            alert(this.name);
        }
        obj.showQq = function() {
            alert(this.qq);
        }
        return obj;
    }
    var obj = createPerson('blue','111');
    obj.showName();
    obj.showQq();
    var obj1 = createPerson('sansan','222');
    obj1.showName();
    obj1.showQq();
</script>

使用new

<script>
    function createPerson(name,qq) {
        //var this = new Object();
        this.name = name;
        this.qq = qq;
        this.showName = function() {
            alert(this.name);
        }
        this.showQq = function() {
            alert(this.qq);
        }
        //return this;
    }
    var obj =new createPerson('blue','111');
    obj.showName();
    obj.showQq();
    var obj1 =new createPerson('sansan','222');
    obj1.showName();
    obj1.showQq();
</script>

原型----prototype
什么是原型
- 原型是class，修改他可以影响一类元素
- 在已有对象中加入自己的属性、方法
- 原型修改对已有对象的影响

为Array添加sum方法

给对象添加方法，类似于行间样式
给原型添加方法，类似于class

  css                 			    js
  
  class		一次给一个数组加样式 		原型
  行间样式 	一次给一个元素加样式		给对象加东西

原型小缺陷
- 无法限制覆盖
使用混合方式构造对象
- 原则：
  - 构造函数：加属性
  - 原型：加方法
- 对象命名规范
  - 类名首字母大写

<script>
   var arr1 = new Array(12,323,23,23,23,44);
   var arr2 = new Array(33.444,34,34,3,4,3);
   Array.prototype.sum = function() {  //class
   arr1.sum = function() {  //行间样式
       var result = 0;
       for(var i=0; i<this.length; i++) {
           result+=this[i];
       }
       return result;
   }
</script>

Json方式的面向对象

把方法包在一个Json里
- 有人管他叫------命名空间
- 在公司里，把同一类方法，包在一起
面向对象的拖拽
- 改写原有拖拽
对象的继承
- 什么是继承
  - 在原有类的基础上，略作修改，得到一个新的类，不影响原有类
- instanceof运算符
  - 查看对象是否是某个类的实例
使用继承
- 限制范围的拖拽类
  - 构造函数伪装
    - 属性的继承
      - 原理：欺骗构造函数
    - call的使用 Drag.call(this,id)
  - 原型链
    - 方法的继承
      - 原理：复制方法
    - 覆盖原型和方法复制
系统对象
- 本地对象（非静态对象）
  - 什么是本地对象
  - 常用对象
    - Object、Function、Array、String、Boolean、Number、Date、RegExp、Error
- 内置对象（静态对象）
  - 什么是本地对象
    - Global、Math
- 宿主对象（由浏览器提供的对象）
  - DOM、BOM

BOM

打开、关闭窗口
- open var oNewWin = window.open('about:blank','_blank');
  - 蓝色理想运行代码功能
- close
常用属性
- window.navigator.userAgent------浏览器信息
- window.location-------------当前网址
窗口尺寸、工作区尺寸
- 可视区尺寸
  - document.documentElement.clientWidth
  - document.documentElement.clientHeight
- 滚动距离
  - document.documentElement.scrollTop
常用方法和事件
- 系统对话框
  - 警告框：alert(“内容”)，没有返回值
  - 选择框：confirm(“提问的内容”),返回boolean
  - 输入框：prompt(),返回字符串或null
- window对象常用事件
  - onload
  - onscroll
  - onresize
  - 例子：回到顶部按钮、侧边栏广告
    - 闪烁问题

cookie基础

什么是cookie

页面用来保存信息
- 比如：自动登录、记住用户名
cookie的特性
- 同一个网站中所有页面共享一套cookie
- 数量、大小有限
- 过期时间
JS中使用cookie
- document.cookie

cookie的使用

设置cookie
- 格式：名字 = 值
- 不会覆盖
- 过期时间：expires = 时间
  - 日期对象的使用
- 封装函数
读取cookie
- 字符串分割
删除cookie
- 已经过期
例子：
- 用cookie记录上次登录的用户名
  - 提交时----------记录用户名
  - window.onload --------读取用户名

正则表达式

正则表达式基础

复习字符串操作
- search 查找
- substring 获取子字符串
- charAt 获取某个字符串
- split 分割字符串，获得数组
找出字符串中的所有数字
- 用传统字符串操作完成
- 用正则表达式完成
什么是正则表达式
- 什么叫”正则”
  - 规则、模式
- 强大的字符串匹配工具
- 是一种正常人类很难读懂的文字
- RegExp对象
  - JS风格----new RegExp（“a”，“i”）
  - perl风格----/a/i
search
- 字符串搜索
- 返回出现的位置
- 忽略大小写：i------ignore
- 判断浏览器类型
match
- 获取匹配的项目
- 量词：+
- 量词变化：\d、\d\d和 \d+
- 全局匹配：g----global
- 例子：找出所有数字
replace
- 替换所有匹配
  - 返回替换后的字符串
  - 例子：敏感词过滤
任意字符
- [abc]
- o[usb]t------obt、ost、out
范围
- [a-z]、[0-9]
- id[0-9]-----id0、id5
排除
- [^a]
- o[^0-9]t-----oat、o?t、ot
组合
- [a-z0-9A-Z]
实例：偷小说
- 过滤HTML标签var re = /<[^<>]>/g
  - 自定义innerText方法

转译字符

.(点) -------任意字符
\d、\w、\s
\D、\W、\S

 \d	                数字                 	[0-9]
 \w					英文、数字、下划线     	[a-z0-9_]
 \s					空白字符
 \D											[^0-9]
 \W                                         [^a-z0-9_]
 \S					非空白字符

量词

什么是量词
- 出现的次数
- {n,m}，至少出现n次，最多m次
- 例子：查找QQ号[1-9]\d{4,11}
- 固定电话(0\d{2,3}-)?[1-9]\d{7}(-\d{1-5})?

常用量词

{n,} 			 	至少n次
* 					任意次 {0，}	(不推荐)
？				    0次或一次 {0,1}
+ 					一次或任意次 {1，}
{n} 				正好n次

表单校验实例

教研邮箱
- 行首行尾\^\w+@[a-z0-9]+\.[a-z]+$/i;

LuckyGuyy

发布了53 篇原创文章 · 获赞 13 · 访问量 2263

私信关注

JavaScript（Blue）

文章目录