經(jīng)過(guò)漫長(zhǎng)的等待，HTML5標(biāo)準(zhǔn)終于敲定了

T之家（www.ithome.com）：經(jīng)過(guò)漫長(zhǎng)的等待，HTML5標(biāo)準(zhǔn)終于敲定了

IT之家報(bào)道萬(wàn)維網(wǎng)聯(lián)盟（W3C）宣布，經(jīng)過(guò)了幾乎八年之后的研究與開(kāi)發(fā)后，HTML5的標(biāo)準(zhǔn)終于敲定了，新的標(biāo)準(zhǔn)會(huì)使跨平臺(tái)內(nèi)容顯示更加流暢，雖然已經(jīng)有開(kāi)發(fā)者將HTML5技術(shù)應(yīng)用在其網(wǎng)頁(yè)中，不過(guò)最終的推薦標(biāo)準(zhǔn)現(xiàn)在公布了。

W3C首領(lǐng)Jeff Jaffe表示：

“HTML5代表著下一代的網(wǎng)頁(yè)元素。就在不久之前，用戶還在瀏覽靜態(tài)網(wǎng)頁(yè)，而如今的網(wǎng)頁(yè)卻如此豐。現(xiàn)在，所有人都可以使用最新的穩(wěn)定標(biāo)準(zhǔn)來(lái)創(chuàng)造元素，并且可以應(yīng)用在所有瀏覽器中。如果我們無(wú)法做到這一點(diǎn)，我們就無(wú)法做到統(tǒng)一網(wǎng)頁(yè)標(biāo)準(zhǔn)。”

HTML5也許只是未來(lái)開(kāi)放式網(wǎng)絡(luò)平臺(tái)的奠基石，今后依靠新技術(shù)開(kāi)發(fā)的網(wǎng)頁(yè)將可以使多平臺(tái)統(tǒng)一體驗(yàn)。（Via: Windows Central）

HTML5 是最近十年來(lái) Web 開(kāi)發(fā)標(biāo)準(zhǔn)最巨大的飛躍，目前蘋(píng)果、谷歌、微軟世界三大移動(dòng)互聯(lián)網(wǎng)巨頭都支持了 HTML5，HTML5 的發(fā)展給移動(dòng)互聯(lián)網(wǎng)應(yīng)用帶來(lái)了全新的變化。HTML5 的出現(xiàn)，給移動(dòng)互聯(lián)網(wǎng)帶來(lái)了新的變革，為移動(dòng)互聯(lián)網(wǎng)中富媒體的應(yīng)用提供了新的思路，并具有廣闊的應(yīng)用前景。所以HTML5適應(yīng)了目前的移動(dòng)互聯(lián)網(wǎng)應(yīng)用潮流。

Html5課程內(nèi)容主要包括以下八個(gè)方面：Web頁(yè)面制作基礎(chǔ)，UI網(wǎng)站設(shè)計(jì)，編程基礎(chǔ)技術(shù)，后端開(kāi)發(fā)技術(shù)，移動(dòng)互聯(lián)網(wǎng)應(yīng)用，特效開(kāi)發(fā)高級(jí)實(shí)戰(zhàn)，企業(yè)級(jí)應(yīng)用開(kāi)發(fā)以及網(wǎng)頁(yè)游戲開(kāi)發(fā)。

兄弟連教育根據(jù)公司和行業(yè)發(fā)展的實(shí)際需要設(shè)計(jì)教學(xué)內(nèi)容，現(xiàn)行的課程體系包括四大階段和特級(jí)課：“基礎(chǔ)網(wǎng)頁(yè)布局與響應(yīng)式布局”、“前端核心技術(shù)：Javascript”、“HTML5新特性”、”MEAN(MongoDB+Express+Angular.js+Node.js)全棧框架開(kāi)發(fā)”，”特級(jí)課：微信開(kāi)發(fā)”。

第一階段：基礎(chǔ)網(wǎng)頁(yè)布局與響應(yīng)式布局

主要內(nèi)容：

1、HTML CSS

2、PS操作，網(wǎng)頁(yè)切圖

3、基本網(wǎng)頁(yè)布局

4、HTML5 語(yǔ)義標(biāo)簽

5、HTML5 智能表單

6、CSS3

7、Media Query響應(yīng)式布局

--------------------------------------------------分割符---------------------------------------------------------------------------

詳細(xì)內(nèi)容包括：

WEB開(kāi)發(fā)構(gòu)件

系統(tǒng)及文件基本操作

基本的快捷鍵

描述 Windows Mac OS

編輯菜單 Alt + E Ctrl + F2 + F

文件菜單 Alt + F Ctrl + F2 + E

視圖菜單 Alt + V Ctrl + F2 + V

全選文本 Ctrl + A Cmd + A

復(fù)制文本 Ctrl + C Cmd + C

查找文本 Ctrl + F Cmd + F

查找替換文本 Ctrl + H Cmd + F

新建文檔 Ctrl + N Cmd + N

打開(kāi)文件 Ctrl + O Cmd + O

打印選項(xiàng) Ctrl + P Cmd + P

保存文件 Ctrl + S Cmd + S

粘貼文本 Ctrl + V Cmd + V

剪切文本 Ctrl + X Cmd + X

重做文本 Ctrl + Y Shift + Cmd + Z

撤銷(xiāo)文本 Ctrl + Z Cmd + Z

文本編輯描述 Windows Mac OS

光標(biāo)移動(dòng)操作

文本編輯操作

Web 瀏覽器操作

標(biāo)簽/窗口管理

打印當(dāng)前網(wǎng)頁(yè)

保存當(dāng)前網(wǎng)頁(yè)

地址欄操作

書(shū)簽操作

屏幕截圖

WEB開(kāi)發(fā)構(gòu)件

C/S結(jié)構(gòu)

B/S結(jié)構(gòu)

HTTP協(xié)議

傳輸數(shù)據(jù)方式：post,get

HTTP消息類(lèi)型：2xx,4xx,5xx

URL組成

HTML介紹

HTML發(fā)展史

HTML5簡(jiǎn)介

新標(biāo)準(zhǔn)

引入原生多媒體支持

引入可編程內(nèi)容

引入予以Web

http協(xié)議

HTTP消息類(lèi)型：2xx,4xx,5xx

開(kāi)發(fā)軟件

nodepad++

sublime

dreamweaver

HTML介紹

HTML發(fā)展史

HTML5介紹

HTML基本語(yǔ)法與規(guī)范

標(biāo)簽

屬性

固有屬性

自定義屬性

通用屬性

元素

父元素（理解）

子元素

兄弟元素

后代元素

主體結(jié)構(gòu)

長(zhǎng)度單位

顏色單位

基礎(chǔ)標(biāo)簽

文本類(lèi)標(biāo)簽

文本格式化標(biāo)簽

<b> 定義粗體文本

<strong> 定義加重語(yǔ)氣

<em> 定義著重文字

<i> 定義斜體字

<br> 換行標(biāo)簽

<sub> 定義下標(biāo)字

<sup> 定義上標(biāo)字

<ins> 定義插入字

<del> 定義刪除字

<code> 定義計(jì)算機(jī)代碼

<kbd> 定義鍵盤(pán)碼

<samp> 定義計(jì)算機(jī)代碼樣本

