前端筆記(Html+CSS+JS+DOM+網頁特效+jQuery+HTML5+CSS3+canvas 標籤+web開發重難點+面向對象+AJAX)


第1章Html

 

Html:超級文本標記語言(HyperText Markup Language),在瀏覽器上運行的一種標記語言

就是給文本加上含有語義的標籤。

接下來應該學習更多具體語義標籤:

一、結構(固定的結構)

<html>

<head>

<title></title>

</head>

<body></body>

二、Html中的標籤

標籤:用“<>”包起來的內容。

Html標籤:<html></html>

由於現在學習的html頁面還是很簡單的,爲了能夠讓頁面更加的“充實”我們要學習更多的標籤。

h系列的標籤(Header):h1,h2,h3,h4,h5,h6

作用:把頁面上的文字加上標題的語義。

代碼:

h1,h2,h3,h4,h5,h6:將文字放大,加粗.並且逐漸變小。(h1標籤是最大的。)

注意:一個頁面只能有一個h1標籤。

p標籤(Paragraph):段落標籤

作用:給頁面的上一段文字加上段落的說語義

代碼:

<p>這是段落</p>

特點:頁面上的一個段落,單獨佔一行,並且與上下內容之間存在距離。

hr標籤(Horizontal Rule)

作用:在頁面顯示一條橫線。

代碼:

<hr/>

特點:在頁面顯示一條橫線,默認佔整行。

br標籤(break)

作用:換行。

代碼:

<br/>

特點:換行。

b(Bold),u(Underlined),i(Italic),s(Strikethrough),strong,em,del,ins

作用:

b:加粗

u: 下劃線

i:  傾斜

s: 刪除線                                          

建議不要使用,因爲這些標籤沒有語義。

作用:

strong:加粗

ins:下劃線

em:傾斜

del:刪除線

可以使用

img標籤(image):

作用:在頁面顯示一張圖片。

代碼:

<imgsrc=”圖片的路徑” />

   特點:就是顯示圖片.

   屬性:

src

圖片顯示的路徑

alt

如果圖片加載不出來會顯示這個屬性中的文字

title

介紹這張圖片

a標籤(Anchor):錨

a標籤的其它名稱:

超級鏈接,超鏈接,錨鏈接。

作用:可以在一個頁面跳轉到另一個頁面。

代碼

<ahref=”頁面的路徑”></a>

注意:在a標籤之內必須要寫上文字,如果沒有,那麼這個標籤在頁面上找不到。

a標籤的其它用法

1.0可以不跳轉(跳轉到當前頁面)href=”#”

2.0可以跳轉到另外的頁面。

3.0可以在當前頁面進行定位。

A.設置a標籤的href屬性爲“#id名”,

B.在頁面的指定位置加入一個目標標籤(可以是任意標籤)

