TML

1. 基本概念
   

• HTML 是網(wǎng)頁(yè)內(nèi)容的載體。內(nèi)容就是網(wǎng)頁(yè)制作者放在頁(yè)面上想要讓用戶(hù)瀏覽的信息，可以包含文字、圖片、視頻等。

• CSS 樣式是表現(xiàn)。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等，所有這些用來(lái)改變內(nèi)容外觀的東西稱(chēng)之為表現(xiàn)。

• JavaScript 是用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)上的特效效果。如：鼠標(biāo)滑過(guò)彈出下拉菜單，或鼠標(biāo)滑過(guò)表格的背景顏色改變，還有焦點(diǎn)新聞（新聞圖片）的輪換。有動(dòng)畫(huà)的，有交互的一般都是用 JavaScript 來(lái)實(shí)現(xiàn)的。

2.常用標(biāo)簽

• 強(qiáng)調(diào)語(yǔ)氣：<em>是斜體，<strong>是加粗

• 引用：<q>短文本引用，<blockquote>長(zhǎng)文本引用

• 換行 <br />

• 水平橫線(xiàn) <hr />

• 空格 &nbsp;

• 表格 <table><tbody>

• 加上后表格內(nèi)容全部下載完才會(huì)顯示

• 行 <tr>

• 列 <td>

• 表格表頭 <th>

• 標(biāo)題 <caption>

• 超鏈 <a>

• 例子：<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過(guò)顯示的文本">鏈接顯示的文本</a>

• 新標(biāo)簽打開(kāi)：target="_blank"

• 圖片 <img>，圖像可以是 GIF，PNG，JPEG 格式的圖像文件

• 例子：<img src="圖片地址" alt="下載失敗時(shí)的替換文本" title="提示文本">

• 表單 <form>

• 文本域 <textarea>

• 例子 <textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>

• cols 多行輸入域的列數(shù)；rows 多行輸入域的行數(shù)。這兩個(gè)屬性可用 CSS 樣式的 width 和 height 來(lái)代替：col 用 width、row 用 height 來(lái)代替

• 輸入框 <input type="text/password" name="名稱(chēng)" value="文本" />

• 當(dāng) type=”text” 時(shí)，輸入框?yàn)槲谋据斎肟?/p>

• 當(dāng) type=”password” 時(shí), 輸入框?yàn)槊艽a輸入框

• 單/復(fù)選框 <input type="radio/checkbox" value="值" name="名稱(chēng)" checked="checked"/>

• 當(dāng) type=”radio” 時(shí)，控件為單選框，同一組單選框 name 命名要一致

• 當(dāng) type=”checkbox” 時(shí)，控件為復(fù)選框

• 提交按鈕 <input type="submit" value="提交">

• 重置按鈕 <input type="reset" value="重置">

• 下拉列表框 ` `

• value <option value="提交值">選項(xiàng)</option>

• 選中 selected="selected"

• 多選 multiple="multiple"

• 標(biāo)簽 <label for="控件id名稱(chēng)">，標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性 值一定要相同

CSS

基本知識(shí)

CSS 樣式由選擇符和聲明組成，而聲明又由屬性和值組成。

• 選擇符：又稱(chēng)選擇器，指明網(wǎng)頁(yè)中要應(yīng)用樣式規(guī)則的元素。

• 聲明：在英文大括號(hào){}中的的就是聲明，屬性和值之間用英文冒號(hào){}分隔。當(dāng)有多條聲明時(shí)，中間可以英文分號(hào);分隔。

從CSS 樣式代碼插入的形式來(lái)看基本可以分為以下3種：內(nèi)聯(lián)式、嵌入式和外部式三種。優(yōu)先級(jí)遵循就近原則，一般來(lái)說(shuō)，內(nèi)聯(lián)式 > 嵌入式 > 外部式。

• 內(nèi)聯(lián)式

例子 <p style="color:red;font-size:12px">這里文字是紅色。</p>

• 嵌入式

• 外部式

例子：<link href="base.css" rel="stylesheet" type="text/css" />

CSS 選擇器

常見(jiàn)的類(lèi)選擇器類(lèi)型有如下幾種：

• 標(biāo)簽選擇器，.標(biāo)簽選擇器名稱(chēng){css樣式代碼;}

• 類(lèi)選擇器，.類(lèi)選器名稱(chēng){css樣式代碼;}

