文章目录
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
- 循环 数组: for i-length
- 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;
- length
- 数组使用原则:数组中应该只存一种类型的变量
- 数组的方法:
- 添加:
- push(元素),从尾部添加
arr.push(4);
- unshift(元素),从头部添加
- push(元素),从尾部添加
- 删除
- pop(),从尾部添加
arr.pop();
- shift(),从头部弹出
- pop(),从尾部添加
- 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
- sort([比较函数]),排序一个数组
- 转换类
- concat(数组2)
- 连接两个数组:
arr1.concat(b);
- 连接两个数组:
- join(分隔符)
- 用分隔符,组合数组元素,生成字符串:
arr.join('-');
- 字符串split
- 用分隔符,组合数组元素,生成字符串:
- concat(数组2)
定时器的作用
- 开启定时器
- 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
- childNodes nodeType
- 元素属性操作
- 第一种: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.淡入淡出的图片
- 用变量存储透明度
- 1.“分享到”侧边栏
- 缓冲运动
- 逐渐变慢,最后停止
- 距离越远,速度越大
- 速度由距离决定
- 速度=(目标值-当前值)/缩放系数
- 例子:缓冲菜单
- Bug:速度取整
- 跟随页面滚动的缓冲侧边栏
- 潜在问题:目标值不是整数时
- 匀速运动的停止条件
- 匀速运动:距离足够近
- 缓冲运动:两点重合
p17
AJAX基础
- 什么是服务器
- 网页浏览过程分析
- 如何配置自己的服务器程序(AMP、tomcat)
- 什么是Ajax
- 无刷新数据读取
- 用户注册、在线聊天室
- 异步、同步
- 使用Ajax
- 基础:请求并显示静态TXT文件
- 字符集编码
- 缓存、阻止缓存(new date)
- 动态数据:请求JS(或json)文件
OM创建元素 - 局部刷新:请求并显示部分网页文件
- 基础:请求并显示静态TXT文件
- Ajax原理
- HTTP请求方法
- GET ---- 用于获取数据(如:浏览帖子)
- POST ---- 用于上传数据(如:用户注册)
- GET、POST的区别
- get是在url里传数据:安全性、容量
- 缓存
- HTTP请求方法
编写Ajax
- 创建Ajax对象
- ActiveXObject(“MicrosoftXMLHTTP”)--------------IE6使用
- XM LHttpRequest()
- 连接服务器
- open(方法,文件名,异步传输)
- 同步和异步
- 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 没有功能
- this详解、事件处理中this的本质
<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
- open
- 常用属性
- window.navigator.userAgent------浏览器信息
- window.location-------------当前网址
- 窗口尺寸、工作区尺寸
- 可视区尺寸
- document.documentElement.clientWidth
- document.documentElement.clientHeight
- 滚动距离
- document.documentElement.scrollTop
- 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 --------读取用户名
- 用cookie记录上次登录的用户名
正则表达式
正则表达式基础
-
复习字符串操作
- 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方法
- 过滤HTML标签
-
转译字符
- .(点) -------任意字符
- \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;
- 行首行尾