C.必須給這個標籤設置一個id名:<p id=”mubiao”>這是目標</p>

 4.0在跳轉的頁面進行定位。

 5.0可以進行下載。(強烈不推薦使用

a標籤的屬性

href

a標籤跳轉的目標地址

target

_blank:保留原始頁面,再進行跳轉

_self:在當前頁面進行跳轉

base

爲頁面上所有的a標籤設置跳轉的方式(base標籤一般放在titile標籤下面)

列表

有序列表

有序列表即爲有排列順序的列表,其各個列表項按照一定的順序排列定義,有序列表的基本語法格式如下:

<ol>
    <li>列表項1</li>
    <li>列表項2</li>
    <li>列表項3</li>
......
</ol>

無序列表

無序列表的各個列表項之間沒有順序級別之分,是並列的。其基本語法格式如下:

<ul>
      <li>列表項1</li>
      <li>列表項2</li>
      <li>列表項3</li>
      ......
</ul>

自定義列表

定義列表常用於對術語或名詞進行解釋和描述,定義列表的列表項前沒有任何項目符號。其基本語法如下:

<dl>
    <dt>名詞1</dt>
    <dd>名詞1解釋1</dd>
    <dd>名詞1解釋2</dd>
    ...
    <dt>名詞2</dt>
    <dd>名詞2解釋1</dd>
    <dd>名詞2解釋2</dd>
    ...
</dl>

 

表格

創建表格

在HTML網頁中,要想創建表格,就需要使用表格相關的標籤。創建表格的基本語法格式如下:

<table>
    <tr>
    <td>單元格內的文字</td>
        ...
    </tr>
    ...
</table>

在上面的語法中包含三對HTML標籤,分別爲 <table></table>、<tr></tr>、<td></td>,他們是創建表格的基本標籤,缺一不可,下面對他們進行具體地解釋。

1、<table><</table>:用於定義一個表格。

2、<tr><</tr>:用於定義表格中的一行,必須嵌套在 <table></table>標籤中,在 <table> </table>中包含幾對 <tr> </tr>,就有幾行表格。

3、<td></td>:用於定義表格中的單元格,必須嵌套在< <tr></tr>標籤中,一對 <tr> </tr>中包含幾對< <td> </td>,就表示該行中有多少列(或多少個單元格)。

4、thead:表格頭部

5、tbody:表格主體

6、tfoot:表格底部

7、caption表格標題

表格屬性

 

表單控件

input控件

<input />標籤爲單標籤,type屬性爲其最基本的屬性,其取值有多種,用於指定不同的控件類型。除了type屬性之外,<input />標籤還可以定義很多其他的屬性,其常用屬性如下表所示。

 

label 標籤

label 標籤爲input 元素定義標註(標記)。

作用: 用於綁定一個表單元素, 當點擊label標籤的時候, 被綁定的表單元素就會獲得輸入焦點

如何綁定元素呢?

for 屬性規定 label 與哪個表單元素綁定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea 標籤

如果需要輸入大量的信息,就需要用到<textarea></textarea>標籤。通過textarea控件可以輕鬆地創建多行文本輸入框,其基本語法格式如下:

<textarea cols="每行中的字符數" rows="顯示的行數">
       文本內容
</textarea>

select標籤

使用select控件定義下拉菜單的基本語法格式如下

<select>
        <option>選項1</option>
        <option>選項2</option>
        <option>選項3</option>
       ...
</select>

<select></select>中至少應包含一對<option></option>

在option 中定義selected=" selected "時,當前項即爲默認選中項。

button標籤

<button> 按鈕 </button> 單獨的一個表單控件,就是普通按鈕的意思。只不過它是雙標籤哦!

form表單

在HTML中,form標籤被用於定義表單域,即創建一個表單,以實現用戶信息的收集和傳遞,form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下:

<form action="url地址" method="提交方式" name="表單名稱">
       各種表單控件
</form>

常用屬性:

Action 在表單收集到信息後,需要將信息傳遞給服務器進行處理,action屬性用於指定接收並處理表單數據的服務器程序的url地址。

method 用於設置表單數據的提交方式,其取值爲get或post。

name 用於指定表單的名稱,以區分同一個頁面中的多個表單。

注意: 每個表單都應該有自己表單域。

 

三、當前的主流文檔類型:

文檔類型

分類

備註

HTML

HTML Strict DTD

請求比較嚴格的html類型

HTML Transitional DTD

相對而言比較規範不太嚴禁

Frameset DTD

 

框架級的類型

xHTML

HTML Strict DTD

請求比較嚴格的html類型

HTML Transitional DTD

相對而言比較規範不太嚴禁

Frameset DTD

 

框架級的類型

 

xHtml(html2.0版本(是一種相對html語法更加嚴謹的hmtl)):

注意:將來在使用DOCTYPE的時候建議使用html5的類型。每個頁面都要設置一個doctype,如果不設置,瀏覽器會默認開啓quirks mode(怪異模式)解析(quirks mode(怪異模式)是瀏覽器爲了兼容很早之前針對舊版本瀏覽器設計、並未嚴格遵循 W3C 標準的網頁而產生的一種頁面渲染模式)。

Html標籤

作用所有html中標籤的一個根節點。

Head標籤

作用:用於存放:

title,meta,base,style,script,link

注意:每個head標籤中都必須有一個有title標籤,其它的可選。

Body標籤

作用:用於存放所有的html的結構標籤:

p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,

Title標籤:

作用:讓頁面擁有一個屬於自己的標題。

meta 標籤:

常用用法:

1.     Description:可以描述頁面,可以用來使用百度程序(網絡爬蟲)來收錄關鍵信息,以此提高頁面的排名。

2.     Keywords:關鍵詞,可以用來提高頁。面的關健詞的比重(前升排名的一種方式。)

3.     字符集(編碼格式):

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

Charset(字符集的格式):UTF-8.

注意:字符集(文字在電腦是存儲的字典):

電腦是不能直接存儲文字的,一般情況下電腦存儲的是這個文字在“字典”裏對應的位置。

      gb2313---->gbk;

      國標2313---->國標擴

gbk,utf-8之間的區別:

相同點:都是字符的編碼格式。

區別:

utf-8:收錄是全世界所有的語言中的文字。

gbk:收錄了漢字,片假名。

大小:

utf-8>gbk

性能:

uft-8<gbk

約定:將來我們在整個學習過程中都用utf-8;

utf-8存儲一個漢字佔3個字節,

gbk存儲一個漢字上2個字節

四、標籤的分類

雙標籤:有開始有結束,開始和結束之間是存在內容

<h1></h1>,<p></p>

單標籤:只有一個標籤,自己閉合自己。

<hr/> ,<br />

五、標籤與標籤之間的關係

 嵌套關係:一個標籤包含另外一個標籤,他們之間構造父子關係。

 並列關係:兩個標籤並列,他們構造兄弟關係。

 注意:將來在書寫代碼的時候如果兩個標籤之間的關係是嵌套關係,最好通過代碼直接反映出來(子元素相對於父元素有一個縮進)。如果是並列關係,最好要有對齊。

 

六、標籤的屬性

<img src=”a.jpg” />

屬性爲 HTML 元素提供附加信息,img標籤中的src就是img標籤的一個屬性。

七、路徑問題

            第一種:絕對路徑

帶有盤符的路徑:C:\上課內容\上課視頻\01html第一天\4-源代碼\1.jpg.

  第二種:相對路徑

由頁面是一個文件,圖片 也是一個文件,而現在需要在頁面上輸出圖片,所以需要得到圖片相對於文件的路徑.

 a.如果頁面與圖片在同一目錄下面:

 

<imgsrc=”2.jpg” />

 b.如果頁面在圖片一上級目錄:

 

  <img src=”image/1.jpg” />

 c.如果圖片在頁面的上一級目錄:     


                            <img src=”../2.jpg” />

只要不出意外情況都是用相對路徑:因爲相對路徑的可移植性要強。

第2章CSS

一、字體設置及選擇器

1、font屬性的設置

font-size字體大小

font-size屬性用於設置字號,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。其中,相對長度單位比較常用,推薦使用像素單位px,絕對長度單位使用較少

 

Google和火狐默認字體大小爲:16px;

font-family字體

font-family屬性用於設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等,例如將網頁中所有段落文本的字體設置爲微軟雅黑,可以使用如下CSS樣式代碼:

p{ font-family:"微軟雅黑";}

可以同時指定多個字體,中間以逗號隔開,表示如果瀏覽器不支持第一個字體,則會嘗試下一個,直到找到合適的字體。

font-weight字體粗細

字體加粗除了用 b 和 strong標籤之外,可以使用css 來實現,但是css 是沒有語義的。

font-weight屬性用於定義字體的粗細,其可用屬性值:normal、bold、bolder、lighter、100~900(100的整數倍)。

font-style字體風格

字體傾斜除了用 i 和 em 標籤之外,可以使用css 來實現,但是css 是沒有語義的。

font-style屬性用於定義字體風格,如設置斜體、傾斜或正常字體,其可用屬性值如下:

normal:默認值,瀏覽器會顯示標準的字體樣式。

italic:瀏覽器會顯示斜體的字體樣式。

oblique:瀏覽器會顯示傾斜的字體樣式。

 

2、CSS中註釋寫法

CSS規則是使用     /*  需要註釋的內容  */  進行註釋的,即在需要註釋的內容前使用 “/*” 標記開始註釋,在內容的結尾使用 “*/”結束。

3、顏色的不同寫法

   a、直接寫英文單詞yellow red等等

   b、16進製表示#aabbcc或者#abc

   c、rgb()如rgb(0,0,0)

   d、rgba(0,0,0,0.5)a爲透明度

4、css各類選擇器

標籤選擇器

標籤選擇器寫法

標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

效果:會將所有的這類標籤都加上相同的css屬性

類選擇器

類選擇器的寫法

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

類選擇器最大的優勢是可以爲元素定義單獨或相同的樣式。

將擁有這個類名的所有元素加上css樣式

命名的取值規範只能是:0-9,a-z,A-Z,_,-,不能以數字開頭

id選擇器

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

元素的id值是唯一的,只能對應於文檔中某一個具體的元素。

將擁有這個id名的唯一元素加上css樣式     

 

5、關於text屬性的設置

line-height行間距

line-height屬性用於設置行間距,就是行與行之間的距離,即字符的垂直間距,一般稱爲行高。line-height常用的屬性值單位有三種,分別爲像素px,相對值em和百分比%,實際工作中使用最多的是像素px。

text-align文本內容水平對齊

text-align屬性用於設置文本內容的水平對齊,相當於html中的align對齊屬性。其可用屬性值如下:

left:左對齊(默認值)

right:右對齊

center:居中對齊

text-indent首行文本縮進

text-indent屬性用於設置首行文本的縮進,其屬性值可爲不同單位的數值、em字符寬度的倍數、或相對於瀏覽器窗口寬度的百分比%,允許使用負值, 建議使用em作爲設置單位。

 

二、複合選擇器及僞元素

1、複合選擇器

交集選擇器

選擇器選擇器{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

注意:兩個選擇器之間是沒有空格的。

並集選擇器

選擇器 ,選擇器{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

將兩種類型的元素全部選擇出來。

 

後代選擇器

選擇器 選擇器{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

注意:兩個選擇器之間是要有空格的。

 

子代選擇器

選擇器>選擇器{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

注意:兩個選擇器之間是要有大於號隔開。

2、元素的三種顯示方式

塊轉行內:display:inline;

行內轉塊:display:block;

塊、行內元素轉換爲行內塊: display: inline-block;

 

3、僞類和僞元素的使用

僞類

:link

僞類將應用於未被訪問過的鏈接

:hover

僞類將應用於有鼠標指針懸停於其上的元素。

:active

僞類將應用於被激活的元素,如被點擊的鏈接、被按下的按鈕等。

:visited

僞類將應用於已經被訪問過的鏈接

:focus

僞類將應用於擁有鍵盤輸入焦點的元素。(ie8以上支持)

鏈接僞類,他們規定執行有順序的,不能隨便更改位置:

要按照 :link --> :visited --> :hover--> :active 的順序。

text-decoration檢索或設置對象中的文本的裝飾

text-decoration : none || underline || blink || overline || line-through

none :  無裝飾

underline :  下劃線

line-through :  刪除線

overline :  上劃線

僞元素

更改第一個字或字母的樣式:first-letter

更改第一行文本的樣式:first-line

向前面添加:before

向後面添加:after

4、css三大特性:繼承性、層疊性、優先級、權重

繼承或者* 的貢獻值

0,0,0,0

每個元素(標籤)貢獻值爲

0,0,0,1

每個類,僞類貢獻值爲

0,0,1,0

每個ID貢獻值爲

0,1,0,0

每個行內樣式貢獻值

1,0,0,0

每個!important貢獻值

∞ 無窮大

 

三、背景及盒模型

1、background背景

背景顏色

background-color:

背景圖片

語法:

background-image: none | url (url)

參數:

none :  無背景圖(默認的) url :  使用絕對或相對地址指定背景圖像

background-image屬性允許指定一個圖片展示在背景中(只有CSS3纔可以多背景)可以和 background-color 連用。 如果圖片不重複地話,圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪,則會覆蓋背景顏色。

背景平鋪

語法:

background-repeat: repeat | no-repeat | repeat-x | repeat-y

參數:

repeat : 背景圖像在縱向和橫向上平鋪(默認的)

no-repeat:  背景圖像不平鋪

repeat-x:  背景圖像在橫向上平鋪

repeat-y:  背景圖像在縱向平鋪

設置背景圖片時,默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

repeat-x:  背景圖像在橫向上平鋪

repeat-y:  背景圖像在縱向平鋪

背景位置

語法:

background-position: length || length

background-position: position || position

參數:

length : 百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位 position :  top | center | bottom | left |center | right

說明:

設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值爲:(0% 0%)。 如果只指定了一個值,該值將用於橫座標。縱座標將默認爲50%。第二個值將用於縱座標。

注意:

position後面是x座標和y座標。可以使用方位名詞或者 精確單位。

如果和精確單位和方位名字混合使用,則必須是x座標在前,y座標後面。比如background-position: 15px top; 則 15px 一定是 x座標 top是 y座標。

背景附着

background-attachment:scroll(滾動)

background-attachment:fixed(固定)

2、盒子模型

border邊框

語法:

border :border-width || border-style || border-color

邊框屬性—設置邊框樣式(border-style

邊框樣式用於定義頁面中邊框的風格,常用屬性值如下:

none:沒有邊框即忽略所有邊框的寬度(默認值)

solid:邊框爲單實線(最爲常用的)

dashed:邊框爲虛線

dotted:邊框爲點線

double:邊框爲雙實線

表格邊框問題

border-collapse:collapse;表示邊框合併在一起。

border-spacing:px;定義邊框之間的間距。

padding內邊距

padding-top:上內邊距

padding-right:右內邊距

padding-bottom:下內邊距

padding-left:左內邊距

值的個數

表達意思

1個值

padding:上下左右邊距 比如padding: 3px; 表示上下左右都是3像素

2個值

padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素

3個值

padding:上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素

4個值

padding:上內邊距 右內邊距 下內邊距 左內邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針

margin外邊距

margin屬性用於設置外邊距。 設置外邊距會在元素之間創建“空白”, 這段空白通常不能放置其他內容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

margin:上外邊距 右外邊距 下外邊距 左外邊

取值順序跟內邊距相同。

寬度高度

使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。

width和height的屬性值可以爲不同單位的數值或相對於父元素的百分比%,實際工作中最常用的是像素值。

大多數瀏覽器,如Firefox、IE6及以上版本都採用了W3C規範,符合CSS規範的盒子模型的總寬度和總高度的計算原則是:

盒子的總寬度= width+左右內邊距之和+左右邊框寬度之和

盒子的總高度= height+上下內邊距之和+上下邊框寬度之和

注意:

1、寬度屬性width和高度屬性height僅適用於塊級元素,對行內元素無效( img 標籤和 input除外)。

2、計算盒子模型的總高度時,還應考慮上下兩個盒子垂直外邊距合併的情況。

 

四、浮動與定位

浮動

 選擇器{float:屬性值;}

屬性值

描述

left

元素向左浮動

right

元素向右浮動

none

元素不浮動(默認值)

清除浮動

清除浮動主要爲了解決父級元素因爲子級浮動引起內部高度爲0 的問題。

其實本質叫做閉合浮動更好一些, 記住,清除浮動就是把浮動的盒子圈到裏面,讓父盒子閉合出口和入口不讓他們出來影響其他元素。

在CSS中,clear屬性用於清除浮動,其基本語法格式如下:

選擇器{clear:屬性值;}

屬性值

描述

left

不允許左側有浮動元素(清除左側浮動的影響)

right

不允許右側有浮動元素(清除右側浮動的影響)

both

同時清除左右兩側浮動的影響

額外標籤法

是W3C推薦的做法是通過在浮動元素末尾添加一個空的標籤例如 <div style=”clear:both”></div>,或則其他標籤br等亦可。

優點: 通俗易懂,書寫方便

缺點: 添加許多無意義的標籤,結構化較差。 我只能說,w3c你推薦的方法我不接受,你不值得擁有。。。

給父級添加overflow屬性

可以通過觸發BFC的方式,可以實現清除浮動效果。(BFC後面講解)

可以給父級添加: overflow爲 hidden|auto|scroll 都可以實現。

優點: 代碼簡潔

缺點: 內容增多時候容易造成不會自動換行導致內容被隱藏掉,無法顯示需要溢出的元素。

使用after僞元素

使用方法:

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   
 
 .clearfix {*zoom: 1;}   ie6、7 專有

優點: 符合閉合浮動思想 結構語義化正確

缺點: 由於IE6-7不支持:after,使用zoom:1觸發 hasLayout。

注意:content:"." 裏面儘量跟一個小點,或者其他,儘量不要爲空,否則再firefox7.0前的版本會有生成空格。

給僞元素添加空白字符

content:"\200B";這個參數,Unicode字符裏有一個“零寬度空格”,即 U+200B,代替原來的“.”,可以縮減代碼量。而且不再使用visibility:hidden。

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.

當然有些網站也用 content:"\0200" 的,都是空格的意思。

使用before和after雙僞元素

使用方法:

.clearfix:before,.clearfix:after{ 
           content:".";
           display:table;
   }
.clearfix:after{
 clear:both;
}
.clearfix{*zoom:1;}

優點: 代碼更簡潔

缺點: 由於IE6-7不支持:after,使用zoom:1觸發 hasLayout。

定位

元素的定位屬性主要包括定位模式和邊偏移兩部分。

1、邊偏移

在CSS中,通過邊偏移屬性top、bottom、left或right,來精確定義定位元素的位置,其取值爲不同單位的數值或百分比。具體解釋如下表所示:

邊偏移屬性

描述

top

頂端偏移量,定義元素相對於其父元素上邊線的距離

bottom

底部偏移量,定義元素相對於其父元素下邊線的距離

left

左側偏移量,定義元素相對於其父元素左邊線的距離

right

右側偏移量,定義元素相對於其父元素右邊線的距離

也就說,以後定位要和這邊偏移搭配使用了,比如 top: 100px; left: 30px; 等等

2、定位模式

在CSS中,position屬性用於定義元素的定位模式,其基本語法格式如下:

選擇器{position:屬性值;}

position屬性的常用值

描述

static

自動定位(默認定位方式)

relative

相對定位,相對於其原文檔流的位置進行定位(不脫標)

absolute

絕對定位,相對於其上一個已經定位的父元素進行定位(脫標)

fixed

固定定位,相對於瀏覽器窗口進行定位(脫標)

 

總結

定位模式

是否脫標占有位置

是否可以使用邊偏移

移動位置基準

靜態static

不脫標,正常模式

不可以

正常模式

相對定位relative

不脫標,佔有位置

可以

相對自身位置移動

絕對定位absolute

完全脫標,不佔有位置

可以

相對於定位父級移動位置

固定定位fixed

完全脫標,不佔有位置

可以

相對於瀏覽器移動位置

3、疊放次序z-index

z-index的默認屬性值是0,取值越大,定位元素在層疊元素中越居上。

如果取值相同,則根據書寫順序,後來居上。

後面數字一定不能加單位。

只有相對定位,絕對定位,固定定位有此屬性,其餘標準流,浮動,靜態定位都無此屬性,亦不可指定此屬性。

4、display顯示

display 設置或檢索對象是否及如何顯示。

display: none 隱藏對象 與它相反的是display:block 除了轉換爲塊級元素之外,同時還有顯示元素的意思。

特點: 隱藏之後,不再保留位置。

5、visibility可見性

設置或檢索是否顯示對象。

visible:  對象可視

hidden : 對象隱藏

特點: 隱藏之後,繼續保留原有位置。(停職留薪)

6、overflow溢出

檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。

visible:  不剪切內容也不添加滾動條。

auto :   超出自動顯示滾動條,不超出不顯示滾動條

hidden : 不顯示超過對象尺寸的內容,超出的部分隱藏掉

scroll :  不管超出內容否,總是顯示滾動條

 

六、界面樣式及精靈圖

1、界面樣式

cursor鼠標樣式

設置或檢索在對象上移動的鼠標指針採用何種系統預定義的光標形狀。

cursor :default 小白 | pointer 小手 | move 移動 | text 文本

儘量不要用hand 因爲 火狐不支持 pointer ie6以上都支持的儘量用

是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。

outline輪廓

outline: outline-color ||outline-style || outline-width

但是我們都不關心可以設置多少,我們平時都是去掉的。

最直接的寫法是 : outline: 0;

resize防止拖拽

resize:none 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動文本域。

vertical-align垂直居中

vertical-align 不影響塊級元素中的內容對齊,它只針對於 行內元素或者行內塊元素,特別是行內塊元素,通常用來控制圖片和表單等。

模式

單詞

基線對齊:  默認的是文字和圖片基線對齊

vertical-align: baseline;

垂直居中:  默認的是文字和圖片基線對齊

vertical-align: middle;

頂部對齊:  默認的是文字和圖片基線對齊

vertical-align: top;

 

2、精靈圖

CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中(精靈圖),然而,各個網頁元素通常只需要精靈圖中不同位置的某個小圖,要想精確定位到精靈圖中的某個小圖,就需要使用CSS的background-image、background-repeat和background-position屬性進行背景定位,其中最關鍵的是使用background-position屬性精確地定位。

七、CSS文本屬性及優化

1、margin負值

margin是可以設置爲負數的

定位後元素的層級要高於標準流的層級

2、給網站添加favicon圖標

<link rel="shortcut icon" href=“favicon.ico">

3、logo優化

1、我們要在logo裏面放一個h1標籤,就是爲提權,說明這個盒子很重要。

2、我們繼續在h1 裏面放一個鏈接a 要和 logo盒子一樣大。

3、注意 a鏈接 裏面要放上網站標題。(是爲了優化)

4、鏈接裏面的文字對用戶體驗不好,這裏不需要看見。有兩種方法實現:

5、利用text-indent:-2000em; 或者 利用padding 擠開盒子並且overflow 切割

6、給鏈接添加 title 提示文本 增強用戶體驗。

4、文本屬性

letter-spacing字間距

letter-spacing屬性用於定義字間距,所謂字間距就是字符與字符之間的空白。其屬性值可爲不同單位的數值,允許使用負值,默認爲normal

word-spacing單詞間距

word-spacing屬性用於定義英文單詞之間的間距,對中文字符無效。和letter-spacing一樣,其屬性值可爲不同單位的數值,允許使用負值,默認爲normal。

word-spacing和letter-spacing均可對英文進行設置。不同的是letter-spacing定義的爲字母之間的間距,而word-spacing定義的爲英文單詞之間的間距。

word-break自動換行

normal 使用瀏覽器默認的換行規則。

break-all允許在單詞內換行。

keep-all只能在半角空格或連字符處換行。

 

white-space空白符處理

使用HTML製作網頁時,不論源代碼中有多少空格,在瀏覽器中只會顯示一個字符的空白。在CSS中,使用white-space屬性可設置空白符的處理方式,其屬性值如下:

normal:常規(默認值),文本中的空格、空行無效,滿行(到達區域邊界)後自動換行。

pre:預格式化,按文檔的書寫格式保留空格、空行原樣顯示。

nowrap:空格空行無效,強制文本不能換行,除非遇到換行標記 <br />

。內容超出元素的邊界也不換行,若超出瀏覽器頁面則會自動增加滾動條。(重要)

text-overflow文字溢出

text-overflow: clip | ellipsis

設置或檢索是否使用一個省略標記(...)標示對象內文本的溢出

clip :  不顯示省略標記(...),而是簡單的裁切

ellipsis:  當對象內文本溢出時顯示省略標記(...

文本超出以省略號代替

white-space: nowrap;(強制一行顯示)

overflow: hidden;(溢出隱藏)

text-overflow: ellipsis;(溢出顯示省略號)

 

5、css條件註釋語法的使用

<!--[if IE]> <p>你在非IE中將看不到我的身影</p> <![endif]-->

<!--[if IE 7]>只能被 IE7 識別;<![endif]-->

<!--[if lte ie 版本號]>小於等於ie版本號<![endif]-->

<!--[if ! ie]><!-->要判斷非ie<!--<![endif]-->

 

第3章JS

一、流程控制語句

程序三種基本結構--順序結構、選擇結構、循環結構

1、選擇結構

if語句

if (判斷條件) {

執行語句

}elseif (判斷條件) {

執行語句

}else{

執行語句

}

switch語句

case裏必須是具體的值,但是如果表達式可以返回一個具體的值true或者false也可以是表達式,這時switch裏面是true

switch(表達式) {

case 取值:

執行語句

break;

case 取值:

執行語句

break;

default:

執行語句

}

三元表達式:判斷條件?條件爲真的結果:條件爲假的結果;

2、循環結構

for語句:1初始化表達式、2控制表達式、3循環後表達式

for(vari = 0; i < n ; i ++){

執行語句

}

while語句

var i=0;

which(判斷條件){

執行語句

}

do while 語句 先執行後判斷至少執行一次

var i= 0;

do {

執行語句

}while(判斷條件)

二、基本類型和複雜類型

基本數據類型(值類型):直接存儲值

number、string、boolean、undefined、null(基本類型只有這五個)

複雜數據類型(引用類型):存儲引用

 

一、數組

1、數組的聲明

①通過構造函數

vararr = new Array ();

②通過字面量

vararr = [];

2、數組的賦值和取值

賦值:arr [索引號] = 1;

批量賦值 for循環

取值:arr [索引號];

3、數組的遍歷(重點)

for (var i = 0; i < arr.length; i++){}

防止稀疏數組 arr (arr.length)= i;

4、轉換數組

 

console.log(arr.);打印輸出

 

console.log(arr);

[1, 2, 3]

先以對象的形式輸出,刷新後把直接量輸出,其實就是調用了valueOf

valueOf()

[1, 2, 3]

某種程度上說 它就是調用了toString

toString()

1,2,3

調用了join,把每一項的值取出來用逗號拼接

join("-")

1-2-3

不傳參數,默認用逗號拼接1,2,3,傳入參數,會用這個參數拼接

5、檢測數組(掌握)

 var arr = [1, 2, 3];

console.log打印輸出的返回值

typeOf arr;

object

arr instanceof Array;

true

{} instanceof Array

false

Array.isArray([]);

true

Array.inArray({});

false

Array.prototype.isArray;

 

Array.isArray;

 

Ovject.prototype.toString.cell(arr);

[object Array]

 

  

 

   

 

 

 

 

 

 

 

 

 

 

 

6、增刪方法

push(1,2,3,4);

從後面添加元素,可以同時加入多個

    console.log(arr.push(1,2,3,4));

返回值是新數組的長度

unshift(a);

從前面添加 可以添加多個

    console.log(arr.unshift(a));

返回值是新數組的長度

shift(); 無參數

從前面刪除一個

    console.log(arr.shift());

返回刪除的元素

pop(); 無參數

從後面刪除最後一個

    console.log(arr.pop());

返回刪除的元素

找到數組中第一個a的位置:arr.indexOf(a);

找到數組中最後一個a的位置arr.lastindexOf(a);

找到數組中所有的a的位置

function getIndex (arr,str) {

var index = -1;

do {

index = arr.indexOf(str, index + 1);

console.log(index);

if (index ! = -1) {

console.log(index);

}

}while(index ! = -1);

 

}

 

在數組中元素出現的次數

var arr = ["c", "a","z", "a", "x", "a"]
       var o = {};  //屬性名 元素--> 屬性值 次數

for (var i = 0; i < arr.length; i ++){

varitem = arr[i];

if(o[item]) {  /能進來說明有值,沒有進來說明之前沒有出現過

o[item]++;  //等於o[item] = o[item] + 1;

}else{

o[item]= 1;  //能進來說明是undefined,也就是說之前沒有出現過,這是第一次出現

}

}

 

7、操作方法

concat();把參數拼接到當前數組

slice[begin,end);從當前數組中把要的東西複製一份,不影響原來的數組

splice(begin,刪除個數,插入的新元素);刪除或替換當前數組的某些元素,返回這些元素

 

8、位置方法

indexOf(); 從前往後尋找元素在數組中的位置

lastIndexOf(); 從後往前找,沒有找到返回-1

 

9、迭代方法

every();

filter();

forEach(); 對數組遍歷

arr.forEach(function(element, index, array) {

console.log(element);

})

map();

some();

 

 

10、sort 方法(瞭解)

 

  原理:

function sort(arr, fn) {

for(var i = 0; i < arr.length - 1; i ++) {

var flag = true;

 

for(var j = 0; j < arr.length - 1 - i; j ++){

if(fn(arr[j] > arr[j + 1]) > 0){

vartemp = arr[j];

arr[j]= arr[j+1];

arr[j+1]= temp;

flag =false;

}

}

if(flag) {

break;

}

}

returnarr;

}

var array = [3, 2, 1];

console.log(arr);

console.log(sort(array, function (a, b){

return a - b;

}));

console.log(arr);

 

 

 

 

 

 

二、函數

 

1、函數的定義和調用

函數的定義

①函數的聲明:function 函數名 () {

  函數體(要執行的代碼)

  }

②函數表達式:var 函數名 = function () {

  函數體

  };

函數的調用:函數名 ();(要調用先引用)

2、函數的參數

有參數的函數的聲明:function 函數名 (參1,參2) {  //函數聲明時的參數只是一個佔位符,是形式參數

函數體

}

有參數的函數的調用:函數名 (參1,參2) //函數調用時傳入的參數是具體的數值,是實際參數

形參和實參沒有關係,只不過在調用的時候把實參的值複製了一份賦值給了形參

3、函數返回值

①return 要返回的值;(函數的返回值是什麼,調用這個函數就相當於調用了什麼)

②函數在執行完成return語句後便會退出函數,後面的代碼不會執行

③如果只打印函數名,會通過函數名找到函數體,如果想打印的是函數的返回值,那麼一定要加小括號()

4、匿名函數

匿名函數:函數定義完後就賦值給了一個變量,通過變量名來調用這個函數,所以就沒有必要起名字

5、遞歸函數

函數自己調用自己的編程技巧

6、回調函數(重點)

被當做函數傳遞的函數

三、對象

1、鍵值對

一種對應關係,通過鍵能夠方便地找到值 key:value; 對象也是鍵值對

  屬性名:屬性值、索引:元素的值

2、對象的聲明

①通過構造函數

varobj = new.Object();

②通過字面量

varobj = {};

3、屬性

用來描述對象的特徵 一般是名詞 對應變量

定義:對象.屬性名 = 要賦的值;

調用:對象.屬性名;

4、方法

用來描述對象的行爲 一般是動詞 是一種函數(屬於某個對象的函數就叫方法)

定義:對象.方法名 =function(){ //函數體};

調用:對象.方法名;

5、訪問屬性的兩種方式(重點)

①點語法(屬性名是什麼就必須寫什麼):obj.屬性名;

②中括號(通過字符串找屬性名,字符串可以通過編程拼接):obj["屬性名"];

6、遍歷的兩種方式(重點)

①for循環

②for-in

 for(var k in json) { 語句}

k變量代表的是json中的各個屬性(key)和 var i= 0中的i是一個意思 名字不同而已

        json  JavaScript Object Notation(JavaScript對象標記法)是仿照JS中對象字面量的格式去書寫的一串                            用來記錄對象數據的字符串,可以用於數據傳輸。

7、Null

      null常被用於期望一個對象,但是當前先不附加任何值的情況

undefined派生自null

undefined== null  //true

undefined=== null  //false

四、字符串的方法

字符串的所有方法都不會修改字符串本身

1、操作方法(重點)

slice(參1,參2) 從start開始,截取到end位置,end取不到;參1:開始的位置 ;參2:結束的位置[start,end).遇到負數把length和負數相加

substring() 從start開始,截取到end位置,end取不到;遇到負數,把負數變爲0,兩個參數交換位置

substr() 從參1,start開始,截取參2,length個字符

charAt() 獲取指定位置處的字符

str[0]; 和charAt 等效,IE8+支持

trim() 只能去除字符串前後的空白

split() 把字符串切割成字符數組

大小寫轉換:

to(Locale)UpperCase()  轉換大寫

to(Locale)LowerCase()  轉換小寫

2、查找字符串中所有的o的位置

var str= "dmsosekkdsoosns";

  varindex= -1;

do{

index = str.indexOf("o",index +1);

console.log(index);

}while(index != -1);

3、將字符串中所有的o替換成!

do{

str =str.replace("o","!");

}while(str.indexOf("o")!= -1);

console.log(str);

4、統計字符串中每個字符出現的次數

var o = {};

for (var i = 0; i < str.length; i ++){

varitem = str.charAt(i);

if(o[item]) {

o[item]++;  //如果以前有了值,讓這個值加一

}else{

o[item]= 1; //如果之前沒有,現在進來就有了一次了

}

}

for (var key in o) {

console.log(key+"出現了" + o[key] + "次");

}

5、去掉字符串中所有的空格

var str = " aaa di djsoa jdi wd";

str =str.trim(); //trim可以去除兩邊的空格

var arr = str.split(" ");//按照空格分隔

str = arr.join(" ");

6、replaceClassName:替換類名,封裝函數(瞭解)

functionreplaceClassName(element, oldStr, newStr) {

//把類名這個字符串按照空格分隔,把裏面每一個類名做判斷

vararr = element.className.split(" ");

for(var i = 0; i < arr.length; i ++) {

if(arr[i] === oldStr) {

arr[i]= newStr;

}

}

element.className= arr.join (" ");

}

7、getElementsByClassName

functiongetElementsByClassName(element,className) {

if(element.getElementsByClassName){

returnelement.getElementsByClassName(className);

}else{

var filterArr = [];

var elements =element.getElementsByTagName("*");

for (var i = 0; i < elements.length; i++) {

var nameArr =elements[i].className.split(" ");

for (var j =0; j < nameArr.length; j++) {

if (nameArr[j] === className) {

filterArr.push(elements[i]);

break;

}

}

}

returnfilterArr;}}

 

 

三、作用域、預解析和聲明提升

預解析

解析器在執行當前作用域下的代碼之前有一個預解析的過程

預解析的時候 會將變量和函數的聲明提升到當前作用域的頂部 然後才執行

聲明提升

變量提升:解析器會將變量提升到作用域的最上面,但是變量的賦值不會提升

函數提升:解析器會率先讀取函數聲明,並使其在執行任何代碼之前可用

另外解析器會先找var再找function,因此如果變量和函數重名後找到的函數會把先找到的變量覆蓋(如果代碼執行後有賦值語句,該值又會把函數覆蓋)

變量作用域

最外層的是全局變量

函數內的是局部變量

特殊:函數內部不加var的是全局變量

遞歸概念:程序調用自身的編程技巧稱爲遞歸

 

回調函數:函數也是一種普通的數據類型,因此函數也可以被當作參數傳遞,被當作參數傳遞的函數叫做回調函數

四、構造函數創建對象

@this和new

利用new 關鍵字可以聲明新的對象。new 關鍵字可以讓構造函數中this的指向改變,並讓構造函數把this返回。

@構造函數

構造函數也是函數,只不過會默認返回一個對象。

 

 

 

@構造函數創建對象

通過構造函數創建對象更方便(不需要創建對象並返回)。更重要的是可以通過instanceof來判斷實例的類型了。

1、工廠模式(瞭解)

function Student (name, age, sex, score){

varstu = new Object();

stu.name= name;

stu.age= age;

stu.sex= sex;

stu.score= score;

stu.sayHi= function () {

console.log("大家好我叫" + this.name + "我今年" + this.age);

};

returnstu;

}

varstu = new Student("zs", 18, 1, 100);

stu.sayHi();

2、構造函數模式(重點)

function Student (name, age, sex, score){

var stu = new Object(); 這回就不需要手動的創建對象了,直接使用this

this.name= name;

this.age= age;

this.sex= sex;

this.score= score;

this.sayHi= function () {

console.log("大家好我叫" + this.name + "我今年" + this.age);

};

return stu; 也不需要返回對象了,因爲new 可以讓this返回

}

調用:

varstu 1= new Student("zs", 18, 1, 100);

varstu 2= new Student("zs", 18, 1, 100);

stu1.sayHi();

stu2.sayHi();

console.log(stu1.sayHi=== stu2.sayHi);

通過構造函數模式創建出來的對象,可以通過instanceof 來辨別具體類型

 

五、原型屬性:prototype

如果希望所有的數組對象都能調用某個方法,可以在這個對象的構造函數的原型屬性上綁定方法

Array.prototype.jump = function (){

console.log("去吧,皮卡丘!");

};

var arr = new Array();

arr.jump()

原型模式:

function Student (name, age, sex, score){

this.name= name;

this.age= age;

this.sex= sex;

this.score= score;

}

Student.prototype.sayHi = function () {

console.log("大家好我叫" + this.name + "我今年" + this.age);

};

 

調用:

varstu 1= new Student("zs", 18, 1, 100);

varstu 2= new Student("zs", 18, 1, 100);

stu1.sayHi();

stu2.sayHi();

console.log(stu1.sayHi=== stu2.sayHi);

console.log(stu1);

 

prototype 是構造函數的原型屬性

__proto__ 是對象的原型屬性,一環套一環,

  形成了一個鏈條,就是原型鏈,通過原型鏈

  可以讓它現原形

六、深層複製數組(瞭解)

function deepClone(arr) {

varnewArr = [];

for (vari = 0; i < arr.length; i ++{

newArr[newArr.length]= arr[i];

}

return newArr;

}

var arr1 = [3, 2, 1]; 

var arr2 = arr1;

var arr2 = deepClone(arr1);

arr[0] = 100;

console.log(arr1);

console.log(deepClone(arr1).sort(function(a, b){

returna - b;

}));

 

七、形參和實參(重點)

調用函數的時候是把實際參數的值複製一份賦值給形參它們只是值一樣沒有任何關係

function fn(a, b) {  -->形式參數

a =100;   //對形參進行改變

   //console.log(a);//形參改變了

   return a + b;

}

var a = 10;

var b = 20;

fn(a, b);//實際參數

//console.log(a);//實參不會改變

對形參的改變一定不會影響實參 這個說法是不嚴謹的

var array = [3, 2, 1];//實際參數

console.log(array);//把實際參數array複製了一份 賦值給了形式參數arr 我們是對形式參數arr進行的修改

console.log(sort(array, function (a, b) {

   return a - b;

}));//這個函數內部只是對形式參數arr進行了修改

console.log(array);  實際參數也改變了

八、JS面試題

1、談談你對遞歸的認識?

遞歸:程序調用自身的編程技巧稱爲遞歸,自己調用自己。

functionfactorial(num) {

return ( num <=1 ) ? 1 : num *factorial(num - 1);

}

console.log(factorial(8));

2簡述forin 循環的特點及使用場景?

for...in 語句用於對數組或者對象的屬性進行循環操作。 for ... in 循環中的代碼每執行一次,就會對數組的元素或者對象的屬性進行一次操作。注意:forin循環不會按照屬性的下標來排列輸出。

for (變量 in 對象){

在此執行代碼

}

“變量”用來指定變量,指定的變量可以是數組元素,也可以是對象的屬性。

3split()join()的區別?

split()方法通過把字符串分割成子字符串來把一個String 對象分割成一個字符串數組。

語法 str.split([separator][, limit])

參數 separator 指定用來分割字符串的字符(串)。separator 可以是一個字符串或正則表達式。如果忽略 separator,則返回整個字符串的數組形式。如果 separator 是一個空字符串,則 str 將會把原字符串中每個字符的數組形式返回。參數limit是一個整數,限定返回的分割片段數量。split 方法仍然分割每一個匹配的 separator,但是返回的數組只會截取最多 limit 個元素。

"|a|b|c".split("|")//將返回["", "a", "b", "c"]

"hello".split("")//可返回 ["h", "e", "l", "l", "o"]

"hello".split("", 3) //可返回 ["h", "e", "l"]

join()方法將數組中的所有元素連接成一個字符串。

語法 str = arr.join([separator = ','])

參數separator 可選,用於指定連接每個數組元素的分隔符。分隔符會被轉成字符串類型;如果省略的話,默認爲一個逗號。如果 seprator 是一個空字符串,那麼數組中的所有元素將被直接連接。

例子: var a = ['Wind', 'Rain', 'Fire'];

var myVar1 =a.join(); // myVar1的值變爲"Wind,Rain,Fire"

var myVar3 =a.join(' + '); // myVar3的值變爲"Wind + Rain + Fire"

var myVar4 = a.join('') // myVar4的值變爲"WindRainFire"

4如何消除一個數組裏面重復的元素?

var arr1 =[1,2,2,2,3,3,3,4,5,6], 
    arr2 = []; for(var i = 0,len = arr1.length; i< len; i++){ 
            if(arr2.indexOf(arr1[i]) < 0){ 
             arr2.push(arr1[i]); 
        } 
    } 
document.write(arr2); // 1,2,3,4,5,6

5、請說出=====的區別?

== 判斷內容是否相等不比較類型 console.log(1 =="1"); true

=== 判斷內容相等且類型也相等 console.log(1==="1"); false

6、請列舉字符串操作的方法?

charCodeAt() 方法返回一個整數,代表指定位置字符的Unicode編碼;

charAt() 方法返回指定索引位置處的字符。如果超出有效範圍的索引值返回空字符串;

slice() 方法返回字符串的片段;

substring() 方法返回位於String對象中指定位置的子字符串。

substr() 方法返回一個從指定位置開始的指定長度的子字符串。

indexOf() 方法返回String對象內第一次出現子字符串位置。如果沒有找到子字符串,則返回-1;

lastIndexOf() 方法返回String對象中字符串最後出現的位置。如果沒有匹配到子字符串,則返回-1;

search() 方法返回與正則表達式查找內容匹配的第一個字符串的位置。

concat() 方法返回字符串值,該值包含了兩個或多個提供的字符串的連接;

split() 將一個字符串分割爲子字符串,然後將結果作爲字符串數組返回;

 

 

第4章DOM

一、事件

1、阻止a標籤的默認行爲(重點)

returnfalse;

2、事件三要素

事件源.事件 = function(){事件處理程序};

3、批量操作

①批量獲取元素(通過標籤名) getElementsByTagName )

②批量添加事件 for循環遍歷

replace 方法

replace(要找的值,要替換的值)

function函數名(element, 要找的值,要替換的值){

element.className= element.className.replace(要找的值,要替換的值)

}

Document Object Model 文檔對象模型,就是把HTML文檔模型化,當作對象來處理

二、DOM結構

1、概念

文檔(Document):就是指HTML或者XML文件

節點(Node):HTML文檔中的所有內容都可以稱之爲節點,常見的節點有

元素節點 屬性節點 文本節點 註釋節點

元素(Element):HTML文檔中的標籤可以稱爲元素

2、結構概念

父節點 當前節點的父級

子節點 當前節點的子級

兄弟節點 和當前節點同屬一個父級的節點

3、.獲取元素

getElementById

getElementsByTagName 通過標籤名尋找一類元素(僞數組)

4、設置屬性

元素對象.屬性名 = “屬性值”;

<標籤 屬性名=”屬性值”>

5、綁定事件

事件三要素

事件源.事件 = function(){ 事件處理程序 };

對象方法中的this永遠指的是該方法所屬的那個對象

6、常用屬性(重點)

a常用標籤屬性

DOM對象的屬性和HTML的標籤屬性幾乎是一致的,常用的有src、title、className、href和style

b內部文本屬性

innerHTML獲取和設置標籤中的內容,設置的內容會當作節點對象被解析到DOM樹上

innerText獲取和設置標籤中的內容,設置的內容會被當作普通文本(有兼容性問題,舊版ff不支持)

textContent獲取和設置標籤中的內容,設置的內容會被當作普通文本(有兼容性問題,舊版IE不支持)

c常用表單屬性

常見的表單元素屬性有: type、value、checked、selected、disabled

type設置input元素的類型

value設置input元素的值

checked設置input元素是否選中

selected設置下拉列表select中的option是否被選中

disabled設置input元素是否被禁用

獲取焦點事件是onfocus 失去焦點事件是onblur

d自定義屬性--必須以data-開頭

getAttribute()  獲取標籤屬性

setAttribute()    設置標籤屬性

removeAttribute()移除標籤屬性

7、節點(重點)

childNodes //子節點

children        //子元素

nextSibling //下一個兄弟節點

nextElementSibling //下一個兄弟元素 有兼容性問題

previousSibling//上一個兄弟節點

previousElementSibling //上一個兄弟元素 有兼容性問題

firstChild //第一個節點

firstElementChild //第一個子元素 有兼容性問題

lastChild //最後一個子節點

lastElementChild //最後一個子元素 有兼容性問題

parentNode //父節點 (一定是元素節點,所以無需處理)

8、樣式屬性

style屬性是對象,style對象的屬性是字符串

style只能獲取和設置行內樣式

JS中 - 不能作爲標識符,涉及到計算的時候必須直接通過JS加樣式

9、動態創建元素(掌握)

①插入和移除節點

在父元素中的最後追加子元素:father.appendChild(要追加的元素);

在父元素中的某個子元素前面插入子元素:father.insertBefore(要插入的元素,插到這個元素的前面);

從父元素中移除子元素:father.removeChild(要移除的子元素);

②js動態創建結構

方式一:直接在文檔中書寫 document.write(“內容”)

方式二:改變元素對象內部的HTML:innerHTML=”內容”

使用字符串或者數組  先拼接再用innerHTML去添加到頁面

方式三:創建或克隆節點並追加,參數是一個布爾值 true表示深層複製 false是淺層複製

document.createElement()

document.cloneNode()

三、BOM

1、window.onload   

加載完成事件

onload 加載完成,指的是頁面所有資源都加載完成

涉及到圖片內容的一定要寫在onload裏面

2、addLoadEvent  

給同一個對象註冊相同的事件會相互抵消,給window追加onload事件不會頂掉之前的函數

function addLoadEvent(fn) {

var oldOnload =window.onload;

//檢查現在的window.onload是否綁定了事件

if (typeofoldOnLoad === "function") {//說明之前綁定了事件

window.onload =function () {

oldOnLoad();//之前的要執行

fn ();//傳入的新的要綁定的將來也要執行

};

}else {

window.onload =fn();

}

}

3、open方法

    ①url

    ②windowName窗口名

_self 當前窗口

_black 新窗口

③窗口的一些屬性(長、寬、背景)

4、close 方法

window.close  關閉當前窗口

win.close 關閉調用它的窗口

5、setTimeout

延時定時器

setTimeout(參1,參2)參1:回調函數,要執行的代碼,參2:延遲的時間,毫秒

6、clearTimeout

(要清理的定時器)清理定時器

clearTimeout()

var timerId = null;

var btn1 = document.getElementById("btn1");

var btn2 =document.getElementById("btn2");

btn1.onclick =function () {

timerId =setTimeout(function () {

console.log("嘣")

},3000);

};

btn2.onclick =function () {

clearTimeout(timerId);

};

7、setInterval間歇定時器(重點)

setInterval(參1,參2)參1:回調函數,要執行的代碼,參2:延遲的時間,毫秒

點擊按鈕,讓按鈕中的文字倒計時

var num = 5;

var timer = null;

btn.onclick =function () {

this.disabled =true;//1、禁用按鈕

timer =setInterval(function () {//2、設置按鈕的值

num--;

btn.value = num + "秒後可再次發送";//一定注意此時不能用this,定時器的回調函數是被window調用的

if (num === 0) {

clearInterval(timer);

btn.value = "點擊發送驗證碼";

btn.disable =false;//此時不需要再禁用了

num = 5;

}

},1000);

};

clearInterval(要清理的定時器) 清理間歇定時器

8、window的location對象(重點後期獲取數據經常用到)

location.href ="要跳轉的地址";

location.reload();讓頁面重新加載

location.hash; 錨點

location.host; 服務器

location.hostname; 服務器名

location.pathname

9、navigator對象(瞭解)

  navigator.userAgent

10、history對象

 history.forward(); 前進

  history.back(); 後退

11、screen對象,屏幕對象(重點)

screen.width; 屏幕的寬度

screen.height; 屏幕的高度

screen.availWidth; 可用寬度

screen.availHeight;可用高度

12、date日期對象(掌握)

date.toString();Sat Jul 23 2016 15:47:38 GMT+0800 (中國標準時間)

date.valueOf();這是一個13位的數字,從1970-1-100:00:00:000 開始到現在的毫秒值,方便運算

var date =Date.now(); 返回數值,13位的數字

var date = +newDate (); 加了+號轉換成13位數字,不加就是字符串同date.toString或console.log(date);

可以接受三種參數:2003,10,1 日期的每一部分

"2003-10-1"字符串的日期格式

表示日期的毫秒形式 1128094003232

      var date =Date.parse("2003-10-1"); 轉化成毫秒形式,格式不對返回NaN

toDateString(); SatJul 23 2016

toTimrString();15:47:38 GMT+0800

toLocaleDateString();2016/7/23

toLocaleTimeString();下午3:52:11

getTine();返回毫秒數  getMilliseconds(); 當前的毫秒

getSecond(); 秒

getMinutes(); 分

getHours(); 時

getDay(); 返回周幾0-6

getDate(); 返回當前月的第幾天

getMonth(); 返回0-11

getFullYear(); 返回4位的年份 2016

四、DOM面試題

1DOM操作——怎樣添加、移除、移動、複製、創建和查找節點?

(1)創建新節點

      createDocumentFragment()    //創建一個DOM片段
      createElement()   //創建一個具體的元素
      createTextNode()   //創建一個文本節點

(2)添加、移除、替換、插入、複製

      appendChild()  //添加
      removeChild()  //移除
      replaceChild() //替換
      insertBefore() //在已有的子節點前插入一個新的子節點 cloneNode() //複製

(3)查找

 getElementsByTagName()    //通過標籤名稱
 getElementsByName()//通過元素的Name屬性的值(IE容錯能力較強,會得到一個數組,其中包括id等於                                              name值的)
getElementById()    //通過元素Id,唯一性

 

2、列舉瀏覽器對象模型BOM裏常用的至少4個對象,並列舉window對象的常用方法至少5個?

對象:Window、 document、 location、 screen、 history、 navigator 、data

方法:Alert()、 confirm() 、prompt()、 open() 、close()

3、document.ready和onload有什麼區別?

document.ready和onload的區別——JavaScript文檔加載完成事件。頁面加載完成有兩種事件:

一是ready,表示文檔結構已經加載完成(不包含圖片等非文字媒體文件)

二是onload,指示頁面包含圖片等文件在內的所有元素都加載完成。

jQuery中$(function(){/*do something*/});他的作用或者意義就是:在DOM加載完成後就可以可以對DOM進行操作。一般情況先一個頁面響應加載的順序是,域名解析-加載html-加載js和css-加載圖片等其他信息。

4當一個DOM節點被點擊時候,我們希望能夠執行一個函數,應該怎麼做?

直接在DOM裏綁定事件:<div onclick=”test()”></div>

在JS裏通過onclick綁定:xxx.onclick = test

通過事件添加進行綁定:addEventListener(xxx, ‘click’, test)

5window.location.search() 返回的是什麼?

    答:查詢(參數)部分。除了給動態語言賦值以外,我們同樣可以給靜態頁面,並使用javascript來獲得相信應的參數值

        返回值:?ver=1.0&id=timlq 也就是問號後面的!

6、簡述列舉文檔對象模型DOMdocument的常用的查找訪問節點的方法做簡單說明?

document.getElementById根據元素id查找元素

document.getElementByName根據元素name查找元素

document.getElementTagName根據指定的元素名查找元素

 

第5章網頁特效

 

一、offset系列屬性

1、offset-- 偏移量(重點)

相對於原來的位置移動了多少,用於獲取元素真實的自身的位置和大小,是數值可以直接計算,是隻讀屬性,無法設置

offsetWidth

offsetHeight =height + padding + border;

style  可以獲取或者設置行內樣式,是字符串而且有單位

offsetParent  距離自身最近的帶有定位的父級,

如果父級沒有定位繼續往前找,直到找到body

parentNode  父節點,只和結構有關

offsetLeft  從自身的border的左側到父級的padding左側                                                                  

2、Math對象

Math.abs();取絕對值

Math.round();就近取整 Math.round(-1.5)--> -1;

3、動畫

原理:每次讓對象向前移動一點,連起來形成動畫,一秒25幀就有動畫效果了

公式:對象當前位置 = 對象當前位置 + 每個時間段要移動的長度

  leader = leader + step;

注意:

判斷運動方向

一定要加定位

完善終點檢測

終點清除定時器

手動設置對象位置到終點

調用開始先清理定時器,防止多次調用

動畫函數的封裝:

functionanimate(obj, target) {
              clearInterval(obj.timer);

obj.timer =setInterval(function () {

var leader =obj.offsetLeft;

var step = 10;

step = leader <target ? step : -step;

if (Math.abs(target- leader) >= Math.abs(step)) {

leader = leader +step;

obj.style.left =leader + "px";

}else {

obj.style.left =target + "px";

clearInterval(obj.timer);

}}, 15);}

動畫輪播圖具體的思路:

1、要做事先找人

把所有能用到的標籤全部獲取到

2、動態生成結構:按鈕li

2.1 根據ul 中的li 動態生成ol中的li,ul中有幾個li 生成ol中幾個li

2.2設置li中的文本,把li追加到ol中

2.3獲取ol中的li

2.4根據第一張圖,動態克隆,並追加到ul最後

3、鼠標經過按鈕,移動ul到指定的位置

3.1鼠標經過按鈕,按鈕排他(幹掉所有人,留下我自己)

3.2經過按鈕,ul移動到指定位置

指定位置:-this.index * imgWidth和當前按鈕的索引以及圖片的寬度有關,向左移動是負數

①設置索引②取圖片的寬度③調用動畫函數

4、鼠標點擊箭頭

4.1 顯示出箭頭

4.2 點擊右箭頭,把ul移動到指定位置

①鼠標點擊事件

②ul移動到指定位置:-pic * imgWidth 和圖片索引和圖片寬度有關

③判斷圖片移動到最後一張後(假的第一張),瞬間調到開頭,然後做從第一張到第二張的動畫

ul.style.left = 0;//瞬間移動到開頭

pic = 0;//索引後歸零,後續讓ul從第一張漸漸移動到第二張

4.3點擊左箭頭

當圖片移動到第一張後,瞬間跳到最後,然後做從最後一張到倒數第二張的動畫

5、按鈕也要跟着左右箭頭移動

根據當前圖片的索引,計算出下一個應該亮起的按鈕的索引

幹掉所有人、、留下相應的

6、添加自動滾動

每隔一秒播放下一張(讓點擊右箭頭的事件每隔一秒執行一次)

鼠標放在圖片上自動滾動停止,離開後繼續自動滾動

鼠標經過圖片清除自動滾動,離開時繼續自動滾動

在圖片自動滾動時,經過按鈕放開後,圖片會接着自動滾動時的順序繼續滾動,而不是從經過按鈕的圖片開始滾動:把記錄顯示按鈕的索引變爲當前按鈕的索引

      把記錄顯示圖片的索引變爲當前圖片的索引

 

 

二、scroll系列屬性(重點)

 

offset 元素自身的大小

scroll  元素內部內容的大小

scrollTop 頂部被捲去的內容的高度

scrollLeft 左側被捲去的內容的寬度

onscroll 滾動事件

 

 

1、頁面滾動座標(重點)

var scrollTop =window.pageYoffset || document.documentElement.scrollTop ||document.body.scrollTop || 0

document.body  獲取的是body標籤,是對象

document.head  獲取的是head 標籤,是對象

document.title  獲取的是title 標籤中的內容,是字符串

document 沒有html 這個屬性,html 標籤是documentElement

2、封裝自己的scroll

封裝一個函數,調用這個函數 .top 就可以獲取被捲去的頭部的高度 .left 就可以獲取被捲去的左側的寬度

function scroll() {

var scrollTop =window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop || 0;

var scrollLeft=window.pageXOffset || document.documentElement.scrollLeft ||document.body.scrollLeft || 0;

var o = {};

o.top = scrollTop;

o.left =scrollLeft;

return o;

}

 

 

 

 

 

 

 

 

3、緩動動畫

 

緩動動畫公式:step = (target -leader) / 10 leader = leader + step

緩動函數的封裝:讓任意對象移動到指定位置

function animate(obj, target){

        clearInterval(obj.timer);

        obj.timer =setInterval(function(){

            var leader =obj.offsetLeft;

            var step = (target -leader) / 10;

            step = step > 0 ?Math.ceil(step) : Math.floor(step);

            leader = leader +step;

             obj.style.left = leader + "px";

            if (leader === target){

               clearInterval(obj.timer);

            }

        },15);

    };

訪問屬性的兩種方式:obj.name、obj["name"]

獲取計算後樣式屬性:window.getComputedStyle

ie 6,7,8 :currentStyle

function getStyle (obj,attr) {

if (window.getComputedStyle) {

return window.getComputedStyle(obj,null)[attr];

} else {return obj.currentStyle[attr];}}

封裝緩動框架

 function animate(obj, json, fn) {

        clearInterval(obj.timer);

        obj.timer = setInterval(function () {

            var flag = true;

            for (var k in json){  //json {attr : taget}

if (k === "opacity") {  //opacity要特殊處理

                    //opacity沒有單位參與運算自動轉換成數值所以不用parsetInt

                    //取值範圍 0-1 0.1 0.33 33 爲了讓以前的計算公式生效要擴大100倍

                    var leader =getStyle(obj, k) * 100;

                    var target =json[k] * 100;

                    var step = (target - leader) / 10;

                    step = step> 0 ? Math.ceil(step) : Math.floor(step);

                    leader =leader + step;

                    obj.style[k] =leader / 100;  //opacity沒有單位

                } else if (k ==="zIndex") {

                   obj.style.zIndex = json[k];  //層級不需要漸變直接設置即可

                } else {

                    var leader =parseInt(getStyle(obj, k)) || 0;

                    var target =json[k];

                    var step =(target - leader) / 10;

                    step = step> 0 ? Math.ceil(step) : Math.floor(step);

                    leader =leader + step;

                    obj.style[k] =leader + "px";

                }

                if (leader != target) {

                    flag = false;

                }

            }

            if (flag) {

               clearInterval(obj.timer);

                if (fn) {

                    fn();

                }

            }

        }, 15);

    }

    //全部屬性都到達目標值才能清空

    function getStyle(obj, attr) {

        if(window.getComputedStyle) {

            returnwindow.getComputedStyle(obj, null)[attr];

        } else {

            returnobj.currentStyle[attr];

        }

}

三、client系列

1、client可視(重點)

偏移offsetWidth:width  + padding  +  border

    捲曲scrollWidth: width +  padding  不包含border   內部內容的大小

    可視clientWidth: width +  padding  不包含border

 

 

2、網頁可視區兼容性寫法的封裝(所有的瀏覽器)

function client() {

return {

             width:window.innerWidth || document.documentElement.clientWidth ||document.body.clientWidth || 0,

height :window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight || 0;

}

}  

window.onresize 窗體大小發生改變事件

3、響應式佈局  

a     A     zqQ ZQAZAzqqaaAq         q     Q    qAA qqqqqqqqq

window.onresize = function () {

clearTimeout();

timer =setTimeout(responsive, 500)

};

respinsive();

function responsive() {

if(client()).width> 960){

document.body.style.backgroundColor= "red";

document.body.innerHTML= "computer";

} else if (client()).width > 640){

document.body.style.backgroundColor= "green";

       .body.innerHTML ="tabletr";

}else {

document.body.style.backgroundColor= "yellow";

document.body.innerHTML= "mobile";

}}

4、函數節流

my 要使用animate  中的代碼,要先加載animate

方法:windo.scrollTo(x軸座標,y軸座標) 窗體滾動

四、事件對象

1、實際上,事件發生的時候,是瀏覽器讓我們註冊的這個瀏覽器執行的,瀏覽器在調用這個函數的時候會傳入一個參數

2、形參和實參可以不一致,如果傳入了實參沒有形參接收也不會出錯,只是實參沒有用

 

1、事件對象的兼容性寫法

 

document.onclick =function (event) {

var event = event|| window.event;

};

2、三個重要座標(重點)

clientX  clientY  在瀏覽器上的位置

pageX  pageY  在頁面上的位置 page

page 有兼容問題,client 沒有,我們可以用client 來計算page = client + screen.left

var pageX =event.pageX || event.clientX + document.documentElement.scrollLeft;

var pageY =event.pageY || event.clientY + document.documentElement.scrollTop;

screenX  screenY  電腦屏幕

onmousedown  鼠標按下事件

onmouseup  鼠標彈起事件

onmousemove  鼠標移動事件

event.stopPropagation();停止傳播,防止冒泡

event.cancelBubble 阻止冒泡 ie678

event.target 通過事件目標可以找到事件的源頭

判斷是否選中文字

var txt = window.getSelection ? window.getSelection().toString() :document.selection.createRange().text;

3、事件委託

參1:要委託事件的父元素,參2:事件類型,參3:事件發生在哪些標籤上,參4:發生事件後要執行的代碼

綁定事件的兩種方式:

1、普通事件

4、事件監聽器(重點)

addEventListener(參1,參2,參3) 參1:事件的類型,參2:事件處理函數,參3:是否使用捕獲

是否使用捕獲:false 不使用捕獲,是冒泡的順序,從子級到父級

                      true 使用捕獲,從父級到子級

解綁事件的兩種方式:

直接頂掉

事件監聽器的 

 

五、正則表達式

聲明和使用

1、通過構造函數定義

var 變量名= new RegExp(/表達式/);

2、通過直接量定義(只能使用一次)

var 變量名= /表達式/;       變量名可以是  regEx

常用方法,可用於檢測傳入的字符串是否符合該規則並返回布爾值
       exp.test("要檢測的字符串")  true、false 可以匹配數字,字母不行,只要有想要的(數字)就是true

預定義類

 .    [^\n\r]  除了換行和回車之外的任意字符

\d   [0-9]             數字字符digit

      \D   [^0-9]    非數字字符

      \w   [a-zA-Z0-9_]      單詞字符(所有的字母數字和_) word

\W [^a-zA-Z0-9_]    非單詞字符

\s   [\f\r\n\t\v] 不可見字符 space-->空字符串、空格、換行

\S   [^\f\r\n\t\v]     可見字符

轉義符

\f 表示換頁 form feed

\t 表示水平製表符 table

\v 表示垂直製表符 vertical table

|  表示或, /f|boot/.test("foot");這個表達式表示的意思是 f或者 boot 只不過foot裏面有了f所以會返回true

1.1.3字符類

@字符類

簡單類[abc] 表示該位置可以出現的字符,/[abc]/.test("a");返回true,可以是a或b或c

負向類[^abc] 表示該位置不可以出現的字符

範圍類[a-e]  表示該位置可以出現的字符的範圍

組合類[a-xA-E0-9] 範圍類的組合

@驗證密碼強度

邊界量詞括號

@邊界

^ 會匹配行或者字符串的起始位置

^只有在[]內才表示非在外邊表示開始

$ 會匹配行或字符串的結尾位置

^$在一起表示必須是這個(精確匹配),必須是我要的那個

@量詞  自定義出現的次數放在 {} 中

 "*" 重複零次或多次 x>=0

 "+" 重複一次或多次 x>=1

 "?" 重複零次或一次  x=(0||1)

{n}   n次x=n

{n,}  重複n次或更多 x>=n

{n,m} 重複出現的次數比n多但比m少 n<=x<=m

@括號總結

()表示一組

[]表示一個字符的位置

{}表示次數

常見項目的匹配

常見項目的匹配網上有很多(例如搜索常用正則表達式大全),無需記憶,能看懂即可

匹配國內電話號碼:@驗證座機 

/^0\d{2,3}-\d{7,8}$/

匹配姓名:@驗證姓名/^[\u4e00-\u9fa5]{2,}$/

匹配騰訊QQ號:

       /^[1-9]\d{4,10}$/

匹配手機號:

       /^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/

匹配郵箱:

        /^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

function check(inp, reg) {

inp.onblur =function () {

if(reg.test(this.value)){

this.nextSibling.innerHTML= "輸入正確";

this.nextSibling.className= "";

} else {

this.nextSibling.innerHTML= "輸入不正確";

}

};

}

3、封裝自己的trim方法

@replace() 方法

格式:

字符串對象.replace(正則式或字符串,替換的目標字符)

返回值:

替換後的新字符串

@封裝自己的trim()方法

    function trim(str) {

        returnstr.replace(/^\s+/g,"").replace(/\s+$/g,"");

}

----->>

    function trim(str) {

        returnstr.replace(/^\s+|\s+$/g,"");

    }

 

鍵盤事件:

onkeydown: 鍵盤按下,按着不放會一直執行

onkeyup: 鍵盤彈起

onkeypress: 鍵盤按下,用的是Ascll碼

獲取焦點:

檢測按下的是哪一個鍵:e.keyCode

元素獲取焦點:obj.focus();
 

六、網頁特效面試題

1、請談下團購倒計時如何實現?

團購倒計時頁面端的效果比較好實現,主要是樣式和時間的操作,重要的考慮時間要和服務器端同步,其實這個效果也可以基於服務器端推送技術來實現。

 

2、輪播圖有哪幾種?如何實現?

純CSS可以實現輪播圖;JS實現輪播圖;Boostrap

3JavaScript的事件流模型都有什麼,以及怎麼阻止他們?

1、原始事件模型普通的事件綁定,比如事件賦值,按鈕上綁定事件等

2、DOM2事件模型

addEventListener("eventType","handler","true!false");

removeEventListner("eventType","handler","true!false");

氣泡模型(與ie有點區別),冒泡和捕獲

3、IE模型氣泡模型

attachEvent("eventType","handler")

detachEvent("eventType","handler") 與dom2不同的是eventType有on前綴

4、什麼是事件冒泡/捕獲?

事件冒泡:事件到達事件目標之後不會結束,會逐層向上冒泡,直至document對象,也就是子元素事件的觸發會影響父元素的事件;

  開關事件冒泡:

A,開啓事件冒泡:event.addEventListener(eventName,handler,false);

B,關閉事件冒泡:假設傳統方式事件的返回值爲e,就可以通過e.stopPropagation()來關閉事件冒泡;

C ,return false;  同時具有阻止冒泡和阻止默認行爲的功能

事件捕獲:父元素的事件會影響子元素的事件;

開啓事件捕獲:event.addEventListener(eventName,handler,true)

5如果需要手動寫動畫,你認爲最小時間間隔是多久,爲什麼?(阿里)

多數顯示器默認頻率是60Hz,即1秒刷新60次,所以理論上最小間隔爲1/60*1000ms = 16.7ms

6documen.writeinnerHTML的區別?

document.write只能重繪整個頁面 
       innerHTML可以重繪頁面的一部分

第6章jQuery

一、jQuery入口函數和js入口函數的區別

jQuery的入口函數:$(function(){}); 或者 $(document).ready(function(){});  jQuery === $;

$ 在jQuery中就是一個函數,根據傳入參數類型的不同,分別進行不同的處理,來實現不同的功能

js入口函數指的是:window.onload =function() {};

jQuery對象和DOM對象的相互轉換

$("#btn")本質上存儲的就是DOM對象,所以可以使用[]的形式,來獲取數組裏面的元素

DOM對象此處指的是:使用js操作DOM返回的結果。

var btn =document.getElementById(“btnShow”); // btn就是一個DOM對象

jQkuery對象此處指的是:使用jQuery提供的操作DOM的方法返回的結果。

jQuery拿到DOM對象後又對其做了封裝,讓其具有了jQuery方法的jQuery對象,說白了,就是把DOM對象重新包裝了一下。

DOM對象轉換成jQuery對象:

var $btn1 = $(btn);// 此時就把DOM對象btn轉換成了jQuery對象$btn1

// $(document).ready(function(){}); // 調用入口函數

// 此處是將document這個js的DOM對象,轉換成了jQuery對象,然後才能調用jQuery提供的方法:ready

jQuery對象轉換成DOM對象:

// 第一種方式var btn1 = $btn[0];// 此時就把jQuery對象$btn轉換成了DOM對象btn1

// 第二種方式var btn2 =$btn.get(0);// 此時就把jQuery對象$btn轉換成了DOM對象btn2

 

二、jQuery選擇器(重點)

1、基本選擇器

符號(名稱)

說明

#

Id選擇器

.

類選擇器

element

標籤選擇器

2、層級選擇器

符號(名稱)

說明

空格

後代選擇器

子代選擇器

one+two

選取所有one元素同輩的下一個元素two(如果有幾個one,就有幾個two,除非緊挨着one後面沒有同級元素two)

one~two

選取one元素同輩的two的所有元素

3、基本過濾選擇器

符號(名稱)

說明

:first

選取第一個元素

:last

選取最後一個元素

:not(selector)

選取不是這個元素的其他元素

:eq(index)

選擇索引號爲index的一個元素,index從0開始

:odd

選擇索引號爲奇數的所有元素,index從0開始

:even

選擇索引號爲偶數的所有元素,index從0開始

:gt(index)

選取索引大於index的元素

:lt(index)

選取索引小於index的元素

:header

選取所有的標題元素,如h1,h2,h3

:animated

選取當前正在執行動畫的所有元素

:focus

選取當前獲取焦點的元素

4、篩選選擇器(方法)

符號(名稱)

說明

find(selector)

查找指定元素的所有後代元素(子子孫孫)

children()

查找指定元素的直接子元素(親兒子元素)

siblings()

查找所有兄弟元素(不包括自己)

:parent()

查找父元素(親的)

:nth-child(index/even/odd/equation)

選取父元素下的第index個子元素或者奇偶元素,index從1算起

:first-child

獲取個父元素的第一個子元素

:last-child

選取父元素的最後一個子元素

:eq(index)

查找指定元素的第index個元素,

index是索引號,從0開始

index()

獲取指定元素的索引號(從0開始的)

prevAll()

獲取指定元素之前的所有兄弟元素

nextAll()

獲取指定元素之後的所有兄弟元素

內容過濾選擇器

:contains(text)

選取含有文本內容爲“text”的元素

:empty

選取不包含子元素或者文本的空元素

:has(selector)

選取含有選擇器所匹配的元素的元素

:parent()

選取含有子元素或者文本的元素

可見性過濾選擇器

:hidden

選取所有不可見的元素

:visible

選取所有可見的元素

屬性過濾選擇器

[ attribute ]

選取擁有此屬性的元素

[ attribute = value ]

選取屬性的值爲value的元素

[ attribute != value ]

選取屬性的值不等於value的元素

[ attribute ^= value ]

選取以屬性的值value開始的元素

[ attribute $= value ]

選取屬性的值以value結束的元素

[ attribute *= value ]

選取屬性的值含有value的元素

[ attribute |= value ]

選取屬性等於給定字符串或以該字符串爲前綴(該字符串後跟一個連字符‘-’)的元素

[ attribute ~= value ]

選取屬性的值含有value的元素

 

檢查某個元素是否存在的方法:if($("#tt").length> 0) {}

三、樣式操作 (重點)

1、樣式屬性操作 

.css()

作用:設置或獲取元素的樣式屬性值

a設置單個樣式:$(selector).css(“color”,“red”);

b設置多個樣式:$(selector).css({“color”:“red”, “font-size”: “30px”})

var cssStyle ={“color”: “red”, “font-size”: “30px”};$(selector).css(cssSTyle);

c獲取樣式屬性操作:$(selector).css(“font-size”);

2、類操作

添加類樣式:

$(selector).addClass(className)爲指定元素添加類classNam

移除類樣式:

$(selector).removeClass(className)爲指定元素移除類 className

$(selector).removeClass();不指定參數,表示移除被選中元素的所有類

判斷有沒有類樣式:

$(selector).hasClass(calssName)判斷指定元素是否包含類 className

切換類樣式:

$(selector).toggleClass(className)爲指定元素切換類,該元素有類則移除,沒有指定類則添加。

 

四、jQuery動畫(掌握)

1、隱藏顯示動畫

(1)show() 參數可以有兩個,第一個是動畫的執行時長,第二個是動畫執行完成後的回調函數。

參數一可以是數值類型或者字符串類型

參數二表示:動畫執行完後立即執行的回調函數

$(selector).show(2000,function() {});

hide方法作用:讓匹配元素隱藏掉

2、滑入滑出動畫

(1)滑入動畫效果(聯想:生活中的捲簾門)

 作用:讓元素以下拉動畫效果展示出來

 $(selector).slideDown(speed,callback);默認值:400毫秒(同樣適用於fadeIn/slideDown/slideUp)

(2)滑出動畫效果

              作用:讓元素以上拉動畫效果隱藏起來

 $(selector).slideUp(speed,callback);

(3)滑入滑出切換動畫效果

 $(selector).slideToggle(speed,callback);

3、淡入淡出動畫

(1)淡入動畫效果

 作用:讓元素以淡淡的進入視線的方式展示出來

 $(selector).fadeIn(speed, callback);

(2)淡出動畫效果

      $(selector).fadeOut(1000);作用:讓元素以漸漸消失的方式隱藏起來

(3)淡入淡出切換動畫效果

 作用:通過改變不透明度,切換匹配元素的顯示或隱藏狀態

 $(selector).fadeToggle('fast',function(){});

(4)改變不透明度到某個值

      與淡入淡出的區別:淡入淡出只能控制元素的不透明度從完全不透明到完全透明;而fadeTo可以指定元素不透明度的具體值。並且時間參數是必需的!

 作用:調節匹配元素的不透明度

 $(selector).fadeTo(1000, .5); 參1:時長,參2:不透明值、 0全透,1全不透

有規律的體現:

jQuery提供的這幾個動畫效果控制的CSS屬性包括:高度、寬度、不透明度。{height:400px;width:300px; opacity:.4;}這三個CSS屬性的共性是:屬性值只有一個,並且這個值是數值(去掉單位後)。

4、自定義動畫

注意:所有能夠執行動畫的屬性必須只有一個數字類型的值。

$(selector).animate({params},speed,callback);

作用:執行一組CSS屬性的自定義動畫

參1:要執行動畫的CSS屬性(必選)

參2:執行動畫時長(可選)

參3:動畫執行完後立即執行的回調函數(可選)

5、stop()停止動畫

$(selector).stop(clearQueue,jumpToEnd);

參1:是否清空所有的後續動畫

參2:是否立即執行完當前正在執行的動畫

解釋:

當調用stop()方法後,隊列裏面的下一個動畫將會立即開始。但是,如果參數clearQueue被設置爲true,那麼隊列面剩餘的動畫就被刪除了,並且永遠也不會執行。

如果參數jumpToEnd被設置爲true,那麼當前動畫會停止,但是參與動畫的每一個CSS屬性將被立即設置爲它們的目標值。比如:slideUp()方法,那麼元素會立即隱藏掉。如果存在回調函數,那麼回調函數也會立即執行。

注意:如果元素動畫還沒有執行完,此時調用sotp()方法,那麼動畫將會停止。並且動畫沒有執行完成,那麼回調函數也不會被執行。

五、jQuery節點操作

1、操作元素節點(掌握)

(1)動態創建元素

      varspanNode = $(“<span>我是一個span元素</span>”);

(2)添加元素append() 參數jQuery對象

      $(selector).append($node);//在$(selector)中追加$node

      作用:在被選元素的最後一個子元素(或內容)後面插入內容(頁面中存在或者創建出來的元素都可以)

如果是頁面中存在的元素,那麼調用append()後,會把這個元素從原先的位置移除,然後再插入到新  的位置。如果是給多個目標追加一個元素,那麼append()方法的內部會複製多份這個元素,然後追加到多個目標裏面去。

(3)$(selector).append('<div></div>');//在$(selector)中追加div元素,參數爲htmlString

 ①appendTo()

$(selector).appendTo(node);把$(selector)追加到node中去

 ②prepend()

$(selector).prepend(node);作用:在元素的第一個子元素前面追加內容或節點

 ③after()

$(selector).after(node);作用:在被選元素之後,作爲兄弟元素插入內容或節點

 ④before()

$(selector).before(node);作用:在被選元素之前,作爲兄弟元素插入內容或節點

(4)html創建元素(推薦使用,重點)

作用:①設置內容,參數爲普通字符串

        ②創建元素,如果傳入的是符合html規則的字符串,就會創建出相應的元素

$(selector).html(‘<span>傳智播客</span>’);// 動態創建元素

      ③獲取內容$(selector).html();// 獲取html內容,有什麼返回什麼

調用這個方法,首先會清空原來的內容,然後再設置新的內容

(5)清空元素

      $(selector).empty();//清空指定元素的所有子元素(光桿司令)// 沒有參數

$(selector).html(“”);//“自殺” 把自己(包括所有內部元素)從文檔中刪除掉

$(selector).remove();

(6)複製元素

       (selector).clone();// 複製$(selector)所匹配到的元素// 返回值爲複製的新元素

總結:推薦使用html(“<span></span>”)方法來創建元素或者html(“”)清空元素

2、操作form表單

(1)屬性操作

①設置屬性:

$(selector).attr("title",''美女");參1:要設置的屬性名稱,參2:屬性值,參2不存在返回屬性對應的值

$(selector).prop();參2不存在返回false

用法和attr 一樣,設置input和button的disabled屬性,以及checkbox的checked屬性、selected屬性,這幾種動態改變的屬性必須用prop

②獲取屬性:

$(selector).attr(“title”);參數:要獲取的屬性的名稱,返回要獲取的屬性對應的值

此時,返回指定屬性的值

③移除屬性:

$(selector).removeAttr(“title”);// 參數爲:要移除的屬性的名稱

④:selected 選擇selected中被選中的元素

注意:設置selected、checked、disabled要使用.prop()方法。

(2)值和內容

①val()方法:

作用:設置或返回表單元素的值,例如:input,select,textarea的值

$(selector).val();//獲取匹配元素的值,只匹配第一個元素

$(selector).val(“具體值”);// 設置所有匹配到的元素的值

另外:val()能使select、checkBox、radio相應的選項被選中   val(' 上海 ');

②text() 方法:

作用:設置或獲取匹配元素的文本內容

$(selector).text();//獲取操作不帶參數(注意:這時候會把所有匹配到的元素內容拼接爲一個字符串)

$(selector).text(“我是內容”);//參數表示要設置的文本內容,會清空原有內容

3、尺寸位置操作

(1)高度操作height() :作用:設置或獲取匹配元素的高度值

$(selector).height(200);//帶參數表示設置高度         $(selector).height();//不帶參數獲取高度

(2)寬度操作width() :作用:設置或獲取匹配元素的寬度值

       (selector).width(200);//帶參數表示設置寬度   $(selector).width();//不帶參數獲取寬度

(3)座標值操作

①offset() 作用:獲取或設置元素相對於文檔左上角的位置

$(selector).offset();//無參數表示獲取,返回值爲:{top:num,left:num},值是相對於document的位置

$(selector).offset({left:100,top: 150});// 設置,參數數值類型不帶單位

如果沒有定位,會設置position:relative,如果有非static,則不會設置,但會把原來的值給覆蓋掉

注意點:設置offset後,如果元素沒有定位(默認值:static),則被修改爲relative

②scrollTop() 作用:獲取或者設置元素垂直方向滾動的位置

$(selector).scrollTop();//無參數表示獲取偏移

$(selector).scrollTop(100);//有參數表示設置偏移,參數爲數值類型

對scrollTop的理解:

垂直滾動條位置是可滾動區域在可視區域上方的被隱藏區域的高度。

如果滾動條在最上方沒有滾動或者當前元素沒有出現滾動條,那麼這個距離爲0

③scrollLeft() 作用:獲取或者設置元素水平方向滾動的位置

$(selector).scrollLeft(100);

六、jQuery事件機制(重點)

jQuery的事件機制,指的是:jQuery對JavaScript操作DOM事件的封裝,包括了:事件綁定、事件解綁、事件觸發。

1、事件綁定

簡單事件綁定 >> bind事件綁定 >> delegate事件綁定 >> on【重點】

1、簡單事件綁定:VC

click()                 單擊事件

mouseenter()      鼠標進入事件

mouseleave()       鼠標離開事件

dbclick()             雙擊事件

change()           改變事件,如:文本框值改變,下拉列表值改變等

focus()                獲得焦點事件

blur()                  失去焦點事件

keydown()           鍵盤按下事件

2、on方式

語法:$(selector).on(events,[selector],[data],function());

// 第一個參數:events,綁定事件的類型

// 第二個參數:selector, 執行事件的後代元素

// 第三個參數:data,傳遞給處理函數的數據,事件觸發的時候通過event.data來使用(用處不大)

// 第四個參數:function(),事件處理函數

綁定多個事件

$(selector).on(“clickmouseenter”, function(){});

表示給$(selector)匹配的元素綁定單擊和鼠標進入事件

2、事件解綁off

off解綁on方式綁定的事件(重點)。

$(selector).off(); 解綁匹配元素的所有事件

$(selector).off(“click”);解綁匹配元素的所有click事件,自身的和動態的。

$(selector).off(“click”,“**”);參1:要解綁的事件,參2:解綁動態創建的事件。自身綁定的事件還在

3、事件觸發

事件觸發的時候只會觸發當前元素被執行的事件,單擊按鈕觸發div的單擊事件

1、$(selector).click();簡單事件觸發,觸發 click事件

2、trigger()方法觸發事件,觸發瀏覽器的默認行爲

$("button").on("click",function(){

$("div").trigger("click");

});

$(selector).trigger(“click”);參數:要觸發事件的名稱

3、triggerHandler觸發事件響應方法,不觸發瀏覽器行爲

$(selector).triggerHandler(“focus”);比如:文本框獲得焦點是瀏覽器的默認行爲

4、事件對象

$(function(event){}): event  事件對象

event.data                        傳遞給事件處理程序的額外數據

event.delegateTarget      代理綁定事件的元素

event.currentTarget       綁定事件的元素,等同於this,this:哪個元素觸發的事件,this就指向這個元素

event.target                     觸發事件的元素,不一定===this

event.pageX                      鼠標相對於頁面的位置

event.clientX                    距離瀏覽器的位置      

event.screenX                  相對於電腦屏幕

event.offsetX                   相對於定位的父元素,或者body

event.stopPropagation();阻止事件冒泡

event.preventDefault();   阻止瀏覽器默認行爲

event.type                        事件類型:click,dbclick…

event.which                      鼠標的按鍵類型:左1 中2 右3

event.keyCode                  鍵盤按鍵代碼

事件執行的順序:

如果是單擊的按鈕,首先會觸發按鈕的單擊事件,然後再觸發div的單擊事件

阻止事件冒泡:

event.stopPropagation();阻止事件冒泡

return false; 同時具有阻止冒泡和阻止默認行爲的功能

5、鏈式編程

鏈式編程代碼示例:

$(“li”).parent(“ul”).parent(“div”).siblings(“div”).children(“div”).html(“內容”);

鏈式編程原理:return this;

通常情況下,只有設置操作才能把鏈式編程延續下去。因爲獲取操作的時候,會返回獲取到的相應的值,無法返回 this。

end(); // 結束當前鏈最近的一次過濾操作,並且返回匹配元素之前的一次狀態

6、隱式迭代

// 設置操作$(“div”).css(“color”,“red”);

// 獲取操作$(“div”).css(“color”);// 返回第一個元素的值

1、隱式迭代的意思是:在方法的內部會爲匹配到的所有元素進行循環遍歷,不用我們再進行循環

如果獲取的是多元素的值,大部分情況下返回的是第一個元素的值。

2、each方法

大部分情況下是不需要使用each方法的,因爲jQuery的隱式迭代特性。

如果要對每個元素做不同的處理,這時候就用到了each方法

作用:遍歷jQuery對象集合,爲每個匹配的元素執行一個函數

$(selector).each(function(index,element){});參1:當前元素在所有匹配元素中的索引號,參2:當前元素(DOM對象)

7、多庫共存(瞭解)

此處多庫共存指的是:jQuery佔用了$ 和jQuery這兩個變量。當在同一個頁面中引用了jQuery這個js庫,並且引用的其他庫(或者其他版本的jQuery庫)中也用到了$或者jQuery這兩個變量,那麼,要保證每個庫都能正常使用,這時候就有了多庫共存的問題。

 

// 模擬另外的庫使用了 $ 這個變量

// 此時,就與jQuery庫產生了衝突

var $ = { name : “itecast” };

 

解決方式:$.noConflict();

// 作用:讓jQuery釋放對$的控制權,讓其他庫能夠使用$符號,達到多庫共存的目的。此後,只能使用jQuery來調用jQuery提供的方法

 

8、jQuery插件機制

第三方插件

jQuery.color.js

       animate()自定義動畫:不支持背景的動畫效果

  animate動畫支持的屬性列表

使用步驟:

1.引入jQuery文件

2.引入插件

3.使用插件

全局jQuery函數擴展方法

$.pluginName =function() {};

jQuery對象擴展方法

$.fn. pluginName =function() {};

七、jQuery面試題

25、簡述在jQuery.eq().get()的異同?

相同:

get() :取得其中一個匹配的元素。數字序號表示取得第幾個匹配的元素

eq():獲取第N個元素,下標都是從0開始,用法基本相同。

不同:

eq返回的是一個jquery對象;返回的是jQuery對象,就可以繼續調用其他方法。

get返回的是一個html 對象數組;不能調用jQuery的其他方法;

2、jQuery各個版本有哪些差異?

目前jQuery有三個大版本:

1.x:兼容ie678,使用最爲廣泛的,官方只做BUG維護,功能不再新增。因此一般項目來說,使用1.x版本就可以了,最終版本:1.12.4 (2016年5月20日)

2.x:不兼容ie678,很少有人使用,官方只做BUG維護,功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x,最終版本:2.2.4 (2016年5月20日)

3.x:不兼容ie678,只支持最新的瀏覽器。除非特殊要求,一般不會使用3.x版本的,很多老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。

 

3、原生JSwindow.onloadJquery$(document).ready(function(){})$(function(){})有什麼不同?

1.執行時間

window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行。$(document).ready()是DOM結構繪製完畢後就執行,不必等到加載完畢。

1.編寫個數不同

window.onload不能同時編寫多個,如果有多個window.onload方法,只會執行一個$(document).ready()可以同時編寫多個,並且都可以得到執行

2.簡化寫法

window.onload沒有簡化寫法$(document).ready(function(){})可以簡寫成$(function(){});

4Jquery.on這個方法怎麼看?

答: jQuery.on()方法可以給匹配元素(可以是多個)綁定一個或多個函數, off 可以解除綁定。

5JqueryjQueryUI有啥區別?

*jQuery是一個js庫,主要提供的功能是選擇器,屬性修改和事件綁定等等。 
       *jQuery UI則是在jQuery的基礎上,利用jQuery的擴展性,設計的插件。 提供了一些常用的界面元素,諸如對話框、拖動行爲、改變大小行爲等等

6、描述一下.attr()和.prop()方法的區別。

.attr()方法是操作屬性節點,.prop()方法是操作獲取到的對應js對象的屬性。在遇到要獲取或設置checked、selected、readonly和disabled等屬性時,用prop方法顯然更好。.prop()方法更高效,因爲.attr()方法要訪問DOM。

 

 

 

第7章HTML5+CSS3

一、HTML5新增標籤和重新定義的標籤

1、結構標籤  (重點)

塊級元素,有意義的div

<article>     定義一篇文章,強調獨立性

<header>    定義一個頁面或一個區域的頭部
       <nav>       定義導航鏈接

<section>    定義一個區域,例如將一塊內容分成幾段

<aside>      定義頁面內容部分的側邊欄
       <hgroup>    定義文件中一個區塊的相關信息,裏面放h系列的標籤,最好h3

<figure>      定義一組媒體內容以及它們的標題

<figcaption>  定義figure元素的標題

<footer>        定義一個頁面或一個區域的底部

<dialog>         定義一個對話框類似微信

2、多媒體標籤(掌握)

<video>   定義一個視頻

<audio>   定義音頻內容

<source> 定義媒體資源

<canvas> 定義圖片

<embed> 定義外部的可交互的內容或插件  比如 flash

3、Web 應用標籤(瞭解)

<menu>          命令列表

<menuitem>   menu命令列表標籤(嵌入系統)

<command>    menu標記定義一個命令按鈕

<meter>   實時狀態顯示:氣壓、氣溫(狀態標籤)

屬性:min、max、value、low、high  value在low和high中間正常,之外會變色警告

<progrss>  任務過程:安裝、加載(狀態標籤)進度條

<datalist>  爲input標記定義一個下拉列表,配合option

<detalis>   標記定義一個元素的詳細內容,配合dt、dd,有下拉框

4、註釋標籤

<ruby>  定義註釋或音標

<rp>    告訴那些不支持Ruby元素的瀏覽器如何去顯示,註釋括號

<rt>       定義對ruby的註釋內容文本,註釋在ruby上面就像漢語漢字上的拼音

5、其他標籤

<keygen>       定義表單裏一個生成的鍵值(加密信息傳送)

<mark>          定義有標記的文本(黃色選中狀態)

<output>        定義一些輸出類型,計算表單結果配合oninput事件

6、重新定義的標籤

<dd> 問題

<dt>        描述

<hr>        表示主題結束,是一條水平線

<small>          表示小字體,例如註釋或者法律條款

<menu>          定義用戶界面的菜單,配合commond或者menuitem使用

 

二、HTML5視頻、音頻播放事件屬性與API控件

1、video、audio標籤

<video src ="movie.mp4" controls = "controls"><video>

或者<video controls= "controls">

<source src ="movie.mp4">

<video>

屬性

描述

autoplay

autoplay(可省略)

視頻自動播放

controls

controls(可省略)

向用戶顯示播放控件

width

px

播放器寬度

height

px

播放器高度

loop

loop、數字

播放完是否繼續播放、播放次數

preload

proload

是否等待加載完再播放

src

url

視頻url地址

poster

imgurl

加載等待的畫面圖片

autobuffer

autobuffer

設置爲瀏覽器緩衝方式,不設置autoplay時有效

2、HTML5視頻API控件

(1)獲得video標籤

①通過DOM對象          varvideo = document.getElementById("videoID");

②通過jQuery 的方法  varvideo = $("#videoID")[0];

video標籤的屬性

載入視頻:load()

播放視頻:play()

暫停:pause()

快進10秒:currentTime +=10

播放速度增加:playbackRate ++

播放速度增加0.1:playbackRate += 0.1

音量增加:volume += 0.1

靜音:muted = true

(3)事件

canplay 

duration 媒體長度

timeupdate  媒體當前位置

三、表單

1、表單輸入類型

類型

使用示例

含義

email

<input type="email">

輸入郵箱格式

tel

<input type="tel">

輸入手機號碼格式

url

<input type="url">

輸入url格式

number

<input type="number">

輸入數字格式

search

<input type="search">

搜索框(體現語義化)

range

<input type="range">

自由拖動滑塊

color

<input type="color">

拾色器

time

<input type="time">

小時

date

<input type="date">

年月日

datetime

<input type="datetime">

時間輸入框

month

<input type="month">

年月

week

<input type="week">

年周

 

2、表單元素

元素

含義

<datalist>

數據列表

<keygen>

生成加密字符串

<output>

輸出結果

<meter>

度量器

3、表單屬性

屬性

用法

含義

placeholder

<input type="text" placeholder="請輸入用戶名">

佔位符

autofocus

<input type="text" autofocus>

自動獲得焦點

multiple

<input type="file" multiple>

多文件上傳

autocomplete

<input type="text" autocomplete="off"> 值:off、on

自動完成

form

<input type="text" form="某表單ID">

 

novalidate

<form novalidate></form>

關閉驗證

required

<input type="text" required>

必填項

pattern

<input type="text" pattern="\d">

自定義驗證


四、DOM擴展

1、獲取元素

①document.getElementsByClassName('class') 通過類名獲取元素,以僞數組形式存在。

②document.querySelector('selector')通過CSS選擇器獲取元素,符合匹配條件的第1個元素。

③document.querySelectorAll('selector')通過CSS選擇器獲取元素,以僞數組形式存在。

2、類名操作

①Node.classList.add('class')添加class

②Node.classList.remove('class')移除class

③Node.classList.toggle('class')切換class,有則移除,無則添加

④Node.classList.contains('class')檢測是否存在class

Node指一個有效的DOM節點,是一個通稱。

3、自定義屬性

在HTML5中我們可以自定義屬性,其格式如下data-*="",例如

data-info="我是自定義屬性",通過Node.dataset['info'] 我們便可以獲取到自定義的屬性值。

Node.dataset是以對象形式存在的,當我們爲同一個DOM節點指定了多個自定義屬性時,Node.dataset則存儲了所有的自定義屬性的值。

假設某元素 <divid="demo" data-name="itcast" data-age="10">

var demo = document.querySelector('#demo');

1、讀取自定義屬性 demo.dataset(所有的屬性及屬性值)或者demo.dataset['age'](age屬性的值)

2、設置demo.dataset['name']= 'web developer'

五、新增API

1、網絡狀態(瞭解)

window.online 用戶網絡連接時被調用

window.offline 用戶網絡斷開時被調用

2、全屏
       Node.requestFullScreen() 開啓全屏顯示

document.cancelFullScreen()關閉全屏顯示,只能通過document才能關閉
       document.fullScreen檢測當前是否處於全屏

全屏僞類選擇器

:full-screen .box{}、:-webkit-full-screen{}、:moz-full-screen {}

3、文件讀取(掌握)

通過FileReader對象我們可以讀取本地存儲的文件,使用 File 對象來指定所要讀取的文件或數據。其中File對象可以是來自用戶在一個 <input> 元素上選擇文件後返回的FileList 對象,也可以來自由拖放操作生成的  DataTransfer

實例化一個讀取器:var reader = newFileReader();

讀取文件reader.readAsDateURL();

 reader.readAsBinaryString();

                      reader.readAsTEXT();
        事件監聽onload 當文讀取完成時調用

屬性result 文件讀取結果

4、拖拽(掌握)

①拖拽元素:頁面中設置了draggable="true"屬性的元素,其中<img>、<a>標籤默認是可以被拖拽的

②目標元素:頁面中任意的元素

③事件監聽:根據元素類型不同,需要設置不同的事件監聽

  a拖拽元素

ondrag 應用於拖拽元素,整個拖拽過程都會調用

ondragstart  應用於拖拽元素,當拖拽開始時調用,只觸發一次

ondragleave  應用於拖拽元素,當鼠標離開拖拽元素時調用

ondragend     應用於拖拽元素,當拖拽結束時調用

  b目標元素

ondragenter 應用於目標元素,當拖拽元素進入時調用

ondragover   應用於目標元素,當停留在目標元素上時調用,

ondrop          應用於目標元素,當在目標元素上鬆開鼠標時調用

ondragleave  應用於目標元素,當鼠標離開目標元素時調用

 

5、地理定位(瞭解)

①獲取當前地理信息(只獲取一次)

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)

②重複獲取當前地理信息(多次)

navigator.geolocation.watchPosition(successCallback, errorCallback, options)

當成功獲取地理信息後,會調用succssCallback,並返回一個包含位置信息的對象position。

position.coords.latitude緯度

position.coords.longitude經度

position.coords.accuracy精度

position.coords.altitude海拔高度

當獲取地理信息失敗後,會調用errorCallback,並返回錯誤信息error

可選參數 options 對象可以調整位置信息數據收集方式

a)enableHighAccuracy 高精度模式 true、false

b) timeout 超時設置,單位爲ms

c) maximumAge表示瀏覽器重新獲取位置信息的時間間隔,單位爲ms

 

6、歷史管理(瞭解)

提供window.history,對象我們可以管理歷史記錄,可用於單頁面應用,Single PageApplication,可以無刷新改變網頁內容。

①pushState(data, title, url) 追加一條歷史記錄

       data對象,用於存儲自定義數據,通常設爲null

       title網頁標題,基本上沒有被支持,一般設爲空

       url 以當前域爲基礎增加一條歷史記錄,不可跨域設置

②replaceState(data, title, url) 與pushState()基本相同,不同之處在於replaceState(),只是替換當前url,不會增加/減少歷史記錄。

③事件監聽

onpopstate事件,當前進或後退時則觸發,通過事件對象ev.state可以讀取到存儲的數據。

7、Web存儲(本地存儲)(重點)

①  a、設置、讀取方便

b、容量較大,sessionStorage約5M、localStorage約20M

c、只能存儲字符串,可以將對象JSON.stringify() 編碼後存儲

②window.sessionStorage

a、生命週期爲關閉瀏覽器窗口

b、在同一個窗口下數據可以共享

③window.localStorage

a、永久生效,除非手動刪除

b、可以多窗口共享

方法詳解

setItem(key, value)設置存儲內容

getItem(key) 讀取存儲內容

removeItem(key) 刪除鍵值爲key的存儲內容

clear() 清空所有存儲內容

key(n) 以索引值來獲取存儲內容

其它

WebSQL、IndexDB

8、應用緩存

HTML5中我們可以輕鬆的構建一個離線(無網絡狀態)應用,只需要創建一個cache manifest文件。

①優勢

a、可配置需要緩存的資源

b、網絡無連接應用仍可用

c、本地讀取緩存資源,提升訪問速度,增強用戶體驗

d、減少請求,緩解服務器負擔

②緩存清單

一個普通文本文件,其中列出了瀏覽器應緩存以供離線訪問的資源,推薦使用.appcache爲後綴名,添加MIME類型

AddTypetext/cache-manifest .appcache

例如我們創建了一個名爲demo.appcache的文件,然後在需要應用緩存在頁面的根元素(html)添加屬性manifest="demo.appcache",路徑要保證正確。

③manifest文件格式

a、頂行寫CACHE MANIFEST

b、CACHE: 換行指定我們需要緩存的靜態資源,如.css、image、js等

c、NETWORK: 換行指定需要在線訪問的資源,可使用通配符

d、FALLBACK: 換行當被緩存的文件找不到時的備用資源 ./online.html   ./offline.html

                          當online沒有用offline替換

④其他

b、可以指定多個CACHE: NETWORK:FALLBACK:,無順序限制

c、#表示註釋,只有當demo.appcache文件內容發生改變時或者手動清除緩存後,纔會重新緩存。

d、chrome 可以通過chrome://appcache-internals/工具和離線(offline)模式來調試管理應用緩存

9、多媒體

六、CSS3選擇器(重點)

1、屬性選擇器

①E[attr] 表示存在attr屬性即可;

②E[attr=val]  表示屬性值完全等於val;

③E[attr*=val] 表示在屬性值的“任意”位置包含val字符;

④E[attr^=val] 表示在屬性值的“開始”位置包含val字符;

⑤E[attr$=val] 表示在屬性值的“結束”位置包含val字符;

2、僞類選擇器

①以某元素相對於其父元素或兄弟元素的位置。

E:first-child第一個子元素

E:last-child最後一個子元素

E:nth-child(n) 第n個子元素

E:nth-last-child(n)同E:nth-child(n) 相似,只是倒着計算

②目標僞類選擇器

E:empty 選中沒有任何子節點的E元素;(使用不是非常廣泛)

E:target 結合錨點進行使用,處於當前錨點的元素會被選中;

E:not () 選中除了當前錨點的其他元素

3、僞元素選擇器

    E::first-letter文本的第一個單詞或字(如中文、日文、韓文等);

E::first-line 文本第一行;

E::selection 可改變選中文本的樣式;

是一個行內元素,需要轉換成塊元素

":" 與 "::" 區別在於區分僞類和僞元素,在開發中使用":";

七、css3顏色(瞭解)

RGBA、HSLA,可以設置顏色值的透明度,相較opacity,它們不具有繼承性,即不會影響子元素的透明度。

H 色調取值範圍0~360,0/360表示紅色、120表示綠色、240表示藍色

S 飽和度取值範圍0%~100%

L 亮度取值範圍0%~100%

A 透明度取值範圍0~1

關於透明度:

1、opacity只能針對整個盒子設置透明度,子盒子及內容會繼承父盒子的透明度;

2、transparent 不可調節透明度,始終完全透明background-color:transparent

八、文本(掌握)

text-shadow,可分別設置偏移量、模糊度、顏色(可設透明度)。

參1:水平偏移量正值向右負值向左;

參2:垂直偏移量正值向下負值向上;

參3:模糊度(模糊半徑)是不能爲負值;

參4:顏色

九、邊框(掌握)

邊框圓角:border-radius:0 0 0 0 / 0 0 0 0; 前四個是x軸圓角半徑,後面四個是Y軸圓角半徑

邊框陰影:border-shadow

參1、水平偏移量右正左負;

參2、垂直偏移量下正上負;

參3、模糊半徑是不能爲負值;

參4、顏色

參5、inset可以設置內陰影;

邊框圖片:border-image

參1:source:圖片路徑

參2:slice:切割,包含4參數(a,b,c,d)按照上右下左順序

參3:repeat是否平鋪包含三個值:stretch拉伸(默認值)、repeat重複、round平鋪

參4:width寬度

參5:偏移位置

十、盒模型(重點)

CSS3中可以通過box-sizing 來指定盒模型,即可指定爲content-box、border-box,這樣我們計算盒子大小的方式就發生了改變。

可以分成兩種情況:

1、box-sizing: border-box  計算方式爲content = width –border - padding

2、box-sizing: content-box  計算方式爲content = width

box-shadow屬性

取值:水平偏移量、垂直偏移量、模糊度、外延值、color、inset(內陰影)

box-reflect盒子倒影屬性:可以對盒子模型進行倒影設置。

       值: direction(above、below、left、right)、offset(圖片與倒影間隔)、mask-box-image(url)

十一、背景(掌握)

背景在CSS3中也得到很大程度的增強,比如背景圖片尺寸、背景裁切區域、背景定位參照點、多重背景等。

1、background-size設置背景圖片的尺寸

      cover會自動調整縮放比例,保證圖片始終填充滿背景區域,如有溢出部分則會被隱藏。

contain會自動調整縮放比例,保證圖片始終完整顯示在背景區域。

也可以使用長度單位或百分比

2、background-origin設置背景定位的原點

border-box  以邊框做爲原點;

padding-box 以內邊距做爲原點;

content-box 以內容區做爲原點;

3、background-clip設置背景圖片的裁切區域

border-box  裁切邊框以內爲背景區域;

padding-box裁切內邊距以內爲背景區域;

content-box 裁切內容區做爲背景區域;

background-break 設置背景圖片進行平鋪時的循環方式

bounding-box 在整個元素中進行平鋪

each-box 在每一行中進行平鋪

continuous 下一行中的圖像緊接着上一行中的圖像繼續平鋪

十二、漸變(掌握)

1、線性漸變

linear-gradient線性漸變指沿着某條直線朝一個方向產生漸變效果。

取值:方向、起止色、漸變範圍

 

2、徑向漸變

radial-gradient徑向漸變指從一箇中心點開始沿着四周產生漸變效果

取值:圓半徑、圓中心、起止色、漸變範圍

十三、過渡(重點)

過渡可以實現元素不同狀態間的平滑過渡(補間動畫),經常用來製作動畫效果。

幀動畫:通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片

 

補間動畫:自動完成從起始狀態到終止狀態的的過渡。

特點:當前元素只要有“屬性”發生變化時,可以平滑的進行過渡。e

過渡屬性在A、B狀態都可以,如果都要慢慢變化就設在A上,hover或者JS添加class     

簡寫:第一個時間是執行時間,第二個是延遲時間,其他的沒有順序要求,但是最好按照下面的順序書寫

transition-property設置過渡屬性

取值:none   沒有元素

  all 所有元素

   index 指定的css屬性

transition-duration設置過渡時間,從舊屬性轉換到新屬性花費的事件

transition-delay設置過渡動畫延遲時間

transition-timing-function設置過渡速度(幾個取值肉眼很難看出來區別)

取值:ease  緩解效果,等同於cubic-bezier(0.25,0.1, 0.25, 1.0)函數,即立方貝塞爾

  linear 線性效果,等同於cubic-bezier(0.0,0.0, 0.1, 1.0)函數

  ease-in  漸顯效果,等同於cubic-bezier(0.42,0, 1.0, 1.0)函數

  ease-out 漸隱效果,等同於cubic-bezier(0, 0,0.58, 1.0)函數

  ease-in-out 漸顯漸隱效果,等同於cubic-bezier(0.42, 0, 0.58, 1.0)函數

  cubic-bezier 特殊的立方貝塞爾曲線

十四、轉換(掌握)

  1、2D轉換

transform:用來設置2D或3D轉換

轉換可以實現元素的位移、旋轉、變形、縮放,甚至支持矩陣方式

①移動 translate(x, y) 改變元素的位置,相對原來的位置的變化,如果爲百分比則是相對於盒子的大小;

translate3d(x,y,z)  3d空間的位置移動

②縮放 scale(x, y) 水平和垂直方向的縮放,x、y的取值可爲小數,如果只有一個參數即縮放的倍數;

③旋轉 rotate(deg) 可以對元素進行旋轉,正值爲順時針,負值爲逆時針;旋轉時元素的座標也會跟着改變

④傾斜 skew(Ydeg, Xdeg) 可以使元素按一定的角度進行傾斜,會改變元素的形狀

⑤矩陣變換matrix(x, y) 改變元素的位置

  2、3D轉換

(1)3D座標軸

用X、Y、Z分別表示空間的3個維度,三條軸互相垂直。如下圖

 

(2)3D呈現

transform-style:preserve-3D;內嵌元素,並且必須經過Z變形(transform)

透視

perspective :輔助性幫我們去理解元素在轉換過程中的視覺效果

(0-1000)設置給父盒子,值越大,效果越不明顯,看起來近大遠小

3、backface-visibility

設置元素背面是否可見

十五、動畫(重點)

1、定義動畫序列:

a、通過@keyframes指定動畫序列名稱,主要先定義再調用;

b、通過百分比將動畫序列分割成多個節點;(0%-100%、from-to)

c、在各節點中分別定義各屬性

d、通過animation將動畫應用於相應元素;

2、調用:animation

a、animation-name設置動畫名稱

b、animation-duration動畫持續時間

c、animation-delay動畫延時時間

d、animation-timing-function動畫執行速度,linear(勻速)、ease等

e、animation-play-state動畫播放狀態,play、paused(暫停)、running等

f、animation-direction動畫播放方向,默認值normal,alternate動畫逆播(動畫先正向播放再反向播放)

g、animation-fill-mode動畫執行完畢後狀態,forwards(結束時的狀態)backwards(執行之前的狀態)等

h、animation-iteration-count動畫執行次數,infinite(無限次)等

i、steps(60) 表示動畫分成60步完成

十六、伸縮佈局:控制元素對齊方式(掌握)

主軸:Flex容器的主軸主要用來配置Flex項目,默認是水平方向

側軸:與主軸垂直的軸稱作側軸,默認是垂直方向的

方向:默認主軸從左向右,側軸默認從上到下

主軸和側軸並不是固定不變的,通過flex-direction可以互換。

 

1、必要元素:

a、指定一個盒子爲伸縮盒子 display: flex(父元素)

b、設置屬性來調整此盒的子元素的佈局方式例如 flex-direction

c、明確主側軸及方向

2、各屬性詳解

a、flex-direction調整主軸方向(默認爲水平方向)

row、column、row-reverse行倒序排列、column-reverse列倒序排列

b、justify-content調整主軸對齊

flex-start、flex-end、center、space-between、 space-around

c、align-items調整側軸對齊

flex-start、flex-end、center、flex-stretch、space-between、 space-around

d、flex-wrap控制是否換行

nowrap、wrap

e、align-content堆棧(由flex-wrap:wrap產生的獨立行)對齊

flex-start 、flex-end、center

space-around  行平均分佈、space-between 兩端對齊、space-streach  拉伸對齊

f、flex-flow是flex-direction、flex-wrap的簡寫形式

g、flex控制子元素的縮放比例,分配的是剩餘空間(獨立屬性)

h、order控制子元素的排列順序

十七、多列布局(瞭解)

-webkit-columns-width定義每列的寬度

-webkit-count 定義列數

-webkit-column-gap 定義兩欄之間的間距uii

屬性:length 長度 = column-rule-length

         style 樣式 =column-rule-style

   color 顏色 =column-rule-color

 -webkit-column-rule  設置列之間的分割線

 -webkit-column-span 定義跨列顯示  默認1,all 橫跨所有列

 -webkit-column-fill 定義列的高度是否統一,auto,balance 統一設置成內容最多的那一列的高度

十八、web字體(掌握)

@font-face 指定自定義字體

font-family 給自定義字體起名字 

src : url () 引入字體文件

十九、兼容性(瞭解)

通過http://caniuse.com/可查詢CSS3各特性的支持程度,一般兼容性處理的常見方法是爲屬性添加私有前綴,如不能解決,應避免使用,無需刻意去處理CSS3的兼容性問題。

二十、H5C3面試題

1、請描述一下cookiessessionStoragelocalStorage的區別

sessionStorage用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。       localStorage用於持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。 web storage和cookie的區別 Web Storage的概念和cookie相似,區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的,並且每次你請求一個新的頁面的時候Cookie都會被髮送過去,這樣無形中浪費了帶寬,另外cookie還需要指定作用域,不可以跨域調用。除此之外,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie需要前端開發者自己封裝setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是與服務器進行交互,作爲HTTP規範的一部分而存在,而Web Storage僅僅是爲了在本地“存儲”數據而生。

2html5有哪些新特性、移除了那些元素?如何處理HTML5新標籤的瀏覽器兼容問題?   HTML5 現在已經不是 SGML 的子集,主要是關於圖像,位置,存儲,多任務等功能的增加。

  拖拽釋放(Drag and drop) API

  語義化更好的內容標籤(header,nav,footer,aside,article,section)

  音頻、視頻API(audio,video)

  畫布(Canvas) API

  地理(Geolocation) API

  本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉後數據不丟失;sessionStorage 的數據在瀏覽器關閉後自動刪除

  表單控件,calendar、date、time、email、url、search

  新的技術webworker,websocket, Geolocation

 

      移除的元素

純表現的元素:basefont,big,center,font, s,strike,tt,u;

對可用性產生負面影響的元素:frame,frameset,noframes;

3、如何處理HTML5新標籤的瀏覽器兼容問題?

支持HTML5新標籤:

    IE8/IE7/IE6支持通過document.createElement方法產生的標籤,可以利用這一特性讓這些瀏覽器支持HTML5新標籤,當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

       <!--[if lt IE 9]>

                <script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

       <![endif]-->

 

4CSS 選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算? CSS3新增僞類有那些?

    1.id選擇器( # myid)

    2.類選擇器(.myclassname)

    3.標籤選擇器(div, h1, p)

    4.相鄰選擇器(h1 + p)

    5.子選擇器(ul > li)

    6.後代選擇器(li a)

    7.通配符選擇器( * )

    8.屬性選擇器(a[rel ="external"])

    9.僞類選擇器(a: hover, li:nth-child)

優先級爲:

!important > id> class > tag

CSS3新增僞類舉例:

    p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。

    p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。

    p:only-of-type  選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。

    p:only-child    選擇屬於其父元素的唯一子元素的每個 <p> 元素。

    p:nth-child(2)  選擇屬於其父元素的第二個子元素的每個 <p> 元素。

    :enabled :disabled 控制表單控件的禁用狀態。

    :checked  單選框或複選框被選中。

5、什麼是 FOUC(無樣式內容閃爍)?你如何來避免 FOUC

 FOUC - Flash Of Unstyled Content 文檔樣式閃爍

     <style type="text/css"media="all">@import "../fouc.css";</style>

而引用CSS文件的@import就是造成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM,然後再去導入外部的CSS文件,因此,在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的,這段時間的長短跟網速,電腦速度都有關係。

解決方法簡單的出奇,只要在<head>之間加入一個<link>或者<script>元素就可以了。

6、介紹一下box-sizing屬性?

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。

content-box:讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定,設置width/height屬性指的是content部分的寬/高

border-box:讓元素維持IE傳統盒模型(IE6以下版本和IE6~7的怪異模式)。設置width/height屬性指的是border + padding +content

標準瀏覽器下,按照W3C規範對盒模型解析,一旦修改了元素的邊框或內距,就會影響元素的盒子尺寸,就不得不重新計算元素的盒子尺寸,從而影響整個頁面的佈局。

7、’data-’屬性的作用是什麼?如何獲取’data-’屬性的值?

答:data-屬性是H5中的,用來自定義屬性,通過dataset屬性獲取。不是所有的瀏覽器都支持,不支持用getAttribute獲取。

 

第8章canvas標籤(瞭解)

一、canvas主要屬性和方法

屬性

描述

width

設置canvas的寬度

height

設置canvas的長度

 

方法

描述

save()

保存當前環境的狀態

restore()

返回之前保存過的路徑狀態和屬性

createEvent()

 

getContext()

返回一個對象,指出訪問繪圖功能必要的API

toDataURL()

返回canvas圖像的URL

二、顏色、樣式和陰影屬性和方法

屬性

方法

fillStyle

設置或返回  填充繪畫的顏色、漸變或模式

strokeStyle

設置或返回  筆觸的顏色、漸變或模式

shadowColor

設置或返回  陰影的顏色

shadowBlur

設置或返回用於陰影的模糊級別

shadowOffsetX

設置或返回陰影距形狀的水平距離

shadowOffsetY

設置或返回陰影距形狀的垂直距離

方法

描述

createLinearGradient()

創建線性漸變(用在畫布內容上)

createPattern()

在指定的方向上重複指定的元素

createRadialGradient()

創建放射狀/環形的漸變(用在畫布內容上)

addColorStop()

規定漸變對象中的顏色和停止位置

三、線條樣式屬性和方法

屬性

描述

lineCap

設置或返回線條的結束端點樣式

lineJoin

設置或返回兩條線相交時,所創建的拐角類型

lineWidth

設置或返回當前的線條寬度

miterLimit

設置或返回最大斜接長度

四、矩形方法

方法

描述

rect()

創建矩形

fillRect()(建議使用這種方式畫矩形)

繪製"被填充"的矩形

strokeRect()

繪製矩形(無填充)

clearRect()

在給定的矩形內清除指定的像素

五、路徑方法

方法

描述

fill()

填充當前繪圖(路徑)

stroke()

繪製已定義的路徑

beginPath()

起始一條路徑,或重置當前路徑

moveTo()

把路徑移動到畫布中的指定點,不創建線條

closePath()

創建從當前點回到起始點的路徑

lineTo()

添加一個新點,創建從該點到最後指定點的線條

clip()

從原始畫布剪切任意形狀和尺寸的區域

quadraticCurveTo()

創建二次貝塞爾曲線

bezierCurveTo()

創建三次方貝塞爾曲線

arc()

創建弧/曲線(用於創建圓形或部分圓)

arcTo()

創建兩切線之間的弧/曲線

isPointInPath()

如果指定的點位於當前路徑中,返回布爾值

六、轉換方法

方法

描述

scale()

縮放當前繪圖至更大或更小

rotate()

旋轉當前繪圖

translate()

重新映射畫布上的 (0,0) 位置

transform()

替換繪圖的當前轉換矩陣

setTransform()

將當前轉換重置爲單位矩陣。然後運行 transform()

七、文本屬性和方法

屬性

描述

font

設置或返回文本內容的當前字體屬性

textAlign

設置或返回文本內容的當前對齊方式

textBaseline

設置或返回在繪製文本時使用的當前文本基線

 

方法

描述

fillText()

在畫布上繪製"被填充的"文本

strokeText()

在畫布上繪製文本(無填充)

measureText()

返回包含指定文本寬度的對象

八、圖像繪製方法

方法

描述

drawImage()

向畫布上繪製圖像、畫布或視頻  chrome不支持

1、像素操作方法和屬性

屬性

描述

width

返回 ImageData 對象的寬度

height

返回 ImageData 對象的高度

data

返回一個對象,其包含指定的 ImageData 對象的圖像數據

 

方法

描述

createImageData()

創建新的、空白的 ImageData 對象

getImageData()

返回 ImageData 對象,該對象爲畫布上指定的矩形複製像素數據

putImageData()

把圖像數據(從指定的 ImageData 對象)放回畫布上

2、圖像合成屬性

屬性

描述

globalAlpha

設置或返回繪圖的當前 alpha 或透明值

globalCompositeOperation

設置或返回新圖像如何繪製到已有的圖像上

3、其他方法

屬性

描述

globalAlpha

設置或返回繪圖的當前 alpha 或透明值

globalCompositeOperation

設置或返回新圖像如何繪製到已有的圖像上

智能表單的使用和規範

Input表單的type新屬性值

 

Type="email"

限制用戶輸入必須爲Email類型

Type="url"

限制用戶輸入必須爲URL類型

Type="date"

限制用戶輸入必須爲日期類型

Type="time"

限制用戶輸入必須爲時間類型O

Type="month"

限制用戶輸入必須爲月類型O

Type="week"

限制用戶輸入必須爲周類型O

Type="number"

限制用戶輸入必須爲數字類型

Type="range"

產生一個滑動條的表單

Type="search"

產生一個搜索意義的表單配合results="n"屬性 C

Type="color"

生成一個顏色選擇表單

新增的表單屬性

屬性

描述

required

required

表單擁有該屬性表示其內容不能爲空,必填

placeholder

提示文本

表單的提示信息,存在默認值將不顯

autofocus

autofocus

自動聚焦屬性,頁面加載完成自動聚焦到指定表單

Pattern

正則表達式

輸入的內容必須匹配到指定正則

css3新增的文本屬性

屬性

描述

text-overflow

設置或檢索是否使用一個省略標記(...)標示對象內文本的溢出

text-align

設置或檢索對象中文本的對齊方式

text-transform

檢索或設置對象中的文本的大小寫

text-decoration

複合屬性。檢索或設置對象中的文本的裝飾,如下劃線、閃爍等

text-decoration-line

檢索或設置對象中的文本裝飾線條的位置。

text-decoration-color

檢索或設置對象中的文本裝飾線條的顏色。

text-decoration-style

檢索或設置對象中的文本裝飾線條的形狀。

text-shadow

設置或檢索對象中文本的文字是否有陰影及模糊效果

text-fill-color

設置或檢索對象中的文字填充顏色

text-stroke

複合屬性。設置或檢索對象中的文字的描邊

text-stroke-width

設置或檢索對象中的文字的描邊厚度

text-stroke-color

設置或檢索對象中的文字的描邊顏色

tab-size

檢索或設置對象中的製表符的長度

word-wrap

設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行

text-overflow屬性

作用:設定內容溢出狀態下的文本處理方式。

取值:

clip:默認值

       當對象內文本溢出時不顯示省略標記(...),而是將    溢出的部分裁切掉。

ellipsis:

        當對象內文本溢出時顯示省略標記(...)。

 

注意:該屬性需要和over-flow:hidden屬性(超出處理)還有white-space:nowrap(禁止換行)配合使用,否則無法看到效果

text-align屬性

作用:設定文本對齊方式

取值:

left :默認值內容左對齊。

center:內容居中對齊。

right:內容右對齊。

justify:內容兩端對齊。寫本文檔時僅Firefox能看到正確效果

start:內容對齊開始邊界。(CSS3)

end:內容對齊結束邊界。(CSS3)

text-transform屬性

作用:設定文本的大小寫等形式的轉換

取值:

none:          默認值無轉換

capitalize:將每個單詞的第一個字母轉換成大寫

uppercase:轉換成大寫

lowercase:轉換成小寫

full-width:將左右字符設爲全角形式(CSS3)不支持

full-size-kana:將所有小假名字符轉換爲普通假名(CSS3)不支持

                 例如:土耳其語。

text-decoration屬性

作用:設定文本修飾線。

取值:

[text-decoration-line ]:不支持

      指定文本裝飾的種類。相當於CSS1時的text-decoration屬性

[text-decoration-style ]:不支持

       指定文本裝飾的樣式。

[text-decoration-color]:不支持

       指定文本裝飾的顏色。

blink:指定文字的裝飾是閃爍。  僅opera和firefox

例如:text-decoration :overline   CSS1實例

text-decoration : #F00 double overline  CSS3實例

備註:目前主要瀏覽器都沒有實現上述屬性,但是依然可以使用CSS1的實例方式

text-decoration-line屬性, 備註:目前大部分瀏覽器未實現該屬性。

作用:設定文本修飾線的位置。

取值:

none:默認值

       指定文字無裝飾

underline:

       指定文字的裝飾是下劃線

overline:

       指定文字的裝飾是上劃線

line-through:

       指定文字的裝飾是貫穿線

text-decoration-style屬性, 備註:目前大部分瀏覽器未實現該屬性。

作用:設定文本修飾線的樣式。

取值:

solid:默認值、實線

double:雙線

dotted:點狀線條

dashed:虛線

wavy:波浪線  

text-shadow屬性

作用:設定文本的陰影效果

取值:

none:默認值,無陰影

text-stroke屬性

作用:文本邊框顏色,指定文字描邊部分的顏色

取值:

[ text-stroke-width]:

       設置或檢索對象中的文字的描邊厚度

[ text-stroke-color]:

        設置或檢索對象中的文字的描邊顏色

tab-size屬性

作用:設定一個tab縮進鍵,在頁面中的顯示長度。

取值: 默認值:8

長度或者整數值

整數值 : z-index:1 此處的1就是整數值,不需要單位,類似倍數。

長度: margin:10px 此處的10px是長度值。
       注意:該屬性只在<pre>標籤之內(預格式化狀態)顯示纔會有效。因爲瀏覽器會自動忽略空白字符。

            opera和火狐瀏覽器需要使用瀏覽器私有前綴。

word-wrap屬性

作用:溢出文本(特指類英文文字)的處理方式。

取值:

normal:默認值

       允許內容頂開或溢出指定的容器邊界。

break-word:

        內容將在邊界內換行。如果需要,單詞內部允許斷行。

 

 

 

 

第9章移動web開發重難點

一、適配問題解決方案:流式佈局+ viewport(重點)

1、流式佈局

百分比佈局,通過設置盒子的寬度爲百分比來根據屏幕的大小進行伸縮,特點是不受固定像素的限制,內容向兩側填充

2、viewport

在移動端用來承載網頁的這個區域,就是我們的視覺窗口,也叫viewport(視口), 這個區域可設置高度寬度,可按比例放大縮小,而且能設置是否允許用戶自行縮放。

<meta name ="viewport">讓瀏覽器知道設置了viewport,viewport只在移動端識別

3、viewport參數

width:定義viewport的寬度,有一個特殊值 device-width當前設備的寬度

initial-scale:默認的初始縮放比

設置1.0,和PC端頁面的顯示比例一致,一比一顯示在移動端

user-scalable:是否允許用戶自行縮放 1-yes,0-no

maximum-scale:最大縮放比

minimum-scale:最小縮放比

4、構建標準的移動端web開發頁面

<meta name ="viewport" content = "width = device-width,initial-scale = 1.0,user-scalable = 0">

快捷鍵—meta:vp

二、在寫項目要注意的問題

base樣式定義:reset css 重置默認的、瀏覽器自帶的一些樣式(所有的標籤和僞類),目的是保持各種終端顯示一致

1、在移動端特殊的設置(瞭解)

①清楚點擊高亮效果

-webkit-tap-highlight-color:transparent;

②設置所有的盒子的寬度以邊框開始計算

在移動端通常使用的是百分比佈局,那麼這樣的佈局如果使用border或者padding會使容器的寬度超出屏幕的寬度產生滾動條。

-webkit-box-sizing:border-box;

box-sizing:border-box;

③清除input默認的樣式

-      webkit-appearance: none;

2、最小寬度、最大寬度的限制

min-width:300px; //適配小屏幕設備,爲了有較好的佈局效果。

max-width:640px;//保證頁面在尺寸比較大的設備當中保證頁面的效果也就是清晰度

3、物理像素和圖標模糊度問題

解決方案,採用壓縮圖標尺寸的方式來解決。

如果是Img使用直接設置寬高的方式來壓縮。

如果是背景使用的是設置background-size的方式來壓縮

4、搜索按鈕調用

在移動端調用輸入法,彈出的小鍵盤enter鍵會變成搜索按鈕

<form action ="#">

<input type ="search" placeholder = "提示" />

</form>

5、結構性僞類原則器---同類型選擇器

E:first-of-type匹配同類型中的第一個元素E。

E:last-of-type匹配同類型中的最後一個元素E。

E:nth-of-type(n) 匹配同類型中的第n個元素E。

三、Touch事件(重點)

1、touchstart:當手指觸碰到屏幕的時候觸發

      綁定事件的方法:dom.addEventListener("touchstart",function(e){});

事件返回的e對象包含那些移動端特有的屬性:

targetTouches 目標元素的所有當前觸摸

changedTouches 頁面上最新更改的所有觸摸

touches 頁面上的所有觸摸/2

2、touchmove:當手指在屏幕上滑動時連續觸發

綁定事件的方法:dom.addEventListener("touchmove",function(e){});
       事件返回的e對象包含那些移動端特有的屬性:

originalEvent 是jquery 封裝的事件。

targetTouches 目標元素的所有當前觸摸

changedTouches 頁面上最新更改的所有觸摸

touches 頁面上的所有觸摸

 

在滑動的時候不斷給圖片盒子做定位,來達到滑動的效果

定位的位置,當前的圖片的定位加上移動的距離

在開始滑動的時候就要清楚定時器,move的時候清除過渡,-index*width +distanceX/3

3、touchend:當手指在屏幕上結束滑動時觸發

綁定事件的方法:dom.addEventListener("touchend",function(e){});

事件返回的e對象包含那些移動端特有的屬性:

changedTouches 頁面上最新更改的所有觸摸

touchcancel:系統停止跟蹤觸摸時候會觸發,系統被動終止,例如alert。

注意:在touchend事件的時候event只會記錄changedtouches

clientX:觸摸目標在視口中的X座標。

clientY:觸摸目標在視口中的Y座標。

pageX:觸摸目標在頁面中的x座標。

pageY:觸摸目標在頁面中的y座標。

screenX:觸摸目標在屏幕中的x座標。

screenY:觸摸目標在屏幕中的y座標。

四、過渡和動畫結束時間(掌握)

1、transitionEnd:過渡結束後觸發。

綁定事件的方法:

dom.addEventListener("webkitTransitionEnd",function(e){});

      dom.addEventListener("transitionEnd",function(e){});

2、animationEnd:動畫結束後觸發。

綁定事件的方法:

dom.addEventListener("webkitAnimationEnd",function(e){});

      dom.addEventListener("animationEnd",function(e){});

3、gesture事件

gesturestart:當一個手指觸摸屏幕之後,第二個手指再觸摸屏幕時觸發。

gesturechange:當上面的事件觸發後立即觸發。

gestureend:第二根手指離開屏幕時觸發,之後將不會再次觸發gesturechange。

在event當中會返回另外兩個參數

scale 根據兩個手指的滑動距離計算的縮放比例初始1

   rotation根據兩個手指的滑動距離計算的旋轉角度初始 0

4、全屏單頁佈局

 html,body{height:100%}

 

五、響應式開發(重點)

1、響應式佈局

       就是一個網站能夠兼容多個終端。

2、響應式開發的原理

CSS3中的Media Query(媒介查詢,and之後一定要加空格@media screen and(min-width: 768px) and (max-width: 992px) {}; 通過查詢screen的寬度來指定某個寬度區間的網頁佈局。

超小屏幕(移動設備)768px以下

小屏設備    768px-992px

中等屏幕    992px-1200px

大屏設備    1200px以上

3、響應式開發和移動web開發的區別

開發方式

移動web開發+PC開發

響應式開發

應用場景

一般在已經有PC段的網站,開發移動站的時候,只需單獨開發移動端

針對新建站的一些網站,現在要求適配移動端,所以就一套頁面兼容各種終端,靈活

開發

針對性強,開發效率高

兼容各種終端,效率低

適配

只是陪移動設備,pad上體驗相對較差

可以適配各種終端

效率

代碼簡潔,加載快

代碼相對複雜,加載慢

 

4、bootStrap(掌握)

bootStrap框架----當前最流行的前端UI框架(有預製界面組件)

特點:組件簡潔大方,代碼規範精簡,界面自定義性強

優點:

有自己的生態圈,不斷的更新迭代

提供了一套簡潔、直觀、強悍的組件

標配準化的html+css編碼規範

讓開發更簡單,提高了開發的效率。

1、佈局容器

.container固定寬度並且支持響應式佈局的容器

默認margin:55px; padding:15px;

.container-fluid類用於 100% 寬度,佔據全部視口(viewport)的容器。

2、刪格系統

行:row 通過自身的拉伸來填充父容器的內邊距

刪格參數:

 

超小屏幕手機(<768px)

小屏幕平板(≥768px)

中等屏幕(≥992px)

大屏幕 (≥1200px)

柵格系統行爲

總是水平排列

開始是堆疊在一起的,當大於這些閾值時將變爲水平排列C

.container最大寬度

None(自動)

750px

970px

1170px

類前綴

.col-xs-*

.col-sm-*

.col-md-*

.col-lg-*

列數(column)

12

可嵌套

偏移(Offsets)

 .col-xs-offset-*

可見、隱藏

 .visible-xs-*   .hidden-xs

 

3、媒體查詢

在響應式開發中使用媒體查詢中的screen查詢瀏覽器的寬度來定義不同寬度區間的樣式和佈局。

代碼:

@media screen and(min-width: 768px){}

@media screen and(min-width: 992px){}

@media screen and(min-width: 1200px){}

或者

@media (max-width:767px){}

@media (min-width:768px) and (max-width: 991px){}

@media (min-width:992px) and (max-width: 1199px){}

@media (min-width:1200px){}

4、結構選擇器

div a{}

div > a {}

div + div {} 選擇目標元素的下一個元素

div ~ div {} 選擇目標元素之後的所有同級元素

4、Bootstrap常用樣式

1、container類

用於定義一個固定寬度且居中的版心

2、row類

每一個列默認有一個15px的左右外邊距,row類的一個作用就是通過左右-15px屏蔽掉它

xs : 超小屏幕手機 (<768px)

sm : 小屏幕平板 (≥768px)

md : 中等屏幕桌面顯示器 (≥992px)

lg : 大屏幕大桌面顯示器 (≥1200px)

3、hidden 類

hidden-xs,hidden-sm,hidden-md,hidden-lg在不同的屏幕下隱藏。

4、text-* 類

        text-center 文本居中

        text-left 文本左對齊

        text-right 文本右對齊

5、pull-* 類

        pull-left 左浮動類

        pull-right 右浮動類

6、center-block 類

讓一個固定寬度的元素居中。

7、display: table-cell

六、rem(重點)

相對長度單位,相對於html根元素font-size計算值得倍數

test佈局  //白青衣/rem插件/rem/rem.css

flexible佈局//白青衣/rem插件/flexible/rem.css

      淘寶這個方案可以在任意設計稿尺寸下使用(地址:https://github.com/amfe/lib-flexible)

  1)除font-size外,

       其它大小都根據750標註稿的尺寸,轉換成rem單位的值,轉換方法爲:

       標註稿尺寸 / 標註稿基準字體大小;

 2)標註稿基準字體大小 = 標註稿寬度 / 10,

    如標註稿寬爲750,標註稿基準字體大小爲75;標註稿寬爲640,標註稿基準字體大小爲64;

em的大小是根據父元素的font-size來設置的

   rem的大小是根據html標籤的font-size來設置的

標籤屬性

提供給屏幕閱讀器的屬性,我們可以忽略 

role、 aria-*、class="sr-only"

指定插件類型,和控制的目標元素

data-toggle

data-target

a標籤也可以通過href來指定被控制的目標元素

輪播圖

1、自適應圖片:

在pc端使用的是背景圖片,在移動端使用的是圖片

2、在寫靜態demo的時候使用的是響應式工具來完成的圖片響應,但是會加載兩種圖片那麼這時候就需要做圖片的響應式了,首先我們準備了json 中有兩種數據,然後ajax請求       到數據做緩存如果請求過就直接取緩存的,然後通過模版引擎解析成html,最終把解析完成的html渲染在頁面當中。

七、自定義字體:聲明自定義字體的名字,引入字體文件,指定字體文件的格式(掌握)

@font-face{

font-family:"wjs";

src:url(../fonts/MiFie-Web-Font.eot) format("embedded-opentype");

src:url(../fonts/MiFie-Web-Font.svg) format("svg");

src:url(../fonts/MiFie-Web-Font.ttf) format("truetype");

src:url(../fonts/MiFie-Web-Font.woff) format("woff");

}

wjs_icon{font-family:wjs; }

通過僞類來定義一個字體圖標,字體圖標設計出來的時候一般都會有文檔參考

wjs_icon_phone:before{
              content: "\e908";

}

八、less(掌握)

一、簡介

1、什麼是less[中文網](http://lesscss.cn/)

css的預處理語言,LESS 包含一套自定義的語法及一個解析器,用戶根據這些語法定義自己的樣式規則,這些規則最終會通過解析器,編譯生成對應的 CSS 文件。

2、使用less

less文件只有在被編譯後才能夠被瀏覽器識別並使用

3、客戶端調用方式在.less中@charset"utf-8";

①link引用.less文件 type ="type/less",引用less.js插件,不建議使用

l      ess.js 解析less文件動態加載head,異步加載less文件

②直接引用less.css

/**/會編譯在css文件當中

//不會編譯在css中

二、語法(瞭解)

1、變量

LESS 允許開發者自定義變量,變量可以在全局樣式中使用,使得樣式修改起來更加簡單。

@mainColor:#E93223;

body{color:@mainColor}

2、Mixin混入

Mixin(混入)特性,它是多重繼承的一種實現,在 LESS 中,混入是指在一個 CLASS 中引入另外一個已經定義的 CLASS,就像在當前 CLASS 中增加一個屬性一樣。

.red{color:@mainColor};

.border{border: 1pxsolid #ccc}

////方法混合.redBorder(){color: @mainColor;border: 1pxsolid #ccc}

樣式混合(通過class):.mixin-class{.red();.border();}

3、嵌套

在我們書寫標準 CSS 的時候,遇到多層的元素嵌套這種情況時,我們要麼採用從外到內的選擇器嵌套定義,要麼採用給特定元素加 CLASS 或 ID 的方式

#wjs_banner{

>div.item{

img_box{
              redBox();

&:hover{

color:@mainColor;

}

 }

}

}

4、導入Import

@import"base";//引入其他的less文件

.f_left{float:@right}

5、運算及內置函數

在我們的 CSS 中充斥着大量的數值型的 value,比如 color、padding、margin 等,這些數值之間在某些情況下是有着一定關係的,那麼我們怎樣利用 LESS 來組織我們這些數值之間的關係呢?

http://www.1024i.com/demo/less/reference.html

運算:

@back:#333;

.test{

border: 1px solid@back*2

}

內置函數:

desaturate(@color,10%);

lighten(@color,10%);

darken(@color,10%);

fadein(@color,10%);

fade(@color, 10%);

九、移動端面試題

1、能否簡述一下如何使一套設計方案,適應不同的分辨率,有哪些方法可以實現?

流式佈局:也就是百分比佈局(viewport),使用非固定像素來定義網頁內容,通過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮,不受固定像素的限制,內容向兩側填充。

響應式開發:就是一個網站能夠兼容多個終端。CSS3中的Media Query(媒介查詢)通過查詢screen的寬度來指定某個寬度區間的網頁佈局。由於響應式開發顯得繁瑣些,一般使用第三方響應式框架來完成,比如bootstrap來完成一部分工作。

響應式開發和移動web開發的區別

開發方式

移動web開發+PC開發

響應式開發

應用場景

一般在已經有PC段的網站,開發移動站的時候,只需單獨開發移動端

針對新建站的一些網站,現在要求適配移動端,所以就一套頁面兼容各種終端,靈活

開發

針對性強,開發效率高

兼容各種終端,效率低

適配

只是陪移動設備,pad上體驗相對較差

可以適配各種終端

效率

代碼簡潔,加載快

代碼相對複雜,加載慢

2、響應式佈局的時候,輪播圖使用兩張不同的圖片去適配大屏幕和超小屏幕,還是一張圖片進行壓縮適配不同終端,說明原因?

最好使用兩張不同大小的圖片去適配大屏幕和超小屏幕,這樣可以針對不同設備的屏幕大小,來加載響應的圖片,減少超小屏幕設備的網絡流量消耗,加快響應速度,同時防止圖片在大屏幕下分辨率不夠導致失真的問題。

3Bootstrap中最多可以分多少列?lgmdsmxs這幾個屏幕寬度的界限是多少?

答:12列 .col-xs- 超小屏幕手機 (<768px).col-sm- 小屏幕平板 (≥768px) .col-md- 中等屏幕桌面顯示器 (≥992px) .col-lg- 大屏幕大桌面顯示器 (≥1200px)

 

4、移動端事件與pc端有什麼區別?

移動端新增了觸摸事件。沒有鼠標事件和hover事件。另外包括移動端彈出的手機鍵盤的處理,這樣的問題在PC端都是遇不到的。/5、

5zeptojquery有什麼區別?

Zepto中沒有爲原型定義extend方法而jQuery有。

Zepto新添了touch事件,zepto是模塊化的庫

Zepto是不支持IE瀏覽器的

6、怎麼適配各種機型?

設置viewport進行縮放、響應式做法、流式佈局、rem能等比例適配所有屏幕

 

第10章面向對象

一、面向對象的基本概念

js 是一個基於對象的多範式的編程語言

              多範式: 編程風格

                     面向過程的方式編程

                     面向對象的方式編程

                     函數式 ...

       -> 函數式的一個特點: 遞歸與鏈式

              jQuery 就是典型的鏈式編程風格

                            $('div' ).css( 'border', '1px solid red' )

                                      .css( 'width', '400px' )

什麼是面向對象      

1、面向對象的概念

面向:將臉朝向......-> 關注,用

面向過程:關注編程步驟,細節的編程方式(自己動手完成)

面向對象:關注對象,找到對象,讓它幫你做,等結果

面向過程就是親力親爲, 事無鉅細, 面面俱到, 步步緊跟, 有條不紊

面向對象就是找一個對象, 指揮得結果

面向對象不是面向過程的替代, 而是面向過程的封裝

2、對象是什麼

A.對象是存儲數據的數據集,是提供功能的功能集,對象可以用來保存數據

B.使用對象來添加一些特定的功能

var itcast = {tag:function(){}, addCss:function(){}}

使用方法: itcast.tag(參數)

3、在js中,對象就是鍵值對的集合,名詞

4、使用面向對象編程(實際開發的時候如果需要完成一個功能)

①首先考慮系統是否提供了對象(使用現有對象)

document, 標籤對象

②如果系統沒有提供,就自己創建一個對象或者第三方(自定義對象)

注意:函數==>使用js代碼編寫的一個普通的function就是函數

  方法==>使用對象添加的功能(函數)就是方法

二、面向對象的特性

1、抽象性:抽取我們所需要的數據信息

2、封裝性:留下一些能使用的特性

3、繼承性

三、值類型與引用類型

數字 + 上下文 = 信息

內存就是一個可以存儲數字(數據)的盒子

1、JavaScript中的數據類型

A基本類型(值類型): 數字, 布爾, 字符串

B複合類型:(引用類型 : 對象( 數組, 時間, 正則, Object , 函數等 )

C空類型: Undefined, Null

複合類型除函數其它的無法通過typeof獲得數據類型,要使用Object.prototype.toString.apply()

2、數據存儲模型:“盒子”與數據的邏輯結構

A.基本數據類型和空類型的存儲模型:一個方格里面放一個數據

B.複合類型的存儲模型:

複合類型的對象是一個單獨的內存區域, 對象有什麼屬性, 那麼內存區域中就有什麼數據。變量 p 只存儲該對象的 '地址'. 所以 p 不是真正存儲數據的區域.

3、值類型與引用類型的存儲特徵(掌握)

       ①值類型的數據, 只需要開闢一段內存存儲數據即可

              var a = 123;  var b = 'abc';      var c = true;

       ②對象類型( 引用類型 ). 對象纔是真正的數據, 需要佔據單獨的內存.

              而變量名只是存儲着對象的內存地址( 引用 ).

              即創建一個對象並賦值, 實際上需要兩塊內存空間. 一個存儲數據( 對象 ),

              另一個存儲變量名以引用對象.

4、值類型與引用類型的賦值與傳參的特性

       -> 賦值: 將原變量中的數據拷貝一份, 然後賦值給新的變量中

              ① 值類型//拷貝的是實際的數據

              ② 引用類型//把變量的引用地址拷貝一份給新的變量,此時新的變量舊的變量都是指向                        了同一個對象

                     var o1 = {num: 123 };

                     var o2;

                     // 賦值

                     o2 = o1;        // 將 o1 中存儲的內容拷貝一份存儲到 o2 中

                                          //o1 中存儲的是引用, 或 '地址'

                     o1 和 o2 雖然是不相同的兩個變量, 即兩個獨立的盒子. 但是由於存儲的地址相同.

                     在訪問數據的時候, o1 與 o2 也是訪問同一個數據, o1 將數據修改了, o2 再讀取,

                     讀取的就是修改後的數據.

       -> 函數參數傳遞

              -> 什麼是函數參數傳遞

                            在調用函數的時候, 會將參數中表示的數據拷貝一份, 然後給參數賦值

                     function foo(num ) {}

                     // 調用

                     var a = 123;

                     foo( a );        // 調用函數就是要執行函數// 將 a 中存儲的數據拷貝一份

                                          //進入函數 foo// 給參數賦值, 相當於 num = a

// 進入函數體, 開始執行函數

總結:值類型引用類型的數據的傳參

參數是值類型,函數中對參數的任何改變都不會影響到函數

參數是引用類型,函數中對參數對象的改變會影響到函數外的實參

5、 深拷貝與淺拷貝

       -> 什麼是拷貝: 就是創建一個與目標數據一模一樣的數據

       -> 案例:

              var p = { name: '張三' };

              var p1 = p;                              //是否存在拷貝

             //一般描述拷貝是指拷貝對象

             p1= {};

             p1.name= p.name;

             //纔是拷貝

      ->案例, 給對象 p 提供一個 clone 方法, 完成拷貝

      ->案例:

             有一輛汽車 Car: name=保時捷

             有一個人 Person : name=張三

      ->如果對象的屬性也是一個引用類型, 拷貝的時候不重新創建一個新的對象來實現該屬性的拷貝, 那麼就是淺拷貝.

             即任何不完全的拷貝都是淺拷貝

      ->將兩個對象完全從內存中隔離開, 就是深拷貝. 即每一個引用屬性, 以及引用屬性的引用屬性, ... 全部拷貝出來.

 

四、構造函數(構造器controctor )的作用(重點)

1、js 中對象的動態特性

              動態的爲對象添加屬性

2、方式:點語法與關聯數組語法

              o.name = 'jim';                          // 點語法賦值

              console.log( o.name);        // 點語法取值

              o[ 'name' ] = 'tom';           // +關聯數組語法賦值 

              console.log( o['name' ] ); // 關聯數組語法取值

              問題:o[ name ] = 'jack'; // 如果 name 是一個變量, 裏面存儲的是字符串, 也是可以的

3、例創建一個Person 對象

              var p = {};             // 什麼都沒有的對象

              p.name = '張三';

              p.age = 30;

              p.gender = '男';

       -> 簡化: 提供一個創建 Person 對象的函數

              functioncreatePerson( name, age, gender ) {

                     var p = {};

                     p.name = name;

                     p.age = age;

                     p.gender =gender;

                     return p;

              }

              var p1 =createPerson( 'jim', 19, '男' );

              var p2 =createPerson( 'lily', 18, '女' );

              這個( 這種類型 )的函數就是用來創建對象的, 即生產對象. 常常將這類函數

              稱爲 '工廠函數'

工廠方法:

工廠方法就是一個函數,這個函數就是用來創建並返回一個對象,而且每次創建和返回的對象的特徵都是一樣的,像流水線下來的一樣,這樣的“流水線作業生產對象”函數叫做工廠方法。

4、構造方法創建對象:(構造器:用來創建對象的一個函數)

       -> 構造器中不需要 return 語句. 一般也可以不寫

       -> 調用構造器的時候, 使用 new 運算符引導

       -> 在構造器中 this 表示當前“new”出來的對象,給對象提供成員使用 this.xxx 的方式

 

       -> 將 createPerson 改造成構造器

              // 構造器的定義、結構

function 構造函數名(參數){

this.屬性 = 屬性值;

}

var p = new 構造函數名();

              functioncreatePerson( name, age, gender ) {

                     this.name =name;

                     this.age =age;

                     this.gender =gender;

              }

              // 調用構造器創建對象

              var p = newcreatePerson( '李磊', 19, '男' );

 

       -> 構造器創建對象的本質: 還是使用對象的動態特性

              -> 首先執行 new 運算符. 即創建對象. 可以簡單看做爲 {} 的簡寫

                     var p = new...   '相當於'   varp = {}

              -> 調用構造器. 並隱含一個參數, 即剛剛創建的對象.

              -> 在構造器中使用 this 引用剛剛創建出來的對象.

              -> 構造器結束是默認返回 this

 

       -> 補充說明

              -> 構造器的名字, 一般使用 Pascal 命名規則( 首字母大寫的 )

              -> 一般爲了與其他面向對象的編程語言( C++, C#, Java )保持一致. 稱構造函數名爲類名

 

              function Person(name, age, gender ) {

                     this.name =name;

                     this.age =age;

                     this.gender =gender;

              }

              // 調用構造器創建對象

              var p = new Person( '李磊', 19, '男' );

 

五、 異常與捕獲(瞭解)

       -> 異常

              簡單的說, 就是代碼在執行過程中出現的錯誤. 並不是代碼的語法錯誤.

       -> 一旦出現異常, 其後的代碼, 不再執行

       -> try-catch 語法

              1) try-catch 形態

                     try {

                            有可能出現錯誤的代碼

                     } catch ( e ){

                            處理寵物的異常

                     }

              2) try-catch-finally 形態

finally {

不管錯誤會不會發生,都會執行的代碼

}

無論是出現異常,try語法結束的時候都

       -> 自定義拋出異常

              一般可以封裝函數完成特定的功能. 例如 tag 函數

              function tag (tagName ) {

                     if ( tagName 不是字符串 ) 拋出異常.

                     return document.getElementsByTagName( tagName );

              }

       -> 拋出異常的語法

              throw 對象

六、原型

1. 爲什麼需要原型:減少內存的浪費,提高效率,使代碼更加安全

       構造器創建對象的時候, 實際上會有成員重複

       如果使用構造器 this.方法名 = function .... 方式創建對象. 那麼每一個對象

       對應的方法就會重複.

       解決辦法就是讓這個方法( 函數 )共享

       ①將函數寫到外面, 那麼 Person 在初始化對象的時候就不會再創建一個函數了.

              只需要將外面的函數引用交給對象即可.

              缺點: 一個對象可能有 n 多方法. 如果將所有的東西都放到外面, 與其他庫

                     衝突的機率就會變大. 所以不宜採取該方法.

       ②將所有的方法( 函數 )都綁定到一個對象中.

 

 

       ③js 原生就支持解決該問題的辦法:使用prototype屬性

              每一個函數都有一個屬性 prototype,該屬性指向一對象(Fun.prototype).

              (重點) 每一個由該函數作爲構造器創建的對象, 都會默認連接到該對象上.

                     如果訪問對象的方法, 而對象中沒有定義, 就會在這個構造函數.prototype

                     表示的對象中去找.

 

       -> prototype 就是原型之意

              原型就是被克隆的人,構造函數是克隆的機器,實例對象是克隆體

2. 原型就是 構造函數的prototype 屬性,常常將其稱爲 原型屬性.

原型就是實例對象的原型對象,實例對象是由原型對象複製而來的一個對象

       例:

              function Person () {}   // 有了構造函數, 和原型

              var p = new Person();       // 有了實例

3. 一般如何使用原型對象

       -> 簡單的說就是將共享的方法放到原型中, 而獨有數據與行爲放在當前對象裏

       -> 例:

              Person( name, age,gender, sayHello, eat, run )

       -> 通過動態特性接給原型對象添加成員:這種方式添加的話,原型依然會有constructor的屬性,並且指向原來的構造函數

       -> 通過Person.prototype指向一個新對象替換舊原型對象:原型裏面沒有constructor屬性,需要手動去添加這個屬性(constructor:函數名)屬性, 表示對應的構造函數 )

 

constructor:構造器,原型的

原型屬性--函數

原型對象--實例對象

4.__proto__:用來訪問原型的一個屬性

   -> 訪問

     使用構造函數, 就使用 prototype 屬性訪問原型

使用實例對象, 就使用非標準的 __proto__ 屬性訪問原型(對象名.constructor.prototype)

七、 繼承(掌握)

       -> 什麼是繼承

               自己沒有, 別人有, 拿過來自己用, 就好像自己的一樣.

       -> 原型與實例對象

              在 js 中, 方法定義在原型對象中, 而屬性定義在實例對象中

              調用方法的時候, 實例對象本身是沒有該成員的, 但是依舊可以調用

              該方法, 好像這個方法就是該實例對象的一樣. 因此, 我們稱該實例對象

              繼承自原型對象

       -> 任何一個實例, 都是繼承自其原型對象的. 即原型式繼承.

1、爲什麼需要繼承

       -> 編程的發展

              複用( 重複使用 )

              div 標籤對象nodeName,nodeType, nodeName, ...

                                          appendChild,insertBefore, getElementsByTagName, ...

              a 標籤對象

              baseElement

       -> js 運行效率

              共享特性

              複用

2、 屬性訪問原則(重點)

       1) 對象在調用方法或訪問屬性的時候, 首先在當前對象中查詢. 如果有該成員使用並停止查找.

       2) 如果沒有該成員就在其原型對象中查找. 如果有該成員即使用, 並停止查找.

       3) 如果還沒有就到該對象的原型對象的原型對象中查找.

       ...

       4) 最後會查到 Object.prototype 上. 如果還沒有即返回 undefined.