• ID 選擇器，＃類(lèi)選器名稱(chēng){css樣式代碼;}

• 子選擇器，即大于符號(hào)(>),用于選擇指定標(biāo)簽元素的第一代子元素

• 包含選擇器，即加入空格 ,用于選擇指定標(biāo)簽元素下的后輩元素

• 通用選擇器，匹配html中所有標(biāo)簽元素，* {css樣式代碼;}類(lèi)選擇器和ID選擇器都可以應(yīng)用于任何元素，但 ID 選擇器只能在文檔中使用一次，可以使用類(lèi)選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式，ID 選擇器是不可以的。

子選擇器和包含選擇器區(qū)別：>作用于元素的第一代后代，空格作用于元素的所有后代。

另外還有兩種選擇符：

• 偽類(lèi)選擇符，允許給 HTML 不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式。常用的有 a:hover{color:red;}

• 分組選擇符，為 HTML 中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式時(shí)，可以使用分組選擇符,

。例如h1,span{color:red;}

CSS 的繼承、層疊和特殊性

• CSS 的某些樣式是具有繼承性的，繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個(gè)特定 HTML 標(biāo)簽元素，而且應(yīng)用于其后代。

• 特殊性：不同選擇器具有不同權(quán)值，標(biāo)簽的權(quán)值為 1，類(lèi)選擇符的權(quán)值為 10，ID選擇符的權(quán)值最高為 100。

• 層疊 就是在 HTML 文件中對(duì)于同一個(gè)元素可以有多個(gè) CSS 樣式存在，當(dāng)有相同權(quán)重的樣式存在時(shí)，會(huì)根據(jù)這些 CSS 樣式的前后順序來(lái)決定，處于最后面的 CSS 樣式會(huì)被應(yīng)用。

CSS 格式化排版

文字排版

• 字體，body{font-family:"Microsoft Yahei";}

• 字號(hào)、顏色，body{font-size:12px;color:#666}

• 粗體，body{font-weight:bold;}

• 斜體，body{font-style:italic;}

• 下劃線(xiàn)，body{font-style:italic;}

• 刪除線(xiàn)，body{text-decoration:line-through;}

段落排版

• 縮進(jìn)，p{text-indent:2em;}

• 行間距（行高），p{line-height:1.5em;}

• 中文字間距、字母間距，letter-spacing:50px;和word-spacing:50px;

• 對(duì)齊，div{text-align:center;}

CSS 盒模型

元素分類(lèi)

在 CSS 中，HTML 中的標(biāo)簽元素大體被分為三種不同的類(lèi)型：塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素。

• 常用的塊狀元素有：

塊級(jí)元素特點(diǎn)：

1. 每個(gè)塊級(jí)元素都從新的一行開(kāi)始，并且其后的元素也另起一行。

2. 元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。

3. 元素寬度在不設(shè)置的情況下，是它本身父容器的 100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度。

設(shè)置 display:block就是將元素顯示為塊級(jí)元素，從而使元素具有塊狀元素特點(diǎn)。

注：img 標(biāo)簽與 div 層之間會(huì)有空隙的解決方法是：使用 display:block 就可以消除間隙。

• 常用的內(nèi)聯(lián)元素有：

內(nèi)聯(lián)元素特點(diǎn)：

1. 和其他元素都在一行上；

2. 元素的高度、寬度及頂部和底部邊距不可設(shè)置；

3. 元素的寬度就是它包含的文字或圖片的寬度，不可改變。

塊狀元素也可以通過(guò)代碼 display:inline將元素設(shè)置為內(nèi)聯(lián)元素。

• 常用的內(nèi)聯(lián)塊狀元素有：

inline-block 元素特點(diǎn)：

1. 和其他元素都在一行上；

2. 元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。

內(nèi)聯(lián)塊狀元素（inline-block）就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)，代碼 display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。

盒模型

• 邊框

盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線(xiàn)，這條線(xiàn)你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個(gè)屬性)。

單獨(dú)設(shè)置下邊框的例子 div{border-bottom:1px solid red;}

• 寬度和高度

CSS 內(nèi)定義的寬（width）和高（height），指的是 填充以里的內(nèi)容范圍。一個(gè)元素實(shí)際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。

W3C 的標(biāo)準(zhǔn) Box Model:

所以有時(shí)會(huì)設(shè)置 box-sizing: border-box;來(lái)避免計(jì)算內(nèi)部元素大小