<var> 定義變量

<pre> 定義預(yù)格式文本

<abbr> 定義縮寫(xiě)

<address> 定義地址

<bdo> 定義文字方向

<blockquote> 定義長(zhǎng)的引用

<q> 定義短的引用語(yǔ)

<cite> 定義引用、引證

<dfn> 定義一個(gè)定義項(xiàng)目。

計(jì)算機(jī)輸出類(lèi)

語(yǔ)義，引用及標(biāo)簽定義

鏈接<a>

標(biāo)題Hn

HTML框架iframe

段落P

列表標(biāo)簽

字符實(shí)體

空格    

< 小于號(hào) < <

> 大于號(hào) > >

& 和號(hào) & &

" 引號(hào) " "

' 撇號(hào) ' (IE不支持) '

￠分 ¢ ¢

￡鎊 £ £

￥日元 ¥ ¥

€ 歐元 € €

§ 小節(jié) § §

? 版權(quán) © ©

? 注冊(cè)商標(biāo) ® ®

? 商標(biāo) ™ ™

× 乘號(hào) × ×

÷ 除號(hào) ÷ ÷

表格標(biāo)簽

colgroup

caption

table

thead

col

span

tbody

colspan

rowspan

tfoot

頭部標(biāo)簽

<!doctype html>

<head> 定義了文檔的信息

<title> 定義了文檔的標(biāo)題

<base> 定義了頁(yè)面鏈接標(biāo)簽的默認(rèn)鏈接地址

charsetNew character_set 定義文檔的字符編碼。

content text 定義與 http-equiv 或 name 屬性相關(guān)的元信息。

http-equiv content-type

default-style

refresh 把 content 屬性關(guān)聯(lián)到 HTTP 頭部。

name application-name

author

description

generator

keywords 把 content 屬

多媒體標(biāo)簽

1. img

1.1 導(dǎo)入一張圖片

1.2 屬性

src 圖片地址

width 設(shè)置圖片寬

height 設(shè)置圖片高

border 設(shè)置圖片邊框

alt 不顯示圖片時(shí)的提示信息

title 鼠標(biāo)放上時(shí)顯示的圖片描述信息

usemap map標(biāo)簽的name #name

2. map

2.1 給圖片劃分區(qū)域配合area

2.2 屬性

name 給map指定一個(gè)name

3. area

3.1 在map的配合下給圖片劃分指定形狀的區(qū)域

3.2 屬性

shape 劃分的形狀

coords 形狀的坐標(biāo)·

href 要鏈接的地址

target 新網(wǎng)頁(yè)打開(kāi)方式

4. audio

4.1 導(dǎo)入音頻的標(biāo)簽 HTML5新標(biāo)簽

4.2 屬性

src 音頻源的路徑必備

controls 顯示控制按鈕必備

autoplay 自動(dòng)播放

loop 是否循環(huán)

preload 預(yù)加載不能跟autoplay屬性混用

4.3 audio標(biāo)簽內(nèi)部加文字，如果瀏覽器支持這個(gè)標(biāo)簽則文字不會(huì)顯示，如果不支持就會(huì)顯示

4.4 audio標(biāo)簽的兩個(gè)格式

簡(jiǎn)單格式

<audio src="../video/music.mp3" controls>您的破瀏覽器不支持，請(qǐng)升級(jí)瀏覽器

</audio>

完整格式視頻源單獨(dú)放到source標(biāo)簽中

您的破瀏覽器不支持，請(qǐng)升級(jí)瀏覽器

</audio>

5. video

5.1 導(dǎo)入視頻的標(biāo)簽 HTML5新標(biāo)簽

5.2 屬性

src 路徑

controls 顯示控制按鈕

autoplay 自動(dòng)播放屬性值 auto none

loop 是否循環(huán)播放

width 視頻的寬

height 視頻的高

poster 縮略圖地址

6. source

6.1 配合video標(biāo)簽導(dǎo)入不同格式的視頻 HTML5新標(biāo)簽

6.2 屬性

src 視頻地址

7. canvas 用于畫(huà)圖的標(biāo)簽

8. embed

8.1 導(dǎo)入多媒體文件音頻視頻 HTML5新標(biāo)簽

8.2 屬性

src 多媒體文件地址

width

height

HTML表單及智能表單

1. 表單相關(guān)標(biāo)簽

1.1 form 客戶端跟服務(wù)器端進(jìn)行交互，常用語(yǔ) 登錄注冊(cè) 調(diào)查問(wèn)卷...

① 定義表單所有的表單控件放在form中

② 屬性

action 表單要提交的地址

method 提交方法 get（默認(rèn)）提交的值會(huì)顯示在url上不安全而且傳遞的值數(shù)量有限 post 提交的內(nèi)容不會(huì)顯示在url上，傳遞的值范圍也比get方式的大，相對(duì)安全

target 打開(kāi)新網(wǎng)頁(yè)的方式 _self _blank _top _parent

enctype="multipart/form-data" 傳文件必須加上

1.2 input

① 定義輸入框密碼框單選框復(fù)選框.....

② 屬性

type input的類(lèi)型

name input的名字

value input的值

checked 默認(rèn)radio和checkbox

size input框的大小 type:text password textarea

maxlength input最大輸入長(zhǎng)度 type:text password

1.3 button

① 以標(biāo)簽形式定義按鈕

② 屬性

type 設(shè)置submit（默認(rèn)值），按鈕具有提交功能設(shè)置為button，普通按鈕 reset 重置

1.4 textarea

① 文本域雙標(biāo)簽

② 屬性

name 指定名字

rows 指定行數(shù) 決定文本域高度

cols 指定列數(shù) 決定文本域?qū)挾?/p>

1.5 select

① 選擇框下拉框單選框

② 屬性

name 指定名字

multiple 設(shè)置為多選

1.6 option

① 定義select中的的選項(xiàng)

② 屬性

value 指定真正的值

selected 默認(rèn)值

1.7 optgroup

① 給option分組不常用

1.8 fieldset 套在form的外部添加邊框不常用

1.9 legend 在邊框定義form的標(biāo)題不常用

1.20 input select textarea button 稱作表單控件元素

1.21 通用屬性所有的表單控件元素都具有屬性 disabled enabled(默認(rèn))

2. form表單input中type類(lèi)型

text 文本框 value設(shè)置默認(rèn)值

password 密碼框 value設(shè)置默認(rèn)值

radio 單選框所有的redio name相同才能單選 value設(shè)置真正提交的值默認(rèn)的按鈕可以設(shè)置checked

checkbox 復(fù)選框 value設(shè)置真正提交的值設(shè)置默認(rèn)添加checked屬性

image 提交按鈕，按鈕樣式來(lái)自圖片配合src屬性

submit 提交按鈕， value指定按鈕上的文字

reset 重置按鈕 value指定按鈕上的文字

button button按鈕 value指定按鈕上的文字

file 上傳框

hidden 隱藏域 name value

3. label標(biāo)簽

用來(lái)嵌套input，點(diǎn)擊label嵌套的任何元素都可以激活label內(nèi)的input

屬性 for 指定 input的id

語(yǔ)義標(biāo)簽

<header> 定義了文檔的頭部區(qū)域

<nav> 定義運(yùn)行中的進(jìn)度（進(jìn)程）。