3、 如果修改原型對象中的屬性值會怎樣

       給當前對象的原型提供的屬性賦值, 實際上是給當前對象添加了該屬性的新成員

       並不會修改運行對象中的成員.

4、混入(mix ): 將一個對象中的成員加到另一個對象中

       var o1 = { name: '張三' };

       var o2 = { age: 19 };

       -----------

       o2.name = o1.name

       利用這個簡單的賦值, 就可以

       混入使得 o2 具有了 age 和 o1 中的 name. 即將 o1 混入到 o2 中

       混入也是一種繼承的方式

 

 

 

 

 

 

 

5、如何使用代碼實現混入

 

       // 考慮需要執行, 寫函數即可

       // 由於將一個對象混入到另一個對象. 所以有兩個參數

私有      

function __mix__ ( obj(原對象), obj1(新對象) ) {//將obj1的成員加入到obj中去

              // 如何獲得 obj1 中的所有成員?

              for ( var k in obj1 ){

                     obj[ k ] =obj1[ k ];

              }

       }

在函數中有一個默認的對象arguments存在,它裏面存儲着所有傳入的參數

我的extend方法可以帶多個參數,如果是多個參數,要求將所有對象的成員都加到this當前對象上

argument對象:這個對象在每一個函數裏都有,代表的就是函數的所有參數,是一個數組