• 填充(padding)

元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱(chēng)之為“填充”。填充也可分為上、右、下、左(順時(shí)針)。

例子：

• 邊界(margin)

元素與其它元素之間的距離可以使用邊界（margin）來(lái)設(shè)置，順序和填充一樣是上，右，下，左。padding 在邊框里，margin 在邊框外。

CSS 布局模型

CSS 包含 3 種基本的布局模型，用英文概括為：Flow、Layer 和 Float。 在網(wǎng)頁(yè)中，元素有三種布局模型：

1. 流動(dòng)模型（Flow）

2. 浮動(dòng)模型 (Float)

3. 層模型（Layer）

流動(dòng)模型

流動(dòng)模型，流動(dòng)（Flow）是默認(rèn)的網(wǎng)頁(yè)布局模式。

流動(dòng)布局模型具有2個(gè)比較典型的特征：

1. 塊狀元素 都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為 100%。實(shí)際上，塊狀元素都會(huì)以行的形式占據(jù)位置。

2. 在流動(dòng)模型下，內(nèi)聯(lián)元素 都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。

浮動(dòng)模型

任何元素在默認(rèn)情況下是不能浮動(dòng)的，但可以用 CSS 定義為浮動(dòng)。例子：#div1{float:left;}

層模型

CSS 定義了一組定位（positioning）屬性來(lái)支持層布局模型。

層模型有三種形式：

1. 絕對(duì)定位(position: absolute)

2. 相對(duì)定位(position: relative)

3. 固定定位(position: fixed)

• 絕對(duì)定位(position: absolute)

如果想為元素設(shè)置層模型中的絕對(duì)定位，需要設(shè)置 position:absolute(表示絕對(duì)定位)，這條語(yǔ)句的作用將元素從文檔流中拖出來(lái)，然后使用 left、right、top、bottom 屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊，則相對(duì)于 body 元素，即相對(duì)于瀏覽器窗口。

• 相對(duì)定位(position: relative)

如果想為元素設(shè)置層模型中的相對(duì)定位，需要設(shè)置 position:relative（表示相對(duì)定位），它通過(guò) left、right、top、bottom 屬性確定元素在正常文檔流中的偏移位置。相對(duì)定位完成的過(guò)程是首先按 static(float) 方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來(lái))，然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)。

簡(jiǎn)單來(lái)說(shuō)，就是相對(duì)元素原來(lái)的位置進(jìn)行移動(dòng)，元素本身所占的位置會(huì)保留。

• 固定定位(position: fixed)

設(shè)置 position:fixed;。fixed：表示固定定位，與 absolute 定位類(lèi)型類(lèi)似，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁(yè)窗口）本身。由于視圖本身是固定的，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響，這與 background-attachment:fixed; 屬性功能相同。

Relative 與 Absolute 組合使用,必須遵守下面規(guī)范：

1. 參照定位的元素必須是相對(duì)定位元素的前輩元素

2. 參照定位的元素必須加入 position:relative;

3. 定位元素加入 position:absolute，便可以使用 top、bottom、left、right 來(lái)進(jìn)行偏移定位了

例子(HTML 和 CSS 代碼分別為)：

顏色和長(zhǎng)度

設(shè)置顏色的方法也有很多種：

• 英文命令顏色，p{color:red;}

• RGB顏色，p{color:rgb(133,45,200);} 和 p{color:rgb(20%,33%,25%);}