<article> 定義頁(yè)面獨(dú)立的內(nèi)容區(qū)域。

<figure> 規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。

<figcaption> 定義 <figure> 元素的標(biāo)題

<aside> 定義頁(yè)面的側(cè)邊欄內(nèi)容。

<section> 定義文檔中的節(jié)（section、區(qū)段）。

<footer> 定義 section 或 document 的頁(yè)腳。

<address> 定義文檔作者或擁有者的聯(lián)系信息

<bdi> 允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。

<command> 定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕

<details> 用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)

<summary> 標(biāo)簽包含 details 元素的標(biāo)題

<dialog> 定義對(duì)話框，比如提示框

<mark> 定義帶有記號(hào)的文本。

<meter> 定義度量衡。僅用于已知最大和最小值的度量。

<progress> 定義任何類(lèi)型的任務(wù)的進(jìn)度。

<ruby> 定義 ruby 注釋（中文注音或字符）。

<rt> 定義字符（中文注音或字符）的解釋或發(fā)音。

<rp> 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。

<time> 定義日期或時(shí)間。

<wbr> 規(guī)定在文本中的何處適合添加換行符。

CSS基礎(chǔ)與規(guī)范知識(shí)

1. CSS的定義

Cascading Style Sheets 層疊樣式表（級(jí)聯(lián)樣式表）

2. CSS的作用

定義網(wǎng)頁(yè)外觀，如字體、背景、顏色等

3. CSS特點(diǎn)

① 精確的定位準(zhǔn)確的控制頁(yè)面的任何元素

② 精細(xì)的控制可以做到像素級(jí)別的調(diào)整

③ 樣式與內(nèi)容的分離便于維護(hù)，便于重用

4. 發(fā)展歷程

① CSS1 作為一項(xiàng)W3C推薦，CSS1發(fā)布于 1996年12月17 日。1999 年1月11日，此推薦被重新修訂。

② CSS2 作為一項(xiàng) W3C 推薦，CSS2發(fā)布于 1999年1月11日。CSS2添加了對(duì)媒介（打印機(jī)和聽(tīng)覺(jué)設(shè)備）和可下載字體的支持。

③ CSS3 CSS3 計(jì)劃將 CSS 劃分為更小的模塊。2001年至今 HTML5+CSS3

CSS選擇器

HTML tag

Class

包含選擇器：div span a

組合選擇 div,span,a

任意選擇器（通配符選擇器）*

關(guān)系選擇器

包含選擇符

子選擇符

相鄰選擇符

兄弟選擇符

屬性選擇器

偽類(lèi)選擇器

偽對(duì)象選擇器

CSS3屬性

尺寸

邊框

背景

內(nèi)補(bǔ)白

外補(bǔ)白

布局

定位

字體

文本

列表

表格

用戶界面

多欄

2D變換

過(guò)渡

動(dòng)畫(huà)

Photoshop網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

I設(shè)計(jì)介紹

photoshop安裝與設(shè)置

位圖與矢量圖

網(wǎng)頁(yè)常用圖片格式

圖像大小與分辨率

選區(qū)創(chuàng)建和編輯

選區(qū)的創(chuàng)建

選區(qū)工具M(jìn)

套鎖工具L

快速選區(qū)工具W和魔術(shù)棒W

鋼筆選區(qū)

創(chuàng)建矢量路徑

錨點(diǎn)操作

鋼筆工具

形狀轉(zhuǎn)選區(qū)ctrl+Enter

選區(qū)的編輯

選區(qū)的存儲(chǔ)

應(yīng)用輔助功能

使用標(biāo)尺ctrl+R

設(shè)置網(wǎng)格：視圖>顯示>網(wǎng)格ctrl+'

應(yīng)用變換功能

選擇>可變換選區(qū)ctrl＋T

縮放

旋轉(zhuǎn)

扭曲

透視

變形

水平翻轉(zhuǎn)

垂直翻轉(zhuǎn)

應(yīng)用內(nèi)容識(shí)別比例功能

操控變形

裁剪圖像

裁剪工具

基礎(chǔ)繪畫(huà)

了解繪畫(huà)和繪畫(huà)修飾工具

畫(huà)筆

顏色替換

涂抹工具

繪畫(huà)的基本技巧

繪制直線,按住shift

繪制曲線

定義顏色

使用拾色器

漸變工具

填充前景色：alt＋delete

填充背景色：control＋delete

為圖像填充顏色shift+f5

圖形、路徑計(jì)算

網(wǎng)頁(yè)布局規(guī)范

Web設(shè)計(jì)規(guī)范

banner設(shè)計(jì)

網(wǎng)頁(yè)柵格系統(tǒng)

網(wǎng)頁(yè)構(gòu)成

命名規(guī)范

導(dǎo)航設(shè)計(jì)

版式設(shè)計(jì)

網(wǎng)頁(yè)配色

Photoshop網(wǎng)頁(yè)切圖

網(wǎng)頁(yè)切圖及切圖常見(jiàn)問(wèn)題

精靈圖片技術(shù)

專題頁(yè)設(shè)計(jì)

W3C盒子模型

div+css網(wǎng)頁(yè)布局

HTML5兼容性處理

使用 HTML5布局元素的布局

Media Query響應(yīng)式布局

原生響應(yīng)式布局

媒體查詢+尺寸屬性：百分比，max-width,max-height,min-width,min-height

--------------------------------------------------分割符---------------------------------------------------------------------------

可實(shí)現(xiàn)效果

1、表格制作個(gè)人簡(jiǎn)歷

2、使用表單制作注冊(cè)頁(yè)面

3、div+css基本網(wǎng)頁(yè)布局

4、PS網(wǎng)頁(yè)設(shè)計(jì)

5、精靈圖片技術(shù)

6、語(yǔ)義化標(biāo)簽布局

7、智能表單驗(yàn)證

8、多媒體播放

9、css3:圓角邊框、邊框九宮格特效、多圖背景、動(dòng)畫(huà)、漸變和倒影、多列屬性布局、服務(wù)器端字體

10、響應(yīng)式網(wǎng)頁(yè)實(shí)現(xiàn)

--------------------------------------------------分割符---------------------------------------------------------------------------

第二階段：前端核心技術(shù)：Javascript

主要內(nèi)容：

1、Javascript

2、Ajax

3、JQuery

4、JS高級(jí)特效

--------------------------------------------------分割符---------------------------------------------------------------------------

詳細(xì)內(nèi)容：

JavaScript 腳本語(yǔ)言

什么是JavaScript？

1. JavaScript 是一種客戶端腳本語(yǔ)言（腳本語(yǔ)言是一種輕量級(jí)的編程語(yǔ)言）。

2. JavaScript 通常被直接嵌入 HTML 頁(yè)面。

3. JavaScript 是一種解釋性語(yǔ)言（就是說(shuō)，代碼執(zhí)行不進(jìn)行預(yù)編譯）。

特點(diǎn)：

1. 弱類(lèi)型

2. 基于對(duì)象。(因?yàn)槊嫦驅(qū)ο笮枰哂蟹庋b、繼承、多態(tài)的特征)

JavaScript語(yǔ)言中包含三個(gè)核心：ECMAScript基本語(yǔ)法、DOM、BOM

JavaScript是基于對(duì)象的腳本語(yǔ)言。