var o = {

extend:function(obj){

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

for (var k in arguments[i]){

this[k] =arguments[i][k];

}

}

}

}

6、 原型式繼承

       -> 寫一個構造函數, 如果需要將其實例繼承自某個特定的對象 o. 那麼

              只需要設置該構造函數的 prototype 屬性爲 o 即可

              function Person (){}

              var o = { ... }

              Person.prototype = o; // 繼承

7、 混合式繼承

       -> 將多個對象的各個功能混合到一起, 加到構造函數的原型對象上,這些功能是從原型繼承而來,所以叫做混合式繼承

步驟:

A:給原型添加一個extend方法

function 構造函數 (){}

構造函數.prototype.extend =function(obj){

for (var k in obj){

this[k] = obj[k];

}

};

B.調用extend方法去混入多個對象的功能

構造函數.prototype.extend{

(多個對象)

方法: function(){}

}; //此時原型中就會混入多個對象的功能了

C.使用構造函數創建對象

var test = new 構造函數();

八、原型鏈(重點)

原型鏈結構:實例對象 -> 對象的原型對象 -> object的原型對象 ->null  鏈式結構( 原型鏈 )

1.新對象Object.create( 原對象);(瞭解)

以對象爲原型創建一個新的對象,用在只有實例對象的時候