• 十六進(jìn)制顏色， 這種顏色設(shè)置方法是現(xiàn)在比較普遍使用的方法，其原理其實(shí)也是 RGB 設(shè)置，但是其每一項(xiàng)的值由 0-255 變成了十六進(jìn)制 00-ff。p{color:#00ffff;}(當(dāng)你設(shè)置的顏色是 16 進(jìn)制的色彩值時(shí)，如果每?jī)晌坏闹迪嗤梢钥s寫(xiě)一半，#0ff)RGB 配色表參考 RGB顏色對(duì)照表 - 在線(xiàn)工具 - 開(kāi)源中國(guó) 或者 RGB 配色表長(zhǎng)度單位總結(jié)一下，目前比較常用到px（像素）、em、% 百分比，要注意其實(shí)這三種單位都是相對(duì)單位。

• 像素

• em，就是本元素給定字體的 font-size 值

• % 百分比

設(shè)置小技巧

水平居中設(shè)置

• 行內(nèi)元素。如果被設(shè)置元素為文本、圖片等行內(nèi)元素時(shí)，水平居中是通過(guò)給父元素設(shè)置 text-align:center來(lái)實(shí)現(xiàn)的。

• 定寬塊狀元素(塊狀元素的寬度 width 為固定值)。滿(mǎn)足定寬和塊狀兩個(gè)條件的元素是可以通過(guò)設(shè)置“左右 margin”值為 auto 來(lái)實(shí)現(xiàn)居中的。

• 不定寬塊狀元素。

• 加入 table 標(biāo)簽(包括 <tbody>、<tr>、<td>)，為這個(gè) table 設(shè)置“左右 margin 居中”

• 設(shè)置 display: inline方法：與第一種類(lèi)似，顯示類(lèi)型設(shè)為 行內(nèi)元素，然后使用 text-align:center來(lái)實(shí)現(xiàn)居中效果，進(jìn)行不定寬元素的屬性設(shè)置。

• 給父元素設(shè)置 float 和 position:relative; left:50%，子元素設(shè)置 position:relative 和left: -50% 來(lái)實(shí)現(xiàn)水平居中。

垂直居中設(shè)置

• 父元素高度確定的單行文本。通過(guò)設(shè)置父元素的 height 和 line-height 高度一致來(lái)實(shí)現(xiàn)的。(height: 該元素的高度；line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的 基線(xiàn)間的距離 )。

• 父元素高度確定的多行文本。使用插入 table (包括 tbody、tr、td)標(biāo)簽，同時(shí)設(shè)置 vertical-align：middle。

另外，為元素設(shè)置以下兩個(gè)屬性之一會(huì)隱形改變 display 類(lèi)型，元素的display顯示類(lèi)型就會(huì)自動(dòng)變?yōu)橐?span>display:inline-block（塊狀元素）的方式顯示，當(dāng)然就可以設(shè)置元素的 width 和 height 了，且默認(rèn)寬度不占滿(mǎn)父元素。

position: absolute

float: left 或 float:right

二天，重新認(rèn)識(shí)javascript

JS學(xué)習(xí)小結(jié)：

學(xué)習(xí)JavaScript腳本語(yǔ)言，首先我們要知道JavaScript是什么？

Javascript是什么，簡(jiǎn)稱(chēng)Js，Js是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(Event Driven)并具有安全性能的腳本語(yǔ)言，使用它的目的是與HTML超文本標(biāo)記語(yǔ)言、Java 腳本語(yǔ)言（Java小程序）一起實(shí)現(xiàn)在一個(gè)Web頁(yè)面中鏈接多個(gè)對(duì)象，與Web客戶(hù)交互作用。從而可以開(kāi)發(fā)客戶(hù)端的應(yīng)用程序等。

Js交互圖

當(dāng)前什么越來(lái)越強(qiáng)調(diào)溝通，而Js是最接近前后端的語(yǔ)言，越來(lái)越多的前后端框架的支持，使他的前途很明朗，作為一種解釋型語(yǔ)言，Js強(qiáng)調(diào)實(shí)時(shí)，在線(xiàn)。

先看下Js的特性：腳本編寫(xiě)語(yǔ)言，基于對(duì)象的語(yǔ)言，簡(jiǎn)單性，安全性，動(dòng)態(tài)性和跨平臺(tái)特性。

Js的命名規(guī)范：有兩種常用的命名規(guī)則

匈牙利命名法的原則：變量名=屬性+類(lèi)型+對(duì)象描述。他的關(guān)鍵是：以一個(gè)或多個(gè)小寫(xiě)字母作為前綴，前綴之后是一個(gè)或多個(gè)首字母大寫(xiě)的單詞組合，該單詞指明變量的用途。

駝峰命名法的原則：第一個(gè)單詞以小寫(xiě)字母開(kāi)始，之后每一個(gè)單詞的首字母大寫(xiě)。例如：myFirstName、myLastName，這樣的變量名看上去就像駝峰一樣此起彼伏，因此得名。駝峰法的關(guān)鍵是：除第一個(gè)單詞外，其他單詞首字母大小，混合使用大小寫(xiě)字母來(lái)構(gòu)成變量名和函數(shù)名，還可以使用下劃線(xiàn)來(lái)形成邏輯斷點(diǎn)，這樣更能增強(qiáng)代碼的可讀性。

