admin管理员组

文章数量:821225

Html5个人笔记总结

第一部分,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" 
常用标签属性:<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元素的容器。 
<span>元素:<span>元素是内联元素,可作为文本的容器。 

18,HTML布局 
①div布局 
②table元素布局
19,表单用于获取不同类型的用户输入 20,常用表单标签 <from>  表单 <input> 输入域 <textarea> 文本域 <label> 控制标签 <fieldset> 定义域 <legend>  域的标题 <select>  选择列表 <optgroup> 选项组 <option>  下拉列表选项 <button>  按钮
21,PHP环境搭建 网站: www.apachefriends 下载安装XAMPP 其中,运行 xx.hph的目录:/xampp/htdocs
打开eclipse--help-->install new  software 输入: 找到: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> 写成: &lt;html&gt;
显示结果 描述 实体名称 实体编号

空格 &nbsp;
< 小于号 < << p=""><!--
> 大于号 > >
& 和号 &amp; &
" 引号 &quot; "
' 撇号 &apos; (IE不支持) '
&cent; ¢
&pound; £
人民币 &yen; ¥





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 毫米
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)

④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=""] { } 属性和属性值必须完全匹配 根据部分属性值选择 ⑥后代选择器 后代选择器可以选择作为某元素后代的元素。例如: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 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 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 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开发更迅速,简单。 ②优点:快速,简单,灵活的栅格系统,小而强大,响应式布局,跨平台等。 ③下载: 2,Bootstrap CSS,组件与JavaScript插件 3,应用例子: /

第六部分,jQuery基础
一,jQuery简介及语法 1,简介。 ①jQuery:jQuery 库可以通过一行简单的标记被添加到网页中。 ②什么是jQuery:是一个JavaScrip函数库。 ③jQuery库的功能: HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 Javascript 特效和动画 HTML DOM遍历和修改 AJax : 不刷新页面修改内容。 Utilities 2,引入jQuery的方法。 ①网页中添加jQuery 从jquery下载jQuery库。 从CDN中载入jQuery,如从Google中加载jQuery 百度和新浪的服务器存有jQuery:http://libs.baidu/jquery/1.1.02/jquery.min.js 谷歌和微软的服务器存有jQuery:http://ajax.googleapis/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=' '>极客学院2</a>");//给p标签添加a标签 
}); 

$("#btn5").click(function(){ 
$("#i3").val("jikexueyuan");//修改input的内容 
}); 
$("#btn6").click(function(){ 
// $("#a").attr("href"," ");//修改input的内容 
$("#a").attr({ 
"href":" ", 
"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")plete(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.οnscrοll=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,下载: / 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,下载: /
二,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个人笔记总结