var newObj = Object.create(oldObj)

低版本兼容:先判斷有沒有,如果沒有再加上

functioncreateWithObject (obj) {

if (Object.create){

returnObject.create(obj);

}else{

function F(){}

F.prototype = o;

return new F();

}

}

2. 對象的原型鏈

       -> 凡是對象都有原型

       -> 構造函數 Person 創建的對象 p 有原型 Person.prototype

       -> Person.prototype 的原型對象是Object.prototype

       -> 結論

              1) Person.prototype 是實例 p 的原型對象, 使用 __proto__ 也可以訪問對象的原型對象

              2) Person.prototype 的原型對象是Person.prototype.__proto__

              3)Person.prototype.__proto__ 裏的 constructor 是 Object. 所以

                     Person.prototype.__proto__就是 Object.prototype

              4)Object.prototype.__proto__ 是 null. 因此表明 Object.prototype 就是頂級.

       -> 鏈式

              p -->Person.prototype( p.__proto__ ) --> Object.prototype --> null

       -> 系統內置的原型鏈

              [] -->Array.prototype --> Object.prototype --> null

              /./ -->RegExp.prototype --> Object.prototype --> null

              ... ...

3. 繪製數組的原型結構

       var arr = [];

       // 等價

       var arr = new Array();

       arr --> Array.prototype--> Object.prototype --> null