JS的注釋規(guī)范：

JS中單行注釋用“ // 注釋內(nèi)容” 標(biāo)識(shí)，多行注釋使用“ /* 注釋內(nèi)容 */ “標(biāo)識(shí)。注釋的作用是提高代碼的可讀性，不僅自己以后用著方便，也有助于別人閱讀和理解你所編寫(xiě)的JS代碼，注釋中的內(nèi)容不會(huì)在網(wǎng)頁(yè)中顯示。為了方便閱讀，注釋一般放在需要解釋的語(yǔ)句結(jié)尾處或者周?chē)?/p>

在JavaScript中四種基本的數(shù)據(jù)類(lèi)型：數(shù)值（整數(shù)和實(shí)數(shù)）、字符串型（用“”號(hào)或‘’括起來(lái)的字符或數(shù)值）、布爾型（使True或False表示）和空值。在JavaScript的基本類(lèi)型中的數(shù)據(jù)可以是常量，也可以變量。由于JavaScript采用弱類(lèi)型的形式，因而一個(gè)數(shù)據(jù)的變量或常量不必首先作聲明，而是在使用或賦值時(shí)確定其數(shù)據(jù)的類(lèi)型的。當(dāng)然也可以先聲明該數(shù)據(jù)的類(lèi)型，它是通過(guò)在賦值時(shí)自動(dòng)說(shuō)明其數(shù)據(jù)類(lèi)型的。

Js還有一種拓展類(lèi)型，那就是：Undefined 數(shù)據(jù)類(lèi)型

一個(gè)為 undefined 的值就是指在變量被創(chuàng)建后，但未給該變量賦值以前所具有的值。

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

下面是一下常用語(yǔ)法：

1.對(duì)象定義方式

空對(duì)象：沒(méi)有任何屬性和方法

var obj={};

定義對(duì)象的屬性：

obj.xx="123";

定義對(duì)象的方法：

obj.function=function(){};

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

2.函數(shù)的定義方式：

JavaScript函數(shù)定義

Function 函數(shù)名 （參數(shù),變?cè)﹞

函數(shù)體;.

Return 表達(dá)式;

}

說(shuō)明：

當(dāng)調(diào)用函數(shù)時(shí),所用變量或字面量均可作為變?cè)獋鬟f。

函數(shù)由關(guān)鍵字Function定義。

函數(shù)名：定義自己函數(shù)的名字。

參數(shù)表，是傳遞給函數(shù)使用或操作的值，其值可以是常量 ，變量或其它表達(dá)式。

通過(guò)指定函數(shù)名（實(shí)參）來(lái)調(diào)用一個(gè)函數(shù)。

必須使用Return將值返回。

函數(shù)名對(duì)大小寫(xiě)是敏感的。

函數(shù)中的形式參數(shù)：

在函數(shù)的定義中，我們看到函數(shù)名后有參數(shù)表，這些參數(shù)變量可能是一個(gè)或幾個(gè)。那么怎樣才能確定參數(shù)變量的個(gè)數(shù)呢？在JavaScript中可通過(guò)arguments .Length來(lái)檢查參數(shù)的個(gè)數(shù)。

例：

Function function_Name(exp1,exp2,exp3,exp4)

Number=function _Name . arguments .length;

if (Number>1）

document.wrile(exp2);

if (Number>2)

document.write(exp3);

if(Number>3)

document.write(exp4);

...

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

3 對(duì)象的引用傳遞

var person={name:'anker',age:100};

var x=person;

x.age=19;

console.log(x.age);//19

console.log(person.age);//19

說(shuō)明js中對(duì)象的賦值也是采用引用的方式，同時(shí)指向同一個(gè)對(duì)象。

function changebj(obj) {obj.age=10};

changebj(person);

console.log(person.age);

10//打印結(jié)果也是10,說(shuō)明函數(shù)傳遞的也是對(duì)象的引用。修改的是同一個(gè)對(duì)象。

person.sex='男';//若該屬性不存在則添加，若存在則覆蓋。

訪(fǎng)問(wèn)對(duì)象的方式：

obj.name

obj["name"]或者obj['name']//必須采用雙引號(hào)或者單引號(hào)括起來(lái)

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

4.匿名函數(shù)

（function(){//代碼 })(); //可立即執(zhí)行的匿名函數(shù)

解釋?zhuān)海鼑瘮?shù)（function(){})的第一對(duì)括號(hào)向腳本返回未命名的函數(shù)，隨后一對(duì)空括號(hào)立即執(zhí)行返回的未命名函數(shù)，括號(hào)內(nèi)為匿名函數(shù)的參數(shù)。

