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 条评论
下一页