4. 練習:

       根據下面代碼繪製對象的原型鏈結構

       1)    function Person( name, age, gender ) {

                     this.name =name;

                     this.age =age;

                     this.gender =gender;

              }

              function Student () {}

              Student.prototype =new Person( '張三', 19, '男' );

              var stu = newStudent();

       2)  function Person() {}

              var p1 = newPerson();

              var p2 = newPerson();

5. {} 對象的原型鏈結構

       在 js 中對象一般都有字面量

              123, '123'

       數組: []

       正則表達式對象: /./

       函數: function () {}

       ...

       對象也有字面量: {}

       {} --> Object.prototype--> null

       注意: {} 與 new Object() 含義相同

6. 動態函數Function

       -> 動態函數就是在運行的過程中, 將一段字符串作爲代碼運行.

              由於字符串可以隨意的拼接. 因此得到動態的執行.

       -> 定義動態函數, 並執行

              -> 使用 Function 構造函數, 創建函數.

                     Function 是一個構造函數. new Function 得到一個函數

              -> 語法

                     var demo =prompt("");

var demo2 = new Function( arg0, arg1, ..., argN, body )

demo2();

                     Function 的所有的參數, 除了最後一個以外, 都是生成的函數的參數

                     最後一個參數是函數體

7. 函數的相關的一些參數

       ①arguments對象:參數對象,保存了調用函數時傳入的所有參數,使用數組的索引訪問參數.

              例如: 寫一個函數, 在參數中寫任意個參數, 最後求其和

                     function sum() {

                            // 所有的參數都會存儲到 arguments 中

                            var sum= 0;

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

                                   sum+= arguments[ i ];

                            }

                            returnsum;

                     }

使用arguments改寫extend函數

函數名.prototype.extend =function(){

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

for(var k in arguments[i]){

this[k] = arguments[i][k];

}

}

}

       ②函數名.length, 即函數的 length 屬性. 表示定義函數時, 參數的個數

       如果定義函數的時候, 定義了參數. 但是調用的時候又沒有傳遞該參數. 那麼該參數在函數內就是 undefined

       ③函數.name 返回的是函數名

8. 函數的引用callee 與caller(掌握)

       js 中函數也是一個對象

       -> callee被調用者在函數的內部, 實現函數遞歸的時候,一般使用callee表示當前函數的引用,

       function fn(){

arguments.callee()

}

fn();

-> caller 表示調用函數,調用者

9.eval 函數(立即執行函數,自調用函數)通過ajax獲取請求,獲得數據

       eval 函數與 Function 功能類似. eval 可以直接將字符串作爲代碼來執行.

       語法:

       eval( 語句字符串 ),在eval函數中,使用字符串聲明的變量,在Evelyn函數外面可以立即執行

       注意, 它好像與當前代碼處於同一個作用域

語法上:eval 語法簡潔,直接調用即執行

10.Function

創建了一個新的,所有的東西,都只在函數內部起作用,如果要執行,需要調用

除非:1)變量沒有聲明,直接使用②return

 

 

 

 

 

 

 

 

將json字符串變成對象,三種做法

 

eval做法 var o1= eval("("+data+")");(必須加()),用來執行jsdaima 的,所有,json字符串中的{}讀作了代碼快的開始和結束,所有一定要加上();

Function 做法var o2 = (new function('return'+data))();

       3)var o3 = JSON.parse(dara); 低版本的瀏覽器可能不兼容,要求json字符串是嚴格格式字符串(鍵必須用引號引起來)

11. 在 js 中 函數 是Function 的實例

       function Person() {}

       var p = new Person();

       p 是構造函數 Person 的實例

 

       在該角度去看, 函數就是對象, Function 就是構造函數

 

       得到構造-實例-原型三角形

函數是一個函數對象,認爲是一個實例對策function Person(){}

Function是函數的構造函數,,由Function創建函數實例對象,Function是自己的實例,任意一個函數是它的對象,是函數對象創建了自己

相當於:Person =

 

 

       function Person() {} 爲例

 

12. 給定一個任意的對象,將其原型鏈包括對象和函數的結構完整的分析處理

13.instanceof 運算符

       -> a  instanceof b -> 判斷b是否在a的原型鏈上

       -> instanceof ?

       -> 錯覺: 判斷某一個對象是否爲某一個構造函數所創建出來的

語法:

對象 instanceof  構造函數(結果是布爾值)

判斷構造函數的原型屬性是否在對象的原型鏈上

 

14. 通過原型鏈的學習,可以重新定義js 的繼承

       js 的繼承: 就是利用對象的動態特性添加成員, 或直接替換對象的方式修改原型鏈結構. 使得當前對象的原型鏈上的對象具有某些成員. 那麼我的當前對象就可以使用這些成員了.

       p -> Person.prototype-> Object.prototype -> null

       p -> Person.prototype-> {} -> Object.prototype -> null

       過多的依賴原型鏈繼承, 會損耗性能

       如果必須使用原型鏈繼承, 最好提供一些快速訪問的方法

       加入我希望所有的函數都具有 inherit 功能

              function Person() {}

              var Student =Person.inherit( 成員 );

              // 生成函數 Student, 但是 Student 裏面的成員( this.XXX )

              // 由參數來提供, 而 Student 的對象, 繼承自 Person 的對象

       如果希望所有的函數都有 inherit 方法, 那麼可以給 Function.prototype添加該方法

九、代碼的預解析(掌握)

       -> 預解析:在代碼執行之前先把代碼解釋分析一遍,處理一些核心問題,爲了提高效率     

              提前的翻譯解釋, 在運行代碼之前的一個解釋.

       -> 爲什麼需要它

              -> 編譯型語言: C, C++, C#, Java

                     就是需要一個 "翻譯" 程序, 將源代碼翻譯成計算機可以讀懂的二進制數據( 指令 ).

                     然後存儲成可執行文件.

 

                     提前翻譯好, 運行時直接執行得結果

 

              -> 解釋型( 腳本型 ): JavaScript,SQL, ...

                     代碼在執行的時候, 有一個翻譯程序, 讀一句代碼執行一句代碼. 再讀一句代碼,

                     再執行一句代碼.

                     一句一句的翻譯執行. 每次運行都需要翻譯一次.

              -> 代碼在執行之前, 需要快速的 "預覽" 一遍. 那麼可以儘可能提高執行效率.

1. 在 js 中預解析的特點

       -> 代碼是如何執行的: 讀取 js 文本, 預解析, 一句一句地執行

       -> js 在預解析的過程中完成了聲明部分的標記與變量作用域的設定

2. 什麼是js 中的聲明

       -> 簡單的說就是讓 js 執行引擎知道有什麼東西( 標識符 )

              console.log( num );      // error: num is not defined

              num(); // error: isnot function

              即代碼在執行之前的預解析, 首先讓 js 的執行引擎知道在當前運行環境中

              有什麼東西( 名字, 標識符 )是可以被使用的. 它是變量, 還是函數等?

       -> 在 js 中有哪些聲明:

              1) 標識符的聲明( 變量的聲明 )

              2) 函數的聲明

 

       -> 變量的聲明:

              語法:            var變量名;

              目的: 告訴解釋器, 有一個名字是一個變量, 在當前環境中可以被使用.

              語句: 就是可以執行的東西.

                     var a = 123; 是一個語句

              在使用 var 聲明變量, 同時完成賦值的時候. 實際上, 預解析將其做了一定處理:

              -> 凡是讀取到 var 的時候, 就檢查 var 緊跟的名字是否已經標記了

              -> 如果沒有標記, 就表明這個名字是一個標識符, 需要被標記

              -> 如果已經被標記了, 那麼這個 var 被忽略

              結論:

                     var a;

                     var a = 10;

                     等價

                     var a;

                     a = 10;

 

                     var a = 123;

                     var a = 456;

                     var a = 789;

                     等價於

                     var a = 123;

                     a = 456;

                     a = 789;

              如果在代碼中有多個 var 後面緊跟的名字是一樣的. 那麼只有第一個 var 起作用.

              後面的所有 var 都會被自動的忽略.

       -> 變量名提升

       代碼再預解析的時候會去關注var聲明的變量,函數的聲明,標記這個變量或者函數

       -> 函數的聲明

              -> 函數的各種定義形式

                     -> ①函數聲明式:   

                            functionfunc () {

                                   console.log('使用聲明式定義' );

                            }

                     -> ②函數表達式式( 匿名函數, 字面量函數, lambda 函數 ):

                            varfunc = function () {

                                   console.log('使用表達式式定義' );

                            };

func();

使用這個方式定義函數,實際上是利用函數是js中的一個數據類型的特點,利用賦值,使用變量存儲函數的引用,此時沒有函數的聲明,但是有變量的聲明

--> ③帶有函數名的函數表達式

 

 

f2外部無法使用只能在函數內部使用,如果要調用改函數要使用f1()調用,f2也是函數的name屬性值

 

 

                    

 

 

 

 

 

 

 

 

 

 

-> ...

              -> 特點:

                     1> 函數的聲明是獨立於語句. 不需要加分號結束. 也不能嵌入到代碼表達式中.

                     2> 表達式式, 本質上是使用函數表達式( 字面量 )給變量賦值. 因此它是語句.

              -> 表達式:

                     -> 將運算符與操作數連接起來的式子.

                     -> 就是一個有結果的代碼單元( 不包括語句 )

                            var a;            // 聲明, 不是語句, 也沒有結果

                            123               // 字面量, 有值, 是表達式. 是常量表達式

                            a = 123         // 賦值, 有值, 就是被賦值的那個值. 是賦值表達式.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

                            function() {}

 

函數名提升:代碼預解析的時候會去找到聲明的函數,提前把函數放在作用於裏面

3. 如果將變量的聲明與函數的聲明放在一起有些需要注意的情況

       1) 函數的聲明實際上包含兩部分

              1> 告訴解釋器 xxx 名字已經可以使用( 函數名, 標識符 )

              2> 告訴解釋, 這個名字代表着一個函數( 變量裏存儲着函數的引用 )

       2) 當函數聲明與變量聲明衝突的時候. 只看誰先有數據.

 

4. 一個在新版本的瀏覽器中的特性

       if ( true ) {

              function foo() {

                     console.log(true );

              }

       } else {

              function foo() {

                     console.log(false );

              }

       }

       foo();

函數聲明不要放在代碼塊裏面吧

5. 詞法作用域

       -> 作用域: 就是變量可以使用到不能使用的範圍

       -> 塊級作用域:

              -> 塊: 代碼塊, 即 {  }

              -> 變量的使用從定義開始, 到其所在的塊級作用域結束

       -> js 是詞法作用域

在js中,只有函數可以改變作用域的範圍

              -> 詞法: 就是定義, 書寫代碼的規則.

              -> 所以所謂的詞法作用域, 就是在書寫代碼的時候, 根據書寫代碼的結構

                     就可以確定數據的訪問範圍的作用域.

              -> js 不受塊的影響, 即使在塊中定義聲明變量, 在塊的外面依舊可以使用

                     console.log(num );  // => undefined

                     {

var num = 123;

                     }

                     console.log(num );  // => 123

       -> 所謂的 js 的詞法作用域, 就是

①在沒有函數的情況下,所有的變量的訪問規則依據預解析規則

       ②只有函數可以限定範圍. 其他的不行.

③在函數內部是一個獨立的完整的作用範圍結構.

④在函數內部,允許再定義函數,同時兩個層次的函數都是作用域的獨立體

⑤在函數內優先訪問內部聲明的變量, 如果沒有才會訪問外部的.

⑥允許在函數內訪問函數外的變量,前提是函數內沒有改變量的聲明

       -> 結論:

              詞法作用域就是描述變量的訪問範圍:

              1> 在代碼中只有函數可以限定作用範圍. 允許函數訪問外部的變量. 反之不允許.

              2>                

3> 所有變量的訪問規則, 按照預解析規則來訪問

 

6. 案例1

       var num = 123;

       function f1 () {

              console.log( num );

       }

       function f2 () {

              console.log( num );

              var num = 456;

              f1();

              console.log( num );

       }

       f2();

       1> 讀取代碼預解析. 得到 num, f1, f2

       2> 逐步的執行代碼

              1) 賦值 num = 123;  注意 f1 和 f2 由於是函數, 所以也有數據.

              2) 調用 f2.

                     進入到函數體內. 相當於做一次預解析. 得到 num. 注意, 此時有內外兩個 num

                     執行每一句代碼

              -> 打印 num. 因爲函數內部有聲明 num. 所以此時訪問的是函數內部的 num. 未賦值, 得到 undefined

              -> 賦值 num = 456

              -> 調用 f1(). 調用函數的規則也是一樣. 首先看當前環境中是否還有函數的聲明. 如果有直接使用. 如果

       沒有, 則在函數外面找, 看時候有函數. 此時在函數 f2 中沒有 f1 的聲明. 故訪問的就是外面的 f1 函數

              -> 跳入 f1 函數中. 又要解析一次. 沒有得到任何聲明.

              -> 執行打印 num. 當前環境沒有聲明 num. 故在外面找. 外面的是 123. 所以打印 123.

                            函數調用結束, 回到 f2 中.

              -> 繼續執行 f2, 打印 num. 在 f2 的環境中找 num. 打印 456.

       任務:

              var num = 123;

              function f1 () {

                     console.log(num );

              }

              function f2 () {

                     console.log(num );   // => 123 , 456, 456

                     num = 456;                

                     f1();

                     console.log(num );

              }

              f2();

7. 案例2

       (function ( a ) {

              console.log( a );

              var a = 10;

              console.log( a );

       })( 100 );

       拆解

       ( 函數 ) ( 100 )

       第一個圓括號就是將函數變成表達式

       後面一個圓括號就是調用該函數

       var func = function ( a ) {

              console.log( a );

              var a = 10;

              console.log( a );

       }

       func( 100 );

       注意: 函數定義參數, 實際上就是在函數最開始的時候, 有一個變量的聲明

       function ( a ) { ... }

       其含義就是, 在已進入函數體, 在所有操作開始之前( 預解析之前 )就有了該變量的聲明.

       由於已經有了 a 參數的聲明. 所以在代碼中 var a = 10 是重複聲明. 其聲明無效.

       所以上面的代碼, 等價於

       var func = function ( a ) {

              console.log( a );                 // => 100

              a = 10;

              console.log( a );                 // => 10

       }

       func( 100 );

       // 變式

       (function ( a ) {

              console.log( a );

              var a = 10;

              console.log( a );

              function a () {

                     console.log( a);

              }

              a();

       })( 100 );

       1> 直接調用

       2> 進入到函數中, 已有聲明 a 並且其值爲 100

       3> 在函數內部預解析. 得到一個結論. 函數聲明是兩個步驟.

              1) 讓當前環境中, 有變量名 a 可以使用. 但是不需要. 因爲已經有 a 的聲明瞭

              2) 讓 a 指向函數. 相當於

                     var a;

                     function a (){}

                     ...

       4> 開始逐步執行每一句代碼

              1) 打印 a. 所以打印函數體

              2) 賦值 a = 10

              3) 打印 a, 打印出 10

              4) 如果讓 a 調用, 那麼報錯 error: a is not function

8. 作用域鏈規則

       -> 什麼是作用域鏈

              鏈指的就是訪問規則

              function foo() {

                     console.log(num );

              }

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

              function func () {

                     function foo(){

                            console.log(num );

                     }

                     foo();

              }

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

              function F () {

                     function func() {

                            functionfoo() {

                                   console.log(num );

                            }

                            foo();

                     }

                     func();

              }

              ... ...

              由於這種一環套一環的訪問規則, 這樣的作用域構成一個鏈式結構. 所以直接稱其爲作用域鏈.

       -> 作用域鏈是用來做變量查找的. 因此變量可以存儲什麼東西. 鏈中就應該有什麼東西.

              換句話說就是, 鏈裏面存儲的是各種對象. 可以將其想象成對象的序列( 數組 )

 