例子：(function(arg){ alert(arg+100); })(20);

這個(gè)例子返回120。

匿名函數(shù)，就是沒(méi)有引用直接加上()進(jìn)行執(zhí)行的函數(shù)。

var addFunc=function(a,b){

cosole.log(a+b);

};

--調(diào)用方式

addFunc(1,2);

--匿名函數(shù)

(function(a,b){console.log(a+b)})(1,2);

上面兩個(gè)函數(shù)的產(chǎn)生的結(jié)果是一樣的.只不過(guò)addFunc為函數(shù)對(duì)象的引用,而匿名函數(shù)不存在引用.

--來(lái)看個(gè)復(fù)雜的利用匿名函數(shù)的例子

var add=(function(){

var sum=0 ;

return function(){

for(var i=0;l=arguments.length,i<l;i++){

sum+=arguments[i];

}

return sum;

};

})(); --加上括號(hào)為匿名函數(shù)的寫(xiě)法,可以理解為直接執(zhí)行了此函數(shù),函數(shù)的執(zhí)行結(jié)果返回

add(1,2,3,4);

add(2);

--等價(jià)于

var func1=function(){

var sum=0 ;

return function(){

for(var i=0;l=arguments.length,i<l;i++){

sum+=arguments[i];

}

return sum;

};

};

var add=func1();

add(1,2,3,4);

add(2);

//現(xiàn)在有一個(gè)場(chǎng)景，需要設(shè)計(jì)一個(gè)函數(shù)，前面每次調(diào)用，不會(huì)真正去計(jì)算，而是把參數(shù)保存下來(lái)，等到需要計(jì)算的再一起計(jì)算

var currying=function(fn){

var args=[] ;

return function(){

if(arguments.length===0){

return fn.apply(this,args);

}else {

Array.prototype.push.apply(args,arguments);

return arguments.callee;

}

};

}

var add=(function(){

var sum=0 ;

return function(){

for(var i=0;l=arguments.length,i<l;i++){

sum+=arguments[i];

}

return sum;

};

})();

var add=currying(add);

add(1);

add(2);

add(3);

add();

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

5.閉包

可以理解成一個(gè)函數(shù)內(nèi)的內(nèi)部函數(shù)，它被創(chuàng)建在一個(gè)函數(shù)內(nèi)部，引用這其外部函數(shù)的變量值。

var a=function(){

var x=1;

return function(y){

console.log(x+=y);//外部函數(shù)的x值就被包裹在引用對(duì)象中

}

}

var b=a();//實(shí)際上是返回function(y){...}的引用

b();//執(zhí)行上面的引用，此時(shí)的x值變成了private的屬性

閉包的兩個(gè)作用：

1.可以讀取函數(shù)體所在外部函數(shù)的局部變量

2.就是讓這些變量的值始終保持在內(nèi)存中

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

6.constructor

constructor 屬性返回對(duì)創(chuàng)建此對(duì)象的數(shù)組函數(shù)的引用。

var test=new Array();

if (test.constructor==Array)//判斷test的構(gòu)造函數(shù)是否是Array

{

document.write("This is an Array");

}

var createPerson=function(name,sex,age){

this.name=name;

this.sex=sex;

this.age=age;

};

//undefined

var p1=new createPerson('z1',19,'男');

//undefined

p1.constructor

//輸出

function (name,sex,age){

this.name=name;

this.sex=sex;

this.age=age;

}

p1.constructor==createPerson

//輸出：true

createPerson.constructor

//Function() { [native code] } //createPerson構(gòu)造函數(shù)為Function,從一個(gè)側(cè)面說(shuō)明function也是對(duì)象

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

7.js==與===的區(qū)別

一個(gè)等號(hào)是賦值操作，==先轉(zhuǎn)換類(lèi)型再比較，進(jìn)行值的對(duì)比。

而===先判斷類(lèi)型，如果不是同一類(lèi)型直接為false，只有類(lèi)型和值全部都相等，才相等。

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

8.JS中一切皆對(duì)象

