极客学院-Html5个人笔记总结
2016-08-26 08:41
253 查看
第一部分,HTML5基础
1,什么是HTML5?
(Hyper Text Markup Language) 超文本标记语言,用于描述网页的一种语言。
2,HTML5相关知识?
HTML
XHTML
Css
Css3
JavaScript
JQuery
HTML5
3,HTML5新特性?
1,绘画:canvas标签
2,媒介:video和audio元素
3,存储:本地离线存储
4,新元素:article,footer,header,nav,section
5,新控件:calendar,date,time,email,url,search
6,浏览器:Safari,Chrome,Firefox,Opera,IE9
HTML基础讲解
4,声明:<!DOCTYPE>
5,HTML基础标签:head,body
6,HTML标题
<h1>...<h6>等标签进行定义
7,HTML段落
<p>标签定义段落
8,HTML连接
<a>标签定义连接
9,HTML图像
<img>标签定义图像
10,HTML元素
是从开始标签到结束标签的所有代码。即元素的内容
空元素在开始标签进行闭合。如:<br/>
大多数的元素有属性,都可以嵌套的。如:<p> <a>hello </a></p>
11,HTML属性
标签可以拥有属性为元素提供更多是信息。
属性是以键值对的形式。如:href="www.baidu.com"
常用标签属性:<h1> align:对齐方式;<body> bgcolor:背景颜色;<a> target:规定在何处打开链接;
通用属性:class:规定元素的类名;id:规定元素的唯一ID; style:规定元素的样式; title:规定元素的额外信息;
12,HTML格式化
<b> 粗体文本
<big> 大号字
<em> 着重文字
<i> 斜体字
<small> 小号字
<strong> 加重语气
<sub> 下标字
<sup> 上标字
<ins> 插入字
<del> 删除字
13,HTML样式
标签:<style> 样式定义 ; <link> 资源引用
属性:rel="stylesheet" 外部样式表; type="text/css" 引入文档类型; margin-left 边距;
插入方法:外部样式表 <link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表 <style type="text/css">
body { background-color :red}
p { margin-left:20px }
</style>
内联样式表 <p style= "color:red">
14,HTML链接
数据:文本链接;图片链接;
属性:href属性 指向另一个文档的链接; name属性 创建文档内的链接;
img标签属性;alt 替换文本属性; width 宽 ; height 高;
15,HTML表格
<table> 表格
<caption> 表格标题
<th> 表头
<tr> 行
<td> 单元
<thead> 页眉
<tbody> 主体
<tfoot> 页脚
<col> 列属性
16,THML列表
标签:<ol> 有序; <ul> 无序; <li> 列表项; <dl> 列表; <dt> 列表项; <dd> 描述;
无序列表:标签 <ul><li> 属性 disc , circle, square;
有序列表:标签 <ol><li> 属性 A, a, I, i, start;
嵌套列表:标签 <ul><ol><li>
自定义列表:标签 <dl><dt><dd>
17,HTML块
块的元素:块元素显示时,通常以新行开始; 如:<h1><p><ul>
内联元素:内联元素通常不会以新行开始; 如:<b><a><img>
<div>元素:<div>元素也被称为块元素,其主要的组合HTML元素的容器。
<
4000
span>元素:<span>元素是内联元素,可作为文本的容器。
18,HTML布局
①div布局
②table元素布局
19,表单用于获取不同类型的用户输入
20,常用表单标签
<from> 表单
<input> 输入域
<textarea> 文本域
<label> 控制标签
<fieldset> 定义域
<legend> 域的标题
<select> 选择列表
<optgroup> 选项组
<option> 下拉列表选项
<button> 按钮
21,PHP环境搭建
网站:www.apachefriends.org 下载安装XAMPP
其中,运行 xx.hph的目录:/xampp/htdocs
打开eclipse--help-->install new software
输入:http://download.eclipse.org/releases
找到:Programming Languages-->PHP Development Tools (PDT)
安装后重起,open perspective-->PHP
新建工程-->(将工作空间变化到 /xampp/htdocs)
或在拷贝xx.php 到/xampp/htdocs中
运行:在浏览器中输入:localhost/xx.php
22,表单提交数据和PHP交互
在PHP服务端://$_GET:指的是用get方式提交; $_POST:post方式
echo "用户名".$_POST['name']."<br>密码".$_POST['password'];
在IDEA端:<!--action:指的是运行PHP服务器的xx.php的网址; method:指的是提交方式get或post(与PHP服务端一致)-->
<form action="http://localhost/MyService/Service.php" method="post">
用户名:<input type="text" name="name"><br>
密 码:<input type="password" name="password">
<br>
<input type="submit" value="提交">
</form>
23,HTML框架
框架标签(frame)
框架集标签(<frameset>)
常用标签:noresize:固定框架大小;cols:列;rows:行;
内联框架:iframe
24,HTML5背景
背景标签:background--图片背景
背景颜色:Bgcolor--颜色背景
颜色:是由一个十六进制符号来定义的。这些符号由红色,绿色和蓝色的值组成(RGB)
颜色值最小值:0(#00)
颜色值最大值:255(#FF)
红色:#FF0000
绿色:#00FF00
蓝色:#0000FF
25,HTML实体
HTML中预留字符串必须被替换成字符实体。
如:< , > , % 例:<html> 写成: <html>
26,XHTML规范化介绍
XHTML简介:
①什么是XHTML? 是指可扩展超文本标记语言。与HTML4.01几乎相同。是更严格更纯净的HTML版本。得到所有主流浏览器的支持。
②为什么使用XHTML? 为了代码的完整性和良好性。
③文档声明:DTD 规定了使用通用标记语言的网页语法。
④三种XHTML文档类型:STRICT (严格性) TRANSITIONAL (过渡类型) FRAMESET (框架类型)
XHTML元素:
①XHTML元素必须正确嵌套。
②XHTML元素必须始终关闭。
③XHTML元素必须小写。
④XHTML文档必须有一个根元素。
XHTML属性:
①XHTML属性必须使用小写。
②XHTML属性值必须用引号包围。
③XHTML属性最小化也是禁止的。
第二部分,CSS3基础
一,入门基础知识。
1,CSS3样式
①CSS背景: css允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。
background-attachment:背景图像是否固定或者随着页面滚动。
background-color:设置原色的背景颜色。
background-image:把图片设置为背景。
background-position:设置背景图片的起始位置。
background-repeat:设置背景图片是否及如何重复。
background-size: 规定背景图片的尺寸。
background-origin :规定背景图片的定位区域。
background-clip:规定背景的绘制区域。
②CSS文本:
color:文本颜色。
direction:文本方向。
line-height:行高。
letter-spacing:字符间距。
text-align:对齐元素中的文本。
text-decoration:向文本添加修饰。
text-indent:缩进元素中文本的首行。
text-transform:元素中的字母。
Unicode-bidi:设置文本的方向。
white-space:元素中的空白的处理方式。
word-spacing:字间距。
③CSS字体:
css字体属性定义文本的字体系列,大小,加粗,风格和变形。
font-family:设置字体的系列。
font-size:设置字体的尺寸。
font-style:设置字体的风格。
font-variant:以小型大写字体或正常字体显示文本。
font-weight:设置字体的粗细。
④CSS链接:
四种状态:link 普通的,未被访问的链接。
visited 用户已访问的链接。
hover 鼠标指针位于链接的上方。
active 链接被点击的时刻。
⑤CSS列表:
CSS列表属性允许你放置,改变列表标志,或者将图像作为列表项标志。
list-style:简单列表项。
list-style-image:列表项图像。
list-style-postion:列表标志位置。
list-style-type:列表类型。
⑥CSS表格:
CSS表格属性可以帮助我们极大改善表格的外观。
表格的边框。
折叠边框。
表格宽高。
表格文本对齐。
表格内边距。
表格颜色。
⑦CSS轮廓:
轮廓主要是用来突出元素的作用。
outline 设置轮廓的属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
⑧css !important作用是提高指定CSS样式规则的应用优先权。
二, CSS基本样式
1,CSS介绍和语法
①概述:CSS指层叠样式表。CSS样式表极大提高了工作效率。
格式:selector {
properly:value
}
例如:h1 { color : red ; font-size: 14px; }
属性大于1个之后,属性之间用分号隔开。
如果值大于1个单词,则需要加上引号。
例如:p { font-family: "sans serif"; }
②CSS高级语法
选择器的分组:h1,h2,h3,h4,h5,h6 { color :red ; }
继承:body {
color:green;
}
凡是在body体内的内容,如无设置其标签属性都将继承body样式。
2,css派生选择器
派生选择器:通过依靠元素在其位置的上下文关系来定义样式。
派生选择器以 空格 来定义。
3,css id选择器
id选择器:可以标有id的HTML元素指定特定的样式。
id选择器以“#”来定义。
目前比较常用的方式是id选择器常常用于建立派生选择器。
4,css类选择器
类选择器以一个点显示。
class也可以用作派生选择器。
5,属性选择器
属性选择器:对带有指定属性的HTML元素设置样式。
属性和值选择器。
三,CSS盒子模型。
1,概述
盒子模型的内容范围包括:margin,border,padding,content部分组成。
2,内边距
内边距在content外,边框内
padding 所有边距
padding-bottom 底边距
padding-left 左边距
padding-right 右边距
padding-top 上边距
3,边框
创建出边框,并且可以应用于任何元素。
border-style:定义了10个不同的非继承样式,包括none。
单边样式:border-top-style ; border-left-style ; border-right-style ; border-bottom-style ;
CSS3边框:border-radius :圆角边框 ; box-shadow:边框阴影; border-image :边框图片;
4,外边距
围绕在内容边框的区域就是外边距,外边距默认为透明区域。
外边距接受任何长度单位,百分数值。
margin 所有边距
margin -bottom 底边距
margin -left 左边距
margin -right 右边距
margin -top 上边距
5,外边距合并
外边距合并就是一个叠加的概念。
遵循多的边距
6,盒子模型应用
四,CSS定位。
1,CSS定位
CSS定位:改变元素在页面上的位置。
定位机制:普通流 (元素按照其在HTML中的位置顺序决定排布的过程) ; 浮动 ;绝对布局。
定位属性:
postion 把元素放在一个静态的,相对的,绝对是,或者固定的位置中。
其属性值:static;relative;absolute;fixed
top 向上的偏移
left 向左的偏移
right 向右的偏移
bottom 向下的偏移
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
verical-align 设置元素垂直对其方式
z-index 设置元素的堆叠顺序
2,CSS浮动
float属性可用的值:
left 元素向左浮动。
right 元素向右浮动。
none 元素不浮动。
inherit 从父级继承浮动属性。
clear属性:
去掉浮动属性(包括继承来的属性)
clear属性值:left,right 去掉元素向左,向右浮动。both 左右两侧均去掉浮动。inherit 从父级继承来的clear的值。
五,CSS选择器
1,元素选择器
最常见的选择器就是元素选择器,文档的元素就是最基本的选择器。
例如:h1 { };a{ } ;
2,选择器分组
例如:h1,h2 { }
通配符:* { }
3,类选择器详解
①类选择器允许以一种独立与文档元素的方式来指定样式。
例如:.class { }
② 结合元素选择器。
例如:a.class { }
③多类选择器
例如:.class.class { }
④ID 选择器详解
ID选择器类似于类选择器,不过也有一些重要差别。
例如:#id { }
区别:
ID只能在文档中使用一次,而类可以多次使用。
ID选择器不能结合使用。
当使用js时候,需要用到id。
⑤属性选择器详解
简单属性选择:例如:[ title] { }
根据具体属性值选择:除了选择拥有某些的元素,还可以进一步缩小选择范围,值选择有特定属性值的元素。例如:a [ href="http://www.baidu.com"] { }
属性和属性值必须完全匹配
根据部分属性值选择
⑥后代选择器
后代选择器可以选择作为某元素后代的元素。例如:p strong { };
⑦子元素选择器
与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素。
例如:h1>strong { };
⑧相邻兄弟选择器
可以选择紧接着另一个元素后的元素,且二者有相同父元素。
例如:h1 + p { };
六,CSS常用操作
1,对齐
①使用margin属性进行水平对齐。
②使用position属性进行左右对齐。
③使用Float属性进行左右对齐。
2,尺寸
①属性
height 设置元素的高度;
width 设置元素宽度;
line-height 设置行高;
max-height 设置元素最大高度;
min-height 设置元素最小高度;
max-width 设置元素最大宽度;
min-width 设置元素最小宽度;
3,分类
①属性
clear 设置一个元素的侧面是否允许其他的浮动元素;
cursor 规定当指向某元素之上时显示的指针类型;
display 设置是否及如何显示元素;
Float 定义元素在那个方向浮动;
position 把元素放置到一个静态的,相对的,绝对的,固定的位置;
visiblity 设置元素是否可见或不可见;
4,导航栏
①垂直导航栏
17x29x51
17x31x45
24x32
②水平导航栏
③导航栏效果
5,图片
七,css动画
1,2D,3D转换
①通过css3转换,我们能够对元素进行移动,缩放,转动,拉长或伸拉转换是使元素改变形状,尺寸和位置的一种效果。
②2D转换方法:
translate()
rotate()
scale()
skew()
matrix()
③3D转换方法:
rotateX()
rotateY()
2,过渡
①通过使用css3,可以给元素添加一些效果。
②css3过渡是元素从一种样式转换成另一种样式。
动画效果的css
动画执行的时间
③属性:
transition 设置四个过渡属性
transition-property 过渡是名称
transition-duration 过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡效果开始时间
3,动画
①通过css3,也可以进行创建动画了。
②css3的动画需要遵循@keyframes规则。
规定动画的时长
规定动画的名称
4,多列
①在css3中,可以创建多列来对文本或者区域进行布局。
②属性:
column-count 行的个数
column-gap 间距
column-rule
5,瀑布流效果
第三部分,Javascript基础
一,JavaScript基础教程
1,Javascript基础-介绍、实现、输出
①介绍
JavaScript 是互联网上最流行的脚本语言,这么语言可用于web和HTML,更可广泛用于服务器,PC端,移动端。
JavaScript是一种轻量级的编程语言。是可插入HTML页面的编程代码。插入HTML页面后,可由所有的浏览器执行。
②实现
用法:
HTML中的脚本必须位于<script></script>标签之间。
脚本可被放置在HTML页面的<body>和<head>部分中。
标签:
在HTML中插入JavaScript,使用<script>标签
在<script></script>之间书写代码。
使用限制:
在HTML中,不限制脚本数量。
通常会把脚本放置于<head>标签中,以不干扰页面内容。
③输出
JavaScript通常用来操作HTML。
文档输出:document.write("<p>this is my first JavaScript </p>");
2,JavaScript基础-语法和注释
①语法
语句:
JavaScript语句向浏览器发出是命令,语句的作用是告诉浏览器该做什么。
分号:
语句之间的分割是分号(;)
注意:分号是可选项,有时候看到不以分号隔开的。
代码:按照编写顺序依次执行。
标示符:必须以字母,下划线或美元符号开始。
JavaScript关键字。
JavaScript对大小写敏感。
空格:忽略多余的空格。
代码换行:禁止。
保留字:
②注释
单行注释://
多行注释: /* */
3,Javascript基础-变量和数据类型
①变量:是用来存储信息的“容器”。
例如:var x=10;
var y=10.1;
var z="hello";
②数据类型:
字符串(String) 数字(Number) 布尔(Boolean) 数组(Array) 对象(Object) 空(null) 未定义 可以通过赋值为null的方式清除变量。
二,JavaScript语法详解
1,运算符
①算数运算符:+,-,*,/,++,--
②赋值运算符:=,+=,-=,*=,/=,%=
③ 字符串操作
④比较运算符:==,===,!=,!==,>,<,>=,<=
⑤逻辑运算符:&&,||,!
⑥条件运算符:例:x<10? "x比10小":"x比10大";
2,条件语句
①if(条件){
代码块
}else{
}
②switch(值){
case 0:
break;
default:
break;
}
③循环for
for(var i=0;i<arr.length; i++){
循环体
}
for (i in j){ 循环体 }
④循环while
while(条件){
循环体;
迭代条件;
}
⑤跳转语句
break;结束整个循环
continue; 结束当前循环
三,JavaScript函数
1,函数的用途
函数是由事件驱动或者当它被调用时执行的可重复使用的代码块。
例:实现10组数字的和;
2,定义函数:
function 函数名(){
函数体;
}
注意:JavaScript对大小写敏感,必须注意函数名一致。
3,函数调用
函数在定义好之后。不能自定执行,需要进行调用。
调用方式:
在<script>标签内调用
在HTML文件中调用
4,带参数的函数
在函数的调用中,也可以传递值,这些值被称为参数。例:demo(arg1 ,arg2);
参数的个数可以为任意多,每个参数通过“,”隔开。
注意:参数在传递时,其顺序必须一致。
意义:通过传递参数的个数以及参数的类型不同完成不同的功能。
5,带返回值的函数
有时,我们需要将函数的值返回调用他的地方;
通过return语句就可以实现。
注意:在使用return语句时,函数会停止执行,同时返回值。
6,局部变量和全局变量
四,JavaScript异常处理和事件处理
1,异常捕获
异常:当JavaScript引擎执行JavaScript代码时,发生了错误。导致程序停止运行。
异常抛出:当异常产生,并且将这个异常生成一个错误信息。
异常捕获:
try { 发生异常的代码块;
}catch(err) {
错误信息处理;
}
Throw语句:
通过throw语句创建一个自定义的错误。
2,事件
事件是可以被JavaScript侦测到的行为。
常见事件:
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移除事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移开光标事件
onLoad 网页加载事件
onUnload 关闭网页事件
五,DOM对象
1,简介
①HTML_DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
②DOM操作HTML:
改变页面中所有HTML元素。
改变页面中所有HTML属性。
改变页面中所有CSS样式。
对页面中的所有事件作出反应。
2,操作HTML
①改变HTMLs输出流:绝对不要在文档加载完成之后使用 document.write()。会覆盖该文档。
②寻找元素:通过id找到HTML元素。通过标签找到HTML元素。
③改变HTML内容:使用属性 innerHTML;
④改变HTML属性:使用attribute
3,操作css
①通过DOM对象改变css
语法:document.getElementById( id ).style.property=new style
4,DOM EventListener:
方法:
addEventListener(); 用于向指定元素添加事件句柄。
removeEventListener(); 移除方法添加的事件句柄。
六,javaScript事件详解
1,事件流
①事件流:描述的是在页面中接受事件的顺序。
②事件冒泡:由最具体的元素接收,然后逐渐向上传播至最不具体的元素的节点(文档)。
③事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件。
2,事件处理
①HTML事件处理:直接添加到HTMl结构中。
②DOM0级事件处理:把一个函数赋值给一个事件处理程序属性。
③DOM2级事件处理:
addEventListener(“事件名”,“事件处理函数”,“布尔值”);
true :事件捕获。
false:事件冒泡。
removeEventListener();
④IE事件处理程序:
attachEvent
detachEvent
3,事件对象
①事件对象:在触发DOM事件的时候都会产生一个对象。
②事件对象event:
type:获取事件类型。
target:获取事件目标。
stopPropagation():阻止事件冒泡。
preventDefault():阻止事件默认行为。
七,JavaScript内置对象
1,什么是对象
①对象
JavaScript中的所有的事物都是对象:字符串,数值,数组,函数。。。。
每个对象带有属性和方法。
JavaScript允许自定义对象。
②自定义对象
定义并创建对象实例。
使用函数来定义对象,然后创建新的对象实例。
2,String字符串对象
①Strin对象
String对象用于处理已有的字符串。
字符串可以使用双引号或单引号。
②在字符串中查找字符串:indexOf()
③内容匹配:match()
④替换内容:replace()
⑤字符串大小写转换:toUpperCase() /toLowerCase()
⑥字符串转为数组:strong>split
⑦字符串属性和方法:
属性:length,prototype,constructor
方法:charAt(),charCodeAt(),concat(),fromCharCode(),indexOf(),lastIndexOf(),match(),replace(),search(),slice(),substring(),substr(),valueOf(),toLowerCase(),toUpperCase(),split()
3,Date日期对象
①Date对象:日期对象用于处理日期和时间。
②获得当日的日期。
③常用方法:
getFullYear(): 获取年份。
getTime() :获取毫秒。
setFullYear() :设置具体的日期。
getDay() :获取星期。
4,Array数组对象。
①Array对象:使用单独的变量名来存储一系列的值。
②数组的创建:例:var myArray=[ "Hello", "iwen", "ime" ] ;
③数组的访问:通过指定数组名以及索引号码,你可以访问某个特定的元素。
注意: [0]是数组的第一个元素,[1] 是数组的第二个元素。
④数组常用方法:
concat(): 合并数组。
sort(): 排序。
push(): 末尾追加元素。
reverse(): 数组元素翻转。
5,Math对象
①Math对象:执行常见的算数任务。
②常用方法:
round():四舍五入。
random():返回0~1之间的随机数。
max() : 返回最高值。
min(): 返回中的最低值。
abs() : 返回觉得值。
八,JavaScript对象控制HTML元素详解
方法:
getElementByName() : 获取name。
getElementByTagName() : 获取元素。
getAttribute() : 获取元素属性。
setAttribute() : 设置元素属性。
childNodes() :访问子节点。
parentNode() : 访问父节点。
createElement() : 创建元素节点。
createTextNode() : 创建文本节点。
insertBefore() : 插入节点。
removeChild() :删除节点。
offsetHeight() :网页尺寸。
scrollHeight() : 网页尺寸。
九,Js浏览器对象
1,Window对象
①对象:是BOM的核心,window对象指当前的浏览器窗口,所有JavaScript全局对象,函数以及变量均自动成为window对象的成员。
全局变量是window对象的属性。
全局函数是window对象的方法。
甚至HTML DOM的document也是window对象的属性之一。
②尺寸:
window.innerHeight : 浏览器窗口的内部高度。
window.innerWidth : 浏览器窗口的内部宽度。
2,计时器
①计时事件:通过使用JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件。
②计时方法:
setInterval(): 间隔指定的毫秒数不停地执行指定代码。
clearInterval(): 方法用于停止setInterval()方法执行的函数代码。
setTimeout() : 暂停指定的毫秒数后执行指定的代码。
clearTImeout() 方法用于停止执行setTimeout()方法的函数代码。
3,History对象
①History对象:window.history 对象包含浏览器的历史(url)的集合。
②History方法:
history.back() 与在浏览器点击后退键相同。
history.forward() 与在浏览器中点击按钮向前相同。
History.go() 进入历史中的某个页面。
4,Location对象
①window.location 对象用于获得当前页面的地址(UrL),并把浏览器重定向到新的页面。
②location对象的属性:
location.hostname 返回web主机的域名。
location.pathname 返回当前页面的路径和文件名。
location.port 返回web主机的端口。
location.protocol 返回所使用的web协议(Http:// 或者https://)。
location.href 属性返回当前页面的URL。
location.assign() 方法加载新的文档。
5,Screen对象
①Screen对象包含有关用户屏幕的信息。
②属性:
screen.availWidth 可用的屏幕宽度。
screen.avaiHeight 可用的屏幕高度。
screen.Height 屏幕高度。
screen.Width 屏幕宽度。
十,JS面向对象
1,认识面向对象。
①概念:
一切事物皆对象。
对象具有封装和继承特性。
信息隐藏。
2,JS面向对象1。
/* 相当于类 */
(function(){//封装信息
var n="ime";
function Person(name){
this.name=name;
}
Person.prototype.say=function(){
alert("peo_Hello:"+this.name+n);
}
window.Person=Person;//赋值给顶级window
}());
(function(){
function Student(name){
this.name=name;
}
Student.prototype=new Person();
var supers=Student.prototype.say;
Student.prototype.say=function(){
supers.call(this);//子类调用父类内容。
alert("Stu_hello:"+this.name);
}
window.Student=Student;
}());//此处加个小括号!!!!!!!!!!!!!
var s =new Student("iwen");
s.say();//弹出hello
3,JS面向对象2
/* 相当于类2 */
(function(){
var n ="ime1";
function Peple(name){
var _this={}
_this.name=name;
_this.sayHello=function(){
alert("PHello"+_this.name+n);
}
return _this;
}
window.Peple=Peple;
}());
(function (){
function Teacher(name){
var _this=Peple(name);//带小括号的--对象
_this.name=name;
var superSay=_this.sayHello;//不能带括号--方法
_this.sayHello=function(){
superSay.call(_this);
alert("Thello"+_this.name);
}
return _this;
}
window.Teacher=Teacher;
}());
var t =Teacher("zhangsan");
t.sayHello();//弹出Hello
十一,JavaScript瀑布流
1,布局
第四部分,HTML5新特性基础
1,HTML5音频视频
1,音频播放
①Audio: HTML5提供了播放音频文件的标准。
②control(控制器):添加播放,暂停和音量控件。
③标签:<audio> 定义声音。
<source> 规定多媒体资源,可以是多个。
2,编解码工具
①FFmpeg
②官方网址:www.ffmpeg.org
3,视频播放
①Video: HTML5提供了播放音频文件的标准。
②control(控制器):添加播放,暂停和音量控件。
③标签:<video> 定义声音。
<source> 规定多媒体资源,可以是多个。
④属性:width:宽
height:高
2, HTML5拖放
1,拖放
①拖放(Drag和drop)是HTML5标准的组成部分。
②拖动开始:ondragstart: 调用了一个函数,drag(event) 它规定了被拖动的数据。
③设置拖动数据:setData(): 设置被拖动数据的数据类型和值。
④放入位置:ondragover: 事件规定在何处放置被拖动的数据。
⑤放置:ondrog:当放置被拖动数据时,会发生drop事件。
2,拖放本地资源
3,HTML5Canvas标签
1,创建canvas
①Canvas标签:HTML5<canvas> 元素用于图形的绘制。通过脚本(通常是JavaScript)来完成。<canvas>标签只是图形容器,必须使用脚本来绘制图形。
通过多种方法使用Canvas绘制路径,盒,圆,字符以及添加图想。
②标签:<canvas>
2,绘制图形:canvas 元素本身没有绘图能力的,所有的绘图工作必须在JavaScript内部完成。
3,绘制图片:
4,HTML5Canvas应用
1,认识createjs:下载第三方包网址:createjs.com
2,炫酷效果
5,SVG
1,什么是SVG?
①SVG指可伸缩矢量图形(Scalable Vector Graphics)
②SVG用来定义用于网络的基于矢量的图形。
③SVG使用XML格式定义图形。
④SVG图像在放大或改变尺寸的情况下其图形质量不会有损失。
⑤SVG是万维网联盟的标准。
2,SVG优势
①SVG图像可通过文本编辑器来创建和修改。
②SVG图像可被搜索,索引,脚本化或压缩。
③SVG是可伸缩的。
④SVG图像可在任意的分辨率下被高质量地打印。
⑤SVG可在图像质量不下降的情况下被放大。
3,引入SVG外部文件
①创建一个svg.svg是一个xml,加一个头文件<?xml version="1.0"?>
②网站:developer.mozilla.org
https://developer.mozilla.org/zh-CN/docs/Web/SVG
6,Web储存
1,客户端储存数据的新方法
①localStorage:没有时间限制的数据存储。
②sessionStorage: 针对一个session的数据存储。
2,LocalStorage
①特点:没有时间限制。
3,sessionStorage
①特点:对一个session进行数据存储。当用户关闭时数据会被删除。
7,HTML5应用缓存与Web Workers
1,应用缓存
①什么是应用缓存:
HTML5引入应用缓存,这一位子web应用可进行缓存,并可在没有联网时进行访问。
②应用缓存的优势:
离线浏览:用户可在应用离线时使用它们。
速度:已缓存资源加载得更快。
减少服务器负担:浏览器将只从服务器下载更新过或更改过的资源。
③实现缓存:
如需启动应用缓存,请在文档的<html>标签中包含manifest属性
mainfest文件的扩展名是:“.appcache”
③Manifest文件:
CACHE MANIFEST: 在此标题下列出的文件将首次下载或进行缓存。
NETWORK: 此标题下列出的文件需要与服务器的连接,不会被缓存。
FALLBACK: 此标题下列出的文件规定当前页面无法访问时的回退页面。
2,Web Workers
①web worker 是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。
②方法: postMessage() : 它用于向HTML页面传回一段消息。
terminate() : 终止web worker, 并释放浏览器/计算机资源。
③事件: onmessage
8,服务器推送事件
1,介绍
①HTML5服务器推送事件
服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分,可以用来从服务端实时推送数据到浏览器端。
②传统服务器端推送技术
webSocket: WebSocket 规范HTML5中的一个重要组成部分。已经被主流浏览器所支持,也有不少基于WebSocket开发的应用。
webSocket使用的是嵌套字链接,基于TCP协议,使用webSocket 之后,实际上在服务端和浏览器之间建立一个套接链接。可以进行双向的数据传输,
webSocket的功能很强大,使用起来也灵活,可以适应不同的场景。
不过,webSocket技术也比较复杂,包括服务器端和浏览器端的实现都不同于一般的web应用。
③HTTP协议:简单轮询,即浏览器定时向服务端发送请求,来查询是否有数据更新。这种做法比较简单,可以在一定程度上解决问题,不过对于轮询的时间间隔需要进行考虑,间隔过长,会导致用户不能及时接收更新的数据,间隔过短,会导致查询请求过多,增加服务端的负担。
2,实现
①服务器代码头:
header(‘ Content-Type: text/event-stream’);
②EventSource事件:
onopen : 服务器的链接被打开。
onmessa: 接收消息。
onerror: 错误发生。
第五部分,响应式布局
一,响应式布局基础。
1,介绍。
①响应布局:响应式布局是2010年5月提出的一个概念,就是一个网站能够兼容多个终端,是为了解决移动互联网浏览而诞生的,其目的是为用户提供更加舒适的界面和更好的用户体验。
②优缺点:
优点:面对不同分辨率的设备灵活性强。能够快捷解决多设备显示适应问题。
缺点:兼容各种设备工作量大,效率低下。代码累赘,会出现隐藏无用的元素,加载时间过长。
2,布局效果。
①CSS中的Media Query(媒介查询)
设备宽高:device-width,device-height;
渲染窗口的宽和高:width,height;
设备的手持方向:orientation;
设备的分辨率:resolution;
②使用方法:
外联。
内嵌样式。
3,实例操作。
①在页面放置元素,随页面改变而改变。
二,响应式布局之Bootstrap
1,Bootstap介绍
①了解Bootstap:简洁,直观,强悍的前端开发框架,让web开发更迅速,简单。
②优点:快速,简单,灵活的栅格系统,小而强大,响应式布局,跨平台等。
③下载:http://getbootstrap.com
2,Bootstrap CSS,组件与JavaScript插件
3,应用例子:http://getbootstrap.com/examples/jumbotron/
第六部分,jQuery基础
一,jQuery简介及语法
1,简介。
①jQuery:jQuery 库可以通过一行简单的标记被添加到网页中。
②什么是jQuery:是一个JavaScrip函数库。
③jQuery库的功能:
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
Javascript 特效和动画
HTML DOM遍历和修改
AJax : 不刷新页面修改内容。
Utilities
2,引入jQuery的方法。
①网页中添加jQuery
从jquery.com下载jQuery库。
从CDN中载入jQuery,如从Google中加载jQuery
百度和新浪的服务器存有jQuery:http://libs.baidu.com/jquery/1.1.02/jquery.min.js
谷歌和微软的服务器存有jQuery:http://ajax.googleapis.com/ajax/libs/jquery/jquery.min.js
②版本介绍
v1.11.1 : 1.x支持IE6+
v2.1.1 :2.x支持IE0+
3,语法。
①jQuery语法
基础语法:$(selector).action()
网页加载完成:$(document).ready(function(){});
美元符号定义jQuery
选择符(selector)“查询”和“查找”HTML元素。
jQuery的action()执行对元素的操作。
例如:$(this).hide() : 隐藏当前元素
$("p").hide() :隐藏所有段落
二,jQuery选择器和事件
1,选择器
①修改指定元素内容:
例如:$("button").click(function(){
$(".pcalss").text("p元素被修改了");//元素选择器,指定修改元素
});
2,事件常用方法
①可以根据元素类型,id,class,标签进行修改内容。
3,绑定,解除事件
使用 .bind() 和unbind()方法。
例如:
4,事件目标与冒泡
阻止冒泡方法:
5,自定义事件
例如:
三,jQuery效果之隐藏,显示,淡入淡出,滑动,回调
1,隐藏与显示
例如:
2,淡入淡出
例如:
3,滑动
4,回调
四,HTML之捕获,设置,元素添加,元素删除
1,HTML-捕获
例:
2,HTML-设置
例:
3,HTML-添加元素
例如:
4,HTMl-删除元素
例:
五,CSS操作及jQuery的盒子模型
1,jQuery CSS方法
例:
2,jQuery 盒子模型
六,元素的遍历与过滤
1,向下遍历
2,向上遍历
3,同级遍历
4,过滤
七,Ajax之异步访问和加载片段
1,异步访问
PhpStorm中
js:
2,加载片段
八,jQuery的扩展与noConflict
1,jQuery扩展
2,noConflict
var jq= $.noConflict();//代替美元符号
九,UI下载与使用
1,jQuery UI介绍
①jQuery UI
是以jQuery为基础的JavaScript网页用户界面的开源库,包含底层用户交互,动画,特效和可更换主题的可视控件,我们可以直接用它来构建具有很好交互性的web应用程序。
包含了许多维持状态的小部件(Widget),因此,它与典型的jQuery插件使用模式略有不同,所有jQueryUI小部件(Widget)使用相同的模式,所有,只要你学会使用其中一个,你就知道如何使用其他小部件(Widget)
②jQuerUI 支持:IE6.0+, Firefox 3+, Safari 3.1+ , Opera 9.6+ 和Google Chrome
③交互:交互部件是一些与鼠标交互相关的内容,包括Draggable, Droppable, Resizable, Selectable和Sortable等
④小部件:主要是一些界面的扩展,包括AutoComplete, colorPicker, Dialog,Slider, Tabs, ProgressBar, Spinner等
⑤效果:用于提供丰富的动画效果,包括:Add Class , Color Animation Toggle等。
十,jQuery瀑布流
代码:
第七部分,jQuery UI基础
一,Interactions( 交互 )
1,draggable( 拖动 )
2,droppable(放置)
3,resizeable(调整大小)
4,selectable(可选)
5,sortable(排序)
二,Widgets(小部件)
1,Accordion(折叠;手风琴效果)
2,Autocomplete(自动填充)
3,Datepicker(时间选择器)
4,Dialog( 对话框)
5,ProgressBar( 进度条)
6,Menu(菜单)
7,Slider(滑动按钮)
8,spinner( 下拉列表)
三,Effects(效果)
1,AddClass,Bind
2,Color Animation, hide, removeClass
3,show,toggleClass
第八部分,jQuery Mobile基础
一,了解JQuery Mobile
1,JQuery Mobile:是jQuery在手机上和平板设备上的版本,jQuery Mobile给主流移动平台带来jQuery核心库,与jQuery核心库一样,你不需要安装任何东西,只需将. js和. css文件直接包含到你的web页面中即可,这样,jQuery Mobile 的功能就好像被放到你的指尖,供你随时使用
2,jQuery Mobile事件:是针对移动端浏览器的事件。
触摸事件:当用户触摸屏幕是触发
滑动事件:当用户上下滑动时触发
定位事件:当设备水平或者垂直翻转时触发
页面事件:当页面显示,隐藏,创建,加载或未加载时触发
3,下载:http://jquerymobile.com/
4,使用jQueryMobile
二,Mobile Widgets
1,page
2,button
3,checkbox,radio,collapsible
4,gird,listview
5,navbar, popup
6,select,theme
三,Mobile 事件
1,pageinit: 页面加载完成之后触发
2,tap: 触摸事件
3,taphold : 长按事件
4,swipe:滑动是处理
5,swileft:向左滑动
6,scrollstart:开始滚动时
7,scrollstop:停止滚动时
8,orientationchange:设备方向改变是触发
九部分 CreateJS基础
一,Create JS介绍
1,EaseJS
①Create JS:
是一款HTML5游戏开发的引擎。是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验。
②四款工具:
EaselJS: 用来处理HTML5的canvas。
TweenJS: 用来处理HTML5的动画调整和Javascript属性。
SoundJS: 用来帮助简化处理音频相关API
2,下载:http://createjs.com/
二,Create JS基础
1,容器
2,绘图
3,事件
三,Create JS控件
1,Text
2,Bitmap
四,CreateJS之TweenJS
五,CreateJS 与flash生成js文件交互
第十部分,TypeScript基础
第十一部分,实战开发
1,围住神经猫
2,看你有多色
3,冰桶挑战
4,打企鹅
5,语音识别
6,极客学院页面-用户中心
7,极客学院页面-播放视频
8,极客学院页面-路径图
9,标签切换效果
10,回到顶部功能
11,导航栏
12,Tooltip
13,幽灵按钮
14,列表切换
15,侧边栏固定
16,照片墙
1,什么是HTML5?
(Hyper Text Markup Language) 超文本标记语言,用于描述网页的一种语言。
2,HTML5相关知识?
HTML
XHTML
Css
Css3
JavaScript
JQuery
HTML5
3,HTML5新特性?
1,绘画:canvas标签
2,媒介:video和audio元素
3,存储:本地离线存储
4,新元素:article,footer,header,nav,section
5,新控件:calendar,date,time,email,url,search
6,浏览器:Safari,Chrome,Firefox,Opera,IE9
HTML基础讲解
4,声明:<!DOCTYPE>
5,HTML基础标签:head,body
6,HTML标题
<h1>...<h6>等标签进行定义
7,HTML段落
<p>标签定义段落
8,HTML连接
<a>标签定义连接
9,HTML图像
<img>标签定义图像
10,HTML元素
是从开始标签到结束标签的所有代码。即元素的内容
空元素在开始标签进行闭合。如:<br/>
大多数的元素有属性,都可以嵌套的。如:<p> <a>hello </a></p>
11,HTML属性
标签可以拥有属性为元素提供更多是信息。
属性是以键值对的形式。如:href="www.baidu.com"
常用标签属性:<h1> align:对齐方式;<body> bgcolor:背景颜色;<a> target:规定在何处打开链接;
通用属性:class:规定元素的类名;id:规定元素的唯一ID; style:规定元素的样式; title:规定元素的额外信息;
12,HTML格式化
<b> 粗体文本
<big> 大号字
<em> 着重文字
<i> 斜体字
<small> 小号字
<strong> 加重语气
<sub> 下标字
<sup> 上标字
<ins> 插入字
<del> 删除字
13,HTML样式
标签:<style> 样式定义 ; <link> 资源引用
属性:rel="stylesheet" 外部样式表; type="text/css" 引入文档类型; margin-left 边距;
插入方法:外部样式表 <link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表 <style type="text/css">
body { background-color :red}
p { margin-left:20px }
</style>
内联样式表 <p style= "color:red">
14,HTML链接
数据:文本链接;图片链接;
属性:href属性 指向另一个文档的链接; name属性 创建文档内的链接;
img标签属性;alt 替换文本属性; width 宽 ; height 高;
15,HTML表格
<table> 表格
<caption> 表格标题
<th> 表头
<tr> 行
<td> 单元
<thead> 页眉
<tbody> 主体
<tfoot> 页脚
<col> 列属性
16,THML列表
标签:<ol> 有序; <ul> 无序; <li> 列表项; <dl> 列表; <dt> 列表项; <dd> 描述;
无序列表:标签 <ul><li> 属性 disc , circle, square;
有序列表:标签 <ol><li> 属性 A, a, I, i, start;
嵌套列表:标签 <ul><ol><li>
自定义列表:标签 <dl><dt><dd>
17,HTML块
块的元素:块元素显示时,通常以新行开始; 如:<h1><p><ul>
内联元素:内联元素通常不会以新行开始; 如:<b><a><img>
<div>元素:<div>元素也被称为块元素,其主要的组合HTML元素的容器。
<
4000
span>元素:<span>元素是内联元素,可作为文本的容器。
18,HTML布局
①div布局
②table元素布局
19,表单用于获取不同类型的用户输入
20,常用表单标签
<from> 表单
<input> 输入域
<textarea> 文本域
<label> 控制标签
<fieldset> 定义域
<legend> 域的标题
<select> 选择列表
<optgroup> 选项组
<option> 下拉列表选项
<button> 按钮
21,PHP环境搭建
网站:www.apachefriends.org 下载安装XAMPP
其中,运行 xx.hph的目录:/xampp/htdocs
打开eclipse--help-->install new software
输入:http://download.eclipse.org/releases
找到:Programming Languages-->PHP Development Tools (PDT)
安装后重起,open perspective-->PHP
新建工程-->(将工作空间变化到 /xampp/htdocs)
或在拷贝xx.php 到/xampp/htdocs中
运行:在浏览器中输入:localhost/xx.php
22,表单提交数据和PHP交互
在PHP服务端://$_GET:指的是用get方式提交; $_POST:post方式
echo "用户名".$_POST['name']."<br>密码".$_POST['password'];
在IDEA端:<!--action:指的是运行PHP服务器的xx.php的网址; method:指的是提交方式get或post(与PHP服务端一致)-->
<form action="http://localhost/MyService/Service.php" method="post">
用户名:<input type="text" name="name"><br>
密 码:<input type="password" name="password">
<br>
<input type="submit" value="提交">
</form>
23,HTML框架
框架标签(frame)
框架集标签(<frameset>)
常用标签:noresize:固定框架大小;cols:列;rows:行;
内联框架:iframe
24,HTML5背景
背景标签:background--图片背景
背景颜色:Bgcolor--颜色背景
颜色:是由一个十六进制符号来定义的。这些符号由红色,绿色和蓝色的值组成(RGB)
颜色值最小值:0(#00)
颜色值最大值:255(#FF)
红色:#FF0000
绿色:#00FF00
蓝色:#0000FF
25,HTML实体
HTML中预留字符串必须被替换成字符实体。
如:< , > , % 例:<html> 写成: <html>
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | | ||
< | 小于号 | < | << p=""><!-- |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | ' (IE不支持) | ' |
¢ | 分 | ¢ | ¢ |
£ | 镑 | £ | £ |
¥ | 人民币 | ¥ | ¥ |
XHTML简介:
①什么是XHTML? 是指可扩展超文本标记语言。与HTML4.01几乎相同。是更严格更纯净的HTML版本。得到所有主流浏览器的支持。
②为什么使用XHTML? 为了代码的完整性和良好性。
③文档声明:DTD 规定了使用通用标记语言的网页语法。
④三种XHTML文档类型:STRICT (严格性) TRANSITIONAL (过渡类型) FRAMESET (框架类型)
XHTML元素:
①XHTML元素必须正确嵌套。
②XHTML元素必须始终关闭。
③XHTML元素必须小写。
④XHTML文档必须有一个根元素。
XHTML属性:
①XHTML属性必须使用小写。
②XHTML属性值必须用引号包围。
③XHTML属性最小化也是禁止的。
第二部分,CSS3基础
一,入门基础知识。
1,CSS3样式
①CSS背景: css允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。
background-attachment:背景图像是否固定或者随着页面滚动。
background-color:设置原色的背景颜色。
background-image:把图片设置为背景。
background-position:设置背景图片的起始位置。
background-repeat:设置背景图片是否及如何重复。
background-size: 规定背景图片的尺寸。
background-origin :规定背景图片的定位区域。
background-clip:规定背景的绘制区域。
②CSS文本:
color:文本颜色。
direction:文本方向。
line-height:行高。
letter-spacing:字符间距。
text-align:对齐元素中的文本。
text-decoration:向文本添加修饰。
text-indent:缩进元素中文本的首行。
text-transform:元素中的字母。
Unicode-bidi:设置文本的方向。
white-space:元素中的空白的处理方式。
word-spacing:字间距。
③CSS字体:
css字体属性定义文本的字体系列,大小,加粗,风格和变形。
font-family:设置字体的系列。
font-size:设置字体的尺寸。
font-style:设置字体的风格。
font-variant:以小型大写字体或正常字体显示文本。
font-weight:设置字体的粗细。
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
100 200 300 400 500 600 700 800 900 | 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
尺寸
单位 | 描述 |
---|---|
% | 百分比 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
em | 1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如,如果某元素以 12pt 显示,那么 2em 是24pt。 在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。 |
ex | 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) |
pt | 磅 (1 pt 等于 1/72 英寸) |
pc | 12 点活字 (1 pc 等于 12 点) |
px | 像素 (计算机屏幕上的一个点) |
颜色
单位 | 描述 |
---|---|
(颜色名) | 颜色名称 (比如 red) |
rgb(x,x,x) | RGB 值 (比如 rgb(255,0,0)) |
rgb(x%, x%, x%) | RGB 百分比值 (比如 rgb(100%,0%,0%)) |
#rrggbb | 十六进制数 (比如 #ff0000) |
四种状态:link 普通的,未被访问的链接。
visited 用户已访问的链接。
hover 鼠标指针位于链接的上方。
active 链接被点击的时刻。
⑤CSS列表:
CSS列表属性允许你放置,改变列表标志,或者将图像作为列表项标志。
list-style:简单列表项。
list-style-image:列表项图像。
list-style-postion:列表标志位置。
list-style-type:列表类型。
⑥CSS表格:
CSS表格属性可以帮助我们极大改善表格的外观。
表格的边框。
折叠边框。
表格宽高。
表格文本对齐。
表格内边距。
表格颜色。
⑦CSS轮廓:
轮廓主要是用来突出元素的作用。
outline 设置轮廓的属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
⑧css !important作用是提高指定CSS样式规则的应用优先权。
二, CSS基本样式
1,CSS介绍和语法
①概述:CSS指层叠样式表。CSS样式表极大提高了工作效率。
格式:selector {
properly:value
}
例如:h1 { color : red ; font-size: 14px; }
属性大于1个之后,属性之间用分号隔开。
如果值大于1个单词,则需要加上引号。
例如:p { font-family: "sans serif"; }
②CSS高级语法
选择器的分组:h1,h2,h3,h4,h5,h6 { color :red ; }
继承:body {
color:green;
}
凡是在body体内的内容,如无设置其标签属性都将继承body样式。
2,css派生选择器
派生选择器:通过依靠元素在其位置的上下文关系来定义样式。
派生选择器以 空格 来定义。
3,css id选择器
id选择器:可以标有id的HTML元素指定特定的样式。
id选择器以“#”来定义。
目前比较常用的方式是id选择器常常用于建立派生选择器。
4,css类选择器
类选择器以一个点显示。
class也可以用作派生选择器。
5,属性选择器
属性选择器:对带有指定属性的HTML元素设置样式。
属性和值选择器。
三,CSS盒子模型。
1,概述
盒子模型的内容范围包括:margin,border,padding,content部分组成。
2,内边距
内边距在content外,边框内
padding 所有边距
padding-bottom 底边距
padding-left 左边距
padding-right 右边距
padding-top 上边距
3,边框
创建出边框,并且可以应用于任何元素。
border-style:定义了10个不同的非继承样式,包括none。
单边样式:border-top-style ; border-left-style ; border-right-style ; border-bottom-style ;
CSS3边框:border-radius :圆角边框 ; box-shadow:边框阴影; border-image :边框图片;
4,外边距
围绕在内容边框的区域就是外边距,外边距默认为透明区域。
外边距接受任何长度单位,百分数值。
margin 所有边距
margin -bottom 底边距
margin -left 左边距
margin -right 右边距
margin -top 上边距
5,外边距合并
外边距合并就是一个叠加的概念。
遵循多的边距
6,盒子模型应用
四,CSS定位。
1,CSS定位
CSS定位:改变元素在页面上的位置。
定位机制:普通流 (元素按照其在HTML中的位置顺序决定排布的过程) ; 浮动 ;绝对布局。
定位属性:
postion 把元素放在一个静态的,相对的,绝对是,或者固定的位置中。
其属性值:static;relative;absolute;fixed
top 向上的偏移
left 向左的偏移
right 向右的偏移
bottom 向下的偏移
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
verical-align 设置元素垂直对其方式
z-index 设置元素的堆叠顺序
2,CSS浮动
float属性可用的值:
left 元素向左浮动。
right 元素向右浮动。
none 元素不浮动。
inherit 从父级继承浮动属性。
clear属性:
去掉浮动属性(包括继承来的属性)
clear属性值:left,right 去掉元素向左,向右浮动。both 左右两侧均去掉浮动。inherit 从父级继承来的clear的值。
五,CSS选择器
1,元素选择器
最常见的选择器就是元素选择器,文档的元素就是最基本的选择器。
例如:h1 { };a{ } ;
2,选择器分组
例如:h1,h2 { }
通配符:* { }
3,类选择器详解
①类选择器允许以一种独立与文档元素的方式来指定样式。
例如:.class { }
② 结合元素选择器。
例如:a.class { }
③多类选择器
例如:.class.class { }
④ID 选择器详解
ID选择器类似于类选择器,不过也有一些重要差别。
例如:#id { }
区别:
ID只能在文档中使用一次,而类可以多次使用。
ID选择器不能结合使用。
当使用js时候,需要用到id。
⑤属性选择器详解
简单属性选择:例如:[ title] { }
根据具体属性值选择:除了选择拥有某些的元素,还可以进一步缩小选择范围,值选择有特定属性值的元素。例如:a [ href="http://www.baidu.com"] { }
属性和属性值必须完全匹配
根据部分属性值选择
⑥后代选择器
后代选择器可以选择作为某元素后代的元素。例如:p strong { };
⑦子元素选择器
与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素。
例如:h1>strong { };
⑧相邻兄弟选择器
可以选择紧接着另一个元素后的元素,且二者有相同父元素。
例如:h1 + p { };
六,CSS常用操作
1,对齐
①使用margin属性进行水平对齐。
②使用position属性进行左右对齐。
③使用Float属性进行左右对齐。
2,尺寸
①属性
height 设置元素的高度;
width 设置元素宽度;
line-height 设置行高;
max-height 设置元素最大高度;
min-height 设置元素最小高度;
max-width 设置元素最大宽度;
min-width 设置元素最小宽度;
3,分类
①属性
clear 设置一个元素的侧面是否允许其他的浮动元素;
cursor 规定当指向某元素之上时显示的指针类型;
display 设置是否及如何显示元素;
Float 定义元素在那个方向浮动;
position 把元素放置到一个静态的,相对的,绝对的,固定的位置;
visiblity 设置元素是否可见或不可见;
4,导航栏
①垂直导航栏
17x29x51
17x31x45
24x32
②水平导航栏
③导航栏效果
5,图片
七,css动画
1,2D,3D转换
①通过css3转换,我们能够对元素进行移动,缩放,转动,拉长或伸拉转换是使元素改变形状,尺寸和位置的一种效果。
②2D转换方法:
translate()
rotate()
scale()
skew()
matrix()
③3D转换方法:
rotateX()
rotateY()
2,过渡
①通过使用css3,可以给元素添加一些效果。
②css3过渡是元素从一种样式转换成另一种样式。
动画效果的css
动画执行的时间
③属性:
transition 设置四个过渡属性
transition-property 过渡是名称
transition-duration 过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡效果开始时间
3,动画
①通过css3,也可以进行创建动画了。
②css3的动画需要遵循@keyframes规则。
规定动画的时长
规定动画的名称
4,多列
①在css3中,可以创建多列来对文本或者区域进行布局。
②属性:
column-count 行的个数
column-gap 间距
column-rule
5,瀑布流效果
第三部分,Javascript基础
一,JavaScript基础教程
1,Javascript基础-介绍、实现、输出
①介绍
JavaScript 是互联网上最流行的脚本语言,这么语言可用于web和HTML,更可广泛用于服务器,PC端,移动端。
JavaScript是一种轻量级的编程语言。是可插入HTML页面的编程代码。插入HTML页面后,可由所有的浏览器执行。
②实现
用法:
HTML中的脚本必须位于<script></script>标签之间。
脚本可被放置在HTML页面的<body>和<head>部分中。
标签:
在HTML中插入JavaScript,使用<script>标签
在<script></script>之间书写代码。
使用限制:
在HTML中,不限制脚本数量。
通常会把脚本放置于<head>标签中,以不干扰页面内容。
③输出
JavaScript通常用来操作HTML。
文档输出:document.write("<p>this is my first JavaScript </p>");
2,JavaScript基础-语法和注释
①语法
语句:
JavaScript语句向浏览器发出是命令,语句的作用是告诉浏览器该做什么。
分号:
语句之间的分割是分号(;)
注意:分号是可选项,有时候看到不以分号隔开的。
代码:按照编写顺序依次执行。
标示符:必须以字母,下划线或美元符号开始。
JavaScript关键字。
JavaScript对大小写敏感。
空格:忽略多余的空格。
代码换行:禁止。
保留字:
②注释
单行注释://
多行注释: /* */
3,Javascript基础-变量和数据类型
①变量:是用来存储信息的“容器”。
例如:var x=10;
var y=10.1;
var z="hello";
②数据类型:
字符串(String) 数字(Number) 布尔(Boolean) 数组(Array) 对象(Object) 空(null) 未定义 可以通过赋值为null的方式清除变量。
二,JavaScript语法详解
1,运算符
①算数运算符:+,-,*,/,++,--
②赋值运算符:=,+=,-=,*=,/=,%=
③ 字符串操作
④比较运算符:==,===,!=,!==,>,<,>=,<=
⑤逻辑运算符:&&,||,!
⑥条件运算符:例:x<10? "x比10小":"x比10大";
2,条件语句
①if(条件){
代码块
}else{
}
②switch(值){
case 0:
break;
default:
break;
}
③循环for
for(var i=0;i<arr.length; i++){
循环体
}
for (i in j){ 循环体 }
④循环while
while(条件){
循环体;
迭代条件;
}
⑤跳转语句
break;结束整个循环
continue; 结束当前循环
三,JavaScript函数
1,函数的用途
函数是由事件驱动或者当它被调用时执行的可重复使用的代码块。
例:实现10组数字的和;
2,定义函数:
function 函数名(){
函数体;
}
注意:JavaScript对大小写敏感,必须注意函数名一致。
3,函数调用
函数在定义好之后。不能自定执行,需要进行调用。
调用方式:
在<script>标签内调用
在HTML文件中调用
4,带参数的函数
在函数的调用中,也可以传递值,这些值被称为参数。例:demo(arg1 ,arg2);
参数的个数可以为任意多,每个参数通过“,”隔开。
注意:参数在传递时,其顺序必须一致。
意义:通过传递参数的个数以及参数的类型不同完成不同的功能。
5,带返回值的函数
有时,我们需要将函数的值返回调用他的地方;
通过return语句就可以实现。
注意:在使用return语句时,函数会停止执行,同时返回值。
6,局部变量和全局变量
四,JavaScript异常处理和事件处理
1,异常捕获
异常:当JavaScript引擎执行JavaScript代码时,发生了错误。导致程序停止运行。
异常抛出:当异常产生,并且将这个异常生成一个错误信息。
异常捕获:
try { 发生异常的代码块;
}catch(err) {
错误信息处理;
}
Throw语句:
通过throw语句创建一个自定义的错误。
2,事件
事件是可以被JavaScript侦测到的行为。
常见事件:
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移除事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移开光标事件
onLoad 网页加载事件
onUnload 关闭网页事件
五,DOM对象
1,简介
①HTML_DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
②DOM操作HTML:
改变页面中所有HTML元素。
改变页面中所有HTML属性。
改变页面中所有CSS样式。
对页面中的所有事件作出反应。
2,操作HTML
①改变HTMLs输出流:绝对不要在文档加载完成之后使用 document.write()。会覆盖该文档。
②寻找元素:通过id找到HTML元素。通过标签找到HTML元素。
③改变HTML内容:使用属性 innerHTML;
④改变HTML属性:使用attribute
3,操作css
①通过DOM对象改变css
语法:document.getElementById( id ).style.property=new style
4,DOM EventListener:
方法:
addEventListener(); 用于向指定元素添加事件句柄。
removeEventListener(); 移除方法添加的事件句柄。
六,javaScript事件详解
1,事件流
①事件流:描述的是在页面中接受事件的顺序。
②事件冒泡:由最具体的元素接收,然后逐渐向上传播至最不具体的元素的节点(文档)。
③事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件。
2,事件处理
①HTML事件处理:直接添加到HTMl结构中。
②DOM0级事件处理:把一个函数赋值给一个事件处理程序属性。
③DOM2级事件处理:
addEventListener(“事件名”,“事件处理函数”,“布尔值”);
true :事件捕获。
false:事件冒泡。
removeEventListener();
④IE事件处理程序:
attachEvent
detachEvent
3,事件对象
①事件对象:在触发DOM事件的时候都会产生一个对象。
②事件对象event:
type:获取事件类型。
target:获取事件目标。
stopPropagation():阻止事件冒泡。
preventDefault():阻止事件默认行为。
七,JavaScript内置对象
1,什么是对象
①对象
JavaScript中的所有的事物都是对象:字符串,数值,数组,函数。。。。
每个对象带有属性和方法。
JavaScript允许自定义对象。
②自定义对象
定义并创建对象实例。
使用函数来定义对象,然后创建新的对象实例。
2,String字符串对象
①Strin对象
String对象用于处理已有的字符串。
字符串可以使用双引号或单引号。
②在字符串中查找字符串:indexOf()
③内容匹配:match()
④替换内容:replace()
⑤字符串大小写转换:toUpperCase() /toLowerCase()
⑥字符串转为数组:strong>split
⑦字符串属性和方法:
属性:length,prototype,constructor
方法:charAt(),charCodeAt(),concat(),fromCharCode(),indexOf(),lastIndexOf(),match(),replace(),search(),slice(),substring(),substr(),valueOf(),toLowerCase(),toUpperCase(),split()
3,Date日期对象
①Date对象:日期对象用于处理日期和时间。
②获得当日的日期。
③常用方法:
getFullYear(): 获取年份。
getTime() :获取毫秒。
setFullYear() :设置具体的日期。
getDay() :获取星期。
4,Array数组对象。
①Array对象:使用单独的变量名来存储一系列的值。
②数组的创建:例:var myArray=[ "Hello", "iwen", "ime" ] ;
③数组的访问:通过指定数组名以及索引号码,你可以访问某个特定的元素。
注意: [0]是数组的第一个元素,[1] 是数组的第二个元素。
④数组常用方法:
concat(): 合并数组。
sort(): 排序。
push(): 末尾追加元素。
reverse(): 数组元素翻转。
5,Math对象
①Math对象:执行常见的算数任务。
②常用方法:
round():四舍五入。
random():返回0~1之间的随机数。
max() : 返回最高值。
min(): 返回中的最低值。
abs() : 返回觉得值。
八,JavaScript对象控制HTML元素详解
方法:
getElementByName() : 获取name。
getElementByTagName() : 获取元素。
getAttribute() : 获取元素属性。
setAttribute() : 设置元素属性。
childNodes() :访问子节点。
parentNode() : 访问父节点。
createElement() : 创建元素节点。
createTextNode() : 创建文本节点。
insertBefore() : 插入节点。
removeChild() :删除节点。
offsetHeight() :网页尺寸。
scrollHeight() : 网页尺寸。
九,Js浏览器对象
1,Window对象
①对象:是BOM的核心,window对象指当前的浏览器窗口,所有JavaScript全局对象,函数以及变量均自动成为window对象的成员。
全局变量是window对象的属性。
全局函数是window对象的方法。
甚至HTML DOM的document也是window对象的属性之一。
②尺寸:
window.innerHeight : 浏览器窗口的内部高度。
window.innerWidth : 浏览器窗口的内部宽度。
2,计时器
①计时事件:通过使用JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件。
②计时方法:
setInterval(): 间隔指定的毫秒数不停地执行指定代码。
clearInterval(): 方法用于停止setInterval()方法执行的函数代码。
setTimeout() : 暂停指定的毫秒数后执行指定的代码。
clearTImeout() 方法用于停止执行setTimeout()方法的函数代码。
3,History对象
①History对象:window.history 对象包含浏览器的历史(url)的集合。
②History方法:
history.back() 与在浏览器点击后退键相同。
history.forward() 与在浏览器中点击按钮向前相同。
History.go() 进入历史中的某个页面。
4,Location对象
①window.location 对象用于获得当前页面的地址(UrL),并把浏览器重定向到新的页面。
②location对象的属性:
location.hostname 返回web主机的域名。
location.pathname 返回当前页面的路径和文件名。
location.port 返回web主机的端口。
location.protocol 返回所使用的web协议(Http:// 或者https://)。
location.href 属性返回当前页面的URL。
location.assign() 方法加载新的文档。
5,Screen对象
①Screen对象包含有关用户屏幕的信息。
②属性:
screen.availWidth 可用的屏幕宽度。
screen.avaiHeight 可用的屏幕高度。
screen.Height 屏幕高度。
screen.Width 屏幕宽度。
十,JS面向对象
1,认识面向对象。
①概念:
一切事物皆对象。
对象具有封装和继承特性。
信息隐藏。
2,JS面向对象1。
/* 相当于类 */
(function(){//封装信息
var n="ime";
function Person(name){
this.name=name;
}
Person.prototype.say=function(){
alert("peo_Hello:"+this.name+n);
}
window.Person=Person;//赋值给顶级window
}());
(function(){
function Student(name){
this.name=name;
}
Student.prototype=new Person();
var supers=Student.prototype.say;
Student.prototype.say=function(){
supers.call(this);//子类调用父类内容。
alert("Stu_hello:"+this.name);
}
window.Student=Student;
}());//此处加个小括号!!!!!!!!!!!!!
var s =new Student("iwen");
s.say();//弹出hello
3,JS面向对象2
/* 相当于类2 */
(function(){
var n ="ime1";
function Peple(name){
var _this={}
_this.name=name;
_this.sayHello=function(){
alert("PHello"+_this.name+n);
}
return _this;
}
window.Peple=Peple;
}());
(function (){
function Teacher(name){
var _this=Peple(name);//带小括号的--对象
_this.name=name;
var superSay=_this.sayHello;//不能带括号--方法
_this.sayHello=function(){
superSay.call(_this);
alert("Thello"+_this.name);
}
return _this;
}
window.Teacher=Teacher;
}());
var t =Teacher("zhangsan");
t.sayHello();//弹出Hello
十一,JavaScript瀑布流
1,布局
第四部分,HTML5新特性基础
1,HTML5音频视频
1,音频播放
①Audio: HTML5提供了播放音频文件的标准。
②control(控制器):添加播放,暂停和音量控件。
③标签:<audio> 定义声音。
<source> 规定多媒体资源,可以是多个。
2,编解码工具
①FFmpeg
②官方网址:www.ffmpeg.org
3,视频播放
①Video: HTML5提供了播放音频文件的标准。
②control(控制器):添加播放,暂停和音量控件。
③标签:<video> 定义声音。
<source> 规定多媒体资源,可以是多个。
④属性:width:宽
height:高
2, HTML5拖放
1,拖放
①拖放(Drag和drop)是HTML5标准的组成部分。
②拖动开始:ondragstart: 调用了一个函数,drag(event) 它规定了被拖动的数据。
③设置拖动数据:setData(): 设置被拖动数据的数据类型和值。
④放入位置:ondragover: 事件规定在何处放置被拖动的数据。
⑤放置:ondrog:当放置被拖动数据时,会发生drop事件。
2,拖放本地资源
3,HTML5Canvas标签
1,创建canvas
①Canvas标签:HTML5<canvas> 元素用于图形的绘制。通过脚本(通常是JavaScript)来完成。<canvas>标签只是图形容器,必须使用脚本来绘制图形。
通过多种方法使用Canvas绘制路径,盒,圆,字符以及添加图想。
②标签:<canvas>
2,绘制图形:canvas 元素本身没有绘图能力的,所有的绘图工作必须在JavaScript内部完成。
3,绘制图片:
4,HTML5Canvas应用
1,认识createjs:下载第三方包网址:createjs.com
2,炫酷效果
5,SVG
1,什么是SVG?
①SVG指可伸缩矢量图形(Scalable Vector Graphics)
②SVG用来定义用于网络的基于矢量的图形。
③SVG使用XML格式定义图形。
④SVG图像在放大或改变尺寸的情况下其图形质量不会有损失。
⑤SVG是万维网联盟的标准。
2,SVG优势
①SVG图像可通过文本编辑器来创建和修改。
②SVG图像可被搜索,索引,脚本化或压缩。
③SVG是可伸缩的。
④SVG图像可在任意的分辨率下被高质量地打印。
⑤SVG可在图像质量不下降的情况下被放大。
3,引入SVG外部文件
①创建一个svg.svg是一个xml,加一个头文件<?xml version="1.0"?>
②网站:developer.mozilla.org
https://developer.mozilla.org/zh-CN/docs/Web/SVG
6,Web储存
1,客户端储存数据的新方法
①localStorage:没有时间限制的数据存储。
②sessionStorage: 针对一个session的数据存储。
2,LocalStorage
①特点:没有时间限制。
3,sessionStorage
①特点:对一个session进行数据存储。当用户关闭时数据会被删除。
7,HTML5应用缓存与Web Workers
1,应用缓存
①什么是应用缓存:
HTML5引入应用缓存,这一位子web应用可进行缓存,并可在没有联网时进行访问。
②应用缓存的优势:
离线浏览:用户可在应用离线时使用它们。
速度:已缓存资源加载得更快。
减少服务器负担:浏览器将只从服务器下载更新过或更改过的资源。
③实现缓存:
如需启动应用缓存,请在文档的<html>标签中包含manifest属性
mainfest文件的扩展名是:“.appcache”
③Manifest文件:
CACHE MANIFEST: 在此标题下列出的文件将首次下载或进行缓存。
NETWORK: 此标题下列出的文件需要与服务器的连接,不会被缓存。
FALLBACK: 此标题下列出的文件规定当前页面无法访问时的回退页面。
2,Web Workers
①web worker 是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。
②方法: postMessage() : 它用于向HTML页面传回一段消息。
terminate() : 终止web worker, 并释放浏览器/计算机资源。
③事件: onmessage
8,服务器推送事件
1,介绍
①HTML5服务器推送事件
服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分,可以用来从服务端实时推送数据到浏览器端。
②传统服务器端推送技术
webSocket: WebSocket 规范HTML5中的一个重要组成部分。已经被主流浏览器所支持,也有不少基于WebSocket开发的应用。
webSocket使用的是嵌套字链接,基于TCP协议,使用webSocket 之后,实际上在服务端和浏览器之间建立一个套接链接。可以进行双向的数据传输,
webSocket的功能很强大,使用起来也灵活,可以适应不同的场景。
不过,webSocket技术也比较复杂,包括服务器端和浏览器端的实现都不同于一般的web应用。
③HTTP协议:简单轮询,即浏览器定时向服务端发送请求,来查询是否有数据更新。这种做法比较简单,可以在一定程度上解决问题,不过对于轮询的时间间隔需要进行考虑,间隔过长,会导致用户不能及时接收更新的数据,间隔过短,会导致查询请求过多,增加服务端的负担。
2,实现
①服务器代码头:
header(‘ Content-Type: text/event-stream’);
②EventSource事件:
onopen : 服务器的链接被打开。
onmessa: 接收消息。
onerror: 错误发生。
第五部分,响应式布局
一,响应式布局基础。
1,介绍。
①响应布局:响应式布局是2010年5月提出的一个概念,就是一个网站能够兼容多个终端,是为了解决移动互联网浏览而诞生的,其目的是为用户提供更加舒适的界面和更好的用户体验。
②优缺点:
优点:面对不同分辨率的设备灵活性强。能够快捷解决多设备显示适应问题。
缺点:兼容各种设备工作量大,效率低下。代码累赘,会出现隐藏无用的元素,加载时间过长。
2,布局效果。
①CSS中的Media Query(媒介查询)
设备宽高:device-width,device-height;
渲染窗口的宽和高:width,height;
设备的手持方向:orientation;
设备的分辨率:resolution;
②使用方法:
外联。
内嵌样式。
3,实例操作。
①在页面放置元素,随页面改变而改变。
二,响应式布局之Bootstrap
1,Bootstap介绍
①了解Bootstap:简洁,直观,强悍的前端开发框架,让web开发更迅速,简单。
②优点:快速,简单,灵活的栅格系统,小而强大,响应式布局,跨平台等。
③下载:http://getbootstrap.com
2,Bootstrap CSS,组件与JavaScript插件
3,应用例子:http://getbootstrap.com/examples/jumbotron/
第六部分,jQuery基础
一,jQuery简介及语法
1,简介。
①jQuery:jQuery 库可以通过一行简单的标记被添加到网页中。
②什么是jQuery:是一个JavaScrip函数库。
③jQuery库的功能:
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
Javascript 特效和动画
HTML DOM遍历和修改
AJax : 不刷新页面修改内容。
Utilities
2,引入jQuery的方法。
①网页中添加jQuery
从jquery.com下载jQuery库。
从CDN中载入jQuery,如从Google中加载jQuery
百度和新浪的服务器存有jQuery:http://libs.baidu.com/jquery/1.1.02/jquery.min.js
谷歌和微软的服务器存有jQuery:http://ajax.googleapis.com/ajax/libs/jquery/jquery.min.js
②版本介绍
v1.11.1 : 1.x支持IE6+
v2.1.1 :2.x支持IE0+
3,语法。
①jQuery语法
基础语法:$(selector).action()
网页加载完成:$(document).ready(function(){});
美元符号定义jQuery
选择符(selector)“查询”和“查找”HTML元素。
jQuery的action()执行对元素的操作。
例如:$(this).hide() : 隐藏当前元素
$("p").hide() :隐藏所有段落
二,jQuery选择器和事件
1,选择器
①修改指定元素内容:
例如:$("button").click(function(){
$(".pcalss").text("p元素被修改了");//元素选择器,指定修改元素
});
2,事件常用方法
①可以根据元素类型,id,class,标签进行修改内容。
3,绑定,解除事件
使用 .bind() 和unbind()方法。
例如:
$("#clickMeBtn").bind("click",clickHandler); $("#clickMeBtn").bind("click",clickHandler1); $("#clickMeBtn").unbind("click",clickHandler1);//解除指定的绑定,方法---不带() /*jquery 1.7之后 on代替 bind */ $("#clickMeBtn").on("click",clickHandler); $("#clickMeBtn").on("click",clickHandler1); $("#clickMeBtn").off("click");//解除所有绑定。方法---不带() |
阻止冒泡方法:
e.stopPropagation();//阻止父级事件冒泡,body不再打印信息 e.stopImmediatePropagation();//阻止所有事件冒泡 |
例如:
clickBtn= $("#clickBtn"); clickBtn.click(function(){ var e =jQuery.Event("MyEvent");//创建自己的事件 clickBtn.trigger(e);//触发 }); clickBtn.bind("MyEvent",function(e){//事件要传递进来 conlog(e); }); |
1,隐藏与显示
例如:
$("#hide").click(function (){ $("#phide").hide(1000);//点击隐藏--动画1s }); $("#show").click(function (){ $("#phide").show(1000);//点击显示--动画1s }); $("#toggle").click(function (){ $("#phide").toggle(1000);//点击显示--动画1s }); |
例如:
/*淡入淡出*/ $("#in").click(function(){ $("#div1").fadeIn(1000); $("#div2").fadeIn(1000); $("#div3").fadeIn(1000); }); $("#out").click(function(){ $("#div1").fadeOut(1000); $("#div2").fadeOut(1000); $("#div3").fadeOut(1000); }); $("#fadetoggle").click(function(){//开关 $("#div1").fadeToggle(1000); $("#div2").fadeToggle(1000); $("#div3").fadeToggle(1000); }); $("#fadeto").click(function(){//透明度 $("#div1").fadeTo(1000,0.5); $("#div2").fadeTo(1000,0.7); $("#div3").fadeTo(1000,0.3); }); |
$("#flipshow").click(function(){//显示(之前在样式中displayed:nono) $("#content").slideDown(500); }); $("#fliphide").click(function(){//隐藏 $("#content").slideUp(500); }); $("#fliptoggle").click(function(){//开关 $("#content").slideToggle(500); }); |
/*回调*/ $("#btn").click(function(){ // $("p").hide(1000,function(){//单独执行 // alert("动画结束,方法回调") // }); $("p").css("color","red").slideUp(500).slideDown(500);//多个设置和动画 }); |
1,HTML-捕获
例:
/*获取*/ $("#btn1").click(function(){ // alert("text:"+$("#text").text());//text()获取内容 // alert("text:"+$("#text").html());//html()获取全部内容,包含标签 alert("text:"+$("#input").val());//val()获取输入框内容 }); $("#btn2").click(function(){ alert("网址:"+$("#aid").attr("href")+",ID:"+$("#aid").attr("id"));//attr()获取属性 }); }); |
例:
/*设置*/ $("#btn3").click(function(){ $("#p1").text("极客学院");//修改P标签内容 }); $("#btn4").click(function(){ $("#p2").t("<a href='http://www.jikexueyuan.com'>极客学院2</a>");//给p标签添加a标签 }); $("#btn5").click(function(){ $("#i3").val("jikexueyuan");//修改input的内容 }); $("#btn6").click(function(){ // $("#a").attr("href","http://www.jikexueyuan.com");//修改input的内容 $("#a").attr({ "href":"http://www.jikexueyuan.com", "title":"hello" }); $("#a").text("极客学院"); }); $("#btn7").click(function(){ $("#p5").text(function(i,ot){//显示不断返回的数据,新的和旧的。 return "old:"+ot+", new:"+i; }); }); |
例如:
/*添加*/ /*说明: * append:在元素结尾添加; * before,prepend:在元素之前添加; * after:在元素之后添加 * */ $("#btn8").click(function(){ // $("#p6").append("this is a web");//结尾 $("#p6").prepend("this is a web");//之前 }); $("#btn9").click(function(){ // $("#p7").before("this is a web");//在上一行 $("#p7").after("this is a web");//在下一行 }); }); function appendText(){ /*三种方式添加内容: *html,jQuery,DOM * */ var text1="<p>iwen</p>"; var text2=$("<p></p>").text("iwe"); var text3=document.createElement("p"); text3.innerHTML="iw"; $("body").append(text1,text2,text3); } |
例:
/*删除*/ /*方法: * remove,empty * */ $("#btn10").click(function(){ $("#div").remove();//全删除 // $("#div").empty();//删除元素内容 }); |
1,jQuery CSS方法
例:
/*css 方法*/ var div=$("#div1"); // div.css("width","100px");//单个设置属性 // div.css("height","100px"); // div.css("background","#FF0000"); // div.css({//设置多个属性 // width:"100px",height:"100px",backgroundColor:"#00FF00" // }); div.addClass("style1");//加载一个class样式。 div.click(function(){ // $(this).addClass("style2"); // $(this).removeClass("style1");//点击移除样式 $(this).toggleClass("style2");//更换 }); |
/*盒子模型*/ var d= $("#div2");//获得div高度 d.click(function(){ // alert(d.height());//宽 100 // alert(d.innerHeight());//高+边距 200 alert(d.outerHeight());// 高+边距+外边框 204 alert(d.outerHeight(true));// 高+边距+外边框+外边距 304 }); |
1,向下遍历
/*向下遍历 * children, find * */ // $("#div1").children().css({//指向下延伸一级 // border:"3px solid #FF0000" // }); $("#div1").find("a").css({//必填元素,修改指定元素 border:"3px solid #FF0000" }); |
/*向上遍历 * parent, parents, parentUntil * */ // $("p").parent().css({//父边框一级 变 // border:"3px solid #FF0000" // }); // $("p").parents().css({//外面的所有 变 // border:"3px solid #FF0000" // }); $("a").parentsUntil("#div1").css({//指定元素之间区间 变 border:"3px solid #FF0000" }); |
/*同级遍历 * sibings,next,nextALl,nextUntil,preAll,preUntil * */ // $("h4").siblings().css({//修改其他所有同级元素 // border:"5px solid #FF0000"}); // $("h2").next().css({//修改下一个同级元素 // border:"5px solid #FF0000"}); // $("h2").nextAll().css({//修改下一个所有同级元素 // border:"5px solid #FF0000"}); // $("p").nextUntil("h4").css({//修改在两个之间的所有同级元素 // border:"5px solid #FF0000"}); // $("h3").prevAll().css({//修改在次之前的的所有同级元素 // border:"5px solid #FF0000"}); $("h5").prevUntil("h2").css({//修改在两个之间倒序的的所有同级元素 border:"5px solid #FF0000"}); |
/*过滤 * first, last,eq, filter, not * */ // $(".div p").first().css("background-color","red");//第一个 // $(".div p").last().css("background-color","red");//最后一个 // $(".div p").eq(1).css("background-color","red");//索引指定下标的元素,从零开始 // $(".div p").filter(".a").css("background-color","red");//满足所有的集合 $(".div p").not(".a").css("background-color","red");//与filter相反的效果 |
1,异步访问
PhpStorm中
if(isset($_GET['name'])){ echo "hello:".$_GET['name'];}else{ echo "Args Error";} |
$("#btn").on("click",function(){ $("#result").text("请求数据中,请稍后...."); /* get请求获得服务器,name固定,从input获得输入内容data.在span显示 */ $.get("Server.php",{name:$("#namevalue").val()},function(data){ alert("Heloo");//中断 $("#result").text(data); }).error(function(){ $("#result").text("通讯有问题"); }); }); |
/*加载htm碎片,添加到div中*/ $("#div").load("box.htm",function(a,status,c){ console.log(status); if(status=="error"){ $("#div").text("加载失败"); } }); /*加载js文件,可调用其方法*/ $.getScript("HelloJs.js").complete(function(){ sayHello(); }); |
1,jQuery扩展
/*方式1*/ $.myjq=function(){ alert("Hello myjQuery"); } /*方式2*/ $.fn.myjq=function(){ $(this).text("Hello"); } /*jQuery扩展:引入script,两种方式调用*/ $.myjq();//方式1:弹出对话框 $("#div").myjq();//方式2:打印内容 |
var jq= $.noConflict();//代替美元符号
九,UI下载与使用
1,jQuery UI介绍
①jQuery UI
是以jQuery为基础的JavaScript网页用户界面的开源库,包含底层用户交互,动画,特效和可更换主题的可视控件,我们可以直接用它来构建具有很好交互性的web应用程序。
包含了许多维持状态的小部件(Widget),因此,它与典型的jQuery插件使用模式略有不同,所有jQueryUI小部件(Widget)使用相同的模式,所有,只要你学会使用其中一个,你就知道如何使用其他小部件(Widget)
②jQuerUI 支持:IE6.0+, Firefox 3+, Safari 3.1+ , Opera 9.6+ 和Google Chrome
③交互:交互部件是一些与鼠标交互相关的内容,包括Draggable, Droppable, Resizable, Selectable和Sortable等
④小部件:主要是一些界面的扩展,包括AutoComplete, colorPicker, Dialog,Slider, Tabs, ProgressBar, Spinner等
⑤效果:用于提供丰富的动画效果,包括:Add Class , Color Animation Toggle等。
十,jQuery瀑布流
代码:
$(document).ready(function(){ $(window).on("load",function(){ imgLocation(); var dataImg={"data":[{"src":"e1.png"},{"src":"e2.png"},{"src":"e3.png"},{"src":"e4.png"},{"src":"e5.png"},{"src":"e6.png"},{"src":"e7.png"},{"src":"e8.png"},{"src":"e9.png"}]} window.onscroll=function(){//屏幕滚动监听 // conlog(scrollSlide()) if(scrollSlide()){ //循环json数据,创建box $.each(dataImg.data,function(index,value){ var box=$("<div>").addClass("box").appendTo($("#container")); var content=$("<div>").addClass("content").appendTo(box); $("<img>").attr("src","./images/"+$(value).attr("src")).appendTo(content); }); imgLocation(); } } }); }); /*滚动底部时 计算高度*/ function scrollSlide(){ var box=$(".box"); //获取当前对象距离顶端的距离+图片高度。 var lastboxHeight=box.last().get(0).offsetTop+Math.floor(box.last().height()/2); var documentHeight=$(document).width();//当前屏幕的高度,注意() var scrollHeight=$(window).scrollTop();//滚动的高度 // conlog(lastboxHeight/2+"---"+documentHeight+"---"+scrollHeight) return (lastboxHeight<scrollHeight+documentHeight)?true:false; } /*布局图片摆放位置*/ function imgLocation(){ var box=$(".box");//获取所有的box var boxWidth=box.eq(0).width();//获取第一个box的宽度 var num=Math.floor($(window).width()/boxWidth);//每一行显示的个数 var boxArr=[]; box.each(function(index,value){//.each()相当于for循环,设置每一个box conlog(index+"---"+value); var boxHeight=box.eq(index).height();//每一个box的高度集合 if(index<num){//第一行的显示图片的高度,添加到boxArr数组中 boxArr[index]=boxHeight;//数组需要索引,[index] // conlog(boxHeight); }else{ var minHeight=Math.min.apply(null,boxArr);//.min.apply(null,数组):获得最小高度 // conlog(minHeight); var minboxIndex= $.inArray(minHeight,boxArr);//,inArray(minHeight,数组):获得最小高度的下标 $(value).css({//$(value):获得一个box实例,设置样式 "position":"absolute", "top":minHeight, "left":box.eq(minboxIndex).position().left }); //选出一个最小图片底部放置后,重新计算第一行的数组中高度。 boxArr[minboxIndex]+=box.eq(index).height(); } }); } /*用于打印*/ function conlog(e){ console.log(e) } |
一,Interactions( 交互 )
1,draggable( 拖动 )
$("#div").draggable();//调用方法拖动 |
$("#Rect2").droppable();//放置 $("#Rect2").on("drop",function(e,ui){//拖动进元素时,触发事件。 // alert(e); $("#Rect2").text("drops事件"); }); |
$("#div1").resizable();//可调整边框 |
$("#btn").button(); $("#select").selectable(); $("#btn").on("click",function(){ if($("#right").hasClass("ui-selected")){ alert("答对了!") } }); <!-- href="#":表示不跳转--> <a href="#" id="btn">提交</a> |
$("#sortable").sortable();//可拖动排序 |
1,Accordion(折叠;手风琴效果)
$("#accordion").accordion();//可折叠,手风琴效果 |
/*承载提示内容*/ var autoTags=["iwen","ime","html","css","javascript","java","android", "ios"]; $("#tags").autocomplete({ source:autoTags//指定其资源 }); |
$("#datepicker").datepicker();//事件选择器 |
$("#btn_dialog").button().on("click",function(){ $("#div2").dialog();//弹出对话框 }); |
pb =$("#pb"); // pb.progressbar({value:50}); pb.progressbar({max:100}); setInterval(changePb,100);//设置定时器 /*设置改变pb进度条*/ function changePb(){ current++; if(current>=100){ current=0; } pb.progressbar("option","value",current);//设置增加的数值: } |
$("#menu").menu({position:{at:"left bottom"}});//设置显示位置:左下方 .ui-menu:after{ content: "."; display: block; /*在左右两侧均不允许浮动元素。*/ clear: both; visibility: hidden; line-height: 0; height: 0; } .ui-menu .ui-menu-item{ //条目的属性 display: inline-block; float: left; margin: 0; padding: 10; width: auto; } |
var slider=$("#slider"); // slider.slider(); var valueSpan= $("#span"); slider.slider({ // change:function(e,ui){//传递两个参数,拖动后显示拖动值。 // valueSpan.text(slider.slider("option","value")); // } slide:function(e,ui){//拖动过程中,不断变化着。 valueSpan.text(slider.slider("option","value")); } }); |
/*下拉列表*/ var sp=$("#input"); sp.spinner(); sp.spinner("value","10"); $("#btn3").click(function(){ alert(sp.spinner("value"))//获取spinner的值 }); /*Tags标签*/ $(function(){ $("#tag").tabs(); }); |
1,AddClass,Bind
/*Addclass:改变的class,执行时间,动画效果,完成监听 */ $(".div5").on("click",function(){ $(this).addClass("changeddiv",1000,"easeInCirc",function(){ alert("动画完成"); }); }); $(document).click(function(){//点击执行百叶窗的效果:方向 $("#toggle").toggle("blind",{direction:"down"}); }); |
/*Animtion 修改背景*/ $("#btn_toggle").click(function(){ $("#elem").animate({color:"green", backgroundColor:"rgb(99,99,99)", borderColor:"rgb(199,199,199)"}); /*向左逐渐隐藏,执行三秒*/ $("#toggle").hide("drop",{dirction:"left"},3000); /*RemoveClass:移除class*/ $(".div5").removeClass("changeddiv",1000,"easeInCirc",function(){ alert("动画完成"); }); }); |
/*逐渐显示*/ $("#toggle").show("drop",2000); $(this).toggleClass("changeddiv",2000,"easeOutSine");//将添加和移出class集中一体 |
一,了解JQuery Mobile
1,JQuery Mobile:是jQuery在手机上和平板设备上的版本,jQuery Mobile给主流移动平台带来jQuery核心库,与jQuery核心库一样,你不需要安装任何东西,只需将. js和. css文件直接包含到你的web页面中即可,这样,jQuery Mobile 的功能就好像被放到你的指尖,供你随时使用
2,jQuery Mobile事件:是针对移动端浏览器的事件。
触摸事件:当用户触摸屏幕是触发
滑动事件:当用户上下滑动时触发
定位事件:当设备水平或者垂直翻转时触发
页面事件:当页面显示,隐藏,创建,加载或未加载时触发
3,下载:http://jquerymobile.com/
4,使用jQueryMobile
<!--在移动设备上适配,增加字段 meta name="viewport" content="width=device-width,initial-scale=1.0"--> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>JQuery Mobile</title> <!--导入jQuery Mobile的js和css--> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script> <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"> <!--在body中是data-role="page"固定:三部分字段data-role="header",role="main",data-role="footer"--> <!--固定头部或底部位置:data-position="fixed"--> <div data-role="page"> <!--头--> <div data-role="header" data-position="fixed"> <h1>这是头部</h1> </div> <!--身--> <div role="main"> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> </div> <!--脚--> <div data-role="footer" data-position="fixed"> <h1>这是脚部</h1> </div> </div> |
1,page
<a href="#pagetwo" data-transition="slide">跳转到第二个页面</a> <a href="#pagetwo" data-rel="dialog">打开一个dialog</a> |
<button>按钮</button> <input type="button" value="按钮"> <a href="#" class="ui-btn ui-shadow">按钮</a> <!--按钮加图片的效果:删除图标ui-icon-delete,不显示文字ui-btn-icon-notext--> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all" >按钮</a> <!--一排显示按钮:ui-btn-inline--> <a href="#" class="ui-btn ui-btn-inline" >按钮1</a> <a href="#" class="ui-btn ui-btn-inline" >按钮2</a> <!--一组:data-role="controlgroup",横向相连接:data-type="horizontal"--> <div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮1</a> <a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮2</a> <a href="#" class="ui-btn ui-shadow ui-btn-inline">按钮3</a> </div> <!--主题:ui-btn-a--> <a href="#" class="ui-btn ui-btn-a ">主题1</a> <a href="#" class="ui-btn ui-btn-b ">主题2</a> |
<!--复选框--> <label> <input type="checkbox">苹果 </label> <!--复选框组--> <fieldset data-role="controlgroup" data-type="horizontal"> <label> <input type="checkbox">苹果 </label> <label> <input type="checkbox">苹果 </label> <label> <input type="checkbox">苹果 </label> </fieldset> <!--单选--> <label> <input type="radio" name="rl" id="man">男 </label> <fieldset data-role="controlgroup" > <label> <input type="radio" name="rl" id="man">男 </label> <label> <input type="radio" name="rl" id="woman">女 </label> </fieldset> <!--可展开项 :默认展开内容data-collapsed="false",去掉展开边框data-content-theme="false"--> <div data-role="collapsible" data-collapsed="false"> <h4>Heading</h4> <p>这是展开的内容</p> </div> <div data-role="collapsible" data-content-theme="false"> <h4>Heading</h4> <p>这是展开的内容</p> </div> <!--展开列表项--> <div data-role="collapsible" data-content-theme="false"> <h1>系列</h1> <ul data-role="listview"> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> </ul> </div> |
<!--grid:两列ui-grid-a,三列ui-grid-b.....,列ui-block-a,bar类型ui-bar--> <div class="ui-grid-b"> <div class="ui-block-a"> <div class="ui-bar ui-bar-a">Hello A</div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-a">Hello B</div> </div> <div class="ui-block-c"> <div class="ui-bar ui-bar-a">Hello C</div> </div> </div> <!--第二行--> <div class="ui-grid-b"> <div class="ui-block-a"> Hello A <input type="button" data-theme="a" value="按钮"> <input type="button" data-theme="b" value="按钮"> <input type="button" data-theme="a" value="按钮"> </div> <div class="ui-block-b"> Hello B <input type="button" data-theme="a" value="按钮"> <input type="button" data-theme="a" value="按钮"> </div> <div class="ui-block-c"> <div class="ui-bar ui-bar-a">Hello C</div> <input type="button" data-theme="a" value="按钮"> <input type="button" data-theme="a" value="按钮"> <input type="button" data-theme="a" value="按钮"> </div> </div> <!--一列ui-grid-solo--> <div class="ui-grid-solo"> <div class="ui-block-a"> <input type="button" value="按钮"> </div> </div> <!--listview:data-role="listview",加个<a>标签即可点击效果。 过滤item data-filter="true" 可插入data-inset="true"--> <ul data-role="listview" data-filter="true" data-inset="true"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> <form class="ui-filterable"> <input id="autoinput" data-type="search"> </form> <!-- 不显示data-filter-reveal="true" 指向form data-input="#autoinput"--> <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput" data-inset="true"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">B</a></li> <li><a href="#">D</a></li> <li><a href="#">A</a></li> <li><a href="#">E</a></li> </ul> <!--自动分配器data-autoviders="true"--> <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true"> <li><a href="#">A</a></li> <li><a href="#">A</a></li> <li><a href="#">addd</a></li> <li><a href="#">B</a></li> <li><a href="#">Big ddd </a></li> <li><a href="#">bbb </a></li> <li><a href="#">C</a></li> <li><a href="#">Code</a></li> <li><a href="#">D</a></li> <li><a href="#">E</a></li> </ul> |
<!--导航:navbar--> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </div> <!--弹出窗口:popup,a属性data-rel="popup",div属性data-role="popup"--> <a href="#pp" data-rel="popup" class="ui-btn">弹出窗口</a> <div data-role="popup" id="pp"> <p>这是一个弹出窗口</p> </div> <!--显示位置屏幕前data-position-to="window"--> <a href="#pop" data-rel="popup" data-position-to="window" data-transition ="fade"> <img src="images/logo11.png" class="pupphoto" style="width: 20%"> </a> <div data-role="popup" id="pop"> <!--a标签是一个删除图标,点击返回--> <a href="#" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-right"></a> <img src="images/logo11.png" class="popphoto" style="height: 500px"> </div> |
data-theme="b"//a或b主题 <!--下拉选择--> <div class="ui-field-contain"> <select name="select-native-1" id="select-native-1" data-iconpos="left"> <option value="1">这是第1个</option> <!--不能被选中--> <option value="2" disabled="disabled">这是第2个</option> <option value="3">这是第3个</option> <option value="4">这是第4个</option> </select> </div> |
1,pageinit: 页面加载完成之后触发
2,tap: 触摸事件
3,taphold : 长按事件
4,swipe:滑动是处理
5,swileft:向左滑动
6,scrollstart:开始滚动时
7,scrollstop:停止滚动时
8,orientationchange:设备方向改变是触发
<script> $(document).on("pageinit",function(){ // alert("hello"); $(".p").on("tap",function(){//点击隐藏 $(this).hide(); }); $(".btn").on("taphold",function(){//长按隐藏 $(this).hide(); }); $(".p1").on("swipe",function(){//滑动隐藏 $(this).hide(); }); $(".btn1").on("swiperight",function(){//右滑动隐藏 $(this).hide(); }); $(document).on("scrollstop",function(){//长按隐藏 alert("停止滑动了"); }); }); |
一,Create JS介绍
1,EaseJS
①Create JS:
是一款HTML5游戏开发的引擎。是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验。
②四款工具:
EaselJS: 用来处理HTML5的canvas。
TweenJS: 用来处理HTML5的动画调整和Javascript属性。
SoundJS: 用来帮助简化处理音频相关API
2,下载:http://createjs.com/
二,Create JS基础
1,容器
/*创建舞台,文本,图形*/ var stage=new createjs.Stage("gameView"); var gameView=new createjs.Container();//创建容器 stage.addChild(gameView); var text=new createjs.Text("Hello easeljs","26px Arial","#777"); //stage.alpha=0.5;//半透明 //stage.x=100;//移动舞台里的内容 //stage.y=100; //stage.scaleX=2;//缩放舞台里内容 //stage.scaleY=0.5; var Rect=new createjs.Shape();//创建图形 Rect.graphics.beginFill("#FF0000");//设置颜色 Rect.graphics.drawRect(50,50,50,50);//参数1:x,参数2:y,参数3:宽度,参数4:高度。 gameView.addChild(text);//添加到容器中 gameView.addChild(Rect); /*引入js,添加container*/ var c =new ChildContainer(); c.x=200;//移动 c.y=200; gameView.addChild(c); stage.update();//刷新 |
/*对圆的封装*/ function Cricle(){ createjs.Shape.call(this);//。调用不加() this.setCircleType=function(type){ this._cricleType=type; switch (type){ case Cricle.TYPE_RED: this.setColor("#ff0000"); break; case Cricle.TYPE_GREEN: this.setColor("#00ff00"); break; } }; this.setColor=function (color){ this.graphics.beginFill(color); this.graphics.drawCircle(0,0,50); this.graphics.endFill(); } this.setCircleType(Cricle.TYPE_RED);//设置默认颜色 } Cricle.prototype=new createjs.Shape();//设置图形的入口 Cricle.TYPE_RED=1;//设置常量 Cricl |
Rect.addEventListener("click",function(e){//点击获取位置 alert("X=:"+ e.localX+", Y=:"+ e.localY); }); Ellipse.addEventListener("dblclick",function(){//点击获取位置 alert("双击了事件"); }); /*Ticker:类似计时器,实时更新舞台*/ createjs.Ticker.setFPS(20);//设置 帧数/s createjs.Ticker.addEventListener("tick",handlerTick); var speedX=10; function handlerTick(){ /*通过限制增加的范围实现,左右不断移动*/ if(Rect.x<=0){//左边 speedX=Math.abs(speedX); } if(Rect.x>=350){//右边-方块宽 speedX=-Math.abs(speedX); } Rect.x+=speedX; stage.update(); } |
1,Text
/*1,创建文本*/ var text=new createjs.Text("Hello easeljs","26px Arial","#777"); text.x=50; text.y=50; text.rotation=10; var rect=new createjs.Shape(); rect.x=text.x; rect.y=text.y; rect.rotation=text.rotation; stage.addChildAt(rect,0);//添加带有子元素的 createjs.Ticker.setFPS(10); createjs.Ticker.addEventListener("tick",handlerTicker); function handlerTicker(e){ count++; text.text="Hello easeljs"+count+"!" //每次text增加宽度,重绘rect rect.graphics.clear().beginFill("#F00").drawRect(-10,-10,text.getMeasuredWidth()+10,50); stage.update(e); } |
var bitmap=new createjs.Bitmap("images/e1.png"); bitmap.x=300; bitmap.y=300; gameView.addChild(bitmap); |
五,CreateJS 与flash生成js文件交互
第十部分,TypeScript基础
第十一部分,实战开发
1,围住神经猫
2,看你有多色
3,冰桶挑战
4,打企鹅
5,语音识别
6,极客学院页面-用户中心
7,极客学院页面-播放视频
8,极客学院页面-路径图
9,标签切换效果
10,回到顶部功能
11,导航栏
12,Tooltip
13,幽灵按钮
14,列表切换
15,侧边栏固定
16,照片墙
相关文章推荐
- Html5个人笔记总结
- dom4j 个人总结笔记
- 购物网第二阶段总结笔记5:用户个人资料修改页面、密码修改页面、用户积分页面、用户统计信息页面
- .Net培训个人总结笔记16
- .Net培训个人总结笔记21
- .Net培训个人总结笔记20
- C语言总结-个人学习笔记
- .Net培训个人总结笔记25
- .Net培训个人总结笔记14
- 个人思科学习笔记总结
- .Net培训个人总结笔记23
- .Net培训个人总结笔记0——前言
- .Net培训个人总结笔记5
- .Net培训个人总结笔记4
- .Net培训个人总结笔记15
- java基础个人笔记总结
- .Net培训个人总结笔记3
- .Net培训个人总结笔记8
- .Net培训个人总结笔记18
- .Net培训个人总结笔记24