9. 繪製作用域鏈的規則

       1> 將所有的 script 標籤作爲一條鏈結構. 標記爲 0 級別的鏈.

       2> 將全局範圍內, 所有的聲明變量名和聲明函數名按照代碼的順序標註在 0 級鏈中.

       3> 由於每一個函數都可以構成一個新的作用域鏈. 所以每一個 0 級鏈上的函數都延展出 1 級鏈.

       4> 分別在每一個函數中進行上述操作. 將函數中的每一個名字標註在 1 級鏈中.

       5> 每一條 1 級鏈中如果有函數, 可以再次的延展出 2 級鏈. 以此類推.

 

10. 分析代碼的執行

       當作用域鏈繪製完成後. 代碼的的分析也需要一步一步的完成.

       1> 根據代碼的執行順序( 從上往下, 從左至右 )在圖中標記每一步的變量數據的變化

       2> 如果需要訪問某個變量. 直接在當前 n 級鏈上查找變量. 查找無序.

       3> 如果找到變量, 直接使用. 如果沒有找到變量在上一級, n - 1 級中查找.

       4> 一直找下去, 知直到 0 級鏈. 如果 0 級鏈還沒有就報錯. xxx is notdefined.

十、閉包(重點)

一、相關概念

1、閉包:閉包就是一個封閉的隔離的空間。js中:函數所構成的外部無法直接訪問的區域

       function foo () {}

閉包的本質:利用作用域訪問規則的不可逆性,構成一個單向的空間。

爲什麼要學習閉包

因爲有一些數據是比較敏感的,會有安全的需求,不能讓用戶得到,所以將它們放到閉包裏面,讓用戶更加安全的訪問。

二、閉包的間接訪問--訪問閉包中的數據

1、訪問閉包中數據的方法:

在函數內部新定義一個函數,在這個新函數中return返回我們需要的原始數據,然後return返回這個函數。// 返回一個對象   

2、案例:

       function foo () {

              var num = 123;   // 原始數據

              function func () {

                     returnnum;  // 它就是原始數據 num

              }

              return func;

       }

var f = foo(); // f中存儲的是foo裏面定義的函數的引用,即,可以用f來調用裏面的函數

  凡是調用一次f,就是調用一次foo中定義的函數,就會利用變量的詞法作  用域規則返回foo中的num,即間接訪問了閉包中的數據。

//foo只能調用一次,可以創建一個原始數據,但是聲明的函數f可以重複調  用,每一次調用都可以獲得閉包中的數據的值

三、函數是對象--可以作爲一般的數據來使用

函數是基本的對象類型,可以作爲變量賦值,可以作爲參數使用,也可以作爲返回值使用

函數返回函數:return 函數名;

賦值

function foo() {

......(函數體)

}

var func = foo;  //函數體只有一個,是將函數的引用賦值給了func,因此,func和foo指向同一個函數,func和foo都可以調用該函數

函數作爲參數進行傳遞,使用方法是調用----像正常的變量一樣

function foo (fn) {

if (typeof fn ==='function'){

fn();

}

}

function func1() {}

var  func2 = function () {};

foo(func1);

foo(func2); //函數名存儲的函數引用,因此將函數作爲參數傳遞時,直接傳遞函數名即可

函數作爲返回值使用

function foo() {}

function func() {}

return func;

}

var f = foo();

f();

foo()();

function foo() {

return function(){};

}

四、閉包應用

1、 閉包代碼的基本結構

              function foo () {

                     var num = 123;

                     returnfunction () {

                            returnnum;

                     }

              }

2、如何返回函數中的多個數據

通過一個對象將返回的數據的多個方法包含起來,然後返回這個對象就可以了

請編寫代碼讓外部可以訪問到name,age,hobby

再編寫代碼讓外部可以修改hobby

       function func() {

              varname="csw";

              var hobby = "吃飯,睡覺";

              return {

                     get_name:function(){return  name; },

                     get_hobby:function(){return  hobby;},

                     set_hobby:function(value){hobby = value;  }

              };

       }

       var obj = func();  //obj保存的是返回的對象的引用,對象本身在func函數的空間裏面

       obj.set_hobby("打豆豆");//通過set方法修改hobby。

       var name = obj.get_name();

3、閉包的核心內容

              1> 帶有私有數據的函數、對象

                     function foo() {

                            var num= 123;

                            returnfunction () {

                                   //可以訪問 num

                            }

                     }

                     var func =foo();

                     // 稱 func 是一個帶有私有數據的函數 // 稱 func 帶有緩存

              2> 視情況提供訪問數據的通道(返回的函數,返回的對象)

4、閉包的應用__沙箱模式

              沙箱就是一個隔離的執行環境

沙箱模式:一個自調用的函數,我們寫在這個函數裏面的變量不會被外部的內容所影響到,這樣代碼即可以正常使用和運行,也會使我們的數據更加的安全。

有時爲了使得代碼更加簡潔, 會引入很多變量,定義變量越多, 出現衝突的可能性越大.

       (function () {

              // 沙箱模式

              // 所有的代碼寫在這裏

       })();

5、閉包的應用__模擬 window.onload 事件的追加與移除

              o.addEvent( function... )

              o.removeEvent( fn )

模擬window.onload去製作一個對象,希望通過這個對象添加函數,刪除函數,當頁面加載完成以後,按照(私有數組存儲函數)的順序逐個的執行這些函數。

var itcastload =(function () {

                     var data = [];

              window.onload =function () {

                     for ( var i =0; i < data.length; i++ ) {  // 依次執行數組中的方法

                            data[ i]();

                     }

              };

              return {

                     addEvent:function ( fn ) {

                            data.push(fn );

                     },removeEvent:function(fn ){ //遍歷 data,發現與fn相同的就刪除

                            for(vari = data.length - 1;i>=0;i-- ){//刪除以後arr.length就發生了變化,倒過來循環

if(fn === data[i]){

                                          data.splice(i,1);//arr.splice(從第幾個元素開始,刪除的個數)

                                   }

                            }

                     }

              };

       })();

itcastload.addEvent(function(){console.log()}; // 先執行

console.log();   // 後執行

function f () {console.log()}

itcastload.removeEvent(f){};

 

//itcastload.removeEvent(){function f () {console.log()}};

//console.log({} =={}); false!! 解釋執行,解釋成完全不同的對象

6、利用閉包模擬一個緩存結構

       cache 對象, 可以使用 cache[ key ] =value 存儲數據, cache[ key ] 獲得數據,當 cahche 裏面    的數據達到 1024 條, 將最早放進去的數據移除,cache = {} 可以存取數據, 但是不能限定數據的    長度,所以如果需要限定數據, 就是在加入數據的時候判斷, 是否已超過尺寸,如果是, 則移除,        如果不是, 則什麼也不做

       將 cache 做成函數(函數本身也是對象), 添加數據使用 cache( key, value)

       function cache ( key, value) {

              (可以在這裏加上限定長度的代碼)

              cache[ key ] = value;

       }

cache( 'attr',function ( node, attr ) {

       return node.getAttribute( 'name' ) ==attr;

} );

cache( '__name__','張三' );

       //由於需要記錄鍵的數量,並且需要記錄添加數據的先後順序,所有首先考慮有序的數組。

       //因此需要讓 cache 函數帶有緩存功能(數組)

var cache =(function () {

       var data = [] , max = 3;

       function cache ( key, value ) {

if( data.length>= 3){//做判斷, 如果超出範圍, 則, 將最開始加入的移除

var temp =data.shift();//將數組第 0 項元素移除的 splice, shift      

delete cache[temp];

}     

data.push(key);

cache[ key ] =value;

}

return cache;

})();

cache(key, value);

//使用緩存

var v = cache(key);

if (!v) {

v = ...;

cache(key, v);

};

處理緩存的函數

       function createCache () {

              var data = [], max =3;

                     function cache( key, value ) {

                     if (data.length >= 3 ) {

                            vartemp = data.shift();

                            deletecache[ temp ];

                     }

                     data.push( key);

                     cache[ key ] =value;

              }

              return cache;

       }

       var kvCache = createCache();

 

 

 

 

 

 

十一、函數調用模式

 

函數模式、方法模式、構造器模式、上下文模式

1、 函數模式

       函數的定義方式

              聲明式  function func();

              表達式式 var func = function(){};

              Function   new Function();

       -> 單獨獨立調用的就是函數

              函數名( 參數 )

       -> this 表示全局對象

       -> 任何自調用函數都是函數模式

語法:

function foo() {

。。。

       console.log(this);  //此時的this指的是window

}

       foo();

2、方法調用 模式

              方法本身就是函數, 但是方法不是單獨獨立的調用, 而是通過一個對象引導調用.

              對象.方法( 參數 )

       -> this 表示引導方法的對象

函數是獨立的,方法需要對象引導,方法調用一定要有宿主對象(宿主對象可以是對象、函數、數組等),方法一定是某個對象的方法

語法:

       function foo() {

              console.log(this);       

       }

       var o = { age: 19};  //這裏o是宿主對象

       o.foo = foo;  //這裏不能加(),如果加()就是調用foo函數的返回值賦值給o.foo

foo();

o.foo();  //此時this返回的是對象 o

function func () {

console.log(this);

}

func.foo =foo;  //這裏func是宿主對象

foo();   //函數調用

func.foo(); //方法調用,此時this返回的是函數func(函數整體)

3、構造器模式(constructor構造函數模式,構造方法模式)

       使用 new 關鍵字引導var p = newPerson();

構造函數的執行過程,首先通過new創建一個對象,當創建出來對象以後,對象的原型結構就已經確定好了,但是對象裏面沒有任何成員,它實際上是一個空對象,當它調用構造函數的時候,它把對象的引用交給構造函數,構造函數裏面的this就會指向這個函數,然後通過this去執行了this.name,this.age的賦值,實際上就是利用對象的動態特性給當前對象添加了成員

              語法:

              function Person () {

                     this.name ='Jack';

                     this.age = 19;

              }

var p = new Person();

       -> 返回值

              如果沒有return 語句, 那麼構造函數默認返回 this(即當前對象Person)            

如果在構造函數中return 的是基本類型( return num,return 1223 ). 則忽略return,返回this

              如果在構造函數中return 的是引用類型, 那麼返回該引用類型數據, 而忽略 this

關於構造函數結合性的一個小結

       1> 如果調用構造函數的時候構造函數沒有參數, 可以省略圓括號

              var p = new Person;

       2> 如果希望創建對象並直接調用其方法

              ( new Person ()).sayHello()

              -> 可以省略調整結核性的圓括號

                     newPerson().sayHello()

              -> 如果想要省略構造函數的圓括號, 就必須添加結核性的圓括號

                     (newPerson).sayHello()

4、上下文調用模式=== 環境調用模式

       就是一種方法在不同環境下, 可以同時實現函數模式與方法模式,該方式調用不會污染宿主對象

       apply 形式  函數名.apply( ... )

call 形式       函數名.call( ... )

       上下文調用存在的目的就是爲了實現借用方法

apply調用語法:

-->不帶參數的上下文調用模式

              function foo () {

                     console.log( this );

              }

              var o = { name: 'jim' };

              foo();    //函數調用模式

              o.func = foo;            

o.func();  //方法調用模式

              foo.apply( null ) 或 foo.apply() // 函數模式           

foo.apply( o )  //方法模式, 注意需要提供一個宿主對象

-> 帶有參數的函數如何實現上下文調用

              function foo ( num1, num2 ) {

                     console.log( this );

                     return num1 + num2;

              }

              var res1 = foo( 123, 567 );// 函數調用模式

foo.apply(null,[123, 567); //apply函數調用

// 方法調用模式

              var o = { name: 'jim' };

              o.func = foo;

              var res2 = o.func( 123, 567 );

foo.apply(o, [123,567);//apply函數調用

函數模式:函數名.apply( null, [] );

方法模式:函數名.apply(對象名, []); //這裏的對象就是宿主對象,函數的參數放在數組中

call 調用

       在使用 apply 調用的時候, 函數參數, 必須以數組的形式存在. 但是有些時候數組封裝比較複雜

call 調用與 apply 完全相同, 唯一不同是是參數不需要使用數組

       foo( 123, 567 );

       foo.apply( null, [ 123, 567 ] );

       foo.call( null, 123, 567 );

5、借用構造方法實現繼承

       function Person ( name, age,gender ) {

              this.name = name;

              this.age = age;

              this.gender = gender;

       }

傳統的繼承

function Student (){}

Student.prototype =new Person();

借用構造方法的繼承

       function Student ( name, age, gender,course ) {

              Person.call( this, name, age,gender );

              this.course = course;

       }

       var p = new Student ( 'jim', 19, 'male','前端' );

十二、ES5

1、函數的bind 方法(ES5)

       bind 就是讓函數綁定對象的一種方法

函數本身就是可以調用,但是其如果想要作爲方法調用,就必須傳入宿主對象,並且使用call或apply形式,但是bind使得函數可以與某一個對象綁定起來,那麼在調用函數的時候,就好像是該對象在調用方法

語法:函數.bind (對象)

假如返回一個函數foo,那麼調用返回的函數foo,就好像對象在調用該方法一樣

var t =document.getElementsByTagName.bind(document);//讓t包含函數體的同時也包含對象

arr = [];

arr.push.apply(arr,t('p'));

arr.push.apply(arr,t('p'));

for (var i = 0; i< arr.length; i++) {

arr[i].style.border= '1px solid red';

}

2、Object.prototype的成員

constructor

hasOwnProperty 判斷該屬性是否爲自己提供

propertyIsEnumerable判斷屬性是否可以枚舉 for in

isPrototypeOf     判斷是否爲原型對象

toString, toLocaleString,valueOf

3、包裝對象

       在開發中常常會使用基本數據類型, 但是基本數據類型沒有方法, 因此 js 引擎會在需要的時候,自動的將Number,String,Boolean三個基本類型轉換成對象類型,可以使用charAt, substr,slice, ...等方法

執行過程:

       "abc".charAt( 1) 

       "abc" -> newString( "abc" )

 

 

.charAt( 1 ) 返回結果

       s 就被銷燬

       當    基本類型.方法的時候. 解釋器首先將基本類型轉換成對應的對象類型, 然後調用方法。方法執行結束後, 這個對象就被立刻回收

       在 apply 和 call 調用的時候, 也會有轉換髮生。上下文調用的第一個參數必須是對象. 如果傳遞的是數字就會自動轉換成對應的包裝類型

4、getter與setter 的語法糖

       語法糖: 爲了方便開發而給出的語法結構

       var o = (function () {

              var num = 123;

              return {

                     get_num:function () {

                            return num;

                     },

                     set_num:function ( v ) {

                            num =v;

                     }

              };

       })();

       o.get_num();  //獲得數據 => 希望o.num 形式,簡單

       o.set_num( 456 );  //設置 => 希望o.num = 456 形式,簡單

       var o = (function () {

              var num = 123;

              return {

                     get num () {  // get 名字 () { 邏輯體 }

                            returnnum;

                     },                                                                             語法糖

                     set num ( v ){  // set 名字 ( v ) { 邏輯體 }

                            num =v;

                     }

              };

       })();

5、 ES5 中引入的部分數組方法

forEach遍歷數組

語法:數組.forEach(fn)       例如 arr.forEach(function (v, i){};

map 映射,返回一個數組,數組的每一個元素就是map函數中的fn的返回值

語法:數組.map(fn(v, i))   v是數據,i是索引

filter 篩選

語法:數組.filter(function(v, i)){return true/false}

some

判斷數組中至少有一個數據符合要求,就返回true,否則就返回false

every

必須滿足所有的元素都符合要求才會返回true

indexOf

在數組中查找元素,如果含有該元素,返回元素的需求(索引),否則返回-1

lastIndexOf

從右往左找元素

 

例題:上下文對象的實際應用

需求:獲得div與p標籤,並添加邊框border: 1px solidred

方法①  var t = document.getElementsByTagName;

var p_list =t.apply(document, ['div']);

var div_list =t.apply(document, ['div']);

var arr = [];

[].push.apply(arr,p_list);

[].push.apply(arr,div_list);

for (var i = 0; i< arr.length; i++) {

arr[i].style.border= '1px solid red';

}

方法②  var t = document.getElementsByTagName, arr =[];

arr.push.apply(arr,t.apply(document, ['p']));

arr.push.apply(arr,t.apply(document, ['div']));

arr.forEach(function(v){

v.style.border ='1px solid red';

})

方法③  var t =document.getElementsByTagName.bind(document);//讓t包含函數體的同時也包含對象

arr = [];

arr.push.apply(arr,t('p'));

arr.push.apply(arr,t('p'));

for (var i = 0; i< arr.length; i++) {

arr[i].style.border= '1px solid red';

}

 

數組合並數組的方法

var arr1 =[1,2,3,4];

var arr2 = [5,6];

arr1.push(arr2);  //這樣是將arr2數組作爲一個元素追加到arr1中,結果arr1[1,2,3,4,arr2]

[].push.apply(arr1,arr2);

面試題

       var length = 10;

       function fn() {

              console.log(this.length );

       }

       var obj = {

              length: 5,

              method: function ( fn) {

                     fn();

                     arguments[ 0]();//對象,接受傳遞的參數

              }

       };

       obj.method( fn, 1 );

 

十三、正則

1. 正則表達式

       regular expression一個有規則的表達式

       正則表達式就是一個用於查找的含有匹配字符串或匹配元字符的字符串

 

2. 正則表達式對象

       js 正則表達式對象就是由正則表達式創建的對象, 該對象可以進行匹配, 提取和替換.

       創建正則表達式對象

       1) 構造函數

              var regex = newRegExp( 正則表達式字符串[, 匹配模式] );

       2) 字面量

              var regex = /正則表達式/;

3. 使用正則表達式進行匹配

       語法:

              正則對象.test( 字符串 ) -> bool

       如果參數字符串中含有複合正則匹配的子字符串, 就返回 true, 否則返回 false

4.基本元字符

.  表示任一個非換行的字符

       案例: foot     _ 是 food, foot  寫成 foo.

() 表示分組和提高優先級

[] 表示一個字符, 出現在 [] 中的字符

       用法: [abc]    出現 [] 中的任意一個字符

       匹配 a, 或 b, 或 c

| 或

       用法:      正則表達式|正則表達式

轉義字符: \

       表示點:   \.

       表示[]:  \[  \]

       表示():      \(  \)

       表示\ :  \\

5. 限定元字符

*     緊跟前面的一個字符或一組字符出現 0 次到多次

+     緊跟在前面的字符出現 1 次到多次

?     緊跟在前面的字符出現 0 次或 1 次

{數字}     緊跟在前面的字符出現指定次數

              a{3}  aaa

{數字,}    緊跟在前面的字符至少出現指定次數

              a{3,}  aaa, aaaaaaaaa, aaaaaaaaaaaaaa, ...

{數字, 數字} 緊跟在前面的字符出現的次數範圍

                     a{1, 3}    a, aa, aaa

6. 首尾元字符

^     表示必須以 xxx 開頭

$     表示必須以 xxx 結尾

7. 簡寫元字符

\s   空白字符, 包括空格, tab, 回車換行等

\S 非空白字符

       js 中常常使用 [\s\S] 表示任意字符

\w   表示字符, 包含字母, 數字, 下劃線.

\W  非字符

\d  數字

\D 非數字

8. 提取

       使用正則表達式可以進行匹配, 使用 exec 可以將匹配到的數據提取出來

       語法:

正則表達式對象.exec( 字符串 ) -> 封裝成數組

1). 循環提取

       全局模式:匹配正則表達式的一種方式,將一個字符串中所有符合的要求的字符串提取出來,

       1> 正則表達式需要使用全局模式

              var r = new RegExp( '正則', 'g' );

              var r = /正則/g;

       2> 調用 exec 首先獲得第一個匹配項,一直調用下去, 就可以得到所有的匹配項,直到最後全部匹配完, 如果還用該方法, 則返回 null

       案例:在'abc123def456ghij789klum' 提取數字

var str= 'abc123def456ghij789klum';

              var r = /\d+/g;

       while ( res = r.exec( str )) {

              // 操作 res, 處理捕獲的結果

       }

2). 將匹配到的結果進行解析

       假如有一個字符串: [email protected]

       匹配提取郵箱, 同時將郵箱地址部分的名字和主機名都提取出來

3). 匹配但是不去捕獲的元字符

       (?:其他正則表達式內容)

4). 要截取一個字符串中的一個html 標籤

       var str ='123<div>456</div>78<span>9</span>0';

       1> 要截取 html 標籤, 標籤使用 <>. 因此正則表達式寫成 <\w+>

       2> 與之匹配的標籤名是什麼?

              反向引用:如果在一個正則表達式中使用組匹配到某一個數據, 允許在該正則表達式中使用

              '\數字' 的方式引用該組

              <(\w+)>.*<\/\1>

9. 貪婪模式

       貪婪模式:凡是在正則表達式中, 涉及到次數限定的, 一般默認都是儘可能的多匹配.

       取消貪婪模式:在次數限定符(+,*,?,{})後面加上 ?

       注意: 貪婪模式性能會略高於非貪婪模式, 所以開發的時候. 一般不考慮貪婪的問題

              只有代碼匹配結果出現問題了, 一般一次多匹配了, 纔會取消貪婪

       多個貪婪在一起的時候的強度

       \d+\d+\d+

       1234567

       如果取消貪婪模式

       \d+?\d+\d+

10. 否定元字符

       語法:

              [^字符]

       不爲這些字符的字符

       [^abc]           不是 a 也不是 b 也不是 c 的字符

11. 字符串的替換

       語法:

              字符串.replace( 查找字符串, 替換字符串 ) -> 字符串

       1> 字符串替換方法

              字符串1.replace( 字符串2, 字符串3 )

              在字符串1 中找到字符串2, 將其替換成字符串3, 返回替換後的字符串

              特點: 只替換第一個找到的字符串

       2> 正則表達式替換

              字符串.replace( 正則表達式, 字符串 ) -> 字符串

        1. 簡單替換

                     'aaaaa-------bbbbbb------ccccc'.replace(/-+/, '-' )  -->'aaaaa-bbbbbb------ccccc'

                     'aaaaa-------bbbbbb------ccccc'.replace(/-+/g, '-' ) -->'aaaaa-bbbbbb-ccccc'

        2. 分組替換

                     可以在替換字符串中, 使用 $數字來引用替換的數據

                     'abc123'.replace(/(\d+)/, 'd$1' ) -> 'abcd123'

                     '1991-1-1'

                     中國: 1991年1月1日

                     歐洲: 1/1/1991

                     ... : 1991 1 1

                     '1991-1-19'.replace(/(\d+)-(\d+)-(\d+)/, '$1年$2月$3日' )

       3> 函數參數用法(瞭解)

              語法:

                     字符串.replace( 正則表達式, fn )

              '我的郵箱是:[email protected], 你的郵箱是:[email protected]'

                     .replace(/\w+@\w+(\.\w+)+/g, '*' );

              '我的郵箱是:[email protected], 你的郵箱是: [email protected]'

                     .replace( /(\w+)@(\w+(\.\w+)+)/g, function ( s, g1, g2,g3 ) {

                            return'*';

                     } );

              // 要求只顯示第一個字符, 其餘的都是用 * 表示

              '我的郵箱是:[email protected], 你的郵箱是:[email protected]'

                     .replace(/(\w+)@(\w+(\.\w+)+)/g, function ( s, g1, g2, g3 ) {

                            // 將用戶名變成 a***** 的形式

                            varfirst = g1.charAt( 0 );

                            varstart = [];

                            for (var i = 0; i < g1.length - 1; i++ ) {

                                   start.push('*' );

                            }

                            returnfirst + start.join('') + '@' + g2;

                     } );

 

12. 案例

    1> 寫一個正則表達式匹配 身份證號碼

              身份證是 18 位數字

              省市區出生年月隨機編碼X

              1) 首先是要做匹配, 就一定要使用 ^ $

              2) 是 18 位數字( 0, 1, 2, 3, 4, 5,6, 7, 8, 9 ). 可以使用 [0123456789]

                     還可以使用0|1|2|3|4|5|6|7|8|9

              3) 要求是 18 位. 限定 18 位, 即 {18}

             

              組合: ^[0123456789]{18}$

 

              如果最後一位是x

              前面 17 位數字:^[0123456789]{17}$

              後面要麼是數字: [0123456789]

              要麼是 x: x

              寫法:     [0123456789x]

                            [0123456789]|x

                            0|1|2|3|4|5|6|7|8|9|x

 

              ^[0123456789]{17}[0123456789x]$

    2> 匹配郵箱

              [email protected]

              [email protected]

              [email protected]

              [email protected]

              .cc

              .org

              .edu

              .中文

              ...

             

              名字 @ 主機名

              1) 是要驗證郵箱, 那麼就需要使用 ^ $

              2) 名字:

                     數字與字母

                     [0123456789]

                     [abcdefghi...]

                     [ABCDEFG...]

                     [] 裏面的字符如果是編碼序號連續的可以使用連字符連接

                     數字: [0-9] 

                              [9-0] 錯誤的, 編碼逆序

                     字母: [a-z]

                              [A-Z]

                     整合: [0-9a-zA-Z]

                     名字的變式方法: [0-9a-zA-Z]+

    3>主機名

                     主機名也是一串字符串或數字

                     但是它多了一個 .com .cn

              3.1) 只有名字       [0-9a-zA-Z]+

              3.2) 只含有一個 .什麼

                     開始 \.

                     中間 [0-9a-zA-Z]+

                     只含有一個名字: \.[0-9a-zA-Z]+

              3.3) 含有多個名字

                     .com.con.cc.c1.c2.c3

                     即 .什麼出現一次到多次

                     (\.[0-9a-zA-Z]+)+

              最後主機名可以寫成

                     [0-9a-zA-Z]+(\.[0-9a-zA-Z]+)+

       最後整合一下

              ^[0-9a-zA-Z]+@[0-9a-zA-Z]+(\.[0-9a-zA-Z]+)+$

 

4>.匹配一個數字

       1> 匹配一個數字

              [0-9]+

              1) 由於是匹配, 包含 ^ $

              2) 首先第一個字符不允許是 0, 所以第一個可以寫成 [1-9]

              3) 後面的數字就是 [0-9]

              4) 要求後面的數字出現 0 次到多次, 以匹配任意的非 0 數字: [1-9][0-9]*

              5) 由於還需要考慮 0, 因此寫成 [1-9][0-9]*|0

              6) 考慮 | 優先級最低: ^([1-9][0-9]*|0)$)考慮正負

              ^(-?[1-9][0-9]*|0)$

 

       2> 匹配一個指定範圍的數字

              匹配 0 ~ 255 爲例

              [0-255]        匹配的是0, 1, 2, 5            

              如果要匹配指定範圍的數字, 那麼需要將字符串結構進行分類

              1) 0 要匹配的, 所以在正則表達式中有 0 這一項

              2) 任意的 2 位數, 即 [1-9][0-9]

              3) 任意的 1 位數, 即 [0-9], 可以將第 1) 結論合併

              4) 考慮 3 位數的時候, 只允許出現 1xx 的任意數, 而 2xx 的有限制

                     因此在分組, 考慮 1xx 的任意數, 可以寫成: 1[0-9][0-9]

              5) 考慮 2xx 的數字, 在 200 到 250 之間允許任意取. 所以

                     寫成: 2[0-4][0-9]

              6) 考慮 250 到 255, 寫成 25[0-5]

              綜合一起:

                     ^([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])$

              匹配贏 IPv4

                     127.0.0.1

                     192.168.1.1

              ^(([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]))$

 

       3> 匹配小數

              要求, 小數不允許以 0 結尾

              3.1415

              [0-9]*[1-9]

              ^((-?[1-9][0-9]*|0)(\.[0-9]*[1-9])?)$

              jq 中有一屬性過濾選擇器

              [value=name] [value][value !=name] ...

              瞭解

              \[[a-zA-Z]((!|\||~|^|$|)=...|)\]

       案例:

       var str = '我有一個郵箱, 是 [email protected], 還有 [email protected], 和 [email protected]'

       要求將裏面的郵箱全部提取出來, 然後將名字還有主機名也取出來

       // 循環提取的正則表達式

       var r =/[a-zA-Z\d]+@[a-zA-Z\d]+(\.[a-zA-Z\d]+)+/g;

       // 如果需要將匹配到的結果再次分解, 可以使用分組的形式, 在正則中分組即可

       var r =/([a-zA-Z\d]+)@([a-zA-Z\d]+(\.[a-zA-Z\d]+)+)/g;

       // 注意, 正則表達式中, 分組是有編號的. 從左往右數 '('. 從 1 開始依次編號

       // 匹配提取的結果中, 對應的編號就可以獲得分解的數據

十四、面向對象面試題

1、說說你對閉包的理解

使用閉包主要是爲了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染,缺點是閉包會常駐內存,會增大內存使用量,使用不當很容易造成內存泄露。在js中,函數即閉包,只有函數纔會產生作用域的概念

閉包有三個特性:

1.函數嵌套函數

2.函數內部可以引用外部的參數和變量

3.參數和變量不會被F垃圾回收機制回收

2js繼承方式及其優缺點

原型鏈繼承的缺點

一是字面量重寫原型會中斷關係,使用引用類型的原型,並且子類型還無法給超類型傳遞參數。

