什么是JavaScript？
跨平台的脚本语言
脚本语言的特点：不能独立运行，要依赖于网页
JavaScript组成
- ECMAScript
- DOM 文档
- BOM 浏览器
输出方法
alert()
document.write()
*内容包含标签会自动解析
console.log()
数据类型
1.基本数据类型
数字：number
布尔值：Boolean
字符串
2.复合/引用数据类型
数组
var arr = new Array(100, true, "hello");
var arr = Array(100, true, "hello");
var arr = [100, true, "hello"];
*var arr = new Array(10); //声明一个长度为10的数组，数组中没有元素
3.特殊数据类型
null
undefined
NAN
弱引用
变量是弱引用类型，赋值为什么数据类型就是什么数据类型
*typeof 输出数据类型
运算符
1.算术运算符
加(+) 减(-) 乘(*) 除(/) 取余(%)
*JS中除数可以为零(Infinity无穷大)
*parseInt()取整
2.关系运算符
> < >= <= == != === !==
3.逻辑运算符
&& || !
4.一元运算符
++ --
5.赋值运算符
基本赋值运算符：=
复合赋值运算符：+= -= ...
自动数据类型转换
自动数据类型转换:不同数据类型之间是没有办法进行运算，将数据转成同一数据类型，再进行计算。
1.其中有一个操作数必须是字符串，运算符必须是+号，别的数据类型转成字符串，进行字符串拼接
2、任何数据和字符串做+加法以外的操作，那么字符串要先转成数字再去进行运算。
<1>如果字符串是一个纯数字字符组成的字符串，转成对应的数字
<2>如果字符串中含有除数字以外的别的字符，转成NaN，NaN和任何数据运算都是NaN。
3、除字符串以外的数据，在进行算数运算的时候，先转成数字，再进行运算。
强制数据类型转换
Boolean() 非0即真、非空即真
Number()
parseInt() 取整；转十进制parseInt(“11011”, 2)
parseFloat()
Number(null); //0
Number(undefined); //NaN
null == undefined //true
关系运算规则
和其他运算符一样,当关系运算符操作非数值时要遵循一下规则:
1.两个操作数都是数值，则数值比较；
2.两个操作数都是字符串，则比较两个字符串对应的字符编码值；
3.两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；
在相等和不等的比较上，如果操作数是非数值，则遵循一下规则:
1.一个操作数是布尔值，则比较之前将其转换为数值，false 转成 0，true 转成 1；
2.一个操作数是字符串，则比较之前将其转成为数值再比较
3.一个操作数是 NaN，则==返回 false，!=返回 true；并且 NaN 和自身不等；
4.在全等和全不等的判断上，比如值和类型都相等，才返回 true，否则返回 false
流程控制语句
顺序结构：代码自上而下顺序执行
分支结构/选择结构/条件结构：根据不同的条件，执行不同的操作
循环结构：重复做一件事
switch语句
switch(表达式) {
case 常量1:语句; break;
case 常量2:语句; break;
case 常量3:语句; break;
...
case 常量n:语句; break;
default:语句;break;
}
三目运算符
表达式1 ? 表达式2 : 表达式3
执行过程：先求解表达式1，若为非0（真）则求解表达式2，若表达式1的值是0（假），则求解表达式3
do…while循环
do{
循环语句;
}while(循环条件);
垃圾回收机制
调用函数的时候，系统会分配对应的空间给这个函数使用(空间大小一般情况由这个函数里声明的变量和形参决定)。当函数使用完毕以后，这个内存空间要释放，还给系统。
注：在函数内部声明的变量和形参是属于当前函数的内存空间里的。
内存管理机制
在函数声明的变量和形参，会随着函数的调用被创建，随着函数的调用结束而被销毁。
在函数中声明的变量和形参，有效范围是当前函数(当前函数的大括号)，作用于，局部作用域。
递归
满足以下三个特点就是递归：
1.函数自己调用自己
2.一般情况有参数
3.一般情况下有return
方法：
1.首先去找临界值
2.找这一次和上一次的关系
3.假设当前函数已经可以使用，调用自身计算上一次
数组
栈结构：
从同一头进，从同一头出。先进后出
-
push()
给数据的末尾添加元素，返回值是数组的长度
-
pop()
没有参数，从数组末尾取一个元素
队列结构：
从末尾进，从头部出。先进先出
-
push()
-
shift()
没有参数，从数组的头部取下一个元素
-
unshift()
从数组的头部插入元素，返回值是数组长度
数组的方法：
-
concat()
1.拷贝原数组，生成新数组
2.合并数组，返回合并成的新数组,原数组不会改变
*数组.concat(数组, 数据, …)
-
slice()
基于当前数组获取指定区域元素[start, end)，提取出元素生成新数组
-
splice()
数组.splice(start，length，数据1，数据2…);
start：开始截取的位置
length：截取元素的长度
第三个参数开始：在start位置，插入的元素
返回值：截取下来的元素组成的数组
功能：增加、删除、修改(先删除再修改)
-
join()
数组.join(字符串)
功能：将数组中的元素，用传入的拼接符，拼接成一个字符串
返回值：拼接好的字符串
-
reverse()
功能：逆序
-
sort()
参数：一个函数，代表要怎么去进行排序(固定用法)
功能：排序，默认从小到大排序，按照字符串排序
*数值大小排序
arr.sort(function(value1, value2){ return value1 - value2; });
预编译
在所有代码运行之前，计算机将代码从头到尾看一遍，将这个程序需要运行的空间一次性分配好。
声明提升：在当前作用域，声明变量和函数会直接提升在整个代码的最前面运行。
省略var，直接去强制给一个变量赋值，这个变量会被JS强制声明为全局变量(不符合规范)。
严格模式
“use strict”
-
写在哪个作用域下，在哪个作用域下生效(尽量不要写在全局)
-
使用严格模式以后行为变更
1.全局变量声明时，必须加var
2.this无法指向全局对象
3.函数内重名属性
4.arguments对象不允许被动态改变
5.新增保留字：implements, interface, let, package, private, protected, public, static, yield。
ES5新增数组常见方法
-
indexOf()
arr.indexOf(item，start);
功能：在数组中查找第一次出现item元素下标，从start开始去查找
返回值：元素下标，-1(没有找到)
-
forEach()
arr.forEach(function(item, index, arr){ document.write(item + "," + index + "," + arr + "<br/>"); }); -
map()
arr.map(function(item, index, arr){ return item * 1.3 });*映射，map不会改变原有数组，而是将函数执行一次之后的返回值组成一个数组，返回回来。
-
filter()
arr.filter(function(item, index, arr){ return item > 20; }); -
some()
arr.some(function(item, index, arr){ return item > 20; });在数组中查找是否有符合条件的元素，有返回true，否则返回false
-
every()
arr.every(function(item, index, arr){ return item < 30; });在数组中查找每一个元素是否有符合条件，符合返回true，否则返回false
-
reduce()
arr.reduce(fuction(prev, next, index, arr){ return prev + next; });prev：第一次是下标为0的元素；
第二次开始是上一次遍历return的值
next：从下标1开始，当前遍历到的元素
字符串
var str1 = new String(100);
var str2 = String(100);
var str3 = "100";
-
访问字符串中的字符
str.length;
str[index];
str.charAt(index);
str.charCodeAt(3) //获取下标为3的字符的编码
注：charAt()、charCodeAt()需要使用字符串对象调用
String.fromCharCode(94) //编码转换成字符
注：该方法是 String 的静态方法，所以用String调用
注：字符串是只读的，字符串一旦被声明就没有办法被修改，如果非要声明字符串，只能先销毁原字符串再生成新字符串
-
方法
了解
big() 用大号字体显示字符串 blink() 显示闪动字符串(IE下无效) bold() 使用粗体显示字符串 fixed() 以打字机文本显示字符串 strike() 使用删除线来显示字符串 fontcolor() 使用指定颜色来显示字符串 fontsize() 使用指定尺寸来显示字符串 link() 将字符串显示为链接 sub() 把字符串显示为下标 sup() 把字符串显示为上标 注：document.write()中使用,用特殊的样式输出该字符串。重点
1.字符串查找
-
supStr.indexOf(subStr, start);
功能：在supStr中查找subStr第一次出现的位置，从start这个位置开始查找
-
supStr.lastIndexOf(subStr);
-
supStr.search(subStr);
正则表达式： 修饰符：i 忽略大小写 g 全局匹配 index = str.search(/abc/i);
2.字符串提取
str.substring(start, end)
str.substr(start, length)
str.slice(start, end);
*均返回新生成的字符串
3.字符串替换
supStr.replace(oldStr, newStr);
功能：用newStr将oldStr替换掉，生成新字符串
参数：第一个参数是字符串只能替换一次
第一个参数 正则表达式
4.字符串分割
str.split(分隔符，length)
参数：第一个参数，用这个分隔符对原字符串进行分割
第二个参数，控制返回的数组的元素格式，一般情况下不用
功能：用分隔符对原字符串，进行字符串分割，将分割完成后的子串放在数组中返回
注：相邻的两个分隔符会产生空字符；
分隔符是空字符串""，直接将每一个字符，单独分割成子串，放在数组中返回
5.大小写转换
str.tolowerCase()
str.toUpperCase()
6.字符串拼接
- str1 + str2
-
-
str.concat()
内容获取
-
表单元素获取其中内容，通过.value的属性
双标签节点通过innerHTML属性，获取标签间内容
function btnClick(){
var oTxt = document.getElementById("txt1");
var oMsg = document.getElementById("msg");
oMsg.innerHTML = oValue;
oTxt.value = '';
}
- 对通过id获取标签的方法进行简化
function $(id){
return document.getElementById(id);
}
window.onload = function(){
$("start").onclick = function(){
alert("");
}
}
*<button id = 'start'>开始</button>
事件驱动函数
onclick
onblur 失去焦点
<input id='username' type="text" placeholder="用户名" onblur="func();"/>
面向对象
-
面向过程语言：汇编、C语言
面向对象语言：Java、C++、JavaScript、Object-C、python
-
面向过程编程思想：只考虑数学逻辑
面向对象编程思想：直接将生活逻辑映射到我们的程序
1.分析有哪些实体
2.设计实体属性和功能
3.实体之间相互作用
-
语法(在Js中没有类的概念，只有对象，ECMA6版新增了类的概念)
类：一类具有相同特征事物的抽象概念
对象：具体的某一个个体，唯一的实例
-
声明对象
1.通过new运算符声明对象
2.通过省略new
3.对象常量赋值(使用大括号，代表对象)
var obj1 = new Object(); var obj2 = Object(); var obj3 = {}; //新增属性 obj.age = 18; obj['age'] = 18; //新增方法 obj.show = function(){ }; obj['show'] = function(){ }; //通过对象常量赋值 var obj = { username: "zq", "age": 18; show: function(){ } }; //delete关键字，删除对象的属性或方法 delete obj.age; -
数据类型
基本数据类型(存储一个值)
数组(处理批量的数据)
对象(既可以存储数据又可以存储函数)
Math对象
Math.random() //返回0-1之间的随机数
Math.max(num1, num2) //返回较大的数
Math.min(num1, num2) //返回较小的数
Math.abs(num) //绝对值
Math.ceil(19.3) //向上取整
Math.floor(11.8) //向下取整
Math.pow(x,y) //x的y次方
Math.sqrt(num) //开平方
Math.sin(弧度)
*1弧度 = Math.PI / 100
日期对象
-
声明
1.没有传入参数，默认当前系统时间
2.传入参数
“2020-01-01”
“2020/01/01”
按照顺序，分别传入参数 年, 月, 日, 时, 分, 秒, 毫秒
注：在外国月份是从0开始数的0~11
直接传入毫秒数，1秒 = 1000毫秒(以1970年1月1日0:0:0为参照时间点去进行换算)
var d = new Date();
var d = new Date(2016,04,13,14,34);
- 日期对象的格式化方法
box.toDateString(); //以特定的格式显示星期几、月、日和年
box.toTimeString(); //以特定的格式显示时、分、秒和时区
box.toLocaleDateString(); //以特定地区格式显示星期几、月、日和年
box.toLocaleTimeString(); //以特定地区格式显示时、分、秒和时区
box.toUTCString(); //以特定的格式显示完整的 UTC 日期
- 日期对象Date方法
var d = new Date();
Date.parse(“2015-08-24”);
//转换格式默认支持2015-08-24或2015/08/24
//返回距离1970年1月1日0时的毫秒数
d.getTime()/d.setTime()
getTime获取某个日期自1970年以来的毫秒数
setTime修改日期的毫秒数，对应的日期时间也会修改(d.setTime(1000))
-
日期对象方法
set/get既能获取又能够赋值 get只能获取
//重点
set/getDate() //从Date对象中返回一个月中的某一天(1~31)
getDay() //从Date对象返回一周中的某一天(0~6)
set/getMonth() //从Date对象中返回月份(0~11)
set/getFullYear() //从Date对象以四位数返回年份
set/getHours() //返回Date对象的小时(0~23)
set/getMinutes() //返回Date对象的分钟(0~59)
set/getSeconds() //返回Date对象的秒数(0~59)
set/getMilliseconds() //返回Date对象的毫秒
set/getTime() //返回1970年1月1日至今的毫秒数
getTimezoneOffset() //返回本地时间与格林威治标准时间(GMT)的分钟差
//了解即可
set/getUTCDate() //根据世界时从Date对象返回月中的一天(1~31)
getUTCDay() //根据世界时从Date对象返回周中的一天(0~6)
set/getUTCMonth() //根据世界时从Date对象返回月份(0~11)
set/getUTCFullYear() //根据世界时从Date对象返回四位年份
set/getUTCHours() //根据世界时返回Date对象的小时(0~23)
set/getUTCMinutes() //根据世界时返回Date对象的分钟(0~59)
set/getUTCSeconds() //根据世界时返回Date对象的秒数(0~59)
set/getUTCMilliseconds() //根据世界时返回Date对象的毫秒(0~999)
toString() //把Date对象转换为字符串
toTimeString() //把Date对象的时间部分转换为字符串
toDateString() //把Date对象的日期部分转换成字符串
toUTCString() //根据世界时,把Date对象转换为字符串
toLocaleString() //根据本地时间格式,把Date转换为字符串
toLocaleTimeString() //根据本地时间格式，把Date时间部分转换为字符串
toLocaleDateString() //根据本地时间格式,把Date对象的日期部分转换为字符串
UTC() //根据世界时返回1970年1月1日到指定日期的毫秒数
valueOf() //返回Date对象的原始值
定时器
setInterval(函数，毫秒数)
功能：每隔对应的毫秒数，执行一次传入的函数
返回值：启动定时器的，系统分配的编号
clearInterval(timer)
功能：取消定时器
var timer = setInterval(function(){
if(i == 5){
clearInterval(timer);
}
document.write(i++ + "<br/>");
}, 1000);
BOM
-
浏览器对象模型(browser object model)
-
系统对话框
Window 方法 (一般情况下Window可以省略)
-
alert()
弹出警告框
-
confirm()
弹出一个带确定和取消的提示框，点击确定返回true
-
prompt()
功能：弹出一个带输入框的提示框
第一个参数：面板上显示的内容
第二个参数：输入框里面的默认内容(可以不传入)
返回值：点击确定返回输入的内容；点击取消返回null
-
-
open方法
open()
功能：可以导航到一个特定的URL，也可以打开一个新的浏览器窗口，一般可以接受三个参数
第一个参数：跳转的url，打开一个新窗口，加载url
第二个参数：字符串，给打开的窗口起一个名字
第三个参数：一串特殊含义的字符串，可以控制打开窗口的属性
注：不命名会每次打开新窗口，命名的第一次打开新窗口,之后在这个窗口中加载。
-
history对象
掌管当前窗口(非浏览器)历史记录(只要加载url不一样就会产生历史记录)
-
属性：history.length 输出当前窗口历史记录的条数
-
方法
history.back() 返回上一条历史记录
history.forward() 前进到下一条历史记录
history.go()
参数：0 刷新当前页面
正整数 前进n条记录
负整数 后退n条记录
-
-
location对象
url：统一资源定位符
完整的url包括：协议://IP(域名)/:端口号/路径/?查询字符串#锚点
protocol://hostname:port/pathname/?search#hash
1.location.protocol
访问当前页面的协议
file：本地磁盘文件访问
http：
https：证书认证协议
2.location.hostname
主机名 IP(在全球范围内找到你当前网络的地址) 域名，IP的别称
3.location.port
端口号(默认隐藏)
注：是当前电脑中使用网络的软件，随机地给他分配一个编号 0~65535
hostname：port 可以直接定位到当前使用网络的程序
小细节：浏览器 8080
http 80
https 443
4.location.pathname
路径
5.location.search
查询字符串(前后端交互)
(?name=value1&name2=value2)
6.location.hash
锚点
-
location对象的方法
-
location.assign(url)
在当前窗口跳转到这个url
-
location.replace(url)
在当前窗口替换成新的url，不会产生历史记录
-
location.reload()
刷新当前窗口
location.reload(true) 不经过浏览器缓存强制从服务器重载
-
DOM
文档对象模型 document object model
html开始到html结束
-
节点类型
-
元素节点
标签
元素节点的获取
document.getElementById(id) node.getElementsByTagName(标签名) node.getElementsByClassName(class名字) document.getElementsByName(name属性的值) 注：name属性一般使用在表单元素里 document.querySelector() 返回值：一个元素节点，找到的符合条件的第一个元素节点 document.querySelectorAll() 返回值：伪数组 参数：css选择器格式字符串(如"#ol1"、"li"、".box"、"ol .box"、"[name=hello]") 注：这两种方法IE8以下不兼容 -
属性节点
id，class， title = “”
-
文本节点
div文本
文本节点通过元素的子节点获取
-
CSS样式获取
-
通过.style.XXX的方式只能访问内联的css样式
-
获取当前的有效样式的方法(不同浏览器)
-
oDiv.currentStyle[‘height’]
IE兼容
-
getComputedStyle(oDiv)[“height”]
火狐、谷歌
-
跨浏览器的兼容
function getStyle(node, cssStyle){ return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(oDiv)[cssStyle]; }
-
attribute
class的访问
支持自定义属性
- setAttribute
oDiv.setAttribute("class", "box ");
- getAttribute
oDiv.getAttribute("title");
- removeAttribute()
oDiv.removeAttribute("title");
元素节点属性
innerHTML 获取标签间内容，会解析标签
innerText 获取标签间纯文本，不会解析文本，设置纯文本
outerHTML 从外标签开始到外标签结束
获取子节点
oDiv.childNodes 访问当前节点下所有的子节点
oDiv.firstChild 访问子节点中的首位
oDiv.lastChild 访问子节点中的最后一位
nextSibling 下一同级节点
previousSibling 上一同级节点
| nodeType | nodeName | nodeValue | |
|---|---|---|---|
| 元素节点 | 1 | 标签名 | null |
| 属性节点 | 2 | 属性名 | 属性值 |
| 文本节点 | 3 | #text | 文本内容 |
oDiv.childNodes[0].nodeName
-
只获取子节点中的元素节点
children 访问当前节点下所有的子节点
firstElementChild 访问子节点中的首位
lastElementChild 访问子节点中的最后一位
nextElementSibling 访问当前节点兄弟节点中的下一个节点
previousElementSibling 访问当前节点兄弟节点中的上一个节点
注：上述方法都不包含文本节点(IE8以下不兼容)
属性节点
attributes 获取当前元素节点上的所有的属性节点，返回一个集合对象(无序、不重复)
oDiv.attributes.getNamedItem("title").nodeName;
oDiv.attributes["title"].nodeName;
DOM节点操作
-
document.write();
注：会覆盖页面上原有的内容
-
document.createElement(标签名);
返回值：创建好的这个节点
-
node1.appendChild(node2);
功能：将node2节点插入到node1节点子节点的末尾
-
document.createTextNode(文本);
功能：创建文本节点(纯文本)
-
box1.parentNode.insertBefore(box2, box1);
功能：将box2添加到box1的前面
-
box1.parentNode.replaceChild(box2, box1);
功能：用box2节点将box1节点替换掉
-
node.cloneNode();
返回值：克隆出来的新节点
*克隆节点本身和子节点node.cloneNode(true)
-
box.parentNode.removeChild(box)
功能：将box节点从页面上删除
this
只要封装函数，任何一个函数系统都会内置一个叫做this的变量
this变量存储的是地址，是当前函数主人的地址
注：this永远指向当前函数的主人，函数的主人要通过当前上下文去判断
Offset
-
offsetWidth
width + border + padding (纯数字)
-
offsetHeight
-
offsetLeft
-
offsetTop
遍历
-
数组
-
for 循环
-
for … in 快速循环
for(var i in arr){ }
-
foreach(ECMA5新增)
arr.forEach(function(item, index, arr){ });
-
for … of
for(var item of arr){ }
-
-
对象
for … in
for(var i in person){ //i是当前遍历到的属性 document.write("对象遍历:" + i + "," + person[i] + "<br/>"); }
事件
-
事件是发生并得到处理的操作
-
绑定事件
-
内联模式
-
外联模式/脚本模式
-
-
绑定事件格式
元素节点.on + 事件类型 = 匿名函数
click 事件类型
onclick 事件处理的函数
-
事件类型
-
鼠标事件(可以绑定在任意的元素节点上)
click 单击
dblclick 双击
mouseover 鼠标移入
mouseout 鼠标移出
mousemove 鼠标移动(会不停地触发)
mouseup 鼠标抬起
mousedown 鼠标按下
mouseenter 鼠标移入
mouseleave 鼠标移出
注：mouseover、mouseout经过子节点会重复触发
mouseenter、mouseleave经过子节点不会重复触发（IE8以后才有）
-
键盘事件(表单元素，全局window)
keydown 键盘按下(如果按下不放手，会一直触发)
keyup 键盘抬起
keypress 键盘按下(只支持字符键)
-
HEML事件
-
window事件
load 当页面加载完成以后会触发
unload 当页面解构的时候触发(如刷新页面、关闭当前页面)
scroll 页面滚动
resize 窗口大小发生变化的时候触发
-
表单事件
blur 失去焦点
focus 获取焦点
select 输入框内选中文本的时候触发
change 对输入框的文本进行修改并且失去焦点的时候
submit 当点击submit上的按钮时触发
reset 当点击reset上的按钮时触发
当：submit、reset必须添加在form元素上
注：submit、reset必须添加在form
-
-
事件对象
-
绑定事件格式
元素节点.on + 事件类型 = 匿名函数
注：1.系统会在事件绑定完成的时候，生成一个事件对象。
2.触发事件的时候，系统会自动去调用事件绑定的函数。将事件对象当做第一个参数传入。
-
事件对象获取
oBtn.onclick = function(ev){ var e = ev || window.event; alert(e); } -
鼠标事件对象属性
-
button属性
0 左键
1 滚轮
2 右键
-
获取当前鼠标位置
原点位置 可视窗口的左上角为原点 clientX clientY 整个页面的左上角(包含滚动距离) pageX pageY 电脑屏幕的左上角 screenX screenY
-
-
修改键
-
shiftKey属性
按下shift键为true，默认false
-
altKey属性
-
ctrlKey属性
-
metaKey属性
windows系统下：按下windows(开始)键，为true
macOS系统：按下command键为true
注：与其他操作进行组合，形成一些快捷键操作
-
-
键盘事件对象的属性
-
keyCode 键码
格式：var which = e.which || e.keyCode;
返回值：键码返回的是大写字母的ASCII码值，不区分大小写，支持全键盘
注：只在ketdown下支持
window.onkeydown = function(ev){ var e = ev || window.event; var which = e.which || e.keyCode; alert(which); }-
charCode 字符码
格式：var which = e.which || e.charCode;
返回值：不支持功能键，返回当前按下键对应字符的ASCII码值
注：只在keypress下支持
-
-
目标对象
target 目标对象/触发对象
事件对象的属性，事件由谁而起
注：IE8以下不兼容，window.event.srcElement;
-
事件冒泡
-
浏览器上事件天生的一个特点：事件流
-
事件冒泡：由里向外逐级触发
-
事件捕获：由外向里逐级触发
-
阻止事件冒泡
- e.cancelBubble = true;
- e.stopPropagation();
//封装跨浏览器兼容的阻止事件冒泡 function stopBubble(e){ //e是事件对象 if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } }
-
阻止默认行为和超链接
//阻止官方的右键菜单
document.oncontextmenu = function(){
return false;
}
-
阻止超链接的默认行为
-
简陋的阻止a链接默认行为的方式
缺点：运行到return，后面的内容就执行不到了
-
规范的方法
- preventDefault();
- window.event.returnValue = false;
var a1 = document.getElementById("a1"); a1.onclick = function(){ return confirm("你确定要离开当前页面吗?"); } //编写一个跨浏览器阻止超链接默认行为的函数 function preDef(e){ if(e.preventDefault){ e.preventDefault(); }else{ window.event.returnValue = false; } } -
事件委托
事件委托实现步骤：
1.找到当前节点的父节点或者祖先节点
2.将事件添加到你找到的这个父节点或者祖先节点上
3.找到触发对象，判断触发对象是否是想要的触发对象，进行后续的操作
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.backgroundColor = 'red';
}
}
Event事件监听器
-
addEventListener()
格式：node.addEventListener(“click”)
第一个参数：事件类型
第二个参数：点击函数
第三个参数：布尔值，默认为false表示事件冒泡，true代表事件捕获
var oBtn = document.getElementById("btn1");
oBtn.addEventListener("click", function(){
alert("点击1");
}, false);
-
removeEventListener()
格式：node.removeEventListener()
第一个参数：事件类型
第二个参数：删除函数名字
aBtns[0].onclick = function(){
aBtns[1].addEventListener("click", show, false);
}
aBtns[2].onclick = function(){
aBtns[1].removeEventListener("click", show);
}
- 事件监听器的兼容
function addEvent(node, evenType, funcName){
if(node.addEventListener){
node.addEventListener(evenType, funcName, false);
}else{
node.attachEvent("on" + evenType, funcName);
}
}
function removeEvent(node, eventType, funcName){
if(node.removeEventListener){
node.removeEventListener(eventType, funcName);
}else{
node.detachEvent("on" + eventType, funcName);
}
}
正则表达式
正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript 的 RegExp 类表示正则表达式，而 String 和正则表达式都定义了进行强大的【模式匹配】和【文本检索】与【替换】的函数。
-
创建正则表达式的方式
var box = new RegExp('box'); //第一个参数字符串 var box = new RegExp('box', 'ig'); //第二个参数可选模式修饰符 var box = RegExp('box', 'ig'); //省略new运算符 var box = /box/; //直接用两个反斜杠 var box = /box/ig; //在第二个斜杠后面加上模式修饰符参数：i 忽略大小写
g 全局匹配
m 多行匹配
-
正则表达式对象的方法
-
test
格式：正则.test(字符串)
功能：在字符串中匹配成功返回true，匹配失败返回false
-
exec
格式：正则.exec(字符串)
功能：在字符串中匹配这个字符串是否存在
返回值：将匹配到的串以数组方式返回
-
-
在字符串中使用正则的方法(字符串的方法)
-
match()
格式：字符串.match(正则)
功能：在字符串中匹配是否有符合正则表达式的字符串
返回值：匹配成功，返回装有匹配到的子串的数组，失败返回null
-
replace()
格式：字符串.replace(oldStr, newStr)
功能：用newStr将oldStr替换
返回值：替换成功的新字符串
-
split()
格式：字符串.split(分割符/正则)
功能： 用分割符将原字符串进行分割
返回值：分割剩下的子串组成的数组
*split()本身就能找到全部的，无需全局匹配
-
search()
格式：字符串.search(子串/正则)
功能：找到符合条件的子串第一次出现的位置
返回值：找到返回大于等于零的下标，否则返回-1
-
元字符
在正则表达式中有特殊含义的字符
-
单个字符和数字
元字符/元符号 匹配情况 . 匹配单个的任意字符 [] 匹配单个范围内的字符 匹配单个的数字、字母、下划线: [a-zA-Z0-9_] 或 \w 匹配单个非数字、字母、下划线：[^a-zA-Z0-9_] 或 \W 匹配单个数字： [0_9] 或 \d 匹配单个非数字：[^0_9] 或 \D -
重复字符（x代表单个的任意字符）
元字符/元符号 匹配情况 x? 匹配0个或者1个x x+ 匹配至少一个x字符 x* 匹配任意个x字符(零个也可) x{m, n} 匹配至少m个，至多n个x字符，包括n x{n} 必须匹配n个x字符 (xyz)+ 小括号括起来的部分是当做单个字符处理 -
空白字符
元字符/元符号 匹配情况 \0 匹配null字符 \b 匹配空格字符 \n 匹配换行符 \r 匹配回车字符 \t 匹配制表符 \s 匹配空白字符、空格、制表符和换行符 \S 匹配非空白字符 -
锚字符
元字符/元符号 匹配情况 ^ 行首匹配 $ 行尾匹配
替代字符 ：|
转义字符：\
修饰符：
i 忽略大小写
g 全局匹配
m 换行匹配
【注】如果在字符串，遇到换行，重新开始计算行首。
常用正则
-
检查文件压缩包
var box = /^\w+\.(zip|rar|gz)$/; -
手机号码
var box = /^1\d{10}$/; -
身份证号码
var box = /^[1-9]\d{16}(\d|x)/; -
验证纯中文字符串
var box = /^[\u4e00-\u9fa5]+$/
localStorage
本地存储技术：
-
localStorage(IE8以下不兼容)
- 永久存储
- 最大可以存储5M(客户端的微型数据库)
- 只能存储string
- 隐私模式下可不读取
-
cookie
- 可以设置过期时间
- 最大可以存4KB
- 每一个域名下面最多可以存储50条数据(不同浏览器有偏差)
-
sessionStorage(结合后台使用)
localStorage对象
-
localStorage.setItem(name, value);
localStorage.setItem("a", "1"); localStorage.b = 2; localStorage["c"] = "3"; -
localStorage.getItem(name);
-
localStorage.removeItem(name);
强制改变this指向
每一个函数中都有一个内置的变量this，this指向当前函数的主人，函数的主人要根据上下文关系进行判断
-
call方法
格式：函数名.call()
第一个参数：强制该函数this指向的对象，传入什么强制指向什么
第二个参数开始：将原函数的参数往后顺延一位
-
apply
格式：函数名.apply()
第一个参数：强制该函数this指向的对象，传入什么强制指向什么
第二个参数：数组（放入我们原有所有的参数）
//apply使用小技巧 var arr = [10, 20, 30, 40, 50] Math.min.apply(null, arr) -
bind方法（预设this指向）
let关键字
let 关键字，用来声明变量，只要遇到大括号就形成作用域(ECM6新增)
var 关键字，声明变量，将变量或者形参所在函数的大括号作为作用域处理
注：let关键字声明的变量所在作用域叫做块级作用域，var声明的变量所在作用域叫做局部作用域。
for(var i=0; i<5; i++){
setTimeout(function(){
console.log(i);
}, 6000);
}
//output: 5 5 5 5 5
for(let i=0; i<5; i++){
setTimeout(function(){
console.log(i);
}, 6000);
}
//output: 0 1 2 3 4(会形成5个作用域)
const关键字
声明变量，变量值只能在声明的时候确定，后续是没有办法修改的。
注：const声明常量(变量没有办法改)
箭头函数
-
适当地省略函数中的function和return关键字。
-
各种形式的箭头函数
//1、无参数，无返回值
function show(){
alert("hello");
}
//2、有一个参数，无返回值
function xxx(num){
alert(num);
}
var xxx = num => {
alert(num);
}
//3、有一个参数，有返回值
function add(x){
return x + 10;
}
var add = x => x + 10;
//4、有多个参数，有返回值
function show(x, y){
alert(x + y);
}
var show = (x, y) => {
alert(x + y);
}
- 箭头函数与数组
var arr = [10, 20, 30, 40, 50];
var newArr = arr.filter(function(item){
return item > 20;
})
var newArr = arr.filter(item => 20);
var newArr = arr.map(item => item * 3);
-
使用箭头函数的注意事项
-
箭头函数不能用new
-
箭头函数的返回值是对象时需要添加小括号
-
箭头函数中的this指向上一层函数的主人
-
解构
-
中括号解构
var [x, y, z] = [10, 20, 30] var [x, [a, b], y, z] = [10, [40, 50], 20, 30] -
大括号解构
var {name, age, sex} = { age: 18, name: "钢铁侠", sex:"男" }; alert(name); -
解构的好处
- 交换变量值
- 函数可以返回多个值
- 函数定义参数可以不用再考虑顺序
- 参数可以附带默认值
- 快速取出数组中的某一个元素
var [x, y] = [10, 20]; [x, y] = [y, x]; function show(){ return ["结果1", "结果2", "结果3"]; } var [a, b, c] = show(); function showSelf({name, age, sex}){ alert("我叫" + name + "，今年" + age + ",是一位" + sex + "性"); } showSelf({ age: 18, name: "小明", sex: "女" }) function showSelf({name, age, sex = "男"}){ alert("我叫" + name + "，今年" + age + ",是一位" + sex + "性"); } showSelf({ age: 18, name: "小明", }) var arr = [10, 20, 30, 40, 50]; var {0:first, 4:last} = arr; //last == arr[4], first = 10
ECMA6新式字符串
传统字符串：所有单引号、双引号括起来的都叫做字符串
ECMA6字符串：反引号(``)
注：传统字符串里面不允许有回车和换行，可以通过加转义字符实现，但效果还是在一行
var str = `hello
world`;
function showSelf({name, age, sex = "男"}){
alert(`我叫${name},今年${Math.max(age, 20, 30)}岁,是一位${sex}性`);
}
ECMA6新增数组方法
-
Array.from()
功能：将伪数组转成真数组
window.onload = function(){ var aLis = document.getElementsByTagName("li"); alert(aLis.length); aLis = Array.from(aLis); aLis.push("hello"); } -
find()
功能：在数组中查找符合条件的元素，只要找到第一个符合条件的元素，就终止遍历
返回值：找到的元素
var arr = [10, 20, 30, 40, 50]; var res = arr.find(function(item, index, arr){ return item > 20; }) alert(arr.find(item => item > 20)); -
findIndex()
返回值：找到的元素的下标
-
copywithin()
第一个参数：从哪个下标开始
第二个参数和第三个参数：范围[start, end)
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; arr.copyWithin(2, 4, 9); alert(arr); //1,2,5,6,7,8,9,8,9,10
合并对象Object.assgin
/*
将所有传入的对象，都合并到第一个对象中
obj2、obj3没有变化
*/
var obj1 = {
a: 10
}
var obj2 = {
b: 20,
c: 30
}
var obj3 = {
d: 40,
f: ["hello", "world", true]
}
Object.assign(obj1, obj2, obj3);
console.log(obj1)
浅拷贝：只拷贝地址
深拷贝：将复合数据类型重新生成一份，进行拷贝
集合
集合特点：不重复、无序
-
Set
let imgs = new Set(); imgs.add(100); imgs.add(100); imgs.add("hello"); imgs.add("hello"); imgs.add(true); imgs.add(new String("hello")); imgs.add(new String("hello")); console.log(imgs); /* 输出：Set(5) [ 100, "hello", true, String, String ] 注：new String每次会创建不同的对象出来 */ -
集合遍历(for…of)
//imgs.keys for(let item of imgs.keys()){ console.log(item); } //imgs.values for(let item of imgs.values()){ console.log(item); } //imgs.entries for(let item of imgs.entries()){ console.log(item); } -
数组与集合
//数组变集合 var set= new Set([10, 20, 30, 40, 50, 30, 20, 10]); //集合变数组 var arr = [...set]; //数组去重 var arr = [10, 20, 30, 40, 50, 40, 30, 20, 10]; arr = [...new Set(arr)]; -
Map映射
let map = new Map(); map.set("张三", "团员"); map.set("李四", "群众"); map.set("王五", "党员"); map.set("李四", "学生"); console.log(map); //输出：Map(3) { "张三" → "团员", "李四" → "学生", "王五" → "党员" } //取值 map.get("王五"); //遍历 for(let [key, value] of map){ console.log(key, value); }
注：Set集合里面键和值是一样的，Map集合里面键和值是不一样的
构造函数
-
当使用new运算符去调用一个函数时
1、当前函数中的this指向新创建的对象
2、自动去完成原料(this = new Object)和出厂(return this)操作
-
通过new调用的函数一般称为构造函数，构造函数可以构造对象
注：构造函数一般情况下首字母大写
prototype原型
prototype 原型对象
概念：每一个函数上，都有一个原型对象prototype
将方法添加到构造函数的原型prototype对象上时，构造函数构造出来的对象将共享原型上所有方法
构造函数构造出来的对象，有一个属性_proto_，指向构造出这个对象的构造函数的原型
instanceof 关键字，判断某一个对象是否是这个构造函数构造出来的
继承
- 原型继承 (继承父一级的方法)
//<1>通过for...in遍历继承
for(var funcNamr in Dog.prototype){
Teddy.prototype[funcName] = Dog.prototype[funcName];
}
//<2>Object.create()
Teddy.prototype = Object.create(Person.prototype);
//<3>调用构造函数继承
Teddy.prototype = new Dog();
-
继承和多态是同一件事情的两种完全不同的侧重
继承侧重从父一级构造函数，继承到的属性和方法
多态侧重子一级，自己重写和新增的属性和方法
-
面向对象是一个编程思想，支撑面向对象编程思想的语法是类(ECMA6之间没有类这个概念)和对象，构造函数充当类的角色。构造函数和对象实现面向对象程序的时候，体现出继承、封装、多态的特点。
ECMA6的class语法
class Person{
constructor(name, sex, age){
this.name = name;
this.sex = this.sex;
this.age = this.age;
}
showSelf(){
alert(`我是一个叫${this.name}, 今年${this.age}岁的${this.sex}孩`);
}
}
var p1 = new Person("blue", "男"， 18)；
p1.showself();
//extends 继承
class Worker extends Person{
constructor(name, sex, age, job){
super(name, sex, age);
this.job = job;
}
}
运动框架
- 每次启动定时器之前，先将上一次定时器关闭
- if … else 将运动和停止分开
回调函数
将函数当做参数传入，并且在合适的地方调用的方式，叫做回调函数。(C语言中的函数指针)
服务器
-
服务器 Apache这个软件运行在你的电脑上，那么你电脑上某一个磁盘就对外可见，别人可以通过IP或者域名访问到这个位置。
-
服务器：资源提供方
客户端：资源受益方
-
服务器安装：(集成开发环境)
- WAMP(windows + apache + mysql + php)
- LAMP(linux + apache + mysql + php)
- PHPnow(apache + mysql + php)
-
PHPnow/htdocs 服务器的根目录
localhost 直接访问本地电脑服务器
127.0.0.1 直接访问本地电脑服务器
IP 访问当前电脑的服务器
PHP语法
-
输出
<?php header('content-type:text/html;charset="utf-8"'); /* 注：PHP代码兼容html和css所有的代码 Php的输出函数 如果语句中含有标签会自动解析 */ echo "<h1>hello</h1>"; echo("<h1>hello</h1>"); print_r("<h1>hello</h1>"); /* 类似于js中的console.log() */ var_dump(100); var_dump("hello"); ?> -
定义变量
/* php声明变量通过$符号进行声明 弱引用类型：给变量赋值什么数据，就是什么数据类型 */ $username = "钢铁侠"; $age = 18; -
字符串拼接
/* 字符串拼接： 不用加号，用. 用占位符的方式进行拼接{变量/表达式} */ echo "我是".$username.",今年".$age."岁<br/>"; echo "我是{$username},今年{$age}岁<br/>"; -
分支语句
-
循环
for($i = 0; $i < 5; $i++){ echo "下标".$i."<br/>"; } -
函数
function printHello(){ print "hello<br/>"; } printHello(); printHello(); -
数组
- 索引数组：下标是数字的数组
- 关联数组(键值数组)：下标是字符串(类似于ECMA6的map类型)
- 全局数组：
- $_GET 接收通过get提交过来的所有的数据
- $_POST 接收通过post提交过来的所有数据
数组中的索引数组和关联数组可以相互结合，结合成多维数组
//1、索引数组 $cars = array("大众", "别克", "现代"); var_dump($cars); echo $cars[1]; for($i = 0; $i < count($cars); $i++){ echo "下标:{$i}, 数据:{$cars[$i]}<br/>"; } //2、键值数组 $arr = array("王五" => "打渔的", "李四" => "种地的", "张三" => "打猎的"); var_dump($arr); foreach($arr as $key => $value){ echo "下标:{$key}, 数据:{$value}<br/>"; } //3、二维数组 $arr = array( array("name" => "小白", "english" => 100, "math" => 50), array("name" => "小花", "english" => 60, "math" => 80), array("name" => "小红", "english" => 100, "math" => 100) ); echo $arr[2]["math"];
AJAX
-
Asynchronous JavaScript and XML 异步JavaScript和XML
-
xml数据传输格式
优点：种类丰富、传输量非常大
缺点：解析麻烦、不太适合轻量级数据
-
json数据传输格式(字符串)
优点：轻量级数据、解析比较轻松(JSON.parse()、JSON.stringify())
缺点：数据种类比较少、传输数据量比较少
同步和异步
同步：阻塞，当前程序是否运行必须等待前一个程序运行完毕以后才能运行
异步：非阻塞，当前程序运行和前面程序的运行没有任何关系
ajax是前后端数据交互的搬运工，都可以异步执行。
ajax语法
-
下载数据
/* XMLHttpRequest IE8以下不兼容 IE8以下声明ajax方法是：ActiveXObject("Microsoft.XMLHTTP") */ //1、创建ajax对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //2、调用open /* 第一个参数： 请求方式 get post 第二个参数：url 第三个参数： 是否异步 true 异步 false同步 */ xhr.open("get", "1.txt", true); //3、调用send xhr.send(); /4、等待数据响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ lert(xhr.responseText); } } -
try_catch
/* try{ 尝试执行的代码 }catch(error){ error 错误对象，try括号中代码执行的异常信息; 补救代码; } 执行过程： 1、先去执行try中的代码 2、如果try中的代码执行正常，catch中的代码就不执行了 3、如果try中的代码执行异常，直接执行catch中的代码进行补救 【注】更多的用在代码调试和后期维护。 try_throw_catch throw 手动抛出异常 格式： try{ 尝试执行的代码 throw new Error("异常信息文本") }catch(error){ error 错误对象，try括号中代码执行的异常信息; 补救代码; } */ try{ alert("异常信息之前"); alert(num); alert("异常信息之后"); }catch(error){ alert("补救代码，Error:" + error); }var xhr = null; try{ hr = new XMLHttpRequest(); }catch(error){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } -
onreadystatechange
/* readystatechange 事件类型 xhr.readyState 发生变化的时候调用 0 调用open方法之前 1 调用你send方法之后，发送请求 2 send方法完成，已经接受到所有的响应内容 3 正在解析下载到的数据 4 解析完成 */ xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ //判断本次下载的状态码都是多少 if(xhr.status == 200){ alert(xhr.responseText); }else{ alert("Error:" + xhr.status); } } }
form表单的get、post请求
<body>
<!--
action 点击submit以后跳转到的url
method 表单的提交数据的方式
get(默认)
http://localhost/code14/1.get.php?username=xxxx&age=18&password=123abc
提交方式：是直接将数据拼接在url后面进行提交，通过?进行拼接，查询字符串
好处： 简单
缺点：
1、不安全
2、最大2kb
3、没法实现上传
post
提交方式：post提交通过浏览器内部进行提交。
好处：
1、安全
2、理论上没有上限
3、上传
缺点：比get复杂
-->
<form action="1.get.php" method = "get">
<input type="text" name = 'username' placeholder="用户名"/>
<input type="text" name = 'age' placeholder="年龄"/>
<input type="text" name = 'password' placeholder="密码"/>
<input type="submit"/>
</form>
<form action="1.post.php" method = "post" enctype="application/x-www-form-urlencoded">
<input type="text" name = 'username' placeholder="用户名"/>
<input type="text" name = 'age' placeholder="年龄"/>
<input type="text" name = 'password' placeholder="密码"/>
<input type="submit"/>
</form>
</body>
Ajax的get与post
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "1.get.php?username=yyy&age=19&password=123abc", true);
xhr.send();
xhr.open("post", "1.post.php", true);
//必须在send方法之前，去设置请求的格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
/*
post提交的数据，需要通过send方法进行提交
?name1=value&name2=value2 search
name1=value&name2=value2 querystring
*/
xhr.send("username=yyy&age=19&password=123abc");
封装的ajax函数
/*
method
url
data
success 数据下载成功以后执行的函数
error 数据下载失败以后执行的函数
*/
function $ajax({method = "get", url, data, success, error}){
//1、创建ajax对象
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//判断如果数据存在
if(data){
data = querystring(data);
}
if(method == "get" && data){
url += "?" + data;
}
xhr.open(method, url, true);
if(method == "get"){
xhr.send();
}else{
//必须在send方法之前，去设置请求的格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
//4、等待数据响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//判断本次下载的状态码都是多少
if(xhr.status == 200){
/*
如何去处理数据操作不确定
回调函数
*/
if(success){
// alert(2);
success(xhr.responseText);
}
}else{
if(error){
error("Error:" + xhr.status);
}
}
}
}
}
function querystring(obj){
var str = "";
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
JSON对象
- JSON.stringify() 数据结构 => 字符串
- JSON.parse() json格式字符串 => 数据结构
- json_encode() 将数据结构转成字符串(PHP)
- json_decode() 将字符串转成对应的数据结构(PHP)
MySQL
http://localhost/phpMyAdmin/index.php
-
登录mysql
mysql -u root -p
-
终止当前程序
Ctrl + C
-
查看数据库
show database;
-
创建一个名为db1的数据库
create database db1;
-
创建一个使用utf-8字符集的db2数据库(默认jdk编码)
create database db2 character set utf8;
-
选择数据库
use db2;
-
创建表
CREATE TABLE 表名(
字段名1 数据类型，
字段名2 数据类型，
…
)character set 字符集 collate 校对规则;
字段 属性 create table employee( id 整形 id int unsigned， name 字符型 name varchar(100) not null default"", sex 字符型或者bit型 sex char(3) not null default"", brithday 日期型 brithday date, job 字符型 job varchar(30) not null default"", salary 小数型 salary float not null default 0.0, resume 大文本型 resume text)character set utf8; -
查看当前数据库下的表
show tables;
-
查看表结构
desc 表名;
-
插入数据
INSERT INTO 表名(字段1, 字段2,…) VALUES(具体的值1, 具体的值2…);
-
更新数据
UPDATE 表名 SET 字段名1 = 新值, 字段名2 = 新值… WHERE 条件;
-
删除数据
DELETE FROM 表名 WHERE 条件;
注：delete只能删除表中的数据
-
删除整张表
drop table 表名;
-
删除数据库
DROP DATABASE [IF EXISTS] db_name;
注：IF EXISTS可选的，如果存在就删除，不存在不删除
-
-
查找数据
SELECT * FROM 表名;
PHP连接MySQL
<?php
header("Content-type:text/html;charset=utf-8");
/*
链接数据库 天龙八部
*/
//1、链接数据库
/*
第一个参数：链接数据库的IP/域名
第二个参数：用户名
第三个参数：密码
*/
$link = mysql_connect("localhost", "root", "123456");
//2、判断是否连接成功
if(!$link){
echo "链接失败";
exit; //终止后续所有的代码
}
//3、设置字符集
mysql_set_charset("utf8");
//4、选择数据库
mysql_select_db("yyy");
//5、准备sql语句
$sql = "SELECT * FROM students";
//6、发送sql语句
$res = mysql_query($sql);
//设置表头
echo "<table border = '1'>";
echo "<tr><th>学生学号</th><th>学生姓名</th><th>英语成绩</th><th>数学成绩</th><th>语文成绩<th></tr>";
//7、处理结果
while($row = mysql_fetch_assoc($res)){
echo "<tr><td>{$row['id']}</td><td>{$row['name']}</td><td>{$row['english']}</td><td>{$row['math']}</td><td>{$row['chinese']}</td></tr>";
}
echo "</table>";
//8、关闭数据库
mysql_close($link);
?>
JSONP跨域的使用流程
- 先去声明一个函数，这个函数有一个形参，这个形参会拿到想要下载的数据，使用这个参数做后续数据的处理
- 在需要下载数据的时候，动态创建script标签，将标签src属性设置成下载数据的链接
- 当script插入到页面的时候，就会用已经封装好的函数将需要的数据传过来
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
var oScript = document.createElement("script");
oScript.src = "demo.js";
document.body.appendChild(oScript);
}
}
</script>
网络协议
-
计算机网络
ISO 7层的网络分层
通用 5层网络分层(物理层、数据链路层、网络层、传输层、应用层)
-
网络层 — IP协议
-
传输层 — TCP/UDP协议（port）
-
TCP：面向连接协议
-
建立连接 (三次握手)
三次握手：客户端发起请求，服务端反馈，客户端反馈、开始传输
-
传输数据
-
断开连接 (四次挥手)
四次挥手：客户端发起请求，服务端反馈、开始断开，服务端发送已断开，客户端断开连接并发送已断开
优点：安全，准确度高
缺点：传输效率低，消耗资源
-
-
UDP：无连接协议
不建立连接，直接传输数据，不管是否收到数据。
优点：及时性非常高，消耗资源低
缺点：不安全，准确度低，经常丢包
-
本地存储技术Cookie
-
Cookie 会话跟踪技术
-
在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态(例如：是否登录、购物车信息、是否已下载、是否已点赞、视频播放进度等等)
-
可以设置过期时间
-
最大可以存储4KB，每一个域名下最多可以存储50条数据(不同浏览器有偏差)
-
只能存储字符串，一般只存储一些重要的信息
-
火狐支持本地加载的文件缓存cookie，谷歌只支持服务器加载文件缓存cookie
-
-
cookie的语法
格式：name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure]
-
name 键
-
value 值
-
expires：过期时间
必须填写日期对象(系统会自动清除过期的cookie)
注：中括号里的内容均为可选项
- path 限制访问路径
不设置时，默认是加载当前.html文件的路径
注：设置的cookie路径，和当前文件的路径必须一致，不一致cookie将会访问失败
-
domain 限制访问域名
默认加载当前.html文件的服务器域名/ip
注：如果加载当前文件域名和设置的域名不一致，设置cookie失败
-
secure
不设置，设置cookie时可以通过http协议加载文件设置，也可以通过https协议加载文件设置
设置这个字段以后，只能设置https协议加载cookie
-
-
设置cookie
//设置cookie document.cookie = 'username=XXX'; //获取cookie alert(document.cookie); -
编码与解码
encodeURIComponent 将中文编译成对应的字符
decodeURIComponent 将对应的字符编译成中文
认识闭包
-
特点
- 函数嵌套函数
- 内部函数使用外部函数的形参和变量
- 被引用的形参和变量就不会被垃圾回收机制所回收
-
好处
- 变量常驻内存
- 避免全局变量污染
- 可以声明私有成员
立即执行函数
(function(){
alert("hello world");
})();
Gulp
-
安装node.js
-
官网下载解压
-
启动node.js
Windows键 -> Node.js文件夹 -> Node.js command prompt
-
安装node.js
npm 管理第三方包的包管理器(下载源为国外网站)
-
安装cpm(使用淘宝镜像：https://npm.taobao.org/)
Node.js command prompt命令行下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v
-
cnpm下载数据是从国内淘宝服务器上下载
-
-
安装Gulp到本地
-
全局安装Gulp
cnpm install gulp -g
gulp -v
-
进入开发项目的目录
切换盘符 D： + enter
cd 目录路径
清屏：Windows cls
-
-
初始化当前目录
cnpm init
注：会生成package.json的文件，存放当前项目的一些配置信息
-
在当前项目里面安装gulp到本地
cnpm install gulp@3.9.1 --save-dev
简化命令：cnpm i gulp@3.9.1 -D
–save 将文件安装到本地文件夹
-dev 将安装gulp的信息保存在package.json里面
-
在本地创建gulpfile.js文件，专门去给gulp编写任务
commonJS规范
require() 将这个模块引入
使用这个模块上的函数
const gulp = require("gulp"); //编写第一个任务 /* 第一个参数：任务的名字 自定义 第二个参数：回调函数，任务执行的功能 */ gulp.task("hello", function(){ console.log("hello world"); })E:\Program\PHPnow\htdocs\code\gulpDemo>gulp hello
/* gulp.src() 找到源文件路径 gulp.dest() 找到目的文件路径(若文件路径不存在，会自动创建) pipe() 程序运行管道 */ //1.整理.html文件 gulp.task("copy-html", function(){ return gulp.src("index.html").pipe(gulp.dest("dist/")) }) /* 2.静态文件 拷贝图片 */ gulp.task("images", function(){ // return gulp.src("img/*.jpg").pipe(gulp.dest("dist/images")); // return gulp.src("img/*.{jpg, png}").pipe(gulp.dest("dist/images")); // return gulp.src("img/*/*").pipe(gulp.dest("dist/images")); return gulp.src("img/**/*.{jpg, png}").pipe(gulp.dest("dist/images")); }) /* 3.拷贝多个文件到一个目录中 */ gulp.task("data", function(){ return gulp.src(["json/*.json", "xml/*.xml", "!xml/4.xml"]).pipe(gulp.dest("dist/data")) }) /* 4.一次性执行多个任务 （异步并行） */ gulp.task("build", ["copy-html", "images", "data"], function(){ console.log("任务执行完毕"); }) /* 监听 如果监听到文件有改变，会自动去执行对应的任务，更新数据 */ gulp.task("watch", function(){ /* 第一个参数，监听文件的路径 第二个参数，要执行的任务 */ gulp.watch("index.html", ["copy-html"]); gulp.watch("img/**/*", ["images"]); gulp.watch(["json/*.json", "xml/*.xml", "!xml/4.xml"], ["data"]); })
Gulp插件使用
https://gulpjs.com/plugins/
使用第三方插件步骤：
commonJS规范
-
先下载插件到本地
cnpm install 插件名字 --save-dev
简写：cnpm i -D
-
通过require()引入文件
-
查阅插件的用法
使用gulp-scss编译css文件
cnpm i gulp-sass -D
const sass = require("gulp-sass");
gulp.task("sass", function(){
return gulp.src("stylesheet/index.scss")
.pipe(sass())
.pipe(gulp.dest("dist/css"));
})
cnpm i gulp-minify-css -D
/*
压缩css gulp-minify-css
*/
const sass = require("gulp-sass");
const minifyCss = require("gulp-minify-css");
gulp.task("sass", function(){
return gulp.src("stylesheet/index.scss")
.pipe(sass())
.pipe(minifyCss())
.pipe(gulp.dest("dist/css"));
})
gulpDemo>cnpm i gulp-rename -D
const sass = require("gulp-sass");
const minifyCss = require("gulp-minify-css");
const rename = require("gulp-rename");
gulp.task("sass", function(){
return gulp.src("stylesheet/index.scss")
.pipe(sass())
.pipe(gulp.dest("dist/css"))
.pipe(minifyCss())
.pipe(rename("index.min.css"))
.pipe(gulp.dest("dist/css"));
})
gulp处理js的插件
cnpm i gulp-concat -D
cnpm i gulp-uglify -D
/*
处理js文件的插件
gulp-concat 合并文件
gulp-uglify 压缩.js文件
*/
const concat = require("gulp-concat");
const uglify = require("gulp-uglify");
gulp.task("scripts", function(){
return gulp.src("javascript/*.js")
.pipe(concat("index.js"))
.pipe(gulp.dest("dist/js"))
.pipe(uglify())
.pipe(rename("index.min.js"))
.pipe(gulp.dest("dist/js"));
})
同时启动监听和服务
启动一个服务器
E:\Program\PHPnow\htdocs\code\gulpDemo>cnpm i gulp-connect -D
/*
处理js文件的插件
gulp-concat 合并文件
gulp-uglify 压缩.js文件
*/
const concat = require("gulp-concat");
const uglify = require("gulp-uglify");
gulp.task("scripts", function(){
return gulp.src("javascript/*.js")
.pipe(concat("index.js"))
.pipe(gulp.dest("dist/js"))
.pipe(uglify())
.pipe(rename("index.min.js"))
.pipe(gulp.dest("dist/js"))
.pipe(connect.reload());
})
/*
监听 如果监听到文件有改变，会自动去执行对应的任务，更新数据
*/
gulp.task("watch", function(){
/*
第一个参数，监听文件的路径
第二个参数，要执行的任务
*/
gulp.watch("index.html", ["copy-html"]);
gulp.watch("img/**/*", ["images"]);
gulp.watch(["json/*.json", "xml/*.xml", "!xml/4.xml"], ["data"]);
gulp.watch("stylesheet/index.scss", ["sass"]);
gulp.watch("javascript/*.js", ["scripts"]);
})
/*
gulp-connect 启动一个服务器
*/
const connect = require("gulp-connect");
gulp.task("server", function(){
connect.server({
root: "dist", //设置根目录
port: 8888,
livereload: true //启动实时刷新功能
})
})
//同时启动监听和服务
// default 可以在控制台通过gulp命令启动
gulp.task("default", ["watch", "server"]);
模块化开发之宽放大模式
var moduleA = (function(mod){
var count = 10; //私有变量
function showA(){ //私有函数
count += 20;
alert(count);
}
function showB(){
count *= 10;
alert(count);
}
mod.outA = showA;
mod.outB = showB;
//对外暴露
return mod;
})(moduleA || {});
var moduleA = (function(mod){
function showC(){
alert("hello world");
}
mod.outC = showC;
return mod;
})(moduleA || {});
模块化开发规范
-
CommonJS规范（服务器）编写代码
//声明: module.exports = { outA: showA, outB: showB } //引入：（同步执行） ar moduleA = require('moduleA.js'); moduleA.outA(); moduleA.outB(); -
AMD规范：(客户端/浏览器）
//声明： define(function(){ //代码 return { outA: showA, outB: showB } }) //引入：（异步执行） require("moduleA.js", function(moduleA){ //这里的代码。模块引入之后执行。 moduleA.putA(); moduleA.outB(); }) -
ECMA6（模块化规范）
//声明： export = { outA: showA utB: showB } //引入： import moduleA from "moduleA.js" moduleA.outA(); moduleA.outB();
模块化框架require.js
require.js：遵从AMD规范的一个模块化的js文件
<!--
模块化开发的作用域：管理当前页面上引入的所有.js文件的。
defer async = 'true' 引入的所有.js文件都是异步加载
data-main = "" 设置入口文件
【注】每一个.html文件都要一个入口文件，入口文件：管理当前.html页面使用所有的.js代码
【注】后续引入的所有.js，后缀都可以省略。
-->
<script src = 'js/require.js' async = 'true' defer data-main = 'js/main'></script>
main.js
/*
引入模块 遵从AMD规范
第一个参数，必须是数组
可以配置路径，在引入模块的时候就不用写路径了
*/
require.config({
paths: {
// 自定义模块的名字: 引入模块的路径
add: "demo/add",
mul: 'demo/mul'
}
})
require(["add", "mul"], function(addObj, mul){
var res = addObj.outAdd(10, 20);
alert(res);
addObj.outShow();
alert(mul.mul(10, 20));
})
add.js
define(function(){
function add(x, y){
return x + y;
}
function show(){
console.log("hello world");
}
function ccc(){
console.log("在mul中要去使用的函数")
}
// 对外暴露
return {
outAdd: add,
outShow: show,
ccc: ccc
}
});
mul.js
define(["add"], function(add){
function mul(x, y){
add.ccc();
return x * y;
}
return {
mul: mul
}
})
注：
require.config({
paths: {
"jquery": "jquery-1.11.3",
"jquery-cookie": "jquery.cookie",
'parabola': "parabola",
"index": "index",
"banner": "banner"
},
shim: {
//设置依赖关系 先引入jquery.js 然后在隐去jquery-cookie
"jquery-cookie": ["jquery"],
//声明当前模块不遵从AMD
"parabola": {
exports: "_"
}
}
})
CSS预处理器
Sass
LESS
scss编译环境配置
-
通过Ruby安装包
-
gulp插件上的scss编译环境
-
打开Node.js command prompt进入sass项目文件目录
-
cnpm init
-
cnpm i gulp@3.9.1 -D
-
cnpm i gulp-sass -D
-
gulpfile.js
const gulp = require("gulp"); const scss = require("gulp-sass"); /* 编写任务，编写.scss文件 */ gulp.task("scss", function(){ return gulp.src("*.{sass,scss}") .pipe(scss()) .pipe(gulp.dest("dist/css")); })
-
sass与scss的区别
- 文件拓展名不同
- 语法书写方式不同
- sass在编译时，不能有大括号、分号，通过严格的代码缩进进行编码
- scss在编译时，可以有大括号、分号，使用方式与css语法方式基本一样
- 一种东西，版本不一，sass古老版本
sass语法
-
声明变量
//普通变量 $xxx: 100px //默认变量，只要有赋新值，值为新值，无论顺序 $yyy: 300px; $yyy: 200px !default; #div{ width: $xxx; height: $yyy; } //全局变量 $color: red; #div2{ color: $color; //局部变量 $color: orange; //局部变量 -> 全局变量 $color: orange !global; .box{ background-color: $color; } } /* 特殊变量 #{表达式/变量};进行字符串拼接 类似JS中的ECMA6 ${}; */ $zzz: top; #div4{ border-#{$zzz}: 1px solid black; } -
选择器嵌套
#div1{ width: 100px; .box{ height: 200px; } a{ background-color: red; //& 父级元素选择器 &:hover{ //#div1 a:hover color: orange; background-color: blue; } } } -
属性嵌套
#div1{ border:{ left:{ width: 1px; style: solid; color: red; } } } -
混合
/* 混合 类似于C语言中的宏定义 混合 代码块(不是函数) @mixin 混合名字{} @include 混合名字 可以选择有参数或者无参数 */ @mixin center-block { margin-left: auto; margin-right: auto; } //清除浮动 @mixin clearBoth{ content: ""; display: block; height: 0px; clear: both; overflow: hidden; visibility: hidden; } //带参数的混合 @mixin xxx($padding: 30px, $border: 1px solid black){ border-right: $border; border-top: $border; padding-left: $padding; } #div1{ @include center-block; } #div2{ @include xxx; .box1{ @include xxx(50px); } .box2{ @include xxx(50px, 3px dashed red); } .box3{ @include xxx($border: 5px dashed orange); } } -
继承
/* @extend 进行继承 */ .btn{ width: 200px; height: 50px; } .btn-primary{ @extend .btn; background-color: green; } -
引入公共样式
/* 声明公共样式： 标准: _base.scss、_mixin.scss; 引入: @import "base" */ @import "base"; @import "mixin"; #div1{ @include clearBoth; } -
注释
// 普通注释 不会显示在.css文件中 /* 多行注释 会出现在.css文件中，不会出现在压缩版本里 */ /*! 强制注释 在任何版本下都会保留 */ -
数据类型
-
数字(例如： 1.2, 13, 10px)
-
字符串(例如：“foo”, ‘bar’, baz)
-
颜色(例如：blue, #04a3f9, rgba(255, 0, 0, 0.5))
-
布尔值(例如： true, false)
-
空值(例如： null)
-
列表(list)，用空格或逗号分隔 (例如：c 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
-
映射(例如： (key1: value1, key2: value2)) map映射 键->值
-
-
数字&数字函数
abs()
round()
ceil()
floor()
percentage()
min()
max()
-
控制指令(control Directives)
@if：条件控制指令
$theme: light; body{ @if $theme == dark{ background-color: black; }@else if $theme == light{ background-color: white; }@else{ background-color: gray; } }@for：循环指令
$count: 12; //包含结束位置 @for $i from 1 through $count{ .col-lg-#{$i}{ width: 100px / 12 * $i; } } //不包含结束位置 @for $i from 1 to $count{ .col-md-#{$i}{ width: 100px / 12 * $i; } }@each：循环指令
$icons: success warning error primary info; @each $icon in $icons{ .icon-#{$icon}{ background: url(images/#{$icon}.png) no-repeat; } }@while：循环指令
$num: 6; @while $num > 0{ .item#{$num}{ width: 1em * $num; } $num: $num - 1; } -
sass映射map(map 就是列表项目中带名称的列表)
$map：(key1:value1, key2:value2, key3:value3)
$var(key1:value1, key2:value2…):声明一个 Map
length($map):获取 map 中的元素对个数
map-get( m a p , k e y ) : 获 取 map, key):获取 map,key):获取map 中名称为 key 的值
map-keys( m a p ) : 获 取 指 定 map):获取指定 map):获取指定map 中所有的 key
map-values( m a p ) : 获 取 指 定 map):获取指定 map):获取指定map 中所有的 value
map-has-key( m a p , k e y ) : 判 断 在 map, key):判断在 map,key):判断在map 中是否包含指定的 key
map-merge($map1, m a p 2 ) : 将 map2):将 map2):将map1 和$map2 合并在一起
map-remove( m a p , k e y ) : 将 指 定 名 称 的 k e y 从 map, key):将指定名称的 key 从 map,key):将指定名称的key从map 中移除
-
函数
$colors: (light: white, dark: black); //函数声明 @function color($key){ @if not map-has-key($colors, $key){ //警告不会中断scss监听 //@warn "there is no"; //error不会中断scss监听 @error "there is no"; } @return map-get($colors, $key); } //函数调用 body{ background-color: color(light); }
版本控制工具-git安装准备
-
安装git客户端
git bash 支持Linux命令的git控制台
git CMD 支持windows命令的控制台
git GUI git可视化界面
-
GitHub官网注册账号
Git命令操作
打开Git Bash
-
cd 路径 进入项目目录下
-
配置git基本操作
git config --global user.name “你的git名称”
git config --global user.email “你的git验证邮箱”
git init 在本地进行初始化(建立暂存区)
注：.git 文件存储当前项目的所有版本信息
-
工作区 => 暂存区
git add 文件名
git add * 提交所有文件
git commit -m “这一次提交的描述”
-
查看是否提交成功，查看当前工作区的状态
git status
-
从暂存区恢复文件到工作区
git checkout 文件名
-
查看修改内容，工作区与暂存区版本的区别
git diff
-
清屏操作
clear
-
查看已经提交过的历史版本
git log
-
恢复文件到指定的某一个版本
git reset --hard HEAD^ 退回到上个版本
git reset --hard HEAD^^ 退回两个版本
git reset --hard 版本号 退回到上个版本
-
暂存区 => 远程仓库
ssh-keygen -t rsa -C “邮箱地址” 生成ssh密匙
查找文件：我的电脑 => 用户 => 用户名文件夹 => .ssh(隐藏文件) => xxx.pub(存有密匙)
GitHub账户配置密匙
提交仓库地址：git remote add origin 仓库地址
git push -u origin master
-
从远程仓库克隆项目到本地
git clone 仓库地址
-
从远程仓库拉项目到本地(更新)
git pull
本地仓库、暂存区、远程仓库搭建好之后的提交：
git add *
git commit -m description
git push
补充知识点
  半角空格
&ensp 圆角空格
parseInt() 取整
Math.ceil() 向上取整
data.toFixed(2) 保留几位小数
window.onload = function(){
写在这里代码，是整个页面加载完成以后运行的(固定格式)
}
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