在HTML中如何使用JavaScript

1. 使用<script></script>標(biāo)簽：

屬性：

charset（可選）字符集設(shè)置、

defer（可選執(zhí)行順序）值：defer、

language(已廢除)、

src（可選）使用外部的js腳本文件

type(必選)類(lèi)型：值：text/javascript

<!--

javaScript語(yǔ)言

//-->

</script>

2. 在html標(biāo)簽的事件中，超級(jí)鏈接里。

3. 外部導(dǎo)入方式（推薦）：

JavaScript的語(yǔ)法：

1.區(qū)分大小寫(xiě)：變量名、函數(shù)名、運(yùn)算符以及其他一切東西都是區(qū)分大小寫(xiě)的。

2.他和php一樣屬于弱類(lèi)型語(yǔ)言。

3.每行結(jié)尾的分號(hào)可有可無(wú)。(js中的每條語(yǔ)句之間的分割符可以是回車(chē)換行也可以是";"分號(hào)(推薦))

4.腳本注釋：

// 單行注釋

/* 多行注釋 */

5.括號(hào)表示代碼塊:{}

6.變量的定義：使用var關(guān)鍵字來(lái)聲明。

變量的命名規(guī)范是：字母數(shù)字，$符和下劃線構(gòu)成，但是不可以以數(shù)字開(kāi)始。

變量名不可以使用關(guān)鍵字.

typeof函數(shù)獲取一個(gè)變量的類(lèi)型：

7.JavaScript的數(shù)據(jù)類(lèi)型：

undefined 類(lèi)型

null 類(lèi)型（對(duì)象）

boolean 類(lèi)型

number 類(lèi)型

object引用類(lèi)型

8. 類(lèi)型轉(zhuǎn)換：

JavaScript的運(yùn)算符

1. 一元運(yùn)算符

delete：用于刪除對(duì)象中屬性的如：delete o.name; //刪除o對(duì)象中的name屬性

void： void 運(yùn)算符對(duì)任何值返回 undefined。沒(méi)有返回值的函數(shù)真正返回的都是 undefined。

++ --

一元加法和一元減法

2. 位運(yùn)算符

位運(yùn)算 NOT ~

位運(yùn)算 AND &

位運(yùn)算 OR |

位運(yùn)算 XOR ^ (不同為1，相同則為0)

左移運(yùn)算 <<

右移運(yùn)算 >>

3. 邏輯運(yùn)算符

邏輯 NOT ! 運(yùn)算符非

邏輯 AND && 運(yùn)算符與

邏輯 OR || 運(yùn)算符或

4. 乘性運(yùn)算符：*（乘） /(除) %（取模）求余

5. 加性運(yùn)算符： + -

*其中+號(hào)具有兩重意思：字串連接和數(shù)值求和。

就是加號(hào)”+“兩側(cè)都是數(shù)值則求和，否則做字串連接

6. 關(guān)系運(yùn)算符 > >= < <=

7. 等性運(yùn)算符 == === != !==

8. 條件運(yùn)算符 ? : (三元運(yùn)算符)

9. 賦值運(yùn)算符 = += -= *= /= %= >>= <<=

10 逗號(hào)運(yùn)算符

用逗號(hào)運(yùn)算符可以在一條語(yǔ)句中執(zhí)行多個(gè)運(yùn)算。

var iNum1=1, iNum2=2, iNum3=3;

javaScript（語(yǔ)句流程控制）

1. 判斷語(yǔ)句 if語(yǔ)句； if... else ... if ... else if ... else...

2. 多分支語(yǔ)句： switch（）{。 case ：。。。。}

switch (i) {

case 20: alert("20");

break;

case 30: alert("30");

break;

case 40: alert("40");

break;

default: alert("other");

}

3. 循環(huán)語(yǔ)句（迭代語(yǔ)句）

for：

while

do...while

*for-in 語(yǔ)句: 語(yǔ)句是嚴(yán)格的迭代語(yǔ)句，用于枚舉對(duì)象的屬性。

var a = [10,20,30,40,50];

//迭代的是數(shù)組的下標(biāo)。

for(i in a){

document.write(a[i]);

}

//輸出： 1020304050

4. break 和 continue 語(yǔ)句對(duì)循環(huán)中的代碼執(zhí)行提供了更嚴(yán)格的控制。

5. *with 語(yǔ)句用于設(shè)置代碼在特定對(duì)象中的作用域。

//擴(kuò)充知識(shí)：

1. 在網(wǎng)頁(yè)文檔中獲取一個(gè)節(jié)點(diǎn)對(duì)象（HTML標(biāo)簽）

document.getElementById("mid"); //獲取標(biāo)簽id屬性值為mid的節(jié)點(diǎn)對(duì)象

2. 定時(shí)相關(guān)函數(shù)：

setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 單次定時(shí)執(zhí)行指定函數(shù)

clearTimeout(iTimeoutID) -- 取消上面的單次定時(shí)

setInterval(vCode, iMilliSeconds [, sLanguage]) --無(wú)限次定時(shí)執(zhí)行指定函數(shù)

clearInterval(iIntervalID)-- 取消上面的多次定時(shí)

一、JavaScript的函數(shù)：

標(biāo)準(zhǔn)格式： function 函數(shù)名（[參數(shù)列表..]）{

函數(shù)體。。。

[return 返回值;]

}

JavaScript三種定義函數(shù)方法：

*第一種是使用function語(yǔ)句定義函數(shù)

如上面格式

第二種是使用Function()構(gòu)造函數(shù)來(lái)定義函數(shù)（不常用）

var 函數(shù)名 = new Function(“參數(shù)1”，”參數(shù)2”，”參數(shù)3”……”函數(shù)體”);

如：

var 函數(shù)名 = new Function(”x”,”y”,”var z=x+y;return z;”);

*第三種是在表達(dá)式中定義函數(shù)

var 函數(shù)名 = function(參數(shù)1，參數(shù)2，…){函數(shù)體};

//例如：

//定義

var add = function(a,b){

return a+b;

}

//調(diào)用函數(shù)

document.write(add(50,20));

arguments 對(duì)象

在函數(shù)代碼中，使用特殊對(duì)象 arguments，開(kāi)發(fā)者無(wú)需明確指出參數(shù)名，就能訪問(wèn)它們。

例如，在函數(shù) sayHi() 中，第一個(gè)參數(shù)是 message。用 arguments[0]

也可以訪問(wèn)這個(gè)值，即第一個(gè)參數(shù)的值（第一個(gè)參數(shù)位于位置 0，

第二個(gè)參數(shù)位于位置 1，依此類(lèi)推）。

關(guān)于變量和參數(shù)問(wèn)題：

函數(shù)外面定義的變量是全局變量，函數(shù)內(nèi)可以直接使用。

在函數(shù)內(nèi)部沒(méi)有使用var定義的=變量則為全局變量，

*在函數(shù)內(nèi)使用var關(guān)鍵字定義的變量是局部變量，即出了函數(shù)外邊無(wú)法獲取。

js函數(shù)定義的參數(shù)沒(méi)有默認(rèn)值（目前只有最新的火狐瀏覽器支持）

二、系統(tǒng)中常用的內(nèi)置函數(shù)：

escape() //字串編碼

