您的位置:首页 > Web前端 > HTML5

极客学院-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>

显示结果
描述
实体名称
实体编号
空格
 
<
小于号
<
<< p=""><!--
>
大于号
>
>
&
和号
&
&
"
引号
"
"
'
撇号
' (IE不支持)
'


¢
¢


£
£

人民币
¥
¥
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:设置字体的粗细。

normal默认值。定义标准的字符。
bold定义粗体字符。
bolder定义更粗的字符。
lighter定义更细的字符。
100
200
300
400
500
600
700
800
900

定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit规定应该从父元素继承字体的粗细。

尺寸

单位描述
%百分比
in英寸
cm厘米
mm毫米
em1em 等于当前的字体尺寸。
2em 等于当前字体尺寸的两倍。
例如,如果某元素以 12pt 显示,那么 2em 是24pt。
在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。
ex一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt磅 (1 pt 等于 1/72 英寸)
pc12 点活字 (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)
④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()方法。
例如:

$("#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");//解除所有绑定。方法---不带()

4,事件目标与冒泡
阻止冒泡方法:

e.stopPropagation();//阻止父级事件冒泡,body不再打印信息
e.stopImmediatePropagation();//阻止所有事件冒泡

5,自定义事件
例如:

clickBtn= $("#clickBtn");
clickBtn.click(function(){
var e =jQuery.Event("MyEvent");//创建自己的事件
clickBtn.trigger(e);//触发
});

clickBtn.bind("MyEvent",function(e){//事件要传递进来
conlog(e);
});

三,jQuery效果之隐藏,显示,淡入淡出,滑动,回调
1,隐藏与显示
例如:

$("#hide").click(function (){
$("#phide").hide(1000);//点击隐藏--动画1s
});
$("#show").click(function (){
$("#phide").show(1000);//点击显示--动画1s
});
$("#toggle").click(function (){
$("#phide").toggle(1000);//点击显示--动画1s
});

2,淡入淡出
例如:

/*淡入淡出*/
$("#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);
});
3,滑动

$("#flipshow").click(function(){//显示(之前在样式中displayed:nono)
$("#content").slideDown(500);
});
$("#fliphide").click(function(){//隐藏
$("#content").slideUp(500);
});
$("#fliptoggle").click(function(){//开关
$("#content").slideToggle(500);
});
4,回调

/*回调*/
$("#btn").click(function(){
// $("p").hide(1000,function(){//单独执行
// alert("动画结束,方法回调")
// });
$("p").css("color","red").slideUp(500).slideDown(500);//多个设置和动画
});
四,HTML之捕获,设置,元素添加,元素删除
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()获取属性
});
});
2,HTML-设置
例:

/*设置*/

$("#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;

});

});
3,HTML-添加元素
例如:

/*添加*/
/*说明:
* 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);
}
4,HTMl-删除元素
例:

/*删除*/
/*方法:
* remove,empty
* */
$("#btn10").click(function(){
$("#div").remove();//全删除
// $("#div").empty();//删除元素内容
});
五,CSS操作及jQuery的盒子模型
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");//更换
});
2,jQuery 盒子模型

/*盒子模型*/
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"
});
2,向上遍历

/*向上遍历
* 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"
});
3,同级遍历

/*同级遍历
* 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"});
4,过滤

/*过滤
* 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相反的效果
七,Ajax之异步访问和加载片段
1,异步访问
PhpStorm中

if(isset($_GET['name'])){ echo "hello:".$_GET['name'];}else{ echo "Args Error";}
js:
$("#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("通讯有问题");
});
});
2,加载片段


/*加载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();
});


八,jQuery的扩展与noConflict
1,jQuery扩展

/*方式1*/
$.myjq=function(){
alert("Hello myjQuery");
}
/*方式2*/
$.fn.myjq=function(){
$(this).text("Hello");
}

/*jQuery扩展:引入script,两种方式调用*/

$.myjq();//方式1:弹出对话框
$("#div").myjq();//方式2:打印内容
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瀑布流
代码:

$(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)
}
第七部分,jQuery UI基础



一,Interactions( 交互 )
1,draggable( 拖动 )

$("#div").draggable();//调用方法拖动

2,droppable(放置)

$("#Rect2").droppable();//放置
$("#Rect2").on("drop",function(e,ui){//拖动进元素时,触发事件。
// alert(e);
$("#Rect2").text("drops事件");
});
3,resizeable(调整大小)

$("#div1").resizable();//可调整边框
4,selectable(可选)

$("#btn").button();
$("#select").selectable();
$("#btn").on("click",function(){
if($("#right").hasClass("ui-selected")){
alert("答对了!") }
});
<!-- href="#":表示不跳转-->
<a href="#" id="btn">提交</a>
5,sortable(排序)

$("#sortable").sortable();//可拖动排序
二,Widgets(小部件)
1,Accordion(折叠;手风琴效果)

$("#accordion").accordion();//可折叠,手风琴效果
2,Autocomplete(自动填充)

/*承载提示内容*/
var autoTags=["iwen","ime","html","css","javascript","java","android", "ios"];
$("#tags").autocomplete({
source:autoTags//指定其资源
});
3,Datepicker(时间选择器)

$("#datepicker").datepicker();//事件选择器
4,Dialog( 对话框)

$("#btn_dialog").button().on("click",function(){
$("#div2").dialog();//弹出对话框
});
5,ProgressBar( 进度条)

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);//设置增加的数值:
}
6,Menu(菜单)

$("#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;
}
7,Slider(滑动按钮)

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"));
}
});
8,spinner( 下拉列表)

/*下拉列表*/
var sp=$("#input");
sp.spinner();
sp.spinner("value","10");
$("#btn3").click(function(){
alert(sp.spinner("value"))//获取spinner的值
});
/*Tags标签*/
$(function(){
$("#tag").tabs();
});
三,Effects(效果)
1,AddClass,Bind

/*Addclass:改变的class,执行时间,动画效果,完成监听
*/
$(".div5").on("click",function(){
$(this).addClass("changeddiv",1000,"easeInCirc",function(){
alert("动画完成");
});
});
$(document).click(function(){//点击执行百叶窗的效果:方向
$("#toggle").toggle("blind",{direction:"down"});
});
2,Color Animation, hide, removeClass

/*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("动画完成");
});
});
3,show,toggleClass

/*逐渐显示*/
$("#toggle").show("drop",2000);

$(this).toggleClass("changeddiv",2000,"easeOutSine");//将添加和移出class集中一体
第八部分,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

<!--在移动设备上适配,增加字段 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>
二,Mobile Widgets
1,page

<a href="#pagetwo" data-transition="slide">跳转到第二个页面</a>
<a href="#pagetwo" data-rel="dialog">打开一个dialog</a>
2,button

<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>
3,checkbox,radio,collapsible

<!--复选框-->
<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>
4,gird,listview

<!--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>
5,navbar, popup

<!--导航: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>
6,select,theme

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>
三,Mobile 事件
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("停止滑动了");
});
});
九部分 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,容器

/*创建舞台,文本,图形*/
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();//刷新
2,绘图

/*对圆的封装*/
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
3,事件

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();
}
三,Create JS控件
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);
}
2,Bitmap

var bitmap=new createjs.Bitmap("images/e1.png");
bitmap.x=300;
bitmap.y=300;
gameView.addChild(bitmap);
四,CreateJS之TweenJS

五,CreateJS 与flash生成js文件交互



第十部分,TypeScript基础

第十一部分,实战开发



1,围住神经猫

2,看你有多色

3,冰桶挑战

4,打企鹅

5,语音识别

6,极客学院页面-用户中心

7,极客学院页面-播放视频

8,极客学院页面-路径图

9,标签切换效果

10,回到顶部功能

11,导航栏

12,Tooltip

13,幽灵按钮

14,列表切换

15,侧边栏固定

16,照片墙
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  html5 极客 总结