HYML / CSS和Javascript 部分
1 CSS实现垂直水平居中javascript
HTML结构：java
<div class="wrapper">node
<div class="content"></div>canvas
</div>数组
CSS：浏览器
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素须要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
2 简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式 .
同步就是指一个进程在执行某个请求的时候，若该请求须要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；服务器
异步是指进程不须要一直等下去，而是继续执行下面的操做，无论其余进程的状态。当有消息返回时系统会通知进程进行处理，这样能够提升执行的效率。app
3 Javascript 部分异步
javascript的简史
1995年的时候，有网景公司开发，当时名字叫LiveScript，为了搭Java的顺风车，更名为javascript
与此同时，微软所以在自身的浏览器里，也推出了本身的脚本语言jscript
1997年的时候，由ECMA出面，推出了一套javascript的规范，提出js由三部分组成
ECMAScript
基础语法
DOM
文档对象模型
BOM
浏览器对象模型
2003年以前，网易界面上的弹窗广告几乎都是由js作的，被人称做牛皮藓
2004年的时候，JS的命运发生改变，
2007年的时候，苹果公司推出的手机，能够用来上网
2010年的时候，H5的出现，canvas又推高了js的地位
2011年的时候，node.js将js语言伸向后服务器端
js语言特性
是世界上使用最多的脚本语言
弱类型语言
动态语言
客户端的脚本语言
js书写位置
连接式
<script src=".js"> </script>
嵌入式
<script></script>
数据类型
基本数据类型
number
string
boolean
null
undefined
复杂数据类型
Date
object
Array
function
变量
变量赋值
var i=number；
var i=“string”；
命名规则
变量的命名必定要有意义
以字母(a-z大小写字母 ),"_"或$开头，绝对不能以数字开头，能够包括字母，数字，下划线，$,严格区分大小写，绝对不能使用系统中的关键字或是保留字
推荐使用驼峰命名法：如userName,hightSchool
+运算符的做用
字符串之间 ，起链接做用
数字之间，起运算做用
Typeof关键字
string
number
运算符
算术运算符
一元运算符
++ --
二元运算符
+ - * / %
关系运算符
比较运算符
> < >= <=
相等运算符
== != === !==
逻辑运算符
&& || ！
运算符的优先级
数字(算术运算符)>关系运算>逻辑运算符>赋值运算符
复合赋值运算符
将数学运算符和赋值运算符合起来一块写了
数据类型的转换
转number
隐式
+ - * / %
显示
parseInt（）
Number（）
parseFloat（）
转string
隐式
+“”
显式
.toString()
String()
转boolean类型
隐式
！！
显式
Boolean()
语言结构
顺序结构
分支结构
if
只能判断 一种状况
if（判断条件）{
要执行的代码
}
if else-if
判断两种状况
选择结构
三元表达式
表达式1 ？表达式2 ： 表达式3 ；
if - else
switch-case
多种状况的一种
if-else 和 switch-case的区别
相同点
均可实现多分支结构
不一样点
if -else if：能够处理区间范围
switch只能用于定值比较
短路运算
&&
转换为boolean类型的值为false的状况
||
转换为boolean类型的值为true的状况
！
循环结构
while
while（循环条件）{
循环体（要执行的代码）
}
do while
do{
循环体
} while （循环条件）
for
for （表达式1 ；表达式2 ； 表达式3 ）{
循环体；
}
for in
break 和 continue
break
用在switch-case ，用于跳出当前程序
用再循环当中 ，while或者for循环 ，与if搭配使用（ 做用：当即跳出当前循环，后面代码都不执行）
continue
只结束当前本次循环
数组
使用构造函数建立数组
var arr = new Array ();
arr[]=0;
使用字面量方式建立数组
var arr =[ 1,2,3,4,5,6,7];
for ( var i=0;i<arr.length; i++){
console.log(arr[i]);
}
函数
定义:
使用函数声明的方式定义
组成
function 函数名( 参数 ) {
函数体( 可执行的代码 ) ;
}
函数名
参数
返回值
形参和实参
在函数定义的时候，使用的参数叫作形参，起占位置的做用
在函数真正的调用的时候，传入的数据，才是实参
函数表达方式
声明函数
function 函数名(){
要执行的代码;
}
匿名函数
var fun =function (){
要执行的代码;
}
区别
1.函数的声明中的函数有名字
2.函数表达式中的函数没有名字，是匿名函数，前面的变量的名字能够看作是函数的名字
3 在函数预解析的时候，会先将函数声明提早到做用域的最前面，而函数表达式不会提高
4 函数声明中的函数，能够在声明以前调用，可是函数表达式的函数必须在函数表达式以后调用
return
函数中无return
默认返回值:undefined
函数中有return
return后面没有数据
返回值是:undefined
return后面有数据
该数据是返回值
函数的嵌套
定义:在一个函数里,调用另外一个函数
四种形式
无参无返回值
仅仅是代码的复用(用处比较多)
无参有返回值
仅仅是函数的调用, 没有输出语句
有参无返回值
只要没有return关键返回的数据，就没有真正的返回值，仅有默认的返回值undefined
有参有返回值
(实际用处最多)
重载
定义:函数名相同，可是函数的形参个数不一样，或者形参的数据类型不一样，这样就构成了函数的重载
注意 : JS中没有函数的重载,若是JS中有重名的函数，后面的函数会将前面的函数覆盖掉
变量的做用域
全局做用域
同一个1.5.1页面中的script标签之间的区域
全局做用域内的变量就是全局变量，在全局做用域内定义的变量是全局变量，能够在页面的任何地方访问的到(包括函数内部)
在函数内部不使用var定义的变量，也是全局变量
局部做用域
函数内部就是局部做用域
一个函数就是一个局部做用域，局部做用域 内的变量称为局部变量
特殊函数
自执行函数
两种方式
(function(){
return a;
}() );
(function(){
return a;
}) () ;
过程:
自执行函数是没有名字的，定义了以后立刻调用. 这种函数多用于一次性使用的时候 , 避免了函数名的冲突
回调函数
就是将函数作为参数进行传递
var a=10;
var fun(a){
return a+b;
}
var f2=function(a,ff){
return ff(a);
}
console.log(f2(a,fun));
内置对象
Math对象
Math.pow(a,b) a的 b 次方幂
Math.round(a) 四舍五入
Math.ceil(a) 向上取整
Math.floor(a) 向下取整
Math.PI() 圆周率
Math.abs() 绝对值
Math.sqrt(a) num开平方
Math.sin()
Math.cos()
Array对象
既能够做用于数组,
又能够做用于字符串
arr.valueOf 打印对象自己
arr.indexof() 从前面寻找该项,(后面有也再也不找),获得该项的位置
arr.lastindexof() 从后面寻找该项,(前面有也再也不找),获得该项的位置
slice ( a, b ) 截取数组(字符串)中的元素组成一个新数组(字符串)返回，原数组(字符串)不变 ,a 为索引
一个参数
从当前位置截取到最后
两个参数 b值取不到
b 值为正
从前数索引位置
b值为负
从后开始数的索引位置
arr.concat 链接两个数组或字符串
做用于数组
arr.toString 转换成字符串,且用","分割
arr.join() 数组转换成字符串
arr.unshift() 向数组前追加元素,获得数组长度
arr.shift() 删除数组第一项,获得删除数据
arr.push() 向数组后追加元素,获得数组长度
arr.pop() 删除数组最后一项,获得删除数据
arr.reverse() 翻转数组
arr.filter() 过滤 返回true的留下，返回false 过滤掉
arr.forEach() 循环遍历数组的每一项，能够遍历输出数组中的每一项及每一项的索引
splice ( a, b) 截取(删除)：会改变原数组
两个参数 删除
a : 将要删除的元素
b : 须要删除的个数
三个参数 替换
a : 将要删除的元素
b : 须要删除的个数
c : 删除后 取代添加的元素
做用于字符串
arr.split() 将字符串中的字符以某种字符 分割成数组中的元素 能够将字符串转换成数组
arr.substring( a,b ) 截取字符串中的元素组成一个新字符串返回，原字符串不变 ,a 为索引
一个参数
从当前位置截取到最后
两个参数 b值取不到
b 值为正
从前数索引位置
b值为负
从后开始数的索引位置
arr.substr( a,b ) 截取字符串中的元素组成一个新字符串返回，原字符串不变 ,a 为索引
一个参数
从当前位置截取到最后
两个参数
b值为长度
特殊用法
str.substr(-2); //传入负数，至关于传入length + (-2) 倒着截取
str.substr(2,-3); //第二个参数，若是传入负数至关于0 截取不到，为空
chatAt ( a ) 获取字符串中指定索引位置
charCodeAt () 获取字符串中指定索引位置的字符的ASCII码值
转换大小写
大写
arr.toUpperCase ( )
arr.toLocaleUpperCase ( )
小写
arr.toLowerCase ( )
arr.toLocaleLowerCase ( )
arr.trim ( ) 去除字符串先后的空格
arr.replace ( ) 替换字符串里面字符
arr.replace ( "a" ," w" ) 替换字符串里面字符
arr.replace ( /a/g ," w" ) 正则方式的所有替换
字符串 string
属性:length 是能够将字符串当作字符的数组
清空数组的三种方式
从0截取，截取整个数组
让数组的长度变为0
给数组从新赋值,使其为空数组
JS基础入门
javascript的简史
1995年的时候，有网景公司开发，当时名字叫LiveScript，为了搭Java的顺风车，更名为javascript
与此同时，微软所以在自身的浏览器里，也推出了本身的脚本语言jscript
1997年的时候，由ECMA出面，推出了一套javascript的规范，提出js由三部分组成
ECMAScript
基础语法
DOM
文档对象模型
BOM
浏览器对象模型
2003年以前，网易界面上的弹窗广告几乎都是由js作的，被人称做牛皮藓
2004年的时候，JS的命运发生改变，
2007年的时候，苹果公司推出的手机，能够用来上网
2010年的时候，H5的出现，canvas又推高了js的地位
2011年的时候，node.js将js语言伸向后服务器端
js语言特性
是世界上使用最多的脚本语言
弱类型语言
动态语言
客户端的脚本语言
js书写位置
连接式
<script src=".js"> </script>
嵌入式
<script></script>
数据类型
基本数据类型
number
string
boolean
null
undefined
复杂数据类型
Date
object
Array
function
变量
变量赋值
var i=number；
var i=“string”；
命名规则
变量的命名必定要有意义
以字母(a-z大小写字母 ),"_"或$开头，绝对不能以数字开头，能够包括字母，数字，下划线，$,严格区分大小写，绝对不能使用系统中的关键字或是保留字
推荐使用驼峰命名法：如userName,hightSchool
+运算符的做用
字符串之间 ，起链接做用
数字之间，起运算做用
Typeof关键字
string
number
运算符
算术运算符
一元运算符
++ --
二元运算符
+ - * / %
关系运算符
比较运算符
> < >= <=
相等运算符
== != === !==
逻辑运算符
&& || ！
运算符的优先级
数字(算术运算符)>关系运算>逻辑运算符>赋值运算符
复合赋值运算符
将数学运算符和赋值运算符合起来一块写了
数据类型的转换
转number
隐式
+ - * / %
显示
parseInt（）
Number（）
parseFloat（）
转string
隐式
+“”
显式
.toString()
String()
转boolean类型
隐式
！！
显式
Boolean()
语言结构
顺序结构
分支结构
if
只能判断 一种状况
if（判断条件）{
要执行的代码
}
if else-if
判断两种状况
选择结构
三元表达式
表达式1 ？表达式2 ： 表达式3 ；
if - else
switch-case
多种状况的一种
if-else 和 switch-case的区别
相同点
均可实现多分支结构
不一样点
if -else if：能够处理区间范围
switch只能用于定值比较
短路运算
&&
转换为boolean类型的值为false的状况
||
转换为boolean类型的值为true的状况
！
循环结构
while
while（循环条件）{
循环体（要执行的代码）
}
do while
do{
循环体
} while （循环条件）
for
for （表达式1 ；表达式2 ； 表达式3 ）{
循环体；
}
for in
break 和 continue
break
用在switch-case ，用于跳出当前程序
用再循环当中 ，while或者for循环 ，与if搭配使用（ 做用：当即跳出当前循环，后面代码都不执行）
continue
只结束当前本次循环
数组
使用构造函数建立数组
var arr = new Array ();
arr[]=0;
使用字面量方式建立数组
var arr =[ 1,2,3,4,5,6,7];
for ( var i=0;i<arr.length; i++){
console.log(arr[i]);
}
函数
定义:
使用函数声明的方式定义
组成
function 函数名( 参数 ) {
函数体( 可执行的代码 ) ;
}
函数名
参数
返回值
形参和实参
在函数定义的时候，使用的参数叫作形参，起占位置的做用
在函数真正的调用的时候，传入的数据，才是实参
函数表达方式
声明函数
function 函数名(){
要执行的代码;
}
匿名函数
var fun =function (){
要执行的代码;
}
区别
1.函数的声明中的函数有名字
2.函数表达式中的函数没有名字，是匿名函数，前面的变量的名字能够看作是函数的名字
3 在函数预解析的时候，会先将函数声明提早到做用域的最前面，而函数表达式不会提高
4 函数声明中的函数，能够在声明以前调用，可是函数表达式的函数必须在函数表达式以后调用
return
函数中无return
默认返回值:undefined
函数中有return
return后面没有数据
返回值是:undefined
return后面有数据
该数据是返回值
函数的嵌套
定义:在一个函数里,调用另外一个函数
四种形式
无参无返回值
仅仅是代码的复用(用处比较多)
无参有返回值
仅仅是函数的调用, 没有输出语句
有参无返回值
只要没有return关键返回的数据，就没有真正的返回值，仅有默认的返回值undefined
有参有返回值
(实际用处最多)
重载
定义:函数名相同，可是函数的形参个数不一样，或者形参的数据类型不一样，这样就构成了函数的重载
注意 : JS中没有函数的重载,若是JS中有重名的函数，后面的函数会将前面的函数覆盖掉
变量的做用域
全局做用域
同一个1.5.1页面中的script标签之间的区域
全局做用域内的变量就是全局变量，在全局做用域内定义的变量是全局变量，能够在页面的任何地方访问的到(包括函数内部)
在函数内部不使用var定义的变量，也是全局变量
局部做用域
函数内部就是局部做用域
一个函数就是一个局部做用域，局部做用域 内的变量称为局部变量
特殊函数
自执行函数
两种方式
(function(){
return a;
}() );
(function(){
return a;
}) () ;
过程:
自执行函数是没有名字的，定义了以后立刻调用. 这种函数多用于一次性使用的时候 , 避免了函数名的冲突
回调函数
就是将函数作为参数进行传递
var a=10;
var fun(a){
return a+b;
}
var f2=function(a,ff){
return ff(a);
}
console.log(f2(a,fun));
内置对象
Math对象
Math.pow(a,b) a的 b 次方幂
Math.round(a) 四舍五入
Math.ceil(a) 向上取整
Math.floor(a) 向下取整
Math.PI() 圆周率
Math.abs() 绝对值
Math.sqrt(a) num开平方
Math.sin()
Math.cos()
Array对象
既能够做用于数组,
又能够做用于字符串
arr.valueOf 打印对象自己
arr.indexof() 从前面寻找该项,(后面有也再也不找),获得该项的位置
arr.lastindexof() 从后面寻找该项,(前面有也再也不找),获得该项的位置
slice ( a, b ) 截取数组(字符串)中的元素组成一个新数组(字符串)返回，原数组(字符串)不变 ,a 为索引
一个参数
从当前位置截取到最后
两个参数 b值取不到
b 值为正
从前数索引位置
b值为负
从后开始数的索引位置
arr.concat 链接两个数组或字符串
做用于数组
arr.toString 转换成字符串,且用","分割
arr.join() 数组转换成字符串
arr.unshift() 向数组前追加元素,获得数组长度
arr.shift() 删除数组第一项,获得删除数据
arr.push() 向数组后追加元素,获得数组长度
arr.pop() 删除数组最后一项,获得删除数据
arr.reverse() 翻转数组
arr.filter() 过滤 返回true的留下，返回false 过滤掉
arr.forEach() 循环遍历数组的每一项，能够遍历输出数组中的每一项及每一项的索引
splice ( a, b) 截取(删除)：会改变原数组
两个参数 删除
a : 将要删除的元素
b : 须要删除的个数
三个参数 替换
a : 将要删除的元素
b : 须要删除的个数
c : 删除后 取代添加的元素
做用于字符串
arr.split() 将字符串中的字符以某种字符 分割成数组中的元素 能够将字符串转换成数组
arr.substring( a,b ) 截取字符串中的元素组成一个新字符串返回，原字符串不变 ,a 为索引
一个参数
从当前位置截取到最后
两个参数 b值取不到
b 值为正
从前数索引位置
b值为负
从后开始数的索引位置
arr.substr( a,b ) 截取字符串中的元素组成一个新字符串返回，原字符串不变 ,a 为索引
一个参数
从当前位置截取到最后
两个参数
b值为长度
特殊用法
str.substr(-2); //传入负数，至关于传入length + (-2) 倒着截取
str.substr(2,-3); //第二个参数，若是传入负数至关于0 截取不到，为空
chatAt ( a ) 获取字符串中指定索引位置
charCodeAt () 获取字符串中指定索引位置的字符的ASCII码值
转换大小写
大写
arr.toUpperCase ( )
arr.toLocaleUpperCase ( )
小写
arr.toLowerCase ( )
arr.toLocaleLowerCase ( )
arr.trim ( ) 去除字符串先后的空格
arr.replace ( ) 替换字符串里面字符
arr.replace ( "a" ," w" ) 替换字符串里面字符
arr.replace ( /a/g ," w" ) 正则方式的所有替换
字符串 string
属性:length 是能够将字符串当作字符的数组
清空数组的三种方式
从0截取，截取整个数组
让数组的长度变为0
给数组从新赋值,使其为空数组
对象
自定义对象
与数学运算相关的封装到了一个Math对象中
与数组操做相关的呢，封装到了Arry数组对象当中
与日期相关的，封装到了Date这个对象当中
组成
属性
方法
建立自定义对象
var student = new Object(); //用构造函数的方式建立了一个空对象
student.name = "张三"; // 属性和变量是同样的，都是用来存储数据的
student.age = 20;
student.sex = "男";
student.sayHi = function(){
console.log("我叫"+student.name+"，我今年"+student.age+"岁了，我是"+student.sex+"生");
};
student.sayHi ( ) ;
批量建立对象
建立
function createStudent(name,age,sex){
var student = new Object();// 用构造函数的方式建立了一个空对象并返回
student.name =name;
student.age = age;
student.sex= sex;
student.sayHi= function(){
console.log("我叫"+student.name+"，我今年"+student.age+"，我是"+student.sex+"生");
};
return student;//将这个对象返回
}
调用执行
var zs = createStudent("张三",25,"男");
zs.sayHi();
this方法构造函数建立对象
this关键字
在JS中，经过构造函数建立出来的对象 ，在调用方法的时候，this指代当前对象
谁调用方法，this指代谁，都是指代当前对象
new关键字
new 关键字来完成
1. 建立一个空对象
2. 将关键字this指向这个空对象
3. 执行构造函数里面的代码，给当前空对象this设置属性和方法
4. 将this这个当前对象返回
执行
建立
function Student(name,sex,age){ //首字母大写，标明是一个函数，可是是构造函数，用来建立对象
//var this = new Object();
this.name = name; // this指代当前建立出来的出来
this.age=age;
this.sex = sex;
this.sayHi = function(){
console.log("我叫"+this.name+"，我今年"+this.age+"，我是"+this.sex+"生");
};
//return student();
// return this;
}
调用执行
ar ls = new Student("李四","男",25); // 构造函数能够建立对象并返回
ls.sayHi();
对象字面量建立对象
建立
var o = { // 对象字面量
属性 : 值 ,
属性 : 20 ,
函数名 : function () {
console.log( );
}
};
console.log( o["属性"] );
调用
o [ "函数名"]
遍历
for ( var key in o ) {
console.log ( key +"===")+a[key];
}
JSON（javascript对象表示形式）
传输数组的一种数据格式，与对象字面量的区别，就是属性必定要加上 ” ”
DOM（文档对象模型，文档树模型）
Document
获取页面元素的第一种方式 : document.getElementById()
object
model
对象
自定义对象
与数学运算相关的封装到了一个Math对象中
与数组操做相关的呢，封装到了Arry数组对象当中
与日期相关的，封装到了Date这个对象当中
组成
属性
方法
建立自定义对象
var student = new Object(); //用构造函数的方式建立了一个空对象
student.name = "张三"; // 属性和变量是同样的，都是用来存储数据的
student.age = 20;
student.sex = "男";
student.sayHi = function(){
console.log("我叫"+student.name+"，我今年"+student.age+"岁了，我是"+student.sex+"生");
};
student.sayHi ( ) ;
批量建立对象
建立
function createStudent(name,age,sex){
var student = new Object();// 用构造函数的方式建立了一个空对象并返回
student.name =name;
student.age = age;
student.sex= sex;
student.sayHi= function(){
console.log("我叫"+student.name+"，我今年"+student.age+"，我是"+student.sex+"生");
};
return student;//将这个对象返回
}
调用执行
var zs = createStudent("张三",25,"男");
zs.sayHi();
this方法构造函数建立对象
this关键字
在JS中，经过构造函数建立出来的对象 ，在调用方法的时候，this指代当前对象
谁调用方法，this指代谁，都是指代当前对象
new关键字
new 关键字来完成
1. 建立一个空对象
2. 将关键字this指向这个空对象
3. 执行构造函数里面的代码，给当前空对象this设置属性和方法
4. 将this这个当前对象返回
执行
建立
function Student(name,sex,age){ //首字母大写，标明是一个函数，可是是构造函数，用来建立对象
//var this = new Object();
this.name = name; // this指代当前建立出来的出来
this.age=age;
this.sex = sex;
this.sayHi = function(){
console.log("我叫"+this.name+"，我今年"+this.age+"，我是"+this.sex+"生");
};
//return student();
// return this;
}
调用执行
ar ls = new Student("李四","男",25); // 构造函数能够建立对象并返回
ls.sayHi();
对象字面量建立对象
建立
var o = { // 对象字面量
属性 : 值 ,
属性 : 20 ,
函数名 : function () {
console.log( );
}
};
console.log( o["属性"] );
调用
o [ "函数名"]
遍历
for ( var key in o ) {
console.log ( key +"===")+a[key];
}
JSON（javascript对象表示形式）
传输数组的一种数据格式，与对象字面量的区别，就是属性必定要加上 ” ”
DOM（文档对象模型，文档树模型）
Document
获取页面元素的第一种方式 : document.getElementById()
object
model函数
- 1. Css和JavaScript
- 2. css和html第三部分
- 3. JavaScript和Ajax部分（2）
- 4. JavaScript和Ajax部分（3）
- 5. JavaScript和Ajax部分（6）
- 6. JavaScript和Ajax部分（1）
- 7. JavaScript和Ajax部分（5）
- 8. JavaScript和Ajax部分（4）
- 9. 2、$CSS部分
- 10. HTML、CSS部分
- 更多相关文章...
- • ionic 头部和底部 - ionic 教程
- • JavaScript 指南 - 网站建设指南
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Git五分钟教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。