借用構造函數(類式繼承)

借用構造函數雖然解決了剛纔兩種問題,但沒有原型,則複用無從談起。所以我們需要原型鏈+借用構造函數的模式,這種模式稱爲組合繼承

組合式繼承

組合式繼承是比較常用的一種繼承方法,其背後的思路是使用原型鏈實現對原型屬性和方法的繼承,而通過借用構造函數來實現對實例屬性的繼承。這樣,既通過在原型上定義方法實現了函數複用,又保證每個實例都有它自己的屬性。

3Javascriptcalleecaller的作用?

caller是返回一個對函數的引用,該函數調用了當前函數; 
       callee是返回正在被執行的function函數,也就是所指定的function對象的正文。

4 ..call() .apply() 的含義和區別?

call() 和 apply() 是預定義的函數方法。兩個方法可用於調用函數,兩個方法的第一個參數必須是對象本身。 後面的參數都是傳遞給當前對象的參數。  

       區別:apply傳入的是一個參數數組,也就是將多個參數組合成爲一個數組傳入,而call則作爲call的參數傳入(從第二個參數開始)。 
       Object.call(this,obj1,obj2,obj3) 
       Object.apply(this,arguments) 
       在 JavaScript 嚴格模式(strict mode)下, 在調用函數時第一個參數會成爲 this 的值,即使該參數不是一個對象。 在 JavaScript 非嚴格模式(non-strict mode)下, 如果第一個參數的值是 null 或 undefined, 它將使用全局對象替代。

5 . new操作符具體幹了什麼呢?

1、創建一個空對象,並且 this 變量引用該對象,同時還繼承了該函數的原型。 
       2、屬性和方法被加入到 this 引用的對象中。 
       3、新創建的對象由 this 所引用,並且最後隱式的返回 this 。

 

 

第11章AJAX

一、服務器與客戶端(掌握)

     1、服務器和客戶端說白了,都是電腦

       服務器:能夠提供某種服務的機器(計算機),主要給上網用戶提供後臺服務

       客戶端:具有向服務器索取服務能力的終端,主要用於普通上網用戶

     2、服務器

          定義:使計算機具備提供某種服務能力的應用軟件,稱爲服務器軟件,通過安裝相應的服務軟件,然後進                行配置後就可以使計算具備了提供某種服務的能力。

二、網絡相關概念

     1. IP地址

   IP就是給每個連接在互聯網上的主機分配的一個32位地址。

          查看本機的IP: ipconfig 或者ipconfig -all

          查看域名的IP: ping

     2. 域名

          由於IP地址是基於數字,不方便記憶,於是便用域名來代替IP地址,域名就是方便IP的的別名,替代品

      一個域名可以對應多個IP(負載均衡)

             一個IP可以對應多個域名(虛擬主機)

     3. 端口

          端口是計算機與外界通訊交流的出口,每個端口對應不同的服務。說白了就是服務所對應的出口。

三、網站  

1、靜態網站

       1. 全部由HTML(標準通用標記語言的子集)代碼格式頁面組成的網站,所有的內容包含在網頁文件中。

          一般文件名均以htm、html、shtml等爲後綴。

       2. 優點:

              a、靜態網頁的內容相對穩定,因此容易被搜索引擎檢索

       3. 缺點:

              a、沒有數據庫的支持,在網站製作和維護方面工作量較大

              b、靜態網頁的交互性較差,在功能方面有較大的限制。

2、動態網站

       1. 動態網站並不是指具有動畫功能的網站,而是指網站內容可根據不同情況動態變更的網站,

          一般情況下動態網站通過數據庫進行架構。

          一般動態網站體現在網頁一般是以asp,jsp,php,aspx等結尾。

       2. 優點:

             a、動態網頁以數據庫技術爲基礎,可以大大降低網站維護的工作量。

               b、交互能力強,網頁會根據用戶的要求和選擇而動態改變和響應。

               c、維護方便,即無需手動操作,便會自動生成新的頁面

       3. 缺點

              a、動態網頁中的“?”對搜索引擎檢索存在一定的問題,

                 因此採用動態網頁的網站在進行搜索引擎推廣時需要做一定的技術處理才能適應搜索引擎的要求

四、php基礎語法()掌握

1、基礎

1. 所有的PHP相關的代碼都要寫在<?php … ?>裏面

echo 的作用就是向頁面當中輸入字符串,換行 '<br>'

2. PHP 文件的默認文件擴展名是 ".php"。

3. PHP腳本在服務器上執行。AJAX也是

       所有咱們現在寫代碼都要放在Apache服務器下打開

4. PHP 語句必須以分號結尾(;)

變量聲明與字符串拼接

       1.  PHP的變量聲明以及變量名的規則

PHP中定義變量使用的 $ 操作符;

變量命名的規則:字母數字下劃線,不能以下劃線開頭,對大小寫敏感  

       2. PHP中的字符拼接使用“ . ”,js中用“+”;

       3. PHP中的單引號把包含在其中的變量當做普通的字符串來處理,不會給它賦值,直接輸出

         PHP中的雙印號把包含在其中的變量當做變量解析成變量值,$變量後面不能直接跟其他字符串

2、JSON字符串轉化成對象:

var json = '{"name":"lily"}'; json中的數據必須用雙引號

var object = JSON.parse(json數據);

數組

數組的兩種形式:

$arr =array(1,2,3);默認key是從0 開始的整數

$arr =array("a"=>"1","b"=>"2","c"=>"3");

echo $arr["a"];//1

       1. echo --- 輸出簡單數據類型,如字符串、數值

       2. print_r($數組名) --- 輸出複雜數據類型,如數組

       3. var_dump($數組名) --- 輸出詳細信息,如對象、數組

$arr = array(1,2,3);

echo $arr[0];  //1

print_r($arr);  //Array([0]=>1 [1]=>2 [2]=>3)

array (size=5)  //0 => int 2 

                   1 => int 3 

                   2 => int 5

$arr1 =array('name' => 'lily, "age" =>'18');

echo$arr1['name'];  //lily

print_r($arr1);  //Array([user]=>lily [age]=>18)

var_dump($arr1);    // array(size=2)

   'user' => string 'lily' (length=4)

   'age' => string '18' (length=2)s

3、二維數組

       $arr = array();

$arr[0] =array(1,2,3);

$arr[1] =array(4,5,6);

print_r($arr);  //Array ( [0] => Array ( [0] => 1 [1]=> 2 [2] => 3 ) [1] =>

Array([apple]=>Array ([color] => red [shape] => round) )

數據類型與數組遍歷

       1. php的數據類型與JavaScript的數據類型是類似的,都是弱類型語言

字符串、整型、浮點型、布爾型、數組、對象、NULL

       2. gettype() 內置函數,用來判斷變量的類型

echo gettype($arr);

       3. count()是內置函數,用來計算數組的長度

$arr =array(123,456,789);

for($i=0;$i<count($arr);$i++) {

echo$arr[$i].'<br>';

}

foreach($arr as$value) {

echo$value.'-----<br>';

}

foreach($arr as$key => $value){

echo$key.'===='.$value.'<br>';

}

4、php基礎語法---- 函數

       1. 自定義函數,語法類似與JavaScript

       2. 系統函數直接調用,不需要聲明

       3. json_encode() --- 將數組和對象轉換爲字符串的方法;

php基礎語法 ---- get請求參數獲取

get[],post[]應用於表單處理

$_GET是PHP內置好的專門用來接數據用的一個全局數組,它包含了表單提交上來的數據

       1. http協議的常用請求方式:(增刪改查)

          a、get 用來從服務器獲取數據(參數一般作爲查詢條件)

          b、post 用來添加數據(表單)

          c、put  用來修改數據

          d、delete 用來刪除數據

       2. $_GET['abc']得到url地址中傳遞的參數的值

       3. 注意:絕不能使用 GET 來發送密碼或其他敏感信息

5、php基礎語法---- post請求參數獲取

       1. form 默認請求方式就是get請求,get請求會把表單數據作爲url的參數進行提交

              form 的method設置成post

2. 設置服務響應的文件類型:(如果請求的數據亂碼,要在php文件中設置)

              1.header("Content-Type: text/plain; charset=utf-8");

              2.header("Content-Type: text/html; charset=utf-8");

3. $_POST也是PHP內置好的專門用來接數據用的一個全局數組

       GET和POST請求方式的差異

       GET沒有請求主體,使用xhr.send(null)

       GET可以通過在請求URL上添加請求參數

       POST有請求主體,可以通過xhr.send('name=itcast&age=10')

       POST需要設置請求頭

       GET效率更好(應用多)

       GET大小限制約4K,POST則沒有限制

       get 方式提交不太安全,post方式相對來說比較安全

6、php基礎語法----後臺接口

       1. 將數組和對象轉換爲字符串的方法 --- json_encode();

       2. 將字符串轉換爲對象的方式    ---json_decode();

       3. 如何更好的理解接口這個概念

          接口說白了就是後臺返回特定格式數據,而不是一個完整的頁面

          就是從後臺到前臺返回一些數據

五、原生ajax請求(重點)

1、原生Ajax實現頁面局部更新

       什麼是Ajax-----Asynchronous Javascript And XML(異步JavaScript和XML),是一種創建交互式網頁應用的網頁開發技術,是多種技術的集合:JavaScript(XMLHTTPRequest)html css + 服務端

       在不刷新頁面的情況下,瀏覽器悄悄地、異步地向服務器發出HTTP請求。

       服務器收到請求後,傳回新的格式化數據回來(通常是JSON)。

       瀏覽器解析JSON,通過DOM將新數據呈遞顯示,頁面僅局部刷新

通過後臺與服務器進行少量數據交換,Ajax可以使網頁實現局部更新,這意味着可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。傳統的網頁如果需要更新內容,必須重載整個網頁頁面

2、原生Ajax詳解-xhr對象創建

       1. 標準下 --- xhr = new XMLHttpRequest();

       2. IE6   --- xhr = newActiveXObject('Microsoft.XMLHTTP');

兼容if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

       else{

xhr = newActiveXObject('Microsoft.XMLHTTP');

}

3、原生Ajax詳解-請求參數分析

       1. open()方法  

         xhr.open("get","test.txt",true);

          調用open方法並不會真正發送請求,而只是啓動一個請求以備發送。

          它接受三個參數:要發送的請求的類型、請求的URL、表示是否異步的布爾值。

注意:如果是get請求,那麼請求參數必須在url中傳遞

              encodeURI()用來對中文參數進行編碼,防止亂碼。

  post請求參數通過send傳遞,不需要通過encodeURI()轉碼,但是必須需要設置請求頭參數

       2. send()方法

          如果要發送請求,用send()方法。

          要發送特定的請求,需要調用send()方法。

          它接受一個參數,即要作爲請求主體發送的數據。

          如果不需要通過請求主體發送數據,則必須傳入null,不能留空。

          get請求是隻有頭部,沒有主體的;而post請求有請求主體。

       3. xhr對象有一個重要的屬性,就是readyState屬性,表示“就緒狀態”;

          就是 --- xhr.readyState

          readyState取值只有5種值:0、1、2、3、4

          0 (uninitialized)    開始初始化

          1 (loading)      XMLHttpRequest已經發送了請求

          2 (loaded)              XMLHttpRequest瀏覽器已經收到了服務器響應的數據

          3 (interactive)      正在解析數據

          4 (complete)  數據解析完成,可以使用了

 

 

      

 

 

 

 

4. 只要readyState屬性值發生了變化,就會觸發一個事件onreadystatechange事件。

          此時,可以用

                xhr.onreadystatechange = function(){}

          來捕獲readyState改變之後做的事情。

       5. Ajax一旦用send方法發出HTTP請求之後,

          當readyState爲4的時候,就會有一個屬性產生 --- xhr.status

          表示的是請求的文件的狀態碼

          1**  ----  消息

          2** ----  代碼請求成功 //200表示相應成功

          3** ----  重定向

          4** ----  請求錯誤   //404沒有找到請求的資源

          5** ----  服務器錯誤  //500服務器端錯誤

       6. responseText

              獲得字符串形式的響應數據。

              如果來自服務器的響應並非 XML,請使用 responseText 屬性。

       7. responseXML

              獲得 XML 形式的響應數據。

       8. XMLHttpRequest 對象用於和服務器交換數據。

       9. setRequestHeader --- 向請求添加 HTTP 頭

              xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4、原生Ajax詳解-響應狀態分析

原生Ajax詳解:

1、創建XMLHttpRequest對象

    var xhr = newXMLHttpRequest();

準備發送

encodeURI()用來對中文參數進行編碼,防止亂碼

var param = 'username' + uname + '&password' + pw;

xhr.open('get','./01check.php?'+encodeURI(param),true);

參數1、請求方式(get獲取數據,post提交數據)

參數2、請求地址(如果是get請求那麼請求參數必須在url中傳遞)

參數3、同步或者異步標誌位,默認是true表示異步,false表示同步

(post請求)xhr.open('post','./01check.php',true);//post請求,參數通過send傳遞,不需要通過encodeURI轉碼

執行發送動作

xhr.send(null);  //get請求這裏需要添加null參數

(post請求)xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded);

(post請求)xhr.send(param);//post請求參數在這裏傳遞,並且不需要轉碼

4、指定回調函數

    xhr.onreadystatechange =function(){ //該函數調用的條件就是readyState狀態從2-4

       if(xhr.readyState == 4){ //表示服務器返回的數據已經可以使用了,但是這個數據不一定是正確的

           if(xhr.status ==200){//表示服務器返回的數據是正常的,不是200表示數據是錯誤的

                var data =xhr.responseText;

                var info =document.getElementById('info');

                if(data == '1'){

                    info.innerHTML= '登錄成功';

                }else if(data =='2'){

                    info.innerHTML= '用戶名或者密碼錯誤';

                }

            }

        }

}

 

六、json(重點)

1、json數據格式

1、什麼是JSON

       - JavaScript 對象表示法

       - 是存儲和交換文本信息的語法

       - 輕量級的文本數據交換格式

2、JSON數據和普通的JS對象的區別

       - json 對象沒有變量

       - json 形式的數據結尾沒有分號

       - json 數據中的鍵必須用雙引號包括

3、JSON和XML對比

              - JSON 比 XML 更小、更快,更易解析

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2、json數據解析

 

1、把JSON文本轉換爲JavaScript對象

       JSON 最常見的用法之一,是從 web 服務器上讀取 JSON 數據(作爲文件或作爲 HttpRequest),將 JSON   數據轉換爲 JavaScript 對象,然後在網頁中使用該數據。

2、爲什麼要轉換

       在數據傳輸過程中,json是以文本,即字符串的形式傳遞的,而JS操作的是JSON對象,所以,JSON對       象和JSON字符串之間的相互轉換是關鍵。

3、轉換的方法

     JSON.parse()      把json形式的字符串轉成對象

       JSON.stringify()      把對象轉成字符串

       eval()                  把字符串解析成JS代碼並執(不安全)

4、php開發json形式數據接口

json_encode() --- 把數組轉換成JSON形式的字符串

3、同步與異步理解

       同步:等待一個請求完成,後續進程被阻塞,只有等請求返回後,才能執行後續的語句

       異步:不等待請求完成,立即執行後續語句,請求返回後,再執行回調函數裏面的語句

       多線程:就是指計算機CPU有一定的物理結構,能夠在物理上,同時計算兩個東西。一邊算加法,一遍算乘法。                     程序是併發的。

       單線程:就是計算機每時每刻,只有一個計算任務在執行。程序不是併發的。

同步與異步底層原理分析

js事件處理機制:

       瀏覽器單線程,瀏覽器事件隊列

事件隊列中的任務執行的條件

       定時函數(延時時間已經達到)

       事件函數(特定事件被觸發)

       ajax的回調函數(服務器有數據響應)

拓展

              單線程也能異步。就是你的程序只用一個線程,也就是說計算機同一時刻只能計算一個任務。那爲什麼還       能異步呢??原因是,異步的時候,CPU把請求已經交給了磁盤這個物理硬件,而CPU還在以單線程運行。       比    如世界著名 Node.js語言,就是非常著名的單線程、異步的語言。

              多線程也能同步。多線程,就是CPU能夠同時計算多個命令,但是程序就是選擇傻等,你管得着麼?比       如    PHP是世界上最最註明的多線程語言,但是裏面提供的讀取文件方法,全是同步的。

七、ajax封裝(瞭解)

1、Ajax初步封裝

       抽取函數  --- 學會抽取函數

       實際開發中,重複利用的代碼塊也要封裝成一個函數

       理解回調函數的調用方式 --- 寫5遍,寫熟

       array_key_exists() --  這裏的array_key_exists用來判斷數組中沒有對應鍵

2、jQuery框架-Ajax相關API基本使用

       常用的jQuery ajax參數:

       $.ajax({

              type : "",

              url : "",

              data : "",

              dataType :"",

beforeSend:function(xhr){

$('').html('正在拼命加載...');

}

              success :function(data){

              }

       });

八、跨域(掌握)

1、什麼是跨域

       同源策略是瀏覽器的一種安全策略,所謂同源指的是請求URL地址中的協議、域名和端口號都相同,只要其中之一不相同就是跨域。

       同源策略主要是爲了保證瀏覽器的安全性

       在同源策略下,瀏覽器不允許Ajax跨域獲取服務器數據

       說簡單點:跨域是指從一個域名的網頁去請求另一個域名的資源。只要協議、域名、端口有任何一個的不同,就被當作是跨域。

2、跨域解決方案

       jsonp,99%的公司都在使用jsonp。

利用script標籤的跨域能力,這就是jsonp的基礎。

2、JSONP的原理

1、JSONP的原理(1)

       靜態script標籤的src屬性進行跨域請求

              如果使用src這種方法進行跨域的話,一定要把這段獲取數據的代碼在上面先行加載,使用數據的方法放       在後加載

              這種方法的缺點就是非常的不靈活,這種方法已經極少使用,瞭解即可

2、JSONP的原理--動態(2)

利用js構造一個script標籤,把json的url賦給script的src屬性,把script插入到dom裏,讓瀏覽器去獲取

       動態創建script標籤,通過標籤的src屬性發送請求

       動態創建script標籤發出去的請求是異步請求

       服務器響應的內容是【函數調用】foo(實參)

3、JSONP的原理(3)

       1、jsonp的本質:動態創建script標籤,然後通過它src屬性發送跨域請求,然後服務器響應的數據格式爲【函數調用(foo(實參))】

         所以在發送請求之前必須先聲明一個函數,並且函數的名字與參數中傳遞的名字要一致,這裏聲明的函數是由服務器響應的內容,(實際就是一段js代碼-函數調用)來調用

       2、注意:ajax和jsonp其實本質上是不同的東西。

       ajax的核心是通過XMLHttpRequest獲取非本頁內容,

       而jsonp的核心則是動態添加<script>標籤來調用服務器提供的js腳本。

    3、賀師俊 --- JSONP 的工作原理是什麼

              就是利用<script>標籤沒有跨域限制的“漏洞”(歷史遺蹟啊)來達到與第三方通訊的目的。

       當需要通訊時,本站腳本創建一個<script>元素,地址指向第三方的API網址,

              形如:<script src="http://www.example.net/api?param1=1&param2=2"></script>

       並提供一個回調函數來接收數據(函數名可約定,或通過地址參數傳遞)。

       第三方產生的響應爲json數據的包裝(故稱之爲jsonp,即jsonpadding),形如:

              callback({"name":"hax","gender":"Male"})

       這樣瀏覽器會調用callback函數,並傳遞解析後json對象作爲參數。本站腳本可在callback函數裏處理所傳入的數據。

4、定義函數

一定要寫在調用JSONP之前。也就是,調用任何外部js,都沒有函數聲明頭的提升。

 

jsonp屬性的作用就是自定義參數名字(callback=abc,這裏的名字指的是等號前面的鍵,後端根據這個鍵獲取方法名,jQuery的默認參數名稱是callback) //等號前面的是後臺獲取數據abc用的,GET(callback)

jsonpCallback屬性的作用就是自定義回調函數的名字,(callback=abc,這裏的名字指的是等號後面的值)

       //等號後面的是定義回調函數的名字

 

九、模板引擎:(掌握)

模板 + 數據-->靜態頁面片段-->插入到頁面中

artTemplate高效的原因:

1、預編譯

artTemplate的編譯賦值過程是在渲染之前完成的

2、更快的字符串相加方式

artTemplate根據JavaScript引擎特性採用了數組push拼接字符串和+=兩種不同的字符串拼接方式,在IE6-8的瀏覽器下,數組push方法拼接字符串會比+=快,但是現代瀏覽器使用+=會比數組push方法快

 

 

 

 

change([[data],fn])

當元素的值發生改變時,會發生change 事件。

該事件僅適用於文本域(textfield),以及textarea 和select 元素。當用於select 元素時,change事件會在選擇某個選項時發生。當用於text field 或 textarea 時,該事件會在元素失去焦點時發生。

:get(index)所有大於0 的元素

 

3、把?後面的參數取出來,方法

 

 

 

 

 

 

 

 

 

十、ajax面試題

1.什麼是HTTP協議?

A、HTTP協議(HyperText Transfer Protocol,超文本傳輸協議)是因特網上應用最爲廣泛的一種網絡傳輸協議,所有的WWW文件都必須遵守這個標準。 
       B、HTTP是一個基於TCP/IP通信協議來傳遞數據(HTML 文件, 圖片文件, 查詢結果等)。 
       C、HTTP是在網絡上傳輸HTML的協議,用於瀏覽器和服務器的通信。 
       D、HTTP協議工作於客戶端-服務端架構爲上。瀏覽器作爲HTTP客戶端通過URL向HTTP服務端即WEB服務器發送所有請求。

2.ajax請求時,如何解析json數據?json格式如何在js中解析?

在js中解析json有兩種方式:eval和JSON.parse。鑑於安全性考慮,使用parse更靠譜。 
       eval不僅解析了json字符串,還執行了json字符串中的js方法。eval不會判斷json字符串是否合法,JSON.parse則會判斷。所以使用eval方式是非常危險的,一般使用JSON.parse方式。

 

3、如何解決跨域問題

①JSONP:

原理是:動態插入script標籤,通過script標籤引入一個js文件,這個js文件載入成功後會執行我們在url參數中指定的函數,並且會把我們需要的json數據作爲參數傳入。

由於同源策略的限制,XmlHttpRequest只允許請求當前源(域名、協議、端口)的資源,爲了實現跨域請求,可以通過script標籤實現跨域請求,然後在服務端輸出JSON數據並執行回調函數,從而解決了跨域的數據請求。

優點是兼容性好,簡單易用,支持瀏覽器與服務器雙向通信。缺點是隻支持GET請求。

JSONP:json+padding(內填充),顧名思義,就是把JSON填充到一個盒子裏

②CORS

服務器端對於CORS的支持,主要就是通過設置Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設置,就可以允許Ajax進行跨域的訪問。

③通過修改document.domain來跨子域

將子域和主域的document.domain設爲同一個主域.前提條件:這兩個域名必須屬於同一個基礎域名!而且所用的協議,端口都要一致,否則無法利用document.domain進行跨域

主域相同的使用document.domain

④使用window.name來進行跨域

window對象有個name屬性,該屬性有個特徵:即在一個窗口(window)的生命週期內,窗口載入的所有的頁面都是共享一個window.name的,每個頁面對window.name都有讀寫的權限,window.name是持久存在一個窗口載入過的所有頁面中的

⑤使用HTML5中新引進的window.postMessage方法來跨域傳送數據

還有flash、在服務器上設置代理頁面等跨域方式。個人認爲window.name的方法既不復雜,也能兼容到幾乎所有瀏覽器,這真是極好的一種跨域方法。

 

4XMLJSON的區別?

(1).數據體積方面。

JSON相對於XML來講,數據的體積小,傳遞的速度更快些。

(2).數據交互方面。

JSON與JavaScript的交互更加方便,更容易解析處理,更好的數據交互。

(3).數據描述方面。

JSON對數據的描述性比XML較差。

(4).傳輸速度方面。

JSON的速度要遠遠快於XML。

5、創建ajax過程

(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象.

(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.

(3)設置響應HTTP請求狀態變化的函數.

(4)發送HTTP請求.

(5)獲取異步調用返回的數據.

(6)使用JavaScript和DOM實現局部刷新.

6HTTPHTTPS

HTTP協議通常承載於TCP協議之上,在HTTP和TCP之間添加一個安全協議層(SSL或TSL),這個時候,就成了我們常說的HTTPS。

默認HTTP的端口號爲80,HTTPS的端口號爲443。

爲什麼HTTPS安全

因爲網絡請求需要中間有很多的服務器路由器的轉發。中間的節點都可能篡改信息,而如果使用HTTPS,密鑰在你和終點站纔有。https之所以比http安全,是因爲他利用ssl/tls協議傳輸。它包含證書,卸載,流量轉發,負載均衡,頁面適配,瀏覽器適配,refer傳遞等。保障了傳輸過程的安全性

7HTTP狀態碼

    100 Continue  繼續,一般在發送post請求時,已發送了http header之後服務端將返回此信息,表示確認,之後發送具體參數信息

    200  請求成功

    201  請求成功並且服務器創建了新的資源

    202  服務器已接受請求,但尚未處理

    301  請求的網頁已永久移動到新位置。

    302  臨時性重定向(請求的資源臨時從不同的 URI響應請求)。

    303  臨時性重定向,且總是使用 GET 請求新的 URI。

    304  自從上次請求後,請求的網頁未修改過。

    400  錯誤請求(請求的參數錯誤或者服務器不理解請求的語法)

    401  請求未授權。

402  該狀態碼是爲了將來可能的需求而預留的

    403  禁止訪問。

    404  找不到如何與 URI 相匹配的資源。

    500  服務器端錯誤。

502:網關或代理無效/無響應,網絡錯誤

    503  服務器端暫時無法處理請求(可能是過載或維護)。

 

 

軟件開發流程(軟件開發生命週期)

生命週期:孕育、誕生、成長、成熟、結束

第一步:可行性分析與項目開發計劃

這個階段主要確定軟件開發的目標及其可行性,明確要解決的問題及解決辦法,以及解決問題需要的費用、資源、時間。要進行問題定義、可行性分析,制定項目開發計劃。《項目開發計劃

第二步:需求分析(設計師)

需求分析是明確軟件系統要做什麼,確定軟件系統的功能、性能、數據、和界面等要求。《軟件需求說明書

第三步:設計

概要設計就是設計軟件的結構,明確軟件系統由那些模塊組成,這些模塊的層次結構、調用關係以及模塊的功能,同時確定數據結構和數據庫結構。

詳細設計是對每個模塊完成的功能進行具體的描述,把功能描述轉變爲精確地、結構化的過程描述,既該模塊的控制結構或者說邏輯結構。

《概要設計說明書》、《數據庫設計說明書》、《接口設計》、《詳細設計說明書》

第四步:編碼

編碼就是把模塊的控制結構轉化爲程序代碼,該階段需要編碼規範。

開發者根據《軟件系統詳細設計報告》中對數據結構、算法分析和模塊實現等方面的設計要求,開始具體的編寫程序工作,分別實現各模塊的功能,從而實現對目標系統的功能、性能、接口、界面等方面的要求。

第五步:測試

測試編寫好的系統。《軟件測試計劃》、《測試用例》、《軟件測試報告》

第六步:軟件交付準備

在軟件測試證明軟件達到要求後,軟件開發者應向用戶提交開發的目標安裝程序、數據庫的數據字典、《用戶安裝手冊》、《用戶使用指南》、需求報告、設計報告、測試報告等雙方合同約定的產物。

第七步:驗收

用戶驗收。

第八步:軟件維護

* 軟件數據庫管理

* 用戶跟蹤培訓

* 故障分析解決

第九步:軟件升級

* 需求調整分析

* 軟件功能拓展

* 系統優化

第十步:報廢處置

* 軟件不能適應業務發展

* 新軟件項目立項

* 企業數據詳細備份

 

前端開發面試知識點大綱:

HTML&CSS: 
       對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功:佈局、盒子模型、選擇器優先級及使用、       HTML5CSS3、移動端適應

JavaScript 
       數據類型、面向對象、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機       制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。

其他: 
       HTTP、安全、正則、優化、重構、響應式、移動端、團隊協作、可維護、SEO、UED、架構、職業生涯

作爲一名前端工程師,無論工作年頭長短都應該必須掌握的知識點

一、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。 
二、DOM操作 ——如何添加、移除、移動、複製、創建和查找節點等。 
三、事件 —— 如何使用事件,以及IE和標準DOM事件模型之間存在的差別。 
四、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。 
五、嚴格模式與混雜模式 —— 如何觸發這兩種模式,區分它們有何意義。 
六、盒模型 —— 外邊距、內邊距和邊框之間的關係,及IE8以下版本的瀏覽器中的盒模型 
七、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們 
八、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。 
九、HTML與XHTML——二者有什麼區別,你覺得應該使用哪一個並說出理由。 
十、JSON —— 作用、用途、設計結構。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章