WEB前端
2018-10-10 15:43:34 1 举报AI智能生成
web前端笔记
web前端
软件开发
模板推荐
作者其他创作
大纲/内容
JavaScript
JS简介
JavaScript是一种计算机编程语言，可以像等其他编程语言那样定义变量，执行循环等。
JavaScript代码主要执行在浏览器上，为HTML页面提供动态效果
而且JavaScript是一种脚本语言，它的代码是解释执行的，也就是解释一句代码后就会执行这句代码。
对于静态web开发，有 HTML、CSS、JavaScript、DOM，这些技术全部都是由浏览器负责执行的。如果掌握了上述技术，就可以进行大多数的静态web编程。
但是由于技术的发展和各个浏览器厂商之间的竞争、合作，静态web编程的很多技术标准并不统一。
调试&引入
JavaScript调试
js代码的执行有个特点：从上往下，解释一句执行一句，遇到错误就停止执行。
js代码调试步骤：按F12打开调试界面 > 选中Sources > 点击要调试的页面 >刷新页面 > （添加断点刷新页面）。
分支主题
引入外部js文件
可以把js代码抽取出来，通过这种方式引入：
< script type="text/javascript" src="test.js" ></script>
引入外部js文件的<script>标签内不能再写js代码，需要重新写个<script>标签，
会被忽略，也不能写成单标签形式
ECMAScript
变量声明
js是弱类型语言，弱类型并不是说数据本身没有类型，而是变量没有类型。如一个变量a，a的值既可以是字符串类型，也可以是数值类型
js使用关键字var 声明变量：var a;
或者 var a = 1.2; 或者 var a,b,c;
由于js的弱类型特点，我们可以这样编写代码：
var a = 1.2;
a = "hello";
注：js中没有int a = 1; 这种写法
数据类型
js定义了6种数据类型，其中有5种原始类型(它们本身的值不能改变)：
Boolean、Number、String、Null、undefined，和一种Object类型
Boolean：true 、 false
Number：-(253 -1) 到 253 -1 之间的实数，外加两个特殊值：
Infinity(正负无穷大，1/0=Infinity)
NaN(not a number，1*”ab”=NaN)两个特殊值(NaN类似于数据库的null,判断不能用==)
String：使用一对双引号或者单引号包裹的任意字符序列，如"abc"，'abc'
Null：null
Undefined：undefined，未定义的，var a；
Object：Object类型的值称为对象。
原始类型的值是不可改变的，比如var a = 1.2; 虽然变量a可以重新赋值，但1.2这个值本身是不可改变的（常量）。
Object类型的值是可以改变的，比如var obj = new Object()；我们可以使用 obj.name="蛋蛋"; 这种语法往对象中添加数据，也就是说对象内部的数据是可以改变的。
运算符
基本运算符
js也提供了一整套和其他编程语言相似的运算符：
算数运算符：+ - * / % (++ -- += -= *= /= %=)
比较运算符：> >= < <= == === != !==
逻辑运算符：|| && !
位运算符：| & ~ << >> >>>（了解）
字符串连接符：+
其他：typeof instanceof new
运算符的优先级和其他编程语言相似
分支主题
==与===
js有两种比较相等的方式：标准比较（==） 和严格比较（===）
严格比较：两个操作数的值以及数据类型都相同时比较结果才为true
1 === 1 结果 true； NaN == NaN：false
1 === "1" 结果 false； true < 3：true
标准比较：先把两个操作数转换为数据类型相同的值，再进行严格比较
1 == 1 结果 true
1 == "1" 结果 true
转换规则：（全部六种数据类型的转换较繁杂，只列出常见的两种转换）
Boolean和Number比较时，true转换为1，false转换为0
String和Number比较时，String值转换为相应的数值
typeof
type 类型 = 结果
typeof 用来获取操作数的数据类型，返回字符串形式的类型描述，
如 typeof 1.2 结果为 "number"
instanceof
instanceof 用来判断一个对象是否是一个类的对象
var obj = new Object();
obj instanceof Object 结果为true
123 instanceof Number 结果为true
注意：此处的第一个操作符是对象，而不是原始类型的值
new运算符
new 用来创建对象：var obj = new Object()
js还提供了一个String类，var str = new String("abc");
虽然String类的对象也是字符串，但和原始类型的字符串是有差别的
var str1 = "abc"; //str1的值是原始类型的值
var str2 = new String("abc");//str2的值是对象
str1 == str2 结果true
str1 === str2 结果false
typeof str1 结果string
typeof str2 结果object
str1 instanceof String 结果false
str2 instanceof String 结果true
所以，尽量不要使用new创建String对象
注意：new Xxx(); 可简写为new Xxx;
关键字和保留字
js关键字：js已经在使用的含有特殊含义的单词
break、case、class、catch、const、continue、debugger、default、delete、do、else、export、extends、finally、for、function、if、import、in、instanceof、let、new、return、super、switch、this、throw、try、typeof、var、void、while、with、yield
js保留字：js将来可能会使用其作为特定用途的单词
enum、await、implements、package、protected、static、interface、private、public、abstract、boolean、byte、char、double、final、float、goto、int、long、native、short、synchronized、transient、volatile
控制语句
if else
switch case
while
do while
for
for in
break
continue
return
if else：0，nul，Undefine，””，等为false，
其他非布尔值为true
for in：用 key 来遍历 obj 数组
for(var key in obj){
var value = obj2[key];
alert(key+" = " +obj2[key]);
}
函数(function)
函数简介
函数是JS中第一等的对象，它不仅具有普通对象的构造函数、属性等，最重要的是它可以被调用。
通常一个函数用来完成一个特定动作，而且可被重复调用，和那些面向对象的编程语言中的方法相似
鉴于函数在JS中的重要地位，JS提供了多种语法来声明、使用函数。
实际上声明函数就是创建js的Function类的对象。
由于JS函数的返回值和参数个数以及参数类型都很灵活，我们在调用的时候应该确保传入函数期望的参数，所以参数名最好能表名参数类型，如：sum(num1,num2,str1)
arguments
在函数体中，可以直接使用arguments数组对象，传入的所有参数都会放到这个数组中，可以类似于重载。
对若干数字求和：sum(3,4,5)
function sum(num1 , num2){
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum += arguments[i];
}
return sum;
}
参数的灵活性
sum(123，“abc”，true)
function sum2(){
..........
}
基础声明
function sum( n1 ,n2 ){
var sum = n1+n2;
return sum;
}
sum();
声明语法：
function 函数名(参数列表){
函数体
}
调用语法：函数对象()
函数名：由字母、数字、下划线或者$ 组成，并且不能以数字开头。
参数列表：函数希望接收的参数。由于js是弱类型语言，参数列表省略了var
函数体：实现特定需求的js代码。
返回值类型：声明语法中没有返回值类型，但可以使用return语句返回任意类型的值。如果没有return语句，默认返回undefined。
浏览器中的js引擎在执行js代码之前会解析并管理使用这种方式声明的函数。所以可以在这种函数声明之前就调用它。
js没有函数重载的概念，多个同名函数中，无论参数个数、名称是否一样，后声明的会覆盖先声明的。
匿名函数
JS引擎并不会事先就解析管理匿名函数，所以匿名函数不可提前调用，也不存在覆盖的情况
如果一个变量被两次赋值为匿名函数，则两次赋值后都是有效的，只不过第二次赋值时变量指向了新的函数。
匿名函数优点：短期使用，不需要时内存就释放了。
var sum = function(n1 ,n2){
var sum = n1+n2;
return sum;
}
sum(1,2);//调用此函数
声明函数：
var 变量名 = function(参数列表){
函数体
}
变量名()； //调用函数
特别的，如果把变量名也省略，可以创建一个一次性的，声明后马上调用的函数：
(function(n1 , n2 ){ return n1+n2; })(1,2);函数和参数分别被用()
原始new声明
var 变量名 = new Function(参数列表, 函数体);
//参数列表和函数体都需要是字符串
var sum = new Function("n1" ,"n2"," var sum = n1+n2;return sum;");
sum(1,2);//调用此函数
这是最原始的声明方式，但可读性很差，了解即可
高级使用
函数是个Function类的对象，那么函数不仅可以赋值给一个变量，
而且可以赋值给另一个对象的属性：
function sum(n1 , n2){return n1+n2;}
var xx = sum; //把sum函数赋值给变量xx
xx(); //调用sum函数
var obj = { };
obj.xxx = sum; //把函数sum赋值给obj对象的xxx属性
obj.xxx(); //调用sum函数
调用函数 //a()的返回值为内部函数
var xx = a(); //赋值给xx
xx(); //调用xx()，即为调用内部函数
a()(); //调用再调用
函数内部声明函数：
function a(){
return function(){
alert("hello");
}
}
js变量的作用域
在<script>标签内直接定义的变量是全局变量，对整个页面的所有js代码都有效
js预先定义了一些全局变量，比如说name，测试时候要注意
js引擎在执行代码之前，会把所有的全局变量声明放在顶部，赋值语句位置不变
在if、循环等语句中声明的变量，只要声明语句执行过，变量就会被提升为全局变量
变量可重复声明并会发生覆盖，使用变量时值为前面最后一次声明的值
在函数内定义的变量是局部变量，局部变量不会提升为全局变量，所以外面不可访问
在两个嵌套的函数中，外层函数定义的变量对内层函数有效，反之无效
在两个不是嵌套关系的函数中定义的变量对彼此都无效
特别注意嵌套函数内变量的使用（见备注）
function a(){
var i = 0;
var b = function(){
//函数声明时函数体代码并不会执行
var m = i;
alert(m);
}
i = 10; //想要输出的 i 值，可能会在调用内部函数前改变
b(); //函数执行时，函数体代码var m = i;才会执行，但此时i为10
}
a();
---------------------------------------------------------------
function a(){
var i = 0;
var b = function(){
alert(b.i);
}
b.i=i; //在i的值改变之前，把i值存储到某个地方
i = 10; //存储到 b 函数的 i 属性里，键值对
b();
}
a();
BOM
BOM 简介
BOM（rowserObjectModel）： 浏览器对象模型。
允许通过BOM访问和操控浏览器窗口，研发者通过使用BOM，可移动窗口、更改状态栏文本、执行其它不与页面内容发生直接联系的操作。
BOM是JavaScript应用中唯一没有相关标准的部分，这是BOM真正独特且经常出现问题的所在。
BOM主要处理浏览器窗口与框架，浏览器特有的JavaScript扩展都被认作是BOM的一部分。
由于BOM没有相关标准，每个浏览器都有其自己对BOM的实现方式。BOM有窗口对象、导航对象等一些实际上已经默认的标准，但对于这些对象和其它一些对象，每个浏览器都定义了自己的属性和方式。
JS预定义
js的预定义类和预定义对象：
js已经预先定义好了一些类和对象供我们使用
预定义类：Object、Number、String、Boolean、Null、
Undefined、Array、Function、Date、Math、RegExp 等
预定义对象：arguments数组对象、和一些全局函数对象
如：parseFloat()、parseInt()、eval()、isNaN()、isFinite()等
JavaScript是基于对象的编程语言，但并不是典型的面向对象的编程语言。
Object 类
Object是js最基本的类，用来创建【普通对象】，通常用这些对象【存储数据】
创建方式：var obj = new Object();
添加属性（数据）：obj.age = 18；:：”age”=18
obj.name = "蛋蛋"；存入键值对：”name”=”蛋蛋”
获取属性值：var name = obj.name; 或者var name = obj["name"]
遍历属性：for( var key in obj ) {
var value = obj[key] }
JSON方式
还有另一种创建对象的方式：
var obj = { } ;
var obj2 = {"name":"蛋蛋" , "age":24} ;
这种方式称为：JSON (JavaScript Object Notation)，即js表示对象的方式
JSON格式的数据可被js直接识别为js对象，因为js在内存中就是这么表示对象的。
JavaScript对象（键值对）:
var person= {name:'rupeng','age':8};
JavaScript数组：
var names = ['rupeng','qq','taobao'];
JavaScript对象数组：
var persons = [{'name':'rupeng',age:8}, {name:'qq',age:15}];
JavaScript对象关联：
var p = {'name':'yzk',child:{name:'timi',age:1}};
var aa2 ={name:'yzk','child':{'name':'timi',mother:{name:'fiona',age:18}}};
JSON格式语法：
1、一个对象由一对 { } 花括号表示。
2、对象中可以包含若干键值对数据，key必须是String类型的值，value可以是任意类型的值。
3、在一些不严格写法中，可以省略key两边的双引号或单引号，但绝不建议这么做。
4、一个键值对内部使用 : 冒号分隔key和value，不同键值对之间使用 , 逗号分隔
5、特别的，一个数组对象使用一对 [ ] 中括号表示，数组元素可以是任意类型的值。
Array 类
var arr = [ "蛋蛋", true , 16 ,{“name”=”蛋蛋”,”age”=18}];
vat arr = new Array();
数组长度可变：arr[100]=1;当数组长度小于100时,之间的空白被undefined填充
数组对象的特点是支持索引操作：通过arr[index] 方式存取元素
数组有个length属性，表示元素个数（实际上length值为最大索引值+1）
建议使用for循环遍历数组元素：
for(var i=0; i<arr.length ; i++){ var element = arr[i]; }
Array类还提供了很多方法来操作元素：
push() 在末尾添加元素 arr.push(20);
unshift() 在开头添加元素
pop() 删除末尾元素 arr.pop();
shift() 删除开头元素
注意：数组也支持普通对象的那套操作方式，但不建议这么做
String 类
无论是原始类型的String值还是String类的对象，都有下面的属性和方法：
length 属性： 此字符串的字符个数
charAt( number ) 获取指定索引位置的字符串
concat(string) 拼接字符串，效果等同于+字符串连接符
indexOf(string) 返回指定字符串在此字符串中首次出现的索引位置
lastIndexOf(string) 同上，没找到返回 -1
replace(string1,string2) 返回，使用string2替换string1 一次
substring(number1,number2) 返回 [ number1 , number2 ) 索引范围的子字符串
split(string) 返回切指定字符串切分后的字符串数组，前后都可能会切出空字符串
trim() 剪去两端的空白字符 注：var strs = s.split("c"); strs[0],strs[1]...
var s1 = new String("abc") ； var s2 = "abc"
s1.length ； s2.concat(s1) ； var s = "abc".replace("b", "pp")
String 类的对象； 原始类型 String 值； String 直接调用
Date 类
Date类用来处理日期和时间，基于1970年1月1日（世界标准时间）起的毫秒数（时间戳）
有多种方式创建日期对象：
var now = new Date(); //当前时间
var date = new Date(1000); // 1970年1月1日起过了1秒钟的时间
var date = new Date(year , month , day ,hour , minute , second , millisecond);
//通过分别指定各个时间分量来创建日期对象（年、月、日、时、分、秒、毫秒）
Date提供的方法
getTime() 获取一个Date对象所基于的时间戳
此外还提供了一系列getter/setter方法来操作各个时间分量，如getHours()
get Fullyear：年； get Date：日； get Day：星期；
注：除了getMonth()（获取月份）的返回值是从0开始的，其余都是从1开始
Math 类
Math类 可以用来执行数学任务，但它没有构造函数，所有不能创建对象，但是它可以直接调用函数或属性，和其他编程语言的静态类有些相似。
常用属性：
Math.E 欧拉常数，也是自然对数的底数, 约等于 2.718
Math.LN2 2的自然对数, 约等于0.693
Math.PI 圆周率，一个圆的周长和直径之比，约等于 3.14159
常用方法：
Math.abs(x) 返回x的绝对值
Math.ceil(x) 返回 x向上 取整后的值
Math.floor(x) 返回 x向下 取整后的值
Math.round(x) 返回四舍五入后的整数
Math.max(n1,n2 ...) 返回0个到多个数值中最大值
Math.min(n1,n2...) 返回0个到多个数值中最小值
Math.pow(x,y) 返回x的y次幂
Math.random() 返回0到1之间的伪随机数
Math.sin(x) 返回正弦值
RegExp 类
var reg = /ab/i;
String str = “abcfsbc”;
var p = reg.test(str);
var arr = reg.exec(str);
两种方式创建正则对象：
var reg = new RegExp(pattern , flags) // RegExp(“ab”,“g”)
var reg = /pattern/flags // = /ab/g
flags 如果为g,表示全局匹配，如果为 i ,表示忽略大小写
RegExp提供了两个常用方法：
test()： 测试一段文本是否和此正则表达式匹配
exec(): 可获得一段文本中和正则匹配的部分（返回值是一个数组或者 null）
exec() 返回的数组元素的属性：[0]： 匹配到的字符串；
index： 匹配到字符串的索引位置； input： 原始字符串
注：一次只能返回一个匹配的字符串及其属性，全部取出需要全局匹配和while方法
var arr; 遍历取出所有符合的字符串
while(arr = reg.exec(str)){
alert(arr.index+"---"+ arr[0]);
}
正则的 全局匹配 达到 replaceAll 的效果
var reg2 = /bc/g;
var str = "abcabcabc";
var s2 = str.replace(reg2,"mm");
window 类
window对象
在JavaScript中，无论是全局变量还是函数，都是window对象的属性。是JS的顶层对象。
window对象表示整个浏览器窗口，不仅仅js内容，整个HTML页面（包括所有元素和CSS内容）也都在window对象的管理之下。
浏览器每打开一个标签页面就会创建一个window对象，浏览器窗口有时候会打开多个页面，也就对应多个window对象，每个window对象几乎互不影响。
除此之外window对象还提供了另外一些全局对象。
window的全局属性
location地址栏对象
href 属性
reload() 重新加载页面
screenX 浏览器左边框距显示屏左边界的距离
screenY 上边框
document 页面文档对象，表示一个html页面
window的全局函数
alert() 对话框
confirm() 确认对话框
prompt(s1,s2) 输入框，s1提示信息，s2默认内容
close() 关闭当前页面
open() 打开页面，参数为url等信息
定时器
var i = 0;
var id = setInterval(function(){
alert(new Date());
i++;
if(i==5){
clearInterval(id);
}
} , 1000);
setInterval()；设置重复定时器
var id = setInterval(alert("a"),1000);
第一个参数为 执行的代码；第二个参数为 间隔时间毫秒
clearInterval()；关闭定时器
clearInterval(id);
关闭指定 返回值的 重复定时器
setTimeout(function(){
alert("xx");
},1000);
setTimeout()；设置执行一次的定时器
clearTimeout()；关闭定时器
DOM
DOM 简介
DOM（Document Object Model）： 文档对象模型
DOM不是java或者javascript，是一组用来描述脚本怎样与结构化文档进行交互和访问的Web标准.描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。
DOM思想使用节点树(node tree)的概念来描述一个HTML页面，页面中的每一个元素、属性、文本都被认为是节点。此外，DOM还定义了一系列编程接口（DOM API），用来操作页面的任意一部分内容。
DOM 内容包括： DOM思想、DOM API 和 DOM事件机制
DOM API 可以查找获取元素、创建新元素、对元素内容进行增删改
DOM事件机制可以让我们针对用户的各种操作进行处理，增加用户的交互体验
在 js + DOM编程中，一般的编程思路是这样的： 由js基本语法控制程序的执行逻辑，由DOM API进行元素的查找获取，进而再对元素进行增删改等操作。
DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。
DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。
另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instrUCtion和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。
HTML页面中的主要节点有四种：文档节点、元素节点、属性节点、文本节点。
DOM API提供了一个Node父接口表示任意类型的节点，同时提供了两个子接口：
Document、Element分别表示整个文档和元素节点
(当然，还提供了其他类型的子接口，如DocumentType、Attr、Text等)
一个HTML元素可以有多个属性、子元素，也可以有文本内容，统称为元素内容。
DOM API为HTML的每个标签都提供了一个类，如<div>标签对应的是HTMLDivElement类，这些类都是Element的子类。
Element提供了若干属性和方法来操作元素内容。
document 对象
document 对象简介
document对象是window对象的一个属性
document对象表示整个HTML页面，是DOM的核心对象
document对象是连接JavaScript和DOM的桥梁，使得我们可以在JavaScript环境中操作页面内容
document对象提供了查找获取元素节点的方法，所以document是DOM的编程入口，此外还提供了创建新节点的方法
获取元素对象
document对象提供了三个方法来查找获取想要的元素对象：
Element getElementById(string) 根据元素的id属性值获取元素
NodeList getElementsByTagName(string) 根据元素的标签名获取元素
NodeList getElementsByName(string) 根据元素的name属性值获取元素
nodeList.length 包含的元素个数
nodeList.item(index) 获取指定索引位置的元素
注意：NodeList是动态更新的，即如果删除的元素也在NodeList里面，那么也同时从NodeList里面删除
var divElement = document.getElementById("div01");
var pElements = document.getElementsByTagName("p");
var elements = document.getElementsByName("xx");
for(var i=0;i<pElements.length;i++){
var pElement = pElements.item(i);
alert(pElement);
}
创建添加元素
document.createElement(tagName) // 根据元素标签名称创建元素节点
element.appendChild(node) //添加子节点
注：document创建出的新节点需要添加到一个Element中才属于页面的内容
//1 创建出新元素
var divElement = document.createElement("div");
//2 获取元素
var div01 = document.getElementById("div01");
//3 把新创建的元素添加到div01里面
div01.appendChild(divElement);
element 对象
操作元素的属性
有两种方式操作元素的属性：
直接使用 element.attrName 的方式操作属性值
var attrValue = element.attrName; //获取属性值
element.attrName = attrValue; //给属性赋值
因为class是关键字，所以操作class属性时使用className代替。
这种方式只能操作HTML标准规定的属性，不能操作自定义属性。
在js中，操作checkbox、radio的checked属性，select的selected属性值时，使用true或false , 表单元素的disabled属性也是如此。
Element还提供了3个方法来操作属性，而且可操作自定义属性
String getAttribute(String attrName) 获得属性值
void removeAttribute(String attrName) 删除指定属性
void setAttribute(String attrName, String attrValue) 修改/添加属性
//h获取页面中id属性值为input01的元素的name属性的值
//1 根据id的值input01获取到元素对象
var input01 = document.getElementById("input01");
//2 使用元素对象获取name属性的值
var value = input01.name;
//把value属性的值修改为18
input01.value = 18;
操作元素子节点
子节点包括子元素和元素文本内容
element.getElementsByTagName() 根据子元素的标签名获取子元素
element.innerHTML 获取、修改子节点内容或代码(字符串形式)
element.insertBefore(newNode, node) 在指定子节点前插入新子节点
element.appendChild(newNode) 在最后追加子节点
element.removeChild(node) 删除子节点
element.parentNode 获取元素的父元素
注：如果一个元素原本就在页面中，appendChild会先把元素从原来的父元素删除，再追加到新的父元素中。
//在div内的p1之前再插入一个新的p元素
//1 获取到div元素
var div01 = document.getElementById("div01");
//2 获取到p元素
var p01 = document.getElementById("p01");
//3 创建出新的p元素
var newP = document.createElement("p");
newP.innerHTML = "hello";
//4 向div里面、p元素之前插入新的p元素
div01.insertBefore(newP,p01);
//1 获取id为div01的元素对象
var div01 = document.getElementById("div01");
//2 从div01内部获取div
var divs = div01.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
var div = divs.item(i);
alert(div);
}
//获得第一个 divs 的内容或代码
var html = divs.item(0).innerHTML;
//修改第一个 divs 的内容或代码
div01.innerHTML = "<input id='input01' value='input1' />";
div01.innerHTML = "hello";
也可以使用element.innerText （IE、chrome）或者element.textContent（火狐）
访问元素的文本内容，但有浏览器兼容问题
操作样式属性
element.style —— CSSStyleDeclaration类型的对象
1、使用 element.style.propName 的方式可以直接操作某个样式属性
如：element.style.backgroundColor="gray";
注：CSS里样式属性名称使用 - 连接两个单词（background-image）
DOM使用 驼峰命名法（backgroundImage）
2、element.className，修改class属性值，从而属性变成CSS里对应的class样式
//把div的背景颜色修改为浅灰色
<script type="text/javascript">
var div01 = document.getElementById("div01");
第一种：div01.style.backgroundColor = "lightgray";
第二种：div01.className = "d02";
</script>
<style type="text/css">
.d01{
background-color: lightgray;
}
.d02{
background-color: red;
}
</style>
<div class="d01" id="div01">
<p>p1</p>
</div>
DOM 事件分类
页面加载完成事件
load 页面加载完成时触发（window对象为事件源）
<script type="text/javascript">
window.onload=function(){
//只有页面加载完成，才可确保id为div01的元素被获取到
var element = document.getElementById("div01");
alert(element);
}
</script>
注意：load是事件的名称，onload是事件源的属性，用来给事件源注册事件处理函数
鼠标事件
click、dblclick 鼠标单击、双击时触发
mouseover、mouseout 鼠标指针进入、离开元素时触发
mousemove 鼠标指针移动时触发（进入元素后）
mousedown、mouseup 鼠标按键按下、弹起时触发（进入元素后）
鼠标事件的event对象包含如下信息：
button 点击的哪个鼠标按键（0、1、2），返回true，false
altKey、ctrlKey、shiftKey 点击时是否同时按下键盘的alt、ctrl、shift 键
clientX、clientY 鼠标指针的窗口坐标
screenX 、screenY 鼠标指针的屏幕坐标
获取 event 信息
div01.ondblclick=function(){
alert("你别双击我！");
}
//获取点击信息
div01.onclick=function(){
alert("你别点我啦！");
alert(event.button);
alert(event.ctrlKey);
alert(event.clientX+","+event.clientY);
alert(event.screenX+","+event.screenY);
}
点击时变色
div01.onmousedown=function(){
div01.style.backgroundColor="lightblue";
}
div01.onmouseup=function(){
div01.style.backgroundColor="lightgray";
}
动态获取指针位置
div01.onmousemove=function(){
var x = event.clientX;
var y = event.clientY;
div01.innerHTML = x+","+y;
}
键盘事件
keydown 键盘按键被按下
keyup 键盘按键被弹起
event事件对象的属性：
event.keyCode 被按下的按键的整数编码
var input01 = document.getElementById("input01");
input01.onkeyup=function(){
alert(event.keyCode);
}
焦点事件
focus 元素获得焦点
blur 元素失去焦点
文本框内默认灰色提示文本.txt
表单事件
select input(text)、textarea里的文本被选中时触发
获得选中文本内容：
var selectedText = this.value.substring(this.selectionStart,this.selectionEnd)
change input(text)、textarea的值改变时触发 (且失去焦点时)
submit 表单提交时触发 (真正把数据提交到服务器前触发)
DOM 事件机制
简介
通常的，当浏览器状态改变、用户操作时都会触发一些事件。如用户点击了一个按钮，就触发了按钮的点击事件，按钮称为事件源。
当一个事件被触发时，浏览器就会创建一个 event事件 对象，这个事件对象包含和此事件相关的各种信息，如点击事件的事件对象包含点击位置的信息，可供编程人员使用。
如果希望当一个事件发生时针对这个事件做一些处理，就需要给该事件 注册一个事件处理函数，当该事件真的发生时，该处理函数就会被浏览器自动调用。
常见的事件有以下几类：窗体事件、鼠标事件、键盘事件、焦点事件等。
处理事件的两种方式
第一种：
通过DOM方式把事件处理函数赋值给事件属性（称为注册事件处理函数）
<script type="text/javascript">
window.onload=function(){
var element = document.getElementById("div01");
element.onclick = function(){
alert("点我了");
}
}
</script>
第二种：
直接在HTML元素标签的事件属性上写要执行的代码
<div onclick="alert('点我了');" ></div>
注意：第一种更常用，第一种会覆盖第二种。
如果有个自定义函数fun1：
第一种方式的写法为element.onclick=fun1;不需要写在匿名函数里；
而第二种方式的写法为onclick="fun1();"
this的使用
如果this在函数fun1内，函数fun1以哪个对象的属性值的身份去执行，
this就表示哪个对象。
this的这个特性，很多时候非常有用，特别是在DOM的事件处理函数中。
function fun1(){
alert(this);
}
onload = function(){
var obj = {"fun1":fun1 };//obj.fun1 = fun1;
var btn = document.getElementById("btn");
btn.onclick = fun1;
window.fun1(); //表示 Window 对象
obj.fun1(); //表示 Object 对象
btn.onclick(); //表示 HTMLInputElement 对象
}
<input type="button" onclick="alert(this)"/> //表示 HTMLInputElement 对象
<input type="button" onclick="fun1()"/> //表示 Window 对象
注册多个事件函数
注册事件处理函数的方式会覆盖直接编写处理代码的方式，而且同时注册的多个处理函数也会发生覆盖，这就导致一个事件发生时我们只能做"一件事情"。
为了可以给一个事件注册多个事件处理函数，DOM提供了另外一种注册方式： addEventListener(事件名称, 处理函数);
同时提供了一个删除处理函数的方法： removeEventListener(事件名称, 处理函数);
也可以使用代码模拟触发一个事件，如btn.onclick();，其实这只是直接调用了事件处理函数。
这种方式注册的函数不会覆盖其他两种直接调用。但是多次注册同一个函数效果只有一次
如果希望将来可以删除某个注册的处理函数，就应该拿到该处理函数的引用。btn.removeEventListener("click",fun2);
事件冒泡
取消事件冒泡：event.stopPropagation()
由于HTML元素可嵌套，就不可避免的出现当用户执行一个动作如点击时，会有多个元素触发点击事件。为了方便管理不至于混乱，DOM提供了事件冒泡机制。
事件冒泡：当若干嵌套的元素"同时"被触发某个事件时，最内层元素的事件最先被触发，事件依次往外传递。
如果某刻我们希望取消该事件的冒泡，可以使用：event.stopPropagation()
取消浏览器默认事件
对于某些元素的特点事件，浏览器会有一个默认的动作，如超链接触发点击事件时页面会跳转、表单提交事件被触发时表单数据会被提交到服务器、键盘按下在输入框中输入字符等。
DOM提供了两种方式来取消浏览器的默认动作：
在我们自己注册的处理函数中执行 event.preventDefault(); 或者return false;
或者：<a id="topic" href="javascript:void(0);" class="topic">话题</a>
注意：取消事件的浏览器默认动作和取消事件冒泡是不同的概念。
<a id="a01" href="01test.html" >超链接</a>
var a01 = document.getElementById("a01");
a01.onclick=function(){ //取消打开新标签
//event.preventDefault();
return false;
}
限制输入手机号.txt
DOM实例
百度搜索框.txt
移动列表项.txt
腾讯微博首页.txt
表单有效性检查.txt
密码强度.txt
炫彩格子.txt
全选反选.txt
鼠标经过变色.txt
限制输入手机号.txt
文本框内默认灰色提示文本.txt
拖动div层.txt
文本时钟.txt
网页开关灯.txt
注册按钮倒计时.txt
甩不掉的跟屁虫.txt
CSS
简介
CSS (Cascading Style Sheets) 级联样式表 ，是一种计算机语言，用来控制HTML内容的显示效果
CSS预先定义了众多的和显示效果有关的样式属性，比如color、font-size等。如果希望html内容显示某个效果，就应用对应的CSS样式属性即可
CSS对样式的控制是非常精确和精细的
注释：/* 注释 */ //注释
CSS语言的基本单位是样式声明：propertyName : value ;
CSS语言的使用方式：
1 把CSS样式声明作为HTML标签的style属性值
2 使用CSS选择器
字体.文本.背景样式
【字体样式】
font-family 设置字体 名称 font-style 设置字体 风格
font-size 设置字体 尺寸 font-weight 设置字体 粗细
font 可以把上面的样式属性合并起来写（值是有序的，使用空格分隔）
顺序：（font-weight font-size font-family）
如：<p style="font: bold 20px 华文宋体 ;">四张机</p>
【文本样式】： 用来控制文本的显示效果，常用样式属性：
color（文本的颜色):颜色值(颜色名、RGB / RGBA 颜色、十六进制颜色..) 颜色详细见备注
text-indent（文本缩进）: 长度值(长度单位：px、%(百分比)、em(字符)、in(英寸)、cm、mm..)
text-align（文本对齐方式）: 枚举值(left、right、center..)
word-spacing（单词间隔）:长度值
letter-spacing（字符间隔）:长度值
text-decoration（文本修饰）：枚举值(none、underline、overline、line-through..)
jQuery
简介
jQuery是一个JavaScript库，特性丰富，包含若干对象和很多函数，可以代替传统DOM编程的操作方式和操作风格。
在DOM思想基础之上，jQuery通过对DOM API、DOM事件进行了全面的封装，提供了一套全新的API，可以完全代替DOM API进行前端页面的开发，使得编码简洁快速，这套全新的API更简单更灵活。
jQuery宗旨是：write less, do more.
而且，jQuery考虑并解决了不同浏览器之间的兼容性问题，所以在使用jQuery进行编程的时候，不用顾虑兼容性问题。
$对象、jQuery对象
就像DOM的编程入口是document对象一样，jQuery的编程入口是$对象，它是jQuery的核心对象。
$对象也是一个函数对象，我们可以使用$()的形式调用它，传递给$()不同的参数可以做不同的事情，$函数异常强大！
$函数可以把若干个DOM对象包装进一个对象，这个对象称为jQuery对象，jQuery对象可以看成数组对象，此外还拥有一整套全新的方法。
1、$ 函数可以直接把 DOM 对象包装成 jquery 对象，或者通过选择器。
2、DOM 对象支持属性操作和方法操作，jquery 对象一般只进行方法操作。
3、jquery 对象不能再调用 DOM 对象的方法，DOM 对象也不能调用jquery 对象的方法
1、jQuery对象本质上是数组对象，吧DOM对象作为数组元素。
2、jquery对象的很多方法具有隐式迭代特性。
jQuery选择器 $()
简介
jQuery的编程思路和DOM一样，先获取到要操作的元素，然后操作该元素
为了方便准确的获取元素，jQuery站到了CSS的肩膀上——直接复制了CSS选择器语法。
jQuery选择器中除了伪类选择器外绝大部分和CSS选择器相同。
jQuery选择器：标签选择器、id选择器、类选择器、属性选择器、伪类选择器、复合选择器
语法：$( selector ) 或者 $( selector , parent )
标签选择器( div )
选择对应的所有标签
【例：】
$("p").css("backgroundColor","lightgray");
$("div").css("backgroundColor","lightgray");
id选择器( #p01 )
选择对应 id 值的标签，id值不能以数字开头 ，且唯一
【例：】
$("#p09").css("backgroundColor","lightgray");
<p id="p09">九张机</p>
类选择器( .c01 )
选择对应类 class 值的标签
class值不能以数字开头，不唯一
【例：】
$(".c05").css("backgroundColor","lightgray");
<p class="c05">九张机</p>
属性选择器( [name^=val] )
通过元素的属性进行定位：属性为，name，class，id等
[attr]选择有attr属性的标签
[attr=val] 选择以attr属性值为val的标签
[attr^=val] 选择以attr属性值以val开头的标签
[attr$=val] 选择以attr属性值以val结尾的标签
[attr*=val] 选择以attr属性值中包含val的标签
【例：】
$("[id*=div]").css("backgroundColor","lightgray");
自定义属性：<p zidingyi="p0x0">自定义</p>
【例：】
$("[zidingyi=p0x0]").css("backgroundColor","lightgray");
伪类选择器 :
:eq(index) 第index个
:gt(index) 第index之后的（不包括自己）
:lt(index) 第index之前的（不包括自己）
:not( selector ) 对括号里面的选择器取反
【例：】
$("div:not(:eq(1))").css("backgroundColor","lightgray");
:first 第一个元素
:last 最后一个元素
:even 第偶数个
:odd 第奇数个
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第n个子元素
复合选择器( div>p,a )
选择器可以进行多种形式的组合(多个复合时从左往右)：
selector1空格selector2 在1选中的元素中，使用2筛选其后代元素(2不要使用伪类选择器)
selector1>selector2 在1选中的元素中，使用2筛选其子元素
selector1~selector2 在1选中的元素中，使用2筛选其后续兄弟元素,直到遇到非兄弟元素
selector1+selector2 在1选中的元素中，使用2筛选其后续紧邻的兄弟元素
selector1,selector2 各个选择器的并集
selector1(没有空格)selector2 各个选择器的交集（复合后可识别才可以这样使用）
【例：】
$("div p").css("backgroundColor","lightgray");
$("#div01~.hello").css("backgroundColor","lightgray")
隐式迭代
jQuery选择器可能会选中多个DOM元素，jQuery会把选中的多个DOM元素封装成一个jQuery对象，实际上是个JavaScript数组对象。
对jQuery对象进行的操作实际上会对数组里面的每个元素都进行（个别操作只对第一个数组元素进行），如：
$("div").css("backgroundColor", "lightgray");
这句代码会把每一个div元素的背景色设置为浅灰色
隐式迭代特性配合jQuery选择器，使得使用jQuery进行编程十分简洁和高效。
当我们希望对jQuery对象包含的DOM对象进行不同的操作时，可以使用jQuery对象的each()方法主动遍历内部的每个DOM对象，并进行针对性处理。
显式迭代：
$("div").each(function (index,domElement) {
if(index ==0){
domElement.style.backgroundColor="lightgray";
}else if(index==1){
domElement.style.backgroundColor="lightblue";
}else{
domElement.style.backgroundColor="black";
}
});
jQuery操作
操作元素属性(attr)
attr(attrName) 获取第一个元素的该属性的值
var value = $("div").attr("id");
attr(attrName,value) 设置所有元素的该属性的值
$("div").attr("name","hello");
attr(attrName, function(index, value){ }) 设置所有元素的该属性的值，值由函数的返回值决定，index表示元素索引，value表示该属性的原值
$("div").attr("class", function (index, value) {
return "c"+index;
}); //利用返回值设定属性值
atrr()函数无论对HTML元素固有的属性还是我们自定义的属性都有效，但对于类似复选框的checked属性，以及元素的那5个只读属性（offsetXxx），要使用jQuery对象的prop()函数来操作，但prop()函数对自定义属性无效。
$("#c01").prop("checkedxx","xx");
$("#registerBtn").prop("disabled",false);
操作元素的CSS样式
操作元素的style属性
css(propName) 获取第一个元素的该属性的值
var value = $("div").css("width");
css(propName, value) 设置所有元素的该属性的值
$("div").css("backgroundColor","lightgray");
css(propName, function(index, value){ }) 设置所有元素的该属性的值，值由函数的返回值决定，index表示元素索引，value表示该属性的原值
操作元素的class属性
addClass(class) 添加属性
$("div").addClass("c1");
removeClass(class) 移除属性
$("div").removeClass("hello");
toggleClass(class) 切换class（如果存在就删除，如果不存在就添加）
$("div").toggleClass("xx");
元素class属性可以有多个值，用空格隔开：
class="hello xx"
注：也可以使用attr()函数来操作style属性以及class属性，
但是有风险，千万不要使用
$("div").attr("style","background-color:lightgray");
操作元素的文本、值
html() //获取第一个元素的HTML内容（包括子元素和文本内容）
var value = $("div").html();
html(string) //设置所有元素的HTML内容
$("div").html("<p>xxx</p>");
（效果等同于DOM对象的innerHTML属性）
val() //获取第一个元素的value属性的值（如果有value属性的话）
var value = $("#input01").val();
val(string) //设置所有元素的value属性的值
$("#input01").val("hello");
操作元素节点
$(html) 创建元素节点
var $p = $("<p>ppp</p>");
append(content) 追加插入子节点( jquery对象、源码) 隐式迭代
before(content) 插入兄弟节点( jquery对象、源码) 隐式迭代
$("div").append("$p");
$("div").append("<p>ppp</p>");
remove() 删除元素自己
$("div").remove();
children() 获得元素的子元素
var $children = $("div").children();
$children.css("backgroundColor","lightgray");
parent() 获得元素的父元素
$("p").parent().css("backgroundColor","lightgray");
prevall() 获得元素之前的兄弟元素
nextall() 获得元素之后的兄弟元素
siblings() 获得兄弟元素
$("p:eq(1)").siblings().css("backgroundColor","lightgray");
jQuery事件处理
jQuery提供了一系列如click()、focus()、mouseover()等方法，给元素注册对应的事件处理函数。
如：$("div").click( function(){ alter('xx') }); 这句代码给所有div元素的点击事件注册了处理函数。
特别的，jQuery提供了ready()函数来代替window的load加载事件，ready()可以在文档的DOM结构加载完成后就触发，而不必等到页面的图片等资源也加载完成。
特别的，这些函数都可以多次使用，不会覆盖。
文档加载完成事件
$(document).ready(function(){ });
$(function(){ }); //简便写法
$(this)的使用
因为jQuery的隐式迭代特性，使用jQuery注册的事件处理函数中的this实际上是每一次迭代到的DOM对象，因此this可以调用DOM API，也可以使用$(this)调用jQuery API。
this.innerHTML = event.clientX+","+event.clientY;
this 使用 jquery API需要用 $ 包装：
$(this).html(event.clientX+","+event.clientY);
链式编程
如果打算对一个jQuery对象做一组动作，使用jQuery的链式编程更优雅
为了支持链式编程，大部分jQuery方法的返回值还是此jQuery对象本身：
$("div").mouseover().mouseout();
但有些jQuery方法返回的jQuery对象并不是原来的jQuery对象了（称为断链），这时可以使用end()返回断链之前的状态：
$("#div01").siblings().html("other").end().html("div01");
但对于那些返回值不是jQuery对象的方法，就没办法把链接上了：
$("div").html();
jQuery动画效果
hide(time, function) 是元素在指定时间内渐渐隐藏，同时可指定动画完成时执行的函数
show(time, function) 是元素在指定时间内渐渐展开
HTML5
简介
HTML5 是HTML语言的第5次重大修改产生的新的HTML语言版本。
HTML5 是W3C组织和众多主要浏览器厂商以及众多开发者共同努力的结果。
HTML5 主要改进包括：增加新的HTML标签或者属性、新的CSS样式属性、新的JavaScript API等，同时还删除了一些过时的和样式有关的HTML标签和属性。
由此为网页带来了新的特性：多媒体支持、本地存储、图形绘制和样式特效等。
多媒体标签
<video>
<video>标签用来在页面播放视频，支持MP4、WebM两种视频格式和OGG音频格式，
但各浏览器之间没有统一的标准，不同的浏览器支持的格式不同，为此又提供了source标签，可以提供备选的视频资源
<video controls="controls" width="960px" height="450px">
<source src="resource/世界5500年版图演变史.webm" />
<source src="resource/世界5500年版图演变史.mp4"/>
</video>
分支主题
<audio>
<audio>标签用来在页面播放音频，支持OGG、MP3、WAV三种音频格式，同样，各浏览器之间也没有统一的标准。
<audio controls="controls">
<source src="resource/风吹麦浪-叶一茜.mp3" />
<source src="resource/风吹麦浪-叶一茜.wav" />
<source src="resource/风吹麦浪-叶一茜.ogg" />
</audio>
<source>：可以提供备选的视频资源
新的表单控件
date 日期控件 value格式为：2016-03-20
time 时间控件 value格式为：10:20
number 数字控件
date：<input type="date" name="date" /><br/>
time：<input type="time" name="time" /><br/>
number：<input type="number" name="number" /><br/>
range 范围控件
range：<input type="range" name="range" max="10" min="1" /><br/>
search 搜索框控件
color 颜色选择器 value格式为：16进制颜色值
search：<input type="search" name="search" /><br/>
color：<input type="color" name="color" /><br/>
email、url、datetime 很多浏览器还不支持，不正确的格式会提示
email：<input type="email" name="email" /><br/>
url：<input type="url" name="url" /><br/>
datetime：<input type="datetime" name="datetime" /><br/>
<form>
date：<input type="date" name="date" /><br/>
<input type="submit" value="提交"/>
</form>
input标签新属性
placeholder 输入框的输入提示信息（灰色文本）
required 必填（不填提交时提示）
pattern 用于验证用户输入（正则表达式，不正确提交时提示）
form 指定控件所属的表单，这样控件就不必一定要在<form>标签内了（form=form的id）
autofocus 自动获得焦点（多个此设置时，焦点为第一个）
multiple 指定文件上传时是否可选中多个文件
accept 指定上传文件时允许的MIME类型（文件类型），如 image/*，image/png
<form id="form01">
<input type="text" name="xx" placeholder="请输入数字"
required="required"
pattern="[0-9]*"
form="form01"
autofocus="true"
/>
<input type="file" name="xxx" multiple="multiple" accept="image/*" />
<input type="submit" value="提交"/>
</form>
对要上传的文件的处理功能
为JavaScript提供新的API，使其能够处理要上传的文件
File //表示被选中的一个文件，包含和此文件相关的信息
size属性 文件大小
type属性 文件类型
name属性 文件名
FileList //被选中上传的文件列表
FileReader //对文件数据进行处理
readAsText( file, encoding) 以文本的形式读取文件数据
readAsDataURL( file) 以base64编码的形式读取文件数据
result属性 读取到的被处理过的文件数据
onload事件属性，文件读取成功时触发
//列出将要上传的文件名
window.onload= function () {
document.getElementById("input01").onchange= function () {
//如何拿到fileList对象
var fileList = this.files;
for(var i=0;i<fileList.length;i++){
var file = fileList.item(i);
var pElement = document.createElement("p");
pElement.innerHTML = file.name;
document.getElementById("div01").appendChild(pElement);
}}}
</script>
</head>
<body>
<input id="input01" type="file" name="xxx" multiple="multiple" accept="image/*" /><br/>
<div id="div01"></div>
</body>
//预览将要上传的文件
window.onload= function () {
document.getElementById("input01").onchange= function () {
//如何拿到fileList对象
var fileList = this.files;
for(var i=0;i<fileList.length;i++){
var file = fileList.item(i);
//如何读取文件数据
var fileReader = new FileReader();
fileReader.onload= function () {
var img = document.createElement("img");
img.src = this.result; //fileReader处在遍历中，要用this
document.getElementById("div01").appendChild(img);
}
//读取完后触发事件
fileReader.readAsDataURL(file); }}}
</script>
<body>
<input id="input01" type="file" name="xxx" multiple="multiple" accept="image/*" /><br/>
<div id="div01"></div>
</body>
新的文档语义标签
在HTML5之前，文档中无论是布局还是内容结构方面，使用的都是div标签
header 一般放置logo或者菜单栏
nav 一般放置网站内的目录、导航栏链接，或者网站外的友情链接
article 页面中相对独立的结构，如一篇文章，或者此文章的每一个评论
section 定义页面或者article的章节
aside 一般放置广告或者解释性信息
footer 一般放置版权信息的
其中article和section的用法比较灵活，可以相互嵌套
新旧文档语义结构对比
注意：这些标签只是定义了文档的语言结构，显示样式还是由css来控制
新的事件类型
事件源都是 window 对象
beforeunload 页面关闭前或刷新前触发
window.onbeforeunload= function () {
alert("hello"); //此事件里 弹出框无效
return "此页面如此精彩"; 返回弹出框提示内容 字符串
}
分支主题
scroll 页面滚动时触发
resize 页面尺寸被调整时触发
mousewheel 鼠标滚轮滚动时触发
dragstart、dragover、drop 拖放事件
window.onscroll= function () {
alert("页面滚动了");
}.onresize= function () {
alert("页面大小改变了");
}.onmousewheel= function () {
alert("鼠标滚轮滚动");
}
元素拖放(drag/drop)
在HTML5中，元素是可被拖放的（拖拽、放下）
draggable：是否可被拖拽（元素的公共属性）
dragstart：拖拽开始事件，元素a被拖拽时触发，事件源是元素a
dragover：拖动时鼠标进入另一个元素b的范围时触发，事件源是元素b
drop：拖拽停止事件，鼠标按键松开时触发，事件源是元素b
若要实现把元素a拖放到元素b中，需要进行以下步骤：
1 确保元素a可拖拽（设置元素的draggable属性为true）
<div id="div01" draggable="true">a</div>
2 给元素 a 注册dragstart事件处理函数（主要用来存储一些相关数据）
document.getElementById("div01").ondragstart= function () {
//把被拖拽的元素的id存进来
event.dataTransfer.setData("id",this.id); //存放数据
}
由于整个拖放过程涉及多个事件，所以就需要event.dataTransfer对象在整个拖放过程中存储和传递需要的数据
event.dataTransfer.setData(key, value) 存放数据
event.dataTransfer.getData(key) 取得数据
3 给元素 b 注册dragover事件处理函数（主要用来取消事件默认行为）
document.getElementById("div02").ondragover= function () {
//默认拒绝接受另一个被拖拽的元素，不会触发drop，需要return false取消
return false;
}
图片、超链接默认可以拖拽，要想拖拽其他元素，需要设置元素的draggable属性为true。
元素默认拒绝接受另一个被拖拽的元素，表现为鼠标指针变成 φ ，drop事件也不会触发。
注意：被选中的文本也可被拖拽，先忽略这一点。拖放动作只会触发一些事件，并不会做任何实际性的事情，就像点击了一个普通按钮不会触发任何效果一样，想做一些事就需要在事件处理函数里面写处理代码。
4 给元素 b 注册drop事件处理函数（主要用来把元素 a 插入元素 b 中）
document.getElementById("div02").ondrop= function () {
var draggedId = event.dataTransfer.getData("id"); //取得数据
var draggedElement = document.getElementById(draggedId);
this.appendChild(draggedElement);
}
拖放案例.txt
绘图功能
HTML5 新增了<canvas>标签（画布的意思），同时提供了一组新的JavaScript API，相配合完成绘图功能。
绘图步骤
绘制过程是由js代码控制，一般步骤为：
1 获得canvas画布元素对象
2 设置画笔颜色或者填充颜色
3 绘制基本图形或者图片
4 重复2和3步，最终绘制成复杂的图形
5 配合定时器使用则可绘制动画
绘图 API
var context = canvas.getContext("2d"); //获得绘图上下文（绘图功能的核心对象）
context.strokeStyle = "颜色值"; //设置画笔颜色
context.fillStyle = "颜色值"; //设置填充颜色
context.fillRect(x, y , width , height); //绘制并填充矩形
context.strokeRect(x, y , width , height); //绘制矩形
context.clearRect(x, y , width , height); // 清除矩形区域内的图形
//绘制图片
var img = new Image(); //创建图片对象
img.src="resource/1.png"; //设置图片的src，设置后即开始加载图片数据
img.onload=function(){ //图片数据加载完成后才可以绘制此图片
context.drawImage(img,230,10);
}
<script type="text/javascript">
window.onload= function () {
var context = document.getElementById("canvas01").getContext("2d");
context.strokeRect(10, 10 , 100 , 62);
context.fillStyle="lightblue";
context.fillRect(120, 120 , 50 , 50);
var image = new Image();
image.src="resource/1.png";
image.onload= function () {
context.drawImage(this,200,160);
}}
</script>
</head> <body>
<canvas id="canvas01" width="400px" height="247px"></canvas>
</body>
本地存储
在HTML5之前，服务器可以通过cookie把少量数据存储到用户本地电脑上，存储上限每个网站大约是4KB。
HTML5为window对象新增了localStorage属性对象，存储字符串类型的键值对数据，如：
localStorage.user name="蛋蛋";
localStorage.age="20";
这些键值对数据会存储到用户本地电脑上，并且这些数据是网站独享的，各个网站之间的数据并不会相互影响，而且浏览器之间也是不共享的。
HTML5的本地存储大约可以存储5MB的数据，有些浏览器可以设置存储上限。
存储数据
<script type="text/javascript">
window.localStorage.xx="蛋蛋";
</script>
提取数据
<script type="text/javascript">
var xx = window.localStorage.xx;
alert(xx);
</script>
EasyUI
简介
EasyUI是一组基于jQuery的UI插件集合
jQuery插件的主要作用为：为jQuery对象提供新的方法，实现新的功能
EasyUI的口号：helps you build your web pages easily
EasyUI帮助程序员快速创建出简洁、友好、美观的网页，非常适合做网站后台管理页面（因为不足够漂亮，不适合做网站前台页面）
EasyUI的主要内容就是主要组件的用法：panel、linkbutton、form、window、tabs、tree、layout、datagrid等
这些组件基本满足我们对于后台管理系统项目的布局、导航、列表、添加、修改、删除等功能
引入需要的样式文件和js文件
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
panel组件
创建
通过设置元素class属性创建EasyUI控件
<div class="easyui-panel" data-options="title:'面板组件',width:300,height:185">
<p>panel 面板<p/> <p>常用来向用户展示信息</p>
</div>
通过js代码创建EasyUI控件
$("#panel01").panel({
width:300,
height:185,
title:'面板组件'
});
属性
EasyUI组件的属性用来指定组件的样式、结构、内容等
title：指定panel的标题
width：指定panel的宽度
height：指定panel的高度
fit：设置panel的大小是否自适应父容器
border：设置panel是否显示边框
collapsible：设置是否显示可折叠按钮
closable：设置是否显示关闭按钮
href：加载另一个页面的内容（注意：被加载页面的body之外的内容会被忽略）
注意：很多组件属性的效果也可以使用HTML元素属性或者CSS样式属性的方式实现
$("#panel01").panel({
title:'组件',
height:185,
content:'hello',
fit:false,
border:true,
collapsible:true,
closable:true,
href:"02test.html"
}
<div class="easyui-panel" data-options="title:'xxx',width:400,height:285">
事件属性
onBeforeCollapse：panel折叠前触发，可以在事件处理函数中阻止折叠
onCollapse：panel折叠后触发
$("#panel01").panel({
onBeforeCollapse: function () {
var is = confirm("确定要折叠此panel吗？");
if(！is){
return false;
},
onCollapse: function () {
alert("此panel已经折叠");
}
<div class="easyui-panel" data-options="title:'xxx',width:400,height:285">
panel的事件属性很多，具体参考官方文档
方法
setTitle //设置标题 open //打开 close //关闭
$("#btn01").click(function () {
$("#panel01").panel("setTitle","新标题");
});
$("#btn02").click(function () {
$("#panel01").panel("close");
});
options //配置属性
var options = $("#panel01").panel("options");
for(var key in options){
alert(key+":"+options[key]);
}
<div class="easyui-panel" data-options="title:'xxx',width:400,height:285">
组件的方法的调用格式：
jQuery对象.plugin方法( 方法名 , 参数列表 );
如：$("#panel01").panel( "setTitle" , "新标题" );
EasyUI的图标
EasyUI提供了众多的图标，可以用在很多EasyUI组件上，一个组件只能有一个图标
使用方法：data-options属性中指定 iconCls:'图标名称'
$("#panel01").panel({
height:185,
iconCls:'icon-add'
}
<div class="easyui-panel" data-options="title:'xxx',width:400,height:285">
分支主题
链接按钮
分支主题
<script type="text/javascript">
function fun1(){
}
$(document).ready(function () {
setTimeout(function () {
// 设置可以点击
$("a").linkbutton("enable");
},2000);
});
</script>
链接按钮属性：disabled //不可点击，灰色按钮、 iconCls
data-options=" iconCls:'icon-add' "
事件属性：onClick
data-options="onClick:fun1"
方法：disable(不可点击)、enable(可以点击)
$("a").linkbutton("enable");
<body>
<a class="easyui-linkbutton" data-options="
//都是 data-options 的值
iconCls:'icon-add',
//onClick:fun1,
onClick:function(){
alert("hello");
},
//设置不可点击
disabled:true">Add</a>
</body>
表单控件
validatebox
属性：required、validType、invalidMessage、validateOnBlur(是否失去焦点是检查)
<input class="easyui-validatebox" data-options="
Properties：属性
是否必须输入 required:true,
检查输入合法 validType:'email',
不合法提示信息 invalidMessage:'请输入正确的邮箱地址',
输入为空时提示 missingMessage:'不能为空'
} "/>
textbox
属性：width、height、prompt、type(text，password)、iconCls、iconAlign(left，right)
buttonText、buttonIcon、buttonAlign(left，right)
依赖于validatebox，拥有validatebox的属性
<input class="easyui-textbox" data-options="
required:true,
灰色提示信息 prompt:'请输入账号',
type:'password',
图标样式 iconCls:'icon-lock',
按钮 buttonText:'搜索',
按钮图标 buttonIcon:'icon-search',
点击按钮事件 onClickButton:function(){
alert('hello');
} "/>
datebox
属性：formatter (设置日期格式)
<script type="text/javascript">
$.fn.datebox.defaults.formatter = function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
if(m<10){
m = "0"+m;
}
var d = date.getDate();
if(d<10){
d = "0"+d;
}
return y+"-"+m+"-"+d;
}
</script>
<input class="easyui-datebox" data-options="
currentText:'今天'
" />
datetimebox
依赖于datebox，拥有datebox的属性
<script type="text/javascript">
$.fn.datebox.defaults.formatter = function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+"-"+m+"-"+d;
}
</script>
<input class="easyui-datetimebox" />
form
属性：url、success、onSubmit 方法：submit、validate
window组件
window组件用来弹出一个子窗口，方便添加、修改等操作
窗口组件基于panel组件，
注：被加载页面的body之外的内容会被忽略
常用属性：href (弹出窗口的url)、width、height
<body>
<a class="easyui-linkbutton" onclick="$('#div01').window('open');" >打开窗口</a><br/>
<a class="easyui-linkbutton" data-options="onClick:function(){ $("#div01").window('close'); }">关闭窗口</a><br/>
<div id="div01" class="easyui-window" data-options="
href:'06datebox.html',
width:600,
height:371,
title:'新窗口',
closed:true
"></div>
</body>
tabs标签页组件
tabs标签页可以看成由多个panel组成，但同一时间只显示一个panel的内容
tabs组件的主要操作有：创建新tab页、选择tab页
属性：fit 是否填充父元素
方法：add、exists、select
<script type="text/javascript">
function addOrOpenTab(){
//添加之前先判断
var exists = $("#tt").tabs('exists','新tab页');
if(exists){
$("#tt").tabs('select','新tab页');
}else{
$("#tt").tabs('add',{
title:'新tab页',
content:'内容',
closable:true, //可关闭
href:'06datebox.html' //加载其他页面
}); } }
</script>
<div id="tt" class="easyui-tabs" data-options="width:600,height:371">
<div title="welcome">
你好！
</div>
</div> <br/><br/>
<a class="easyui-linkbutton" data-options="onClick:addOrOpenTab">添加新tab页或者打开</a>
tree组件
tree组件一般用来做系统导航栏
分支主题
<ul class="easyui-tree">
<li>
<span>Folder1</span>
<ul>
<li><span>File1</span></li>
<li><span>File2</span></li>
</ul>
</li>
<li>
<span>Folder2</span>
<ul>
<li><span>File4</span></li>
<li><span>File5</span></li>
</ul>
</li>
</ul>
很多时候采用这种方式为节点添加点击动作：
<li><span><a href="#" onclick="xx()">File1</a></span></li>
layout布局组件
EasyUI布局组件把页面分为上、下、左、右、中间5个区域，
分别称为north、south、west、east、center，
每个区域实际上是个panel组件
layout组件可以使用在<body>上也可以使用在<div>上
属性：region (控制位置) split (是否可以拖动大小)
<body class="easyui-layout">
<div data-options="region:'north', split:true" style="height:100px;"></div>
<div data-options="region:'south', title:'South Title', split:true" style="height:100px;"></div>
<div data-options="region:'east', title:'East', split:true" style="width:100px;"></div>
<div data-options="region:'west', title:'West', split:true" style="width:100px;"></div>
<div data-options="region:'center', title:'center title'" style="background:#eee;"></div>
</body>
各区域代码写在div里： <div>内容</div>
界面布局.txt
datagrid数据表格
属性：url、pagination (是否分页)、toolbar (工具栏)、loadFilter (加载过滤)
方法：load、reload
<table class="easyui-datagrid"
data-options="title:'用户管理',pagination:true,width:600" >
<thead>
<tr>
<th data-options="field:'email',width:140">登录邮箱</th>
<th data-options="field:'name',width:120">真实姓名</th>
<th data-options="field:'phone',width:120">手机号码</th>
<th data-options="field:'school',width:120">毕业院校</th>
</tr>
</thead>
</table>
每次进行分页操作，都会向url属性指定的路径发送请求，请求参数有page、rows
<script type="text/javascript">
function addOperateButton(data){
//添加操作的超链接
var rows = data.rows;
for(var i=0; i<rows.length; i++){
var row = rows[i];
row.operate = "<a href='#' >修改</a> <a href='#' >删除</a>";
}
return data; //需要返回数据，否则数据丢失
}
</script>
users.json
<body>
<table class="easyui-datagrid"
data-options="url:'users.json', title:'用户管理', pagination:true, width:600, loadFilter:addOperateButton, toolbar:'#tb'" >
<thead> //url 指定目录 提取 josn 格式的数据 pagination 可以分页 loadFilter 值为 函数对象 toolbar 工具栏div的id
<tr>
<th data-options="field:'email', width:140">登录邮箱</th> //field 对应 在url 指定目录里查找的 键值对
<th data-options="field:'name', width:120">真实姓名</th>
<th data-options="field:'phone', width:120">手机号码</th>
<th data-options="field:'school', width:120">毕业院校</th>
<th data-options="field:'operate', width:98">操作</th>
</tr>
</thead>
</table>
<div id="tb"> //工具栏
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit', plain:true">修改</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help', plain:true">帮助</a>
</div>
</body>
Collect
Get Started
Collect
Get Started
Collect
Get Started
Collect
Get Started
评论
0 条评论
下一页