unescape() //字串反編碼

*eval() //將參數(shù)字符串作為腳本代碼來(lái)執(zhí)行。

*isNaN() // is not a number (不是一個(gè)數(shù)值)

*parseInt()

*parseFloat()

三、JavaScript的對(duì)象的定義和使用

1.使用構(gòu)造函數(shù)創(chuàng)建內(nèi)置對(duì)象

var myObject = new Object();

myObject.name = “l(fā)ijie”;

myObject.age = 20;

myObject.say = function(){...}

2.直接創(chuàng)建自定義對(duì)象

var 對(duì)象名 = {屬性名1：屬性值，屬性名2：屬性值2，…….}

*3.使用自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象

function pen(name,color,price){

//對(duì)象的name屬性

this.name = name;

//對(duì)象的color屬性

this.color = color;

//對(duì)象的piece屬性

this.price = price;

//對(duì)象的say方法

this.say = function(){};

}

var pen = new pen(“鉛筆”,”紅色”,20);

pen.say();

一、for…in語(yǔ)句

----------------------------------------

for(var i in window){

document.write(i+”----”+window[i]);

}

這種語(yǔ)句可以遍歷對(duì)象中的所有屬性或數(shù)組中的所有元素。

二、with語(yǔ)句

--------------------------------------------

如果使用with語(yǔ)句，就可以簡(jiǎn)化對(duì)象屬性調(diào)用的層次。

document.write(‘test1’);

document.write(‘test2’);

document.write(‘test3’);

可以使用with來(lái)簡(jiǎn)化：

with(document){

write(‘test1’);

write(‘test2’);

write(‘test3’);

}

三、JavaScript內(nèi)置對(duì)象

* Array（數(shù)組）

var a= new Array(); //創(chuàng)建一個(gè)空數(shù)組

a = new Array(10); //創(chuàng)建一個(gè)數(shù)組單元為10個(gè)的數(shù)組。

a = new Array(10,20,30);//創(chuàng)建一個(gè)指定數(shù)組單元的數(shù)組。

a=['a','b','c','d']; //快捷定義數(shù)組

常用屬性：

length--獲取長(zhǎng)度。

常用方法：

toString() 把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。

sort() 對(duì)數(shù)組的元素進(jìn)行排序

join() 把數(shù)組的所有元素放入一個(gè)字符串。元素通過(guò)指定的分隔符進(jìn)行分隔。

pop() 刪除并返回?cái)?shù)組的最后一個(gè)元素

push() 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度。

* Boolean 布爾值包裝類(lèi)對(duì)象

方法：toSource() 返回該對(duì)象的源代碼。

toString() 把邏輯值轉(zhuǎn)換為字符串，并返回結(jié)果。

valueOf() 返回 Boolean 對(duì)象的原始值。

* Date

var dd = new Date();

getDate() 從 Date 對(duì)象返回一個(gè)月中的某一天 (1 ~ 31)。

getDay() 從 Date 對(duì)象返回一周中的某一天 (0 ~ 6)。

getMonth() 從 Date 對(duì)象返回月份 (0 ~ 11)。

getFullYear() 從 Date 對(duì)象以四位數(shù)字返回年份。

getYear() 請(qǐng)使用 getFullYear() 方法代替。

getHours() 返回 Date 對(duì)象的小時(shí) (0 ~ 23)。

getMinutes() 返回 Date 對(duì)象的分鐘 (0 ~ 59)。

getSeconds() 返回 Date 對(duì)象的秒數(shù) (0 ~ 59)。

getMilliseconds() 返回 Date 對(duì)象的毫秒(0 ~ 999)。

getTime() 返回 1970 年 1 月 1 日至今的毫秒數(shù)。

同上還有很多set方法用來(lái)設(shè)置。

* Math 對(duì)象用于執(zhí)行數(shù)學(xué)任務(wù)。方法是靜態(tài)的。

abs(x) 返回?cái)?shù)的絕對(duì)值。

ceil(x) 對(duì)數(shù)進(jìn)行上舍入。

floor(x) 對(duì)數(shù)進(jìn)行下舍入。

random() 返回 0 ~ 1 之間的隨機(jī)數(shù)。

round(x) 把數(shù)四舍五入為最接近的整數(shù)。

max(x,y) 返回 x 和 y 中的最高值。

min(x,y) 返回 x 和 y 中的最低值。

* Number

toString();

toFixed 把數(shù)字轉(zhuǎn)換為字符串，結(jié)果的小數(shù)點(diǎn)后有指定位數(shù)的數(shù)字。

* String 子串處理對(duì)象

anchor() 創(chuàng)建 HTML 錨。

*charAt() 返回在指定位置的字符。

charCodeAt()返回在指定的位置的字符的 Unicode 編碼。

*indexOf() 檢索字符串。

*lastIndexOf() 從后向前搜索字符串。

match() 找到一個(gè)或多個(gè)正在表達(dá)式的匹配。

*replace() 替換與正則表達(dá)式匹配的子串。

search() 檢索與正則表達(dá)式相匹配的值。

slice() 提取字符串的片斷，并在新的字符串中返回被提取的部分。

split() 把字符串分割為字符串?dāng)?shù)組。

substr() 從起始索引號(hào)提取字符串中指定數(shù)目的字符。

*substring() 提取字符串中兩個(gè)指定的索引號(hào)之間的字符。

toLocaleLowerCase() 把字符串轉(zhuǎn)換為小寫(xiě)。

toLocaleUpperCase() 把字符串轉(zhuǎn)換為大寫(xiě)。

*toLowerCase() 把字符串轉(zhuǎn)換為小寫(xiě)。

*toUpperCase() 把字符串轉(zhuǎn)換為大寫(xiě)。

* RegExp

exec()正則匹配

test()

match()

* Global

escape(string) -- 可對(duì)字符串進(jìn)行編碼

unescape(string) -- 函數(shù)可對(duì)通過(guò) escape() 編碼的字符串進(jìn)行解碼。

encodeURI(URIstring) -- 函數(shù)可把字符串作為 URI 進(jìn)行編碼。

decodeURI(URIstring) -- 函數(shù)可對(duì) encodeURI() 函數(shù)編碼過(guò)的 URI 進(jìn)行解碼。

*eval(string) -- 函數(shù)可計(jì)算某個(gè)字符串，并執(zhí)行其中的的 JavaScript 代碼。

getClass(javaobj) -- 函數(shù)可返回一個(gè) JavaObject 的 JavaClass。

*isNaN(x) -- 函數(shù)用于檢查其參數(shù)是否是非數(shù)字值。

Number(object) --函數(shù)把對(duì)象的值轉(zhuǎn)換為數(shù)字。

*parseFloat(string) -- 函數(shù)可解析一個(gè)字符串，并返回一個(gè)浮點(diǎn)數(shù)。

*parseInt(string, radix)

事件處理

一、事件源: 任何一個(gè)HTML元素（節(jié)點(diǎn)） body, div , button p, a, h1 .......

二、事件: 你的操作

鼠標(biāo):

* click 單擊

dblclick 雙擊

contextmenu (在body) 文本菜單（鼠標(biāo)右鍵使用）

要想屏蔽鼠標(biāo)右鍵使用return false

window.document.oncontextmenu=function(ent){...}

* mouseover 放上(移入)