JS中基本數(shù)據(jù)類(lèi)型，也存在著對(duì)象封裝，比如下面數(shù)字123的構(gòu)造函數(shù)是Number,test的構(gòu)造函數(shù)是String，包含length的屬性

(123).constructor

//輸出：function Number() { [native code] }

'test'.constructor

//輸出：String() { [native code] }

'test'.length;

//輸出：4

//擴(kuò)展Number的函數(shù)

Number.prototype.toString=function(){

alert('hi,I\'m a number ');

};

(123).toString();

//輸出：hi,I\'m a number

Number.prototype

Number {toString: null, [[PrimitiveValue]]: 0}

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

9.prototype原型

每個(gè)對(duì)象都連接到一個(gè)原型對(duì)象，并且可以從中繼承屬性。所有通過(guò){}或者構(gòu)造函數(shù)創(chuàng)建的對(duì)象都連接到Object{}

對(duì)象通過(guò)(對(duì)象名稱(chēng).__proto__)可以查看原型

或者通過(guò)(對(duì)象名稱(chēng).constructor.prototype)查看原型

var createPerson=function(name,sex,age){

this.name=name;

this.sex=sex;

this.age=age;

};

var p1=new createPerson('z1',19,'男');

p1.constructor

//輸出：

fucntion(name,sex,age){

this.name=name;

this.sex=sex;

this.age=age;

}

p1.constructor.prototype

//輸出：

Object {}

createPerson.prototype

//輸出：

Object {}

p1.constructor.prototype===createPerson.prototype

true

var p2={sex:'男'};

p2.constructor.prototype

//輸出：Object {}

/*

在javascript中，創(chuàng)建一個(gè)新對(duì)象時(shí)，可以選擇某個(gè)對(duì)象作為它的原型，比如

*/

var person={name:'z3',age:18,sex:'男'};

Object.create=function(o){

var F=function(){};

F.prototype=o ;

return new F();

};

var anotherPerson=Object.create(person);

anotherPerson.name;//z3

//對(duì)原型對(duì)象進(jìn)行更新,發(fā)現(xiàn)已創(chuàng)建的對(duì)象值也隨著變化

person.name='z4';

"z4"

anotherPerson.name

//輸出："z4"

//但當(dāng)對(duì)象增加相同的屬性后,原型對(duì)象的屬性變化，不影響對(duì)象的屬性值。因?yàn)閷?duì)象讀取值首先讀取本身對(duì)象的值，后讀取原型的值

anotherPerson.name='z5';

person.name='z6';

//輸出："z6"

anotherPerson.name

//輸出："z5"

delete anotherPerson.name

//輸出：true

anotherPerson.name//輸出對(duì)象本身的屬性值,原型對(duì)象的屬性值不會(huì)被刪除,除非通過(guò)delete 原型對(duì)象.屬性輸出.

//輸出："z6"

delete person.name

//輸出：true

anotherPerson.name

//輸出：undefined

//原型連接什么時(shí)候起作用呢？只有在檢索值的時(shí)候才被用到

//如果嘗試者去獲取對(duì)象的某個(gè)屬性值，但該對(duì)象沒(méi)有此屬性名，那么JAVASCRIPT會(huì)嘗試著從原型對(duì)象中獲取屬性值。

//如果原型對(duì)象也沒(méi)有該屬性值則再?gòu)乃脑驼遥钡皆撨^(guò)程最后達(dá)到終點(diǎn)Object.prototype。Object

//如果想要的屬性完全不存在于原型鏈中，那么結(jié)果就是undefined。

person.age=18;

anotherPerson.age//顯示什么？

//原型關(guān)系是一種動(dòng)態(tài)的關(guān)系。如果添加一個(gè)新的屬性到原型中，該屬性會(huì)立即對(duì)所有基于該原型創(chuàng)建的對(duì)象可見(jiàn)。

anotherPerson.__proto__===person;//true

__proto__顯示對(duì)象的原型鏈

//可以使用hasOwnProperty方法來(lái)判斷對(duì)像是否含有某個(gè)屬性，如果對(duì)象擁有獨(dú)有的屬性，則返回true

//這個(gè)方法不會(huì)去檢查原型鏈

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

10. arguments

arguments 對(duì)象是函數(shù)內(nèi)部的本地變量；arguments 已經(jīng)不再是函數(shù)的屬性了。

你可以在函數(shù)內(nèi)部通過(guò)使用 arguments 對(duì)象來(lái)獲取函數(shù)的所有參數(shù)。這個(gè)對(duì)象為傳遞給函數(shù)的每個(gè)參數(shù)建立一個(gè)條目，

條目的索引號(hào)從 0 開(kāi)始。例如，如果一個(gè)函數(shù)有三個(gè)參數(shù)，你可以通過(guò)以下方式獲取參數(shù)：

arguments[0]

arguments[1]

arguments[2]

參數(shù)也可以被重新賦值:

arguments[1]='new value';

arguments 對(duì)象并不是一個(gè)真正的Array。它類(lèi)似于數(shù)組，但沒(méi)有數(shù)組所特有的屬性和方法，除了 length。

例如，它沒(méi)有 pop 方法。不過(guò)可以將其轉(zhuǎn)換成數(shù)組

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

11.利用JS特性實(shí)現(xiàn)AOP

AOP就是面向切面編程，主要作用是把一些核心業(yè)務(wù)邏輯模塊無(wú)關(guān)的功能抽離出來(lái)，這些跟業(yè)務(wù)邏輯無(wú)關(guān)的功能

通常包括日志統(tǒng)計(jì)，安全控制，異常處理等。把這些功能抽離出來(lái)后，又通過(guò)動(dòng)態(tài)織入的方式滲入到業(yè)務(wù)邏輯模塊中

在JAVA中，可以通過(guò)反射和動(dòng)態(tài)代理機(jī)制來(lái)實(shí)現(xiàn)AOP。但對(duì)于javascript這種動(dòng)態(tài)語(yǔ)言，AOP的實(shí)現(xiàn)更加簡(jiǎn)單

在javascript中實(shí)現(xiàn)AOP，都是指把一個(gè)函數(shù)動(dòng)態(tài)織入到另外一個(gè)函數(shù)中。我們可以通過(guò)擴(kuò)展Function.prototype來(lái)做到這一點(diǎn)

*/

Function.prototype.before=function(beforefn){

var that=this ;

return function(){

beforefn.apply(this,arguments);

return that.apply(this,arguments);

};

};

Function.prototype.after=function(afterfn){

var that=this ;

return function(){

var ret=that.apply(this,arguments);

afterfn.apply(this,arguments);

return ret ;

};

};

var func=function(){

console.log(2);

};

func=func.before(function(){

console.log(1);

}).after(function(){

console.log(3);

});

func();

var func1=document.getElementById;

undefined

func1('nt-contents');

//報(bào)錯(cuò)信息如下, 是由于document.getElementById函數(shù)中的this指向?yàn)閣indows對(duì)象,而windows對(duì)象不存在這些變量。

VM245:1 Uncaught TypeError: Illegal invocation(…)

//寫(xiě)那么復(fù)雜主要是將this的指向還是定位到document上面

var getElementById1=(function(func){

return function(){

return func.apply(document,arguments);

}

})(document.getElementById);

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

12.利用JS特性實(shí)現(xiàn)一些有趣的Function

var getId=document.getElementById1; //返回 這個(gè)對(duì)象 function(){return func.apply(document,arguments);}

var div=getId('ntp-contents');//返回func.apply(document,arguments)的對(duì)象，arguments參數(shù)值div1,func執(zhí)行閉包中的document.getElementById函數(shù)

alert(div.id);

//我們上節(jié)課講到，怎么在一個(gè)內(nèi)部函數(shù)中保持外層的this上下使用了一個(gè)變量that來(lái)保存外,還可以使用以下方法

Function.prototype.bind=function(context){

var self=this ;

return function(){

alert(self);

alert(context);

return self.apply(context,arguments);

}

};

var obj={name : 'steven'};

var func=(function(){

alert(this.name)

}).bind(obj);

var isType=function(type){

return function(obj){

return Object.prototype.toString.call(obj)==='[object '+type+']';

};

};

var isString=isType('String');

isString('hello world');

var isArray=isType('Array');

isArray([2,3]);

13.call、apply的使用

語(yǔ)法

function.call(thisObj,param1,param2,param3...);

function.apply(thisObj,[param1,param2,param3...]);

用法是改變function的作用域，將參數(shù)的上下文作用域修改成thisObj對(duì)象, 也可以說(shuō)this對(duì)象為thisObj.

默認(rèn)的function的作用域是window，this相當(dāng)于window.function