* mouseout 離開(kāi)（移出）

mousedown 按下

mouseup 抬起

* mousemove 移動(dòng)

鍵盤(pán)：

keypress 鍵盤(pán)事件

keydown 按下

文檔：(主要使用在body標(biāo)簽中)

* load 加載

unload 關(guān)閉(為了兼容可使用下面函數(shù))

beforeunload 關(guān)閉之前

表單：

* focus 焦點(diǎn)

* blur 失去焦點(diǎn)

* submit 提交事件

* change 改變（如下拉框選擇事件）

其它：

* scroll 滾動(dòng)事件(常用延遲加載、瀑布流技術(shù))

window.onscroll=function(){

document.documentElement.scrollTop;//獲取滾動(dòng)條的上距離

document.documentElement.scrollLeft;//滾動(dòng)條的左距離

}

selectd 事件

。。。。

三、事件處理程序

使用一個(gè)匿名或回調(diào)函數(shù)

有三種方法加事件

第一種：

格式： <tag on事件="事件處理程序" />

*第二種：

對(duì)象.on事件=事件處理程序

</script>

第三種：(火狐不兼容)

事件對(duì)象：

屬性：

1. srcElement

2. keyCode 鍵盤(pán)值

事件 event window.event

1. srcElement 代表事件源對(duì)象

2. keyCode 事件發(fā)生時(shí)的鍵盤(pán)碼 keypress , keydown keyup

3. clientX, clientY 坐標(biāo)位置

4. screenX, screenY

5. returnValue

6. cancelBubble;

//為頁(yè)面添加鼠標(biāo)右點(diǎn)擊事件

window.document.oncontextmenu=function(ent){

//兼容IE和火狐瀏覽器兼容

var event=ent || window.event;

//獲取事件坐標(biāo)位置

var x=event.clientX;

var y=event.clientY;

...

}

一、BOM

1. window對(duì)象

常用的屬性：

*document ：對(duì) Document 對(duì)象的只讀引用

*history ：對(duì) History 對(duì)象的只讀引用。

*location：用于窗口或框架的 Location 對(duì)象

Navigator：對(duì) Navigator 對(duì)象的只讀引用

*parent：返回父窗口。

length: 設(shè)置或返回窗口中的框架數(shù)量。

Screen: 對(duì) Screen 對(duì)象的只讀引用

status: 設(shè)置窗口狀態(tài)欄的文本。

top: 返回最頂層的先輩窗口。

常用方法：

alert() 顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框。

confirm() 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框。

prompt() 顯示可提示用戶輸入的對(duì)話框。

close() 關(guān)閉瀏覽器窗口。

open() 打開(kāi)一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口。

scrollTo() 把內(nèi)容滾動(dòng)到指定的坐標(biāo)。

setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。

clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout。

setInterval() 按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。

clearInterval() 取消由 setInterval() 設(shè)置的 timeout。

2. Navigator 對(duì)象

Navigator 對(duì)象包含的屬性描述了正在使用的瀏覽器。可以使用這些屬性進(jìn)行平臺(tái)專用的配置。

常用屬性：

with(document) {

write ("你的瀏覽器信息：<ul>");

write ("<li>代碼："+navigator.appCodeName+"</li>");

write ("<li>名稱："+navigator.appName+"</li>");

write ("<li>版本："+navigator.appVersion+"</li>");

write ("<li>語(yǔ)言："+navigator.language+"</li>");

write ("<li>編譯平臺(tái)："+navigator.platform+"</li>");

write ("<li>用戶表頭："+navigator.userAgent+"</li>");

write ("</ul>");

}

3. Screen 對(duì)象包含有關(guān)客戶端顯示屏幕的信息。

常用屬性：

document.write( "屏幕寬度："+screen.width+"px<br />" );

document.write( "屏幕高度："+screen.height+"px<br />" );

document.write( "屏幕可用寬度："+screen.availWidth+"px<br />" );

document.write( "屏幕可用高度："+screen.availHeight+"px" );

參考了解其他屬性信息獲取方式

網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth

網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight

網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)

網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線的高)

網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth

網(wǎng)頁(yè)正文全文高： document.body.scrollHeight

網(wǎng)頁(yè)被卷去的高： document.body.scrollTop

網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft

網(wǎng)頁(yè)正文部分上： window.screenTop

網(wǎng)頁(yè)正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的寬： window.screen.width

屏幕可用工作區(qū)高度： window.screen.availHeight

屏幕可用工作區(qū)寬度： window.screen.availWidth

4. History 對(duì)象包含用戶（在瀏覽器窗口中）訪問(wèn)過(guò)的 URL。

5. Location 對(duì)象包含有關(guān)當(dāng)前 URL 的信息。

講解DOM

一、基本概念

HTML DOM 定義了訪問(wèn)和操作HTML文檔的標(biāo)準(zhǔn)方法。

HTML DOM 把 HTML 文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。

DOM 被分為不同的部分：

1.Core DOM

定義了一套標(biāo)準(zhǔn)的針對(duì)任何結(jié)構(gòu)化文檔的對(duì)象

2.XML DOM

定義了一套標(biāo)準(zhǔn)的針對(duì) XML 文檔的對(duì)象

3.HTML DOM

定義了一套標(biāo)準(zhǔn)的針對(duì) HTML 文檔的對(duì)象。

節(jié)點(diǎn)：根據(jù) DOM，HTML 文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)。

DOM 是這樣規(guī)定的：

>整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)

>每個(gè) HTML 標(biāo)簽是一個(gè)元素節(jié)點(diǎn)

>包含在 HTML 元素中的文本是文本節(jié)點(diǎn)

>每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)

>注釋屬于注釋節(jié)點(diǎn)

節(jié)點(diǎn)彼此間都存在關(guān)系。

>除文檔節(jié)點(diǎn)之外的每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)。

>大部分元素節(jié)點(diǎn)都有子節(jié)點(diǎn)。

>當(dāng)節(jié)點(diǎn)分享同一個(gè)父節(jié)點(diǎn)時(shí)，它們就是同輩（同級(jí)節(jié)點(diǎn)）。

>節(jié)點(diǎn)也可以擁有后代，后代指某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)，或者這些子節(jié)點(diǎn)的子節(jié)點(diǎn)

>節(jié)點(diǎn)也可以擁有先輩。先輩是某個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)，或者父節(jié)點(diǎn)的父節(jié)點(diǎn)

查找并訪問(wèn)節(jié)點(diǎn)

你可通過(guò)若干種方法來(lái)查找您希望操作的元素：

>通過(guò)使用 getElementById() 和 getElementsByTagName() 方法

>通過(guò)使用一個(gè)元素節(jié)點(diǎn)的 parentNode、firstChild 以及 lastChild childNodes屬性

節(jié)點(diǎn)信息

每個(gè)節(jié)點(diǎn)都擁有包含著關(guān)于節(jié)點(diǎn)某些信息的屬性。這些屬性是：

nodeName（節(jié)點(diǎn)名稱）

nodeValue（節(jié)點(diǎn)值）

nodeType（節(jié)點(diǎn)類(lèi)型）

nodeName 屬性含有某個(gè)節(jié)點(diǎn)的名稱。

元素節(jié)點(diǎn)的 nodeName 是標(biāo)簽名稱

屬性節(jié)點(diǎn)的 nodeName 是屬性名稱

文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text

文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document

二、HTML DOM 對(duì)象參考

Document: 代表整個(gè) HTML 文檔，可被用來(lái)訪問(wèn)頁(yè)面中的所有元素

常用集合屬性：forms

Anchor : 代表 <a> 元素

Area : 代表圖像映射中的 <area> 元素

Base : 代表 <base> 元素

Body : 代表 <body> 元素

Button : 代表 <button> 元素

Event : 代表某個(gè)事件的狀態(tài)

Form : 代表 <form> 元素

Frame : 代表 <frame> 元素

Frameset: 代表 <frameset> 元素

Iframe : 代表 <iframe> 元素

Image : 代表 <img> 元素

Input button : 代表 HTML 表單中的一個(gè)按鈕

Input checkbox : 代表 HTML 表單中的復(fù)選框

Input file : 代表 HTML 表單中的文件上傳

Input hidden : 代表 HTML 表單中的隱藏域

Input password : 代表 HTML 表單中的密碼域

Input radio : 代表 HTML 表單中的單選按鈕

Input reset : 代表 HTML 表單中的重置按鈕

Input submit : 代表 HTML 表單中的確認(rèn)按鈕

Input text : 代表 HTML 表單中的文本輸入域（文本框）

Link : 代表 <link> 元素

Meta : 代表 <meta> 元素

Object : 代表 <Object> 元素

Option : 代表 <option> 元素

Select : 代表 HTML 表單中的選擇列表

Style : 代表單獨(dú)的樣式聲明

Table : 代表 <table> 元素

TableData : 代表 <td> 元素

TableRow : 代表 <tr> 元素

Textarea : 代表 <textarea> 元素

AJAX

var xmlhttp;

1. 創(chuàng)建請(qǐng)求對(duì)象

if(window.XMLHttpRequest){

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}else{

// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

2. 設(shè)置回調(diào)函數(shù)（監(jiān)聽(tīng)）

xmlhttp.onreadystatechange=函數(shù)名；

或

xmlhttp.onreadystatechange=function(){

函數(shù)體。。。

}

3. 初始化：

xmlhttp.open("GET",url,true);

4. 發(fā)送：

xmlhttp.send();

其中：xmlhttp請(qǐng)求對(duì)象：

**屬性：

*readyState //請(qǐng)求狀態(tài)：0,1,2,3,4

*responseText//響應(yīng)內(nèi)容

responseXML //xml響應(yīng)對(duì)象

*status //瀏覽器響應(yīng)狀態(tài)：200正常， 404 請(qǐng)求地址不存在 ,,

statusText //狀態(tài)內(nèi)容

*onreadystatechange //回調(diào)函數(shù)屬性

方法：

abort() //取消當(dāng)前響應(yīng)，關(guān)閉連接并且結(jié)束任何未決的網(wǎng)絡(luò)活動(dòng)。

getAllResponseHeaders() //把 HTTP 響應(yīng)頭部作為未解析的字符串返回。

getResponseHeader() //返回指定的 HTTP 響應(yīng)頭部的值

*open() //初始化 HTTP 請(qǐng)求參數(shù)

*send() //發(fā)送 HTTP 請(qǐng)求，使用傳遞給 open() 方法的參數(shù)

*setRequestHeader() //向一個(gè)打開(kāi)但未發(fā)送的請(qǐng)求設(shè)置或添加一個(gè) HTTP 請(qǐng)求。

自定義Ajax實(shí)例使用

jQuery的基本語(yǔ)法

對(duì)象的訪問(wèn)

each()

size()

length

selector

context

get()

index()

jQuery 屬性操作

屬性

attr

removeAttr

prop

removeProp

CSS

addClass

removeClass

toggleClass

HTML代碼/文本/值

html()

text()

val()

基礎(chǔ)知識(shí)

JQuery簡(jiǎn)介

JQuery 安裝

JQuery語(yǔ)法

jQuery CSS 操作

css:css()

位置

offset()

position()

scrollTop()

scrollLeft()

尺寸

height()

width()

innerHeight()

innerWidth()

outerHeifht()

outerWIdth()

jQuery 選擇器

基本

層級(jí)

偽類(lèi)

內(nèi)容

可見(jiàn)性

屬性

子元素

表單

表單對(duì)象屬性

jQuery 篩選

過(guò)濾

查找

串聯(lián)

jQuery HTML文檔處理

內(nèi)部插入

外部插入

包裹

替換

刪除

復(fù)制

jQuery 事件

頁(yè)面載入

事件處理

事件委派

事件切換

事件

jQuery效果

jQuery 隱藏顯示

jQuery 淡入淡出

jQuery 滑動(dòng)

jQuery 動(dòng)畫(huà)

jQuery停止動(dòng)畫(huà)

jQuery Callback

Jquery chaining

jQuery Ajax

jQuery Ajax簡(jiǎn)介

jQuery load()方法

jQuery get()/post()方法

jQuery 其他

jQuery noConflict()方法

jQuery JSONP

數(shù)組和對(duì)象操作

函數(shù)操作

測(cè)試操作

字符串操作

瀏覽器及特性檢測(cè)

URL

數(shù)據(jù)緩存

隊(duì)列機(jī)制

jQuery 插件

插件使用

jQuery 自定義插件方法

--------------------------------------------------分割符---------------------------------------------------------------------------

可實(shí)現(xiàn)效果

1、刷新改背景

2、獲取和設(shè)置時(shí)間

3、從URL中獲取文件名

4、簡(jiǎn)單的計(jì)算器

5、滾動(dòng)類(lèi)效果

6、自定義菜單

7、下拉菜單

8、手風(fēng)琴菜單

9、彈出層

10、瀑布流布局，滾動(dòng)事件

11、選項(xiàng)卡開(kāi)發(fā)

12、幻燈播放

13、拖拽效果

14、淘寶商品的放大效果

15、登錄注冊(cè)驗(yàn)證

16、首頁(yè)多特效合成

17、后臺(tái)效果制作

18、瀑布流

19、點(diǎn)名器

20、抽獎(jiǎng)

--------------------------------------------------分割符---------------------------------------------------------------------------

第三個(gè)階段：HTML5新特性

主要內(nèi)容：

1、視頻/音頻

2、地理定位

3、Web 存儲(chǔ)

4、應(yīng)用緩存

5、拖放

6、文件讀取

7、Web Workers

8、畫(huà)布 SVG

9、CSS預(yù)處理

10、BootStrap 響應(yīng)式框架

--------------------------------------------------分割符---------------------------------------------------------------------------

詳細(xì)內(nèi)容：

HTML5 多媒體

audio/video API操作

地理位置信息獲取

geolocation API操作

地球間兩點(diǎn)距離計(jì)算方法

地圖API調(diào)用

HTML5離線緩存

cache manifest規(guī)范及格式

HTML5本地存儲(chǔ)

localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)

sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)

拖放（Drag 和 drop）

FileReader

瀏覽器多線程

畫(huà)布 SVG 動(dòng)畫(huà)實(shí)現(xiàn)

SASS使用

SASS的基本語(yǔ)法

Bootstrap配置

使用Bootstrap布局頁(yè)面

Bootstrap全局樣式

柵格系統(tǒng)原理

Bootstrap各種常用組件

Bootstrap常用插件應(yīng)用

--------------------------------------------------分割符---------------------------------------------------------------------------

可實(shí)現(xiàn)效果：

制作屬于自己的音/視頻播放器

查看經(jīng)緯度

獲取公交路線

顯示路線導(dǎo)航

離線應(yīng)用

多線程優(yōu)化用戶體驗(yàn)

拖放歌曲列表

圖片拖放顯示

拖放照片墻

繪畫(huà)五角星

繪制時(shí)鐘

勻速、變速、圓周、曲線等物理運(yùn)動(dòng)

碰撞原理與實(shí)現(xiàn)

九大行星圍繞運(yùn)動(dòng)

鼠標(biāo)交互特效

使用SASS制作動(dòng)態(tài)CSS程序

使用UI框架實(shí)現(xiàn)響應(yīng)式布局

--------------------------------------------------分割符---------------------------------------------------------------------------

第四階段：MEAN(MongoDB+Express+Angular.js+Node.js)全棧框架開(kāi)發(fā)

主要內(nèi)容：

1、Node.js

2、MongoDB

3、Express

4、AngularJS

5、WEB APP制作

--------------------------------------------------分割符---------------------------------------------------------------------------

詳細(xì)內(nèi)容:

NodeJS與瀏覽器js的區(qū)別

NodeJS基礎(chǔ)

NodeJS安裝

模塊

require

exports

module

NPM

代碼的組織和部署

模塊路徑解析規(guī)則

包（package）

index.js

package.json

文件操作

Buffer（數(shù)據(jù)塊）

Stream（數(shù)據(jù)流）

File System（文件系統(tǒng)）

Path（路徑）

網(wǎng)絡(luò)操作

HTTP

HTTPS

URL

Query String

Zlib

Net

NPM/Bower依賴管理工具

Zepto.js庫(kù)

NodeJS文件操作

使用NodeJS搭建Web服務(wù)器

使用NodeJS搭建Socket服務(wù)器

數(shù)據(jù)倉(cāng)庫(kù)：

SQL:結(jié)構(gòu)化查詢語(yǔ)言(Structured Query Language)

常見(jiàn)的SQL:MySQL Oracle MariaDB PostgreSQL等SQL

常見(jiàn)的NoSQL：MongoDB Redis Memcache

MongoDB：

C++語(yǔ)言編寫(xiě)，基于分布式文件存儲(chǔ)的開(kāi)源數(shù)據(jù)庫(kù)系統(tǒng)

BSON:類(lèi)JSON對(duì)象（Binary JSON，二進(jìn)制形式的存儲(chǔ)格式）

{"username":"zhangsan","age":20,"sex":"男"}

由"鍵值對(duì)"組成

結(jié)構(gòu)劃分：

數(shù)據(jù)庫(kù)(database) db

集合(collection)

文檔(document)

字段(field)

安裝MongoDB

1.針對(duì)庫(kù)的操作

查看所有庫(kù)

創(chuàng)建并進(jìn)入數(shù)據(jù)庫(kù)

查看當(dāng)前庫(kù)

刪除數(shù)據(jù)庫(kù)

2.集合操作

查看當(dāng)前集合

3.針對(duì)文檔操作

插入數(shù)據(jù)

修改數(shù)據(jù)：

刪除

查詢數(shù)據(jù)

Express框架快速構(gòu)建WEB應(yīng)用程序

Express簡(jiǎn)介+MVC簡(jiǎn)介

Express路由模塊

模板引擎 jade ejs handlebars

nosql數(shù)據(jù)庫(kù)MogoDB管理數(shù)據(jù)

使用mongoose操作MongoDB

Angular JS介紹

Angular JS 表達(dá)式

Angular JS簡(jiǎn)介

Angular JS指令

Angular JS模型

Angular JS Scope(作用域)

Angular JS 控制器

Angular JS 過(guò)濾器

Angular JS Http

Angular JS 表格

Angular JS SQL

Angular JS HTML DOM

Angular JS 事件

Angular JS模塊

Angular JS表單

Angular JS輸入驗(yàn)證

Angular JS Bootstrap應(yīng)用

Angular JS 包含

Angular JS 應(yīng)用

App介紹

WebApp/NativeApp/HybirdApp簡(jiǎn)介

Cordova線下打包App

移動(dòng)應(yīng)用開(kāi)發(fā)平臺(tái)云端打包App

--------------------------------------------------分割符---------------------------------------------------------------------------

可實(shí)現(xiàn)以下效果

使用Nodejs搭建

應(yīng)用程序的服務(wù)端

使用Socket長(zhǎng)連接實(shí)時(shí)網(wǎng)絡(luò)通信技術(shù)制作聊天室

帶有前后臺(tái)的簡(jiǎn)單博客系統(tǒng)

使用AngularJS打造單頁(yè)面購(gòu)物車(chē)應(yīng)用

打包手機(jī)端應(yīng)用

--------------------------------------------------分割符---------------------------------------------------------------------------

特級(jí)課：微信開(kāi)發(fā)

主要內(nèi)容：微信開(kāi)發(fā)

1、微信接口開(kāi)發(fā)

2、微信應(yīng)用開(kāi)發(fā)

3、微信UI框架

4、原型設(shè)計(jì)

5、面試題講解

--------------------------------------------------分割符---------------------------------------------------------------------------

詳細(xì)內(nèi)容

微信JSSDK使用

分享接口

圖像接口

音頻接口

智能接口

設(shè)備信息

地理位置

界面操作

WEUI框架

原型設(shè)計(jì)

用戶體驗(yàn)設(shè)計(jì)

面試題

--------------------------------------------------分割符---------------------------------------------------------------------------

可實(shí)現(xiàn)但不限于以下效果

微信測(cè)智商

測(cè)測(cè)上輩子是誰(shuí)

測(cè)運(yùn)勢(shì)

留言板

照片分享發(fā)送

語(yǔ)音識(shí)別

位置顯示

WEUI框架制作微信原生樣式界面

小編已盡力排版，如小伙伴們覺(jué)得依然較亂，請(qǐng)留言

TML 代碼約定

很多 Web 開(kāi)發(fā)人員對(duì) HTML 的代碼規(guī)范知之甚少。

在2000年至2010年，許多Web開(kāi)發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。

使用 XHTML 開(kāi)發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫(xiě)規(guī)范。

而針對(duì)于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。

使用正確的文檔類(lèi)型

文檔類(lèi)型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標(biāo)簽一樣使用小寫(xiě)，可以使用以下代碼：

<!doctype html>

使用小寫(xiě)元素名

HTML5 元素名可以使用大寫(xiě)和小寫(xiě)字母。

推薦使用小寫(xiě)字母：

混合了大小寫(xiě)的風(fēng)格是非常糟糕的。
開(kāi)發(fā)人員通常使用小寫(xiě) (類(lèi)似 XHTML)。
小寫(xiě)風(fēng)格看起來(lái)更加清爽。
小寫(xiě)字母容易編寫(xiě)。

不推薦:

</SECTION>

非常糟糕:

</SECTION>

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

經(jīng)過(guò)漫長(zhǎng)的等待，HTML5標(biāo)準(zhǔn)終于敲定了

您的項(xiàng)目需求