前端總結的學習筆記

時間 2019-11-09

標籤前端總結學習筆記简体版

原文原文鏈接

血的教訓javascript

當用li標籤包裹住a標籤，鼠標通過，讓其它元素顯示時。要寫li:hover div{各類樣式}而不能寫ul li a:hover div{各類樣式}php

事件代理：爲後來添加的元素添加上事件，優化引擎css

— Gecko內核　　 css前綴爲"-moz-"　　火狐瀏覽器 html

— Presto內核　　 css前綴爲"-o-" Opera(歐朋)前端

— Trident內核　　css前綴爲"-ms-" IEhtml5

— WebKit內核　　css前綴爲「-webkit- safari chromejava

改變placeholder顏色input::-webkit-input-placeholder { color: red;}python

DIV+CSS佈局部分

小技巧

將span變爲三角形css3

display: inline-block;git

border-top:4px solid #676767;

border-right:4px solid transparent;

border-bottom:4px solid transparent;

border-left:4px solid transparent;

讓一個元素上下左右居中

盒子居中：

垂直居中：top：50%；margin-top：盒子高度的一半的負值
水平居中：left：50%；margin-left：盒子寬度的一半的負值

文字居中：

Text-align:center 垂直：line-height：

通欄顯示{頁面背景頭部導航底部}

有通欄的全局變量body中不聲明寬度，下面的每一個部分單獨聲明，沒有通欄的直接body聲明，免得下面單獨定義麻煩

通欄的時候裏面再套一個div 而後外面的div定義背景顏色邊框等。裏面的div用width：980px;和margin：0 auto；限制居中顯示

通常頭部加上h1寫上網站的名字是爲了利於搜索引擎的搜索，而後用text-indent：-9999px;讓這個文字不顯示

導航欄製做時[文字不同多] 當鼠標放上去只改變文字顏色時：給li修飾用margin-left：20px；margin-right:20px;就能夠

當鼠標放上導航欄的背景還要變化，以及有小豎線時。給a修飾用padding-left和padding-right,且a元素寫上display:block；轉化成塊狀元素使a的寬度繼承父級寬度，背景填充，可是當有背景圖片小豎條時。給a加上背景小豎條。而且a:hover的background加上背景顏色時，也要再加上背景圖片的小豎條才能不覆蓋

進行浮動的元素設置寬度

有子元素且子元素加了高度，父元素沒有設置高度，子元素浮動了，就會出現高度的塌陷，全部父元素最好加上高度

定位（position）改變元素的位置（脫離了文檔流）

Position：static(靜態的，不變，和沒寫同樣)

Position:relative(相對定位)

原來的位置保留相對本身的位置變化

Position:absolute（絕對定位）

不保留原來的位置，相對於父元素進行改變，可是父元素必須加上相對定位，父元素沒加相對或者沒加父元素時相對於body改變

Position:fixed(固定定位)

相對於瀏覽器進行改變，用相對定位時放在頁面的最開頭或者最結尾，這個是對聯廣告，老是漂浮在兩邊那種

Z-index：0 30 8 98 誰的值越大越在上面顯示

元素的分類（display）

Block 塊級元素的默認顯示方式

Inline行內元素的默認顯示方式

Inline-block 行內塊級元素常見的有img input select textarea

Display:none隱藏後不佔空間 visibility:hidden這個也是隱藏，可是隱藏後佔空間

Opacity：0.8透明度

導航裏面的li用display:inline-block （最好用這個，不用浮動）來佈局的時候，li之間會有4像素的空隙，減少這個空隙的辦法是先設置ul的font-size:0;而後在下面的li裏面設置font –size：？px；就能夠了

使用服務器字體及陰影

在樣式中首先引入@font-face{font-family:webfont; src:url(「http://www.baidu.com/ziti」)}而後須要的標籤寫上h1{ font-family:webfont; }

給字加陰影：Text-shadow:陰影的水平偏移（正直往左，負值往右）；垂直偏移（正直往下，負值往下）；陰影的模糊度；陰影的顏色；能夠添加多個陰影用逗號隔開

Text-shadow:2px 3px 3px red, -2px -3px 3px blue; 若是瀏覽器不識別，加上瀏覽器標誌

text-shadow: 0 0 90px #fff, 0 0 40px #fff, 0 0 10px #fff;

-webkit-text-shadow：

給盒子加陰影：box-shadow：

第一個值：水平方向的偏移

第二個值;垂直方向的偏移

第三個值：模糊大小

第四個值：陰影的大小

第五個值：陰影的顏色

第六個值：不寫的話是外陰影，寫的話就是寫inset 內陰影；

不管是字體仍是盒子，前兩個值不能省略

Box- shadow ：3px 4px 10px yellow inset；也能夠加逗號再加【通常寫四個值就行，水平、垂直、模糊程度、顏色】

Text-overflow屬性【文字溢出怎麼處理】:ellipsis 省略號形式顯示|clip（裁剪掉）

Overfllow:auto; 瀏覽器自動索引，就是寬高顯示不開，瀏覽器就加上縱向滾動條

Overfllow：hidden;多餘的部分進行隱藏

Overfllow：scroll; 瀏覽器加上橫向和縱向的滾動條

若是隻加上橫向的【高度去掉，加上overfllow-x:scroll 不過不多用】;

white-space:nowrap讓文字不換號

[給標題加省略號]

overflow：hidden； white-space：nowrap； text-overflow:ellipsis；width:400px;

CSS新增背景屬性

背景線性漸變顏色

background-image:linear-gradient(方向，顏色，顏色，顏色……)

background–image:linear-gradient(to top，red，yellow) ；從下往上由紅變黃

背景裁切

background-clip：border-box默認值從邊框開始裁剪，看不出效果

content-box從內容區域開始裁切，有padding的間距沒有背景

padding-box從有內填充的地方開始裁剪，就是padding的間距也填充了背景

背景圖像起始位置

Background-origin 與background-position配合使用

— border-box:以邊框爲原點開始計算background-position

— ，邊框地下

— padding-box:默認值 background-position，緊臨着邊框爲原點計算position。

— content-box:之內容盒子爲原點開始計算background-position ，把padding的間距空開爲原點；

控制背景圖像的大小

Background-size：25px 25px 【橫向和縱向，也能夠寫成百分比】

值Cover，將背景圖像等比縮放到徹底覆蓋容器，可是有可能超出容器

值Contain，將背景圖像等比縮放到寬度或者高度與容器的寬度或者高度相等，可是背景圖像始終包含在容器以內

寫多個背景圖像

Background：url（），url（），url（）……

Background：url(../images/pic1.jpg) no-repeat left top，url(../images/pic2.jpg) no-repeat right bottom;

CSSsprites雪碧圖技術（css精靈）

用軟件生成一張圖片，會自動告訴你座標，本身量的時候，是整張雪碧圖的左上角是座標00 到想用的圖標的左上角寫XY 可是都是負值寫到background：url(./img/icon.jpg) norepate -X px -Ypx; 而後讓這個小圖標在裏面居中就是加上距離邊的正值，比方說x是55 y是55 取到的圖片是-55px -55px 而後居中比方說在想放的盒子裏距離左邊是8距離上面是10 纔會居中，因此X軸座標變爲-55+8=-47px 而Y軸座標變爲-55+10=-45px；注意的一點就是在大圖標定位到這個想要小圖標時候都是負值，而後加上須要顯示位置的正值獲得最終位置座標

PC端的佈局形式：

固定寬度且居中

自適應寬度（浮動、定位）

若是左中右三個浮動的div（也叫雙飛翼佈局）而後把center寫在div的最前面便於顯示；

center：float:left , height:400px;width:100%; padding:0 200px; box-sizing:border-box;

left:float:left; width:200px; position:relative; margin-left:-100%;

right: left:float:left; width:200px; position:relative; margin-left:-200px;

移動端佈局形式：

彈性盒佈局（梳理）

1.誰是彈性盒，誰寫（通常是父元素）Display:box 若是不兼容寫：display:-moz-box

Display:-webkit-box;

Display:-o-box;

Display:-ms-box;

Display:box;

2.父元素決定子元素的排列方向 box-orient：horizontal（水平默認的）

Vertical(垂直排列、縱向)

3.父元素決定子元素的顯示順序 box-direction ：reverse（倒序）

4．依然給父元素設置，父元素決定子元素的對齊方式：

水平對其：box-pack:start center end (左中右)

垂直對齊：box-align： start center end (上中下)

以上四個都是寫給父元素的。

5.子元素設置分配空間

Box-flex：1 2 3 4 寫的數字越大，佔空間越大

6.子元素位置的改變：box-ordinal-group:1 2 3 4寫數值，不多用

第三個是初始化縮放，1.0 就是禁止縮放

第二個值是寬度等於設備寬度

第一個是虛擬窗口意思，就是模擬手機等設備

當http-equiv="X-UA-Compatible"這句話是趕上IE8的時候之後面最新版本的IE渲染

IE=edge 以最新版本IE顯示 chrome=1 而當機器上安裝的IE無法渲染就用谷歌瀏覽器的內核進行渲染

彈性盒子手機佈局

分爲上中下三個部分，山下給固定的高度45px或者44px ，而後讓中間.main部分加上box-flex:1；也就是讓剩餘的空間所有給中間；【保證html body 最外層的父親寬高都是100%】

彈性盒佈局(懂懂)

給父元素加的屬性:

首先，父元素加上一個display: flex;讓其變成彈性盒此時,其子元素會默認橫向排列起來，相似浮動的效果

屬性1：flex-direction:(決定子項在flex容器中的位置)

flex-direction: column; 從上到下排列,從父級上面開始[即縱向從上往下排列（頂對齊）]

flex-direction: column-reverse; 從下到上排列（最後一個元素在最前面）而且從父級底下開始

flex-direction: row;(默認值) 即橫向從左到右排列（左對齊）

flex-direction: row-reverse; 對齊方式與row相反

屬性2：flex-wrap:(規定子項是否換行)

flex-wrap: nowrap;/*默認樣式，超出不換號，本身平均縮小*/

flex-wrap: wrap;
flex容器爲多行。該狀況下flex子項溢出的部分會被放置到新行，子項內部會發生斷行

wrap-reverse; 超出部分換行，而且反向僅僅是行反轉，單個子元素不變

屬性3 flex-flow：/*這個屬性是direction 和wrap的複合屬性*/

屬性4 justify-content 【默認值flex-start 】

justify-content:flex-start; /*子元素左對齊*/

justify-content:flex-end; /*子元素右對齊*/

justify-content: center; /*子元素居中對齊*/

justify-content: space-around;/*//平均分佈兩邊會有間距*/

justify-content: space-between; /*兩邊對齊中間平均分佈【兩邊靠邊了，中間的平分】*/

屬性5 align-content: flex-start; 本屬性能夠用來調準「伸縮行」在伸縮容器裏的對齊方式，這與調準伸縮項目在主軸上對齊方式的 <' justify-content '> 屬性相似。請注意本屬性在只有一行的伸縮容器上沒有效果

align-content: flex-start; /*若是父容器高度大的話本來是行之間平分父容器，有空隙. 加上後行---上對齊*/

align-content: flex-end;

align-content: center;

align-content:space-around;/*讓行平均分佈最上和最底下仍是會有中間行空隙的一半*/

align-content: space-between;/*讓行平均分佈最上和最底下無空隙，其他平分空隙*/

align-content: stretch; 『默認值，子元素沒有高度時默認會擴大高度，子元素加起來高度充滿父元素』

屬性6 align-items: 定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。

align-items:flex-start; 垂直方向上對齊左上方

align-items: flex-end; /*垂直方向下對其*/

align-items: center;/*居中對齊*/

align-items:stretch; /*這個屬性是個默認值，若是這個元素的子元素沒有給高度，子元素會垂直充滿容器，給高度的話不起做用*/

align-items: baseline;/*子元素以當前行的首行文字爲基準對其*/

加給子元素的

1.Order 默認是0 用整數值來定義排列順序，數值小的排在前面。能夠爲負值。

2.flex-grow: 1; 分配剩餘空間的默認是0//*把父級元素剩下的分紅grow的份數,此元素佔的份數，比方說本身都規定了本身的寬度是30，五個子集，父級300，那麼只有一個孩子寫grow的話，這個孩子就是自己的50+（300-150 ）| 若是有有兩個孩子寫了這個屬性一個值是1一個是2 那麼這兩個孩子就是自己的50 加上把剩下的300-150=150分紅三份，這倆再分別加上100 （2份的）和50（1份的） */

3.flex-shrink: 0;
用數值來定義收縮比率。不容許負值默認1

/*當容器寬度不夠,shrink爲0的元素不會縮小 shrink爲其餘的數，是縮小的倍數，（不是它自己定義寬度的一半，而是其它那些通過擠壓後的子元素的）比分說2就是其它的一半，3就是三分之一，全部默認值是1*/

4.flex-basis: 100px; <length>：用長度值來定義寬度。不容許負值

<percentage>：用百分比來定義寬度。不容許負值

auto：無特定寬度值，取決於其它屬性值

content：基於內容自動計算寬度

5.flex是 grow shrink basis的縮寫

6.align-self: flex-end;定義flex子項單獨在側軸（縱軸）方向上的對齊方式。

/*能夠控制單個元素的上中下排列方式*/值：auto | flex-start | flex-end | center | baseline | stretch

手機端頁面

fontSize();

function fontSize() {

var w = window.innerWidth/10;

var html= document.querySelector("html");

html.style.fontSize=w + "px";

}

// 當窗口的大小發生改變的時候會觸發

window.onresize = fontSize;

</script>

將這段話加上，時時監控窗口大小用的

手機端事件

Touchstart事件手指落在屏幕的事件

Touchmove事件這裏面能夠阻止默認事件（和PC端的同樣preventDefault() 這個默認事件不能加在touchstart上，加上會出a標籤不跳轉的bug ）

Touchend事件，手指離開

在文本前插入東西

H2:before{content:」2016-5-24」；background：red;}在h2標籤內容前添加時間並給他背景顏色 h2：nth-child(3):before{content:none;}若是none瀏覽器不認識用normal 後面插入用：after，當插入圖片的時候用content:url(「./img/icon_01.jpg」);就能夠

插入計數器

Counter 計數器 counter-increment計數器的增量，讓其自增加

H2:before{content:」第」counter(abc)」章」；}再寫一個

H2{counter-increment:abc;}

這是阿拉伯數字的

要修改爲其餘的H2:before{content: counter(abc, 其餘文字比分說羅馬，英文字母啥的)；}

再加上H2{counter-increment:abc;}讓它自增加

當想第一個大標題下面出現1-1 1-2 1-3 第二個大標題下面的是2-1 2-1時

li:before{

content: "第"counter(z)"章";

}

li{

counter-reset: c; 這裏是讓p標籤的自增量重置，重置後li下面的小標題就成了li的大標題----c（每次都從1開始）

counter-increment: z;

}

p:before{

content: counter(z)"-"counter(c)".";

}

counter-increment: c;

}

：first-line 第一行：first-letter第一個字

本頁面跳轉用錨點連接

清除浮動最有力的方法：

在須要清除浮動的盒子A前面寫一個空白的div，裏面什麼都不須要寫，只給個類名B，樣式中寫

.B:after{

Content:」.」;

Clear:both;

Display:block;

Height:0;

Visibility:hidden; ……消失卻佔用空間

}

加上這個以後。在A的樣式中寫上margin-top:多少px；就能夠了

既有表單元素又有圖片的時候之間會有三個像素的間距，給圖片寫個margin-left:-3px，讓他們挨起來

出現邊框當全局樣式用了box-sizing：border-box;時，導航欄寫.nav{

height: 36px;

border-bottom: 2px solid #fd3f49;

line-height: 36px;

}

下面的盒子部分清除浮動後最上側有可能會出現1像素的空白條，這是由於上面的導航欄部分line-height應該爲34px，由於box-sizeing清除了邊框，也就是說36px包括了下邊框的2px，可是內容的行高是不該該加上這2px的，全部應該是34px

當一個盒子設置了透明度後，裏面的內容也會跟着透明度，如何讓內容不透明，背景透明呢？方法以下

</div>

樣式

.lianxi{

width: 900px;

margin: 0 auto;

position: relative;

}

.lianxi .bgtouming{

width: 370px;

height: 100px;

background: #ADFF2F;

border-radius: 15px;

position: absolute;

left: 50%; /*這句和下面的是爲了讓這個盒子左右居中，-盒子寬度的一半*/

margin-left: -185px;

top: 50%; /*這句和下面的是爲了讓這個盒子上下居中，-盒子高度的一半*/

margin-top: -50px;

opacity: 0.5;

}

.lianxi .copy {

width: 300px;

height: 70px;

background:transparent; /**讓背景透明*/

position: absolute;

left: 50%; /*這句和下面的是爲了讓這個盒子左右居中，-盒子寬度的一半*/

margin-left: -150px;

top: 50%; /*這句和下面的是爲了讓這個盒子上下居中，-盒子高度的一半*/

margin-top: -35px;

}

簡單來講就是定義一個div是透明的，定位到想要的位置，

再寫一個同級的div是不想讓透明的，也經過定位，放到透明的div上，想讓背景透明就寫上background:transparent; /**讓背景透明*/就能夠了

表單元素 <input type=」#」 name=」」 value=」」>通常都放在form表單中

Text

Password

Radio name=」sex」 checked

Checkbox name=」like」 checked

File

Hidden

Submit 提交

Reset

Button

Image 提交

</select>

H5中新增的表單元素<input type=」#」 name=」」 value=」」>

Type=」Email」電子郵件、郵箱必須帶@

url 必須網址

date 日期

number：數字，屬性有 max min step

range 範圍進度條 0-100之間數字

color：顏色選擇器

tel 電話手機端選中直接切換數字鍵盤

search 搜索框屬性裏面加上 results=」s」左側就會出放大鏡

新增的input屬性

Placeholder ：空的input提示信息，鼠標點擊的時候提示信息就會消失

Autofocus：自動彙集值爲：ture 或者false

Required：必填項

Autocomplete自動完成，就是記憶之前輸入過的內容

Multiple:多選用在file select

List屬性，配合 Datalist 這兩個屬性使用Option

</datalist>

這個屬性的優勢在於還能夠輸入

Enabled:可用 disabled不可用背景灰色 readonly 只讀 maxlength最大長度

Form新增屬性：

更改提交方式：formmethod 更改提交地址：formaction

是否啓用表單驗證功能：novalidate=「novalidate」

UI僞類選擇器：

：checked 選中的表單元素 checkbox radio

：disabled 不可用的表單元素

：enabled 可用的表單元素

視頻音頻標籤：

Video標籤，視頻標籤，加上controls=「controls」加上控制檯，就是讓播放按鈕啥的

Html新增的標籤 figure

響應式佈局

佈局適口：電腦頁面本來的大小

視覺適口: 手機的可見區域叫視覺適口

理想窗口：

開頭加上;

媒體查詢類型：screen(屏幕)、print(打印機)、handheld(手持設備)、all(通用)
經常使用媒體查詢參數：width,height,device-width（設備屏幕的寬度）,device-height,orientation(檢查設備處於橫向lanscape仍是豎屏portrait)

Max-width:指的是瀏覽器窗口寬度

Max-device-width:指的是設備屏幕或者說分辨率支持的最大寬度

引入外部樣式的方式

第一種：

當瀏覽器發現設備是：視口寬度是大於800像素的縱向顯示屏設備時加載樣式表

第二種：（直接在一個CSS樣式表中分別判斷）

/*在992 和1199 像素之間的屏幕裏，中等屏幕，分辨率低的PC*/

@media (min-width: 992px) and (max-width: 1199px){

這裏面寫屬於這塊的樣式

}text

@import引入不經常使用：@import url(「phone.css」) screen and (min-width；200px) and (max-width:360px);

不一樣設備的分辨率：

頁面大於1200px; 大屏幕，通常爲PC端

在992和1199像素之間的屏幕裏，中等屏幕，分辨率低的PC

在768和991之間的屏幕裏，小屏幕，主要是pad

在480和767像素之間的屏幕，超小屏幕，主要是手機

小於480的，微小屏幕，更低分辨率的手機

爲何響應式佈局要用百分比佈局不用固定寬度設計：

固定寬度設計只會從一組CSS媒體查詢規則突變到另外一組，二者之間沒有任何平滑漸變

而使用百分比佈局創造的流動彈性界面同時使用媒體查詢限制元素變更範圍，這二者的結合構成了響應式設計的核心

1.修改寬度

須要牢記的公式：將固定像素寬度轉換成對應的百分比寬度;

目標元素寬度 ÷ 上下文元素寬度 = 百分比寬度

PS：個人理解上下文元素寬度指的就是目標元素的父元素，須要修改爲百分比的值，寬度width（當有邊框寬度的時候要減去邊框寬度再去÷父元素的，由於邊框隨着拖動變細很差看）

2.修改字體大小

em:根據父元素的font-size爲相對單位；
rem:根據html的font-size爲相對單ice-widt位。

瀏覽器默認文字大小都是16px；因此body{font-size:100%;font-size:16px;font-size；1em;}效果相同。一樣能夠用上面的公式來計算 12px表示：12÷16=0.75rem【這裏有用到能夠把總體設置成62.5%,也就是10px，而後在這個基礎上換算，可是這樣會誕生許多問題，谷歌中文版不認識10px,會把他當成12px解讀，用hml{-webkit-text-size-adjust:none;font-size:9px;}定義以後，雖然認識了，但歐鵬瀏覽器能解讀此內核，全部須要修改爲hml{-webkit-text-size-adjust:none;font-size:9px; -webkit-transform:scale(0.75);-o-transform:scale(1)}】

3.修改圖片寬度

Img{max-width:100%;}

固然其它的多媒體標籤，也能夠設置最大寬度，讓它縮放和容器100%匹配好比：

Img,object,video,embed{max-width:100%;}

而後特定圖片設置特定的100%；比方說一個盒子裏並排兩個圖片，那麼每個圖片max-width:50%;有空隙再相應減少

HTML5

IE9 如下版本瀏覽器兼容HTML5的方法，使用百度靜態資源的html5shiv包：

<!--[if lt IE9]>

<![endif]-->

載入後，初始化新標籤的CSS：

/*html5*/

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

新增的結構性標籤，用於佈局

Header

nav

acticle

section

aside標籤訂義其所處內容以外的內容，aside 的內容應該與附近的內容相關

Footer標籤

音頻/視頻

1. 多媒體標籤

關於多媒體標籤的由來，優勢，特性

舊標記：

bgsound : 播放背景音樂，

缺點：兼容性差，不可操控

【IE的】object ：引入外部內容，功能完善，可操控，能夠引入多種格式。

缺點：須要控件的支持，性能比較差。

【網景的】embed ：引入外部內容，功能完善，可操控，能夠引入多種格式。

缺點：須要控件的支持，性能比較差

H5新標記：

audio：音頻標籤

video：視頻標籤

優勢：功能強大，不須要引入外部文件，性能優越，不須要控件支持

缺點：兼容不是很樂觀因此手機端用H5的，客戶端想要兼容到IE8及如下，用上面老的

2. 兼容

兼容可以支持HTML5 的全部瀏覽器

您的瀏覽器不支持視頻功能

</video>

您的瀏覽器不支持視頻功能

</audio>

兼容全部主流瀏覽器

您的瀏覽器不支持視頻功能

</video>

3. 屬性

音頻

引入音頻標籤，以下：

您的瀏覽器不支持音頻

</audio>

controls ：顯示播放控件

autoplay ：自動播放，準備就緒（準備就緒！=下載完畢）後立刻播放，默認不自動播放。

preload ：頁面加載完畢以後，準備標籤加載，但不播放

loop ：是否進行循環播放，默認是不循環

視頻

poster ：視頻默認顯示圖片，只會在播放以前顯示。

controls ：顯示播放控件

autoplay ：自動播放，準備就緒（準備就緒！=下載完畢）後立刻播放，默認不自動播放。

preload ：頁面加載完畢以後，準備標籤加載，但不播放

loop ：是否進行循環播放，默認是不循環

4. 自定義

JavaScript （方法，事件）

方法：

play() ：播放視頻（音頻）;

pause() ：暫停視頻（音頻）;

loop : 循環播放視頻（音頻）;

屬性：

paused ：檢測當前是不是暫停狀態（是則返回true，不是則返回false）;

volume : 獲取當前音量值，或者是設置當前音量值

src : 獲取當前視頻/音頻地址，或者是設置當前視頻/音頻地址

playbackRate : 獲取當前視頻/音頻播放速度，或者設置當前視頻/音頻播放速度

currentTime : 獲取當前播放的進度，或者是設置當前播放的進度

duration ：獲取視頻的總長度，固定值

muted ：獲取當前是否爲靜音狀態，或者設置當前靜音狀態

事件：

ended : 當視頻/音頻播放完畢以後觸發；

ondurationchange : 當總時長髮生改變

具體還要不少方法去個人百度文庫找去

本地存儲

webStorage提供兩種類型的API：localStorage和sessionStorage，二者的區別看名字就有大概了解，localStorage在本地永久性存儲數據，除非顯式將其刪除或清空，sessionStorage存儲的數據只在會話期間有效，關閉瀏覽器則自動刪除。兩個對象都有共同的API

length:惟一的屬性，只讀，用來獲取storage內的鍵值對數量。
key：根據index獲取storage的鍵名
getItem：根據key獲取storage內的對應value
setItem：爲storage內添加鍵值對
removeItem：根據鍵名，刪除鍵值對
clear：清空storage對象

離線緩存

在網頁的html標籤中加入<html manifest="test.manifest">這是告訴瀏覽器須要緩存.

在manifest中:

CACHE MANIFEST #這個必須在第一行,是來聲明這是一個manifest文件

#2016年8月23日09:39:14,爲了讓本文改變,能夠修改這裏的時間,或者版本號

CACHE:

#這裏寫須要緩衝的文件,這裏的文件內容修改了,頁面也不會變,必須這個manifest文件有修改,從新緩存才行

css/test.css

css/test01.css

NETWORK:

#這裏是不須要緩衝的文件,這裏的文件內容有改變,頁面會實時改變

FALLBACK:

#不存在時使用另外一個文件替代,主頁面引入的test1不存在,那就用test代替,通常用着沒有網絡的狀況下或者是沒有網絡時跳轉的頁面,這個跳轉的頁面要緩存下來提早

css/test1.css css/test.css

/404.html [根目錄下的404頁面]

CSS3

選擇器中須要注意的部分:

element+element

div+p

選擇緊接在 <div> 元素以後的第一個 <p> 元素。

可是須要注意的是，首先它們要有共同的父元素，也就是說他們是同級別的，另外當有五個<P>，用P+P時，從第二個開始都變化。由於第三個也是第二個的下一個

屬性值包含

[attribute~=value] [title~=flower] 選擇 title屬性包含單詞 "flower" 的全部元素。

注意是單詞，而不是子串，因此title=flowers 是沒法被選中的。這樣看來和title=flower就沒區別了。其實否則，它能夠用在class有多個值的時候使用

[attribute*=value] 這個指的是子串中只要有這個子串就行。因此包括flower1 flowers abcflowers都能被選中

屬性值結尾

[attribute$=value] 選擇屬性值中以value結尾的

屬性值以什麼開頭

[attribute|=value] [attribute^=value] 這兩個沒看出什麼區別來？

：focus input:focus 選擇全部得到焦點的input輸入框

：first-letter P:first-letter選中每個P的開頭第一個字或單詞

相對應的：first-line 選中的是第一行

P:first-child P:last-child P:nth-child(1)所指代的是是先找到每個父元素若是規定了父元素就先找到指定的父元素，而後找孩子，從子元素中第一個開始找（不管是否是P），找到了再看是否是P元素，是就改變。不是就不改變

而P：first-of-type P：last-of-type P：nth-of-type(n) 和上面是區別是，找到每一個父元素裏面全部的P進行計數，不是P的它不認識，若是父元素中某幾個子元素不是P，那麼這幾個元素根本不參與計數中找到的是P排名第一的，最後的，或某一個。上面的是找到子元素排名中第幾的，再驗證是否是要找的

:target找到當前活動的HTML錨，說的過高逼格。其實錨點連接時能用到修改樣式用的

:target{border: 2px solid #D4D4D4;}

<p><a href="#news1">跳轉至內容 1</a></p>

<p><a href="#news2">跳轉至內容 2</a></p>

請點擊上面的連接，:target 選擇器會突出顯示當前活動的 HTML 錨。

CSS3——變形

Transform

Translate(20px,30px) 第一個值的水平方向平移第二個是垂直平移

Rotate（30deg）:旋轉其中deg指的是角度，能夠是負值（可分寫成XYZ軸）

Scale(1,2)縮放前者指的是水平方向多少倍，二是垂直方向縮放倍數，一個參數就是總體縮放，縮放的時候佔位不變

Skew（20deg,30deg）傾斜

前者是水平方向傾斜的角度，後者是垂直方向的角度

默認以中心點進行變形

Transform-origin：20px 30px 改變變形的中心點

通常鼠標放上去配合過渡（transition）使用

Transition: css屬性（所有變的時候寫all），從沒有變形到變形結束須要的時間通常用毫秒或秒來表示，過渡的動畫效果（linear/ease/ease-in/ease-out），動畫開始須要延時的時間

Linear線性過渡

Ease 平滑過渡

ease-in 由慢到快

ease-out 由快到慢

比方說：transition：all 0.3s ease 0.5s；

這是複合屬性，也能夠單獨寫：

Transition-poterpy:all；動畫給哪一個樣式加加 all就是給全部的css屬性加

Transition-duration:0.3s；動畫執行多長時間

Transition-timing-function:ease; 過渡效果

Transition-delay:0.5s; 延時

誰變化、有動畫，給誰加過渡屬性!!!

十四天

動畫效果

Animation 動畫使用關鍵幀keyframes定義動畫

Animation：name 5s{從開始到結束的時間} ease(過渡的效果) 6s{動畫的延遲時間} 動畫的循環次數寫infinite 就是無限循環播放動畫的播放方向（alternate搖擺播放、reverse 倒敘播放）此複合屬性6個值

@keyframes name{

From{}=0%

20%{這裏面寫CSS樣式}

62%{}

To{}=100%

}

QQ對話框背景圖片效果

Border：上右下左的最大值有單位
border-image：引入圖片上右下左(四個裁切值，沒有單位) fill(填充滿，不是透明的寫) repeat/round/默認的stretch(拉伸)

裁切時注意其餘方向別切沒了

：first-of-type 同類型的第一個

：last-of-type同類型的最後一個

：nth-of-type()同類型的第幾個

:disabled 不可用的表單元素

:enabled 可用的表單元素

：：selection 選中以後改變的狀態兩個冒號

瀏覽器標準規範

W3C組織

Html css js

結構表現 行爲（動做）

瀏覽器的兼容性

不一樣瀏覽器對CSS解析認識不一樣，致使生成的頁面效果不同，寫針對不一樣瀏覽器的css代碼代碼就叫CSS hack其分類有（hack是修改的意思）：

IE條件註釋hack

<!-- [if ie 6]>

<h2>若是等於IE某個版本</h2>

<![end if]-->

<!-- [if ie]>

<h2>若是等於IE </h2>

<![end if]-->

<![if gt ie 7]>

<h2>若是大於IE7 也就是8910 11版本</h2>

<![if lt ie 8]>

<h2>小於IE8 也就是IE6 7</h2>

<!-- [if ! ie 8]>

<h2>IE中除了IE8都能看見我</h2>

<![end if]-->

gt：大於

gte：大於等於

lt：小於

lte：小於等於

！：非或者不等於非IE中某個版本，但不能！IE

2.CSS選擇符註釋法（只針對IE6 7）在選擇器前面加

*html .header{height:30px; background:red;} 前面寫上*html只有IE6認識它

*+html . header{height:30px; background:red;} 前面寫上*+的話只有IE7 認識它

要求：先寫通常的，再寫這個帶選擇符特殊的

3.CSS屬性註釋法（經常使用來改變高度）

Color:green;

_color:red; _或者-減號是專門給IE6用的

*+color:red; *+是專門對IE7瀏覽器的

*color：red；是IE六、7都認識的

Height:100px\0; ie8 ie9 ie10 都認識

Height：100px\9;ie6-11 都認識，其實就是限定IE下的樣式

若是隻讓IE9認識寫 height：100px\9\0; IE9-11認識；

! important IE7以上版本識別也就是隻有IE6不認識，谷歌啥的也都認識

Color：red!important；加！important後優先級比行內還高

5新增的css3屬性

-moz- FF 火狐

-webkit- Chrome 谷歌

-o- opera 歐鵬

-ms- IE9以上

常見問題及解決

圖片問題

1.父元素浮動了而且加了邊框，裏面有圖片，下方會產生空隙

解決方法：img（display:block）或者img(vertical-align:middle;)

2.IE6中若是給圖片添加上超連接，圖片會自帶紫色的邊框

Img{border:none/0;}

3.給圖片添加超連接以後，而且鼠標放上去時候讓顯示邊框，但邊框顯示不完整

自己寫a:hover{border:1px solid blue}

解決方法：非IE6瀏覽器下寫img:hover{border:1px solid blue}

動的問題的解決方法：在原圖片上加一個大小相同的邊框白色的

Img{border:1px solid #ffffff}

在IE6下解決辦法：a:hover{border:1px solid red}

a{display:block;加上圖片的寬高若是動的話再加上個1像素的白色邊框}

再在a:hover{border:1px sold red;}

4.若是連續插入圖片在不一樣行寫代碼時會產生3像素距離

解決辦法img{float:left;}

5.input標籤或文字與插入圖像垂直方向不對齊時，怎麼讓其垂直方向對齊

解決辦法Img(vertical-align:middle)

間距問題

IE6

1個塊級元素左浮，另外一個塊級元素沒有浮動會產生3個像素的間距

解決辦法給另一個不浮動的元素也讓它浮動

2 IE6經典的雙邊距問題（有浮動的元素，給浮動元素加了magin-left：）

給其中設置margin-left的那個元素設置display:inline

第二種margin-left:10px _margin-left：5px 由於後者只對IE6起做用

第三種辦法給前面的設置margin-right屬性

3.IE6水平居中問題（margin:0 auto;很差用）

Body{ width :800px; margin:0 auto； text-align:center;}

再加上text-align：center；可是這樣會讓裏面的文字居中對齊，若是不讓居中，就再在裏面的每一塊設置上text-align:left;

4.*{margin:0; padding:0;}寫上這些

5，margin-top引發的兩個問題

A：margin-top疊加問題上下設置了margin-top和margin-bottom,最後的值是取最大值，上下取最大值，左右累加

B：給子元素加margin-top時，加到父元素上去了

解決辦法不給子元素加了，給父元素加padding-top，或者依然在子元素隨便寫多少，可是父元素上要寫上個padding-top:0.1px;

其它

一、鼠標指針問題

加上cursor:pointer（指針）、hand（手）最好用前面的，hand只有ie認識。Cursor後面也能夠加cursor：url();用圖片。可是圖片是ico、ani、cur後綴的

Cursor:url（img/1447.ani）,auto;

2透明度問題

通常使用Opacity：0.5，可是IE678不認識這個問題，就在它後面再加上個filter:alpha(opacity=50);

3.一行文本的垂直居中方式

Verrtical-align:middle 可是這個不實用。用line-height：height；

4：hover對IE6瀏覽器只能a標籤使用，可是我還想給其它標籤使用，能夠藉助JS實現

5.IE中不認識min-height和min-width

LESS學習

語法：less中文簡體

@charset 「utf-8」;

註釋：

單行註釋： // 編譯後不在CSS中出現

多行註釋： /*註釋的內容*/ 編譯後會跑到CSS中起

1普通變量的定義

聲明@color:#546783;

下面使用h2{color:@color;background:@color;}

Mixins(混合)

2在一個類別選擇器能夠使用已經定義好的另一個類別選擇器

聲明：

.width{width:960px; margin:0 auto;}

.p{.width;}

若是不想在CSS文件中輸出這個mixin 聲明時.width(){width:960px; margin:0 auto;}也就是說加個小括號

3帶一個參數的mixins

聲明 .pos(@p){

Position：@p;

}

使用：li{.pos(relative);}

4帶一個參數而且有默認值

聲明

.pos(@p:relative){position:@p;}

使用 li{.pos();}這裏直接調用就是用的默認值，li{.pos(absolute);}

5 帶多個參數的mixins

聲明:

.pos(@p;@left;@top){

Position:@p;

Left:@left;

Top:@top;

}

使用：

Li{

.pos(fixed;100px; 20px);

}

考慮到定位有在左邊有在右邊，聲明中不寫@left; 使用中就只寫.pos(fixed;20px); 而後下面單獨寫left:100px; 或者right:100px;

SEO(搜索引擎優化)

javaScript學習

ECMAscript（基礎語法）

BOM：使用js控制瀏覽器（大小、開關等）

DOM：與網頁的內容交互、控制頁面中的標籤

ECMAscript：基礎語法

這三部分組成了javascript

變量名：數字、字母、下劃線、$的組合可是首字母不能是數字或者關鍵字保留字

變量的類型

數值型： 1000 4 46 等就是數字

字符串：單引號或者雙引號引發來的

布爾類型：分爲true 非0 或者 false 0兩個值叫bool或者boolean

空類型： null

Undefined類型：聲明瞭變量可是沒有賦值則爲此類型

引用類型：object類型

函數typeof();用來獲得變量或者常量的類型

將字符串轉換成數值型

求整用函數parseInt(); console.log(parseInt(3.14)); 出來的是3

第一步：找到第一個非空格字符2.若是第一個非空格字符是數字或者正負號，則開始轉換3.若是第一個非空格字符不是數字或者正負號，則返回NaN（not a number）；

4.直到碰到第一個非數字字符中止轉換。

將字符串互轉成浮點型 parseFloat();

比方說「-3.1426」用parseInt();轉換後是-3 用parseFloat();獲得的是-3.1426

當字符串能夠成功轉換成number類型數據時，咱們能夠直接把字符串與number類型數據進行比較，系統會自動轉換成number

將數值型轉換成字符串

用toString();函數 var a=3.14 轉換成字符串a.toString();

運算符加上變量或者常量叫表達式

運算符

算數運算符：+ - * / %(取餘數)

其中+除了做爲數值運算符，還做爲字符串鏈接符

賦值運算符：=

等號的左邊不但是常量，必須是變量

關係運算符：> >= < <= == !=

邏輯運算符： &&（與、且） ||（或）！（非）

！表達式就是顛倒黑白，真的變假的，假的變真的

3&&2；計算機打印的是2 由於須要看&&以後的。。打印的是最後執行的

3|| 2；的話計算機打印的是3 由於不須要計算後面的

Var a=1,b=1,c=1,d=1,m=1,n=1;

（m=a>b） &&(n=c<d); 求m n的值計算時，左邊a>b不成立，爲flase 也就是0；全部m=flase 也就是m=0；由於左邊是假的，是&&表達式，全部計算機爲了效率根本不去執行右側的部分，因此n爲原始值1；

對於表達式1||表達式2，只有表達式1的值爲假的時候，纔會計算表達式2的值

在表達式1&&表達式2 中，只有當表達式1的值爲真的時候，才計算表達式2的值

自增 a++ 讓a 的值加1

自減 a - - 讓a 的值減一

//a++ 與 ++a的區別在於自增表達式的值；a++是先賦值再+1，表達式的值也就是尚未+1以前的值，而++a是先++後賦值 ++A表達式的值是a+1以後的值

以後其實a都變成了+1以後的值，可是表達式存在是+1以前或者是+1以前

只能夠對變量進行++ - -運算

複合算數運算符 += -= *= /= %=

a+=2; 就至關於a=a+2；功能：將a的值加上2後再賦值給a

三目運算符

運算符的優先級 ()

! ++ -- 他們相同

*/ %

+ -

> >= < <= != ==

= += -= *= /= %=

此運算符當牽扯到相同優先級時，按表達式從左到右計算它

Var 是定義變量的關鍵字

Function是定義函數的關鍵字，可是函數並不會自動執行，須要調用函數時纔會執行，函數是對功能的封裝，把多行代碼封裝到一塊兒。

由事件觸發的函數，不管定義在哪裏都沒有問題，可是不是由事件觸發的函數必須定義在body最底下

流程控制

順序結構

選擇結構（分支結構）

if (表達式/變量) {

代碼塊

};

當程序自上而下執行時，碰到if結構，首先計算if後面小括號中的表達式的值，表達式的值爲真，則執行大括號中的代碼塊，表達式的值爲假，則直接跳過if結構。

if-else

二分支結構

【邏輯】當程序執行碰到if-else結構式，首先計算if後面小括號中的表達式的值，若是表達式的值爲真則執行代碼塊1；若是表達式的值爲假，則執行代碼塊2；

它也能夠經過三目運算符（選擇運算符）來表示：

條件表達式？表達式1：表達式2 【意思就是若是條件成立執行表1，不然表2】

例如var max=（a>=b?a:b）;首先計算a>=b是否成立若是成立整個三木運算符表達式的值是a，不然的話整個三木運算符表達式的值的b

if---else if

if(表達式1){

代碼塊1

}else if(表達式2){

代碼塊2

}else{

代碼塊3

}

當程序碰到這個結構時；首先計算表達式1的值，表達式1的值爲真，執行代碼塊1，而後跳出if---else if結構（自動跳出不須要加break）；表達式1的值爲假則進入else判斷表達式2……

在if else if結構中，每個else都是對前面全部if條件的否認

If----else if常常用在分段條件判斷中每個else都是對前面全部if條件的否認，全部不須要重複前面的條件

confirm("什麼東西"); 這是BOM自帶的確認窗口

調用此方法會獲得一個值ture或者false

prompt（「請輸入一個整數」）；

這是輸入框，能夠向瀏覽器中輸入信息，有返回值，返回值爲輸入的內容，返回值類型是字符串

4. 編寫一個成績測評系統，輸入語文、英語、數學、化學和物理五門課程成績。輸出對學生的評級，要求平均分超過85，無不及格成績，爲優秀，有不及格成績爲良好，70以上爲良好，60以上爲及格，其他爲不及格。

Switch 當條件是等值判斷時，多分支結構

循環結構

Switch（表達式或者變量）{

Case 值1：代碼塊1；break；

Case 值2：代碼塊2；break；

……

Default：代碼塊n；break；

}

【注】小括號中表達式的值或者變量的值能夠是任意類型的數據。能夠number類型，能夠string類型，能夠boolean類型等，這是JS語言所特有的；

【邏輯】當程序碰到switch結構的時候，首先計算小括號中表達式或者變量的值，而後根據所獲得的值到大括號中起尋找匹配項（case後面的值==表達式的值或者變量的值），而後從對應的匹配項進入進入switch結構，執行代碼塊。直到碰到break語句跳出switch結構。若是沒有找到匹配項則執行default後面的代碼塊，而後跳出switch結構。

在switch結構中 break語句能夠省略。可是省略後會繼續往下執行，不管case是否匹配，直到又碰見break，break的做用就是跳出switch結構！

我發現當省略break時，往下找到有break的case。這個時候這個case代碼塊裏面獲得的值，依然是最開始傳進來的值，也就是說

如圖。Case2有break。當case1的break不起做用時，而mon=1時，case的mon=1

另外default語句也能夠省略，可是不推薦；

數學方法

[所有都是靜態方法，因此要用引用類型名字調用Math.方法，在字符串方法中有個String.fromCharCode()也是靜態方法—找asicii碼對應的字符]

產生一個隨機數：Math.random(); 這個方法產生的是0-1之間的浮點型數據。可是包括0 不包括1也就是[0,1)

若是獲得的是0-10 就Math.random()*10就能夠了

當想獲得1-9；也就是獲得a-b之間的數Math.random()*(b-a+1)+a

想獲得：[2,8] 乘以（b-a+1）也就是乘以7 獲得 [0,7) 再加a也就是 +2 --->[2,9)可是它永遠達不到9，全部取整以後就是【2，8】

Math.pow(x,y) 是計算x^y也就是x的y次冪

Math.pow()返回值是一個浮點型數值

注意：不要將浮點型的等值判斷做爲分支條件

好比：var f=2/5;

If(f==0.4){……}

數學方法3

Math.round(3.5);//四捨五入方法=4

Math.ceil(10.0001); //向上取整 =11

Math.floor(10.9999);//向下取整=10=parseInt();

Math.max( 1,14,123,204.5,30.3); //取最大值 204.5

Math.max( 1,14,123,204.5,-3，30.3);//取最小值 -3

Math.abs(-10) ; //取絕對值

Math.sqrt(25); // 開平方

________________________________________________________________

循環

While

Do- while

For 三種循環

兩要素：1循環次數（循環變量初值條件步長） 2.循環操做

循環變量賦初始值

while(循環的條件){

循環操做

循環變量的步長

}

Do -- while循環

循環變量賦初值

Do{

循環操做

循環變量的步長

}while(循環條件)

【邏輯】當程序碰到do---while結構時，首先執行一遍循環體，而後循環變量發生步長，而後判斷循環條件，若是成立接着再次執行循環體，直到循環條件不成立，跳出do---while結構。

Do---while 和while什麼區別呢？

While先判斷循環條件，再執行循環體，而對於do—while來講，不過條件符不符合，我先執行一遍循環體再來判斷條件

全部若是循環條件一開始就不知足，while結構的循環體一次也不會執行，do---while結構的循環體會被執行一次。

For循環

For(循環變量賦初值；循環條件；循環變量的步長){

循環操做

}

【邏輯】

1循環變量賦初值；

2.判斷循環條件是否成立，若是成立執行3若是不成立執行第五步

3執行循環操做

4循環變量的補進，而後執行第二部。

5跳出循環

計算最大公約數

Var a = parseInt(prompt(「請輸入a的值」));

Var b = parseInt(prompt(「請輸入b的值」));

分析獲得，最大公約數比最小的值還要小或者同樣大；

If(a<=b){

Min=a;

}else{

min=b}

for(var i=min; i>=1;i--){

if(a%i==0&&b%i==0){

alert(「最大公約數是」+i)；

break；

}

Continue做用：只能用於循環結構，當程序碰到continue語句時候，結束本次循環，繼續下次循環

Return；返回語句，只能用在函數體中。程序碰到return語句函數調用結束

。Break語句，只能用於switch結構與循環結構，在switch結構中碰到break語句直接跳出switch結構，在循環結構中碰到break語句直接跳出循環結構；日後就不執行了

Break通常與死循環結合使用循環次數沒法肯定的時候用死循環+break while(1){死循環}

循環的嵌套，循環體中還有循環，外層循環執行一次，內層循環執行一遍

對於while 和dowhile來講，若是後面條件永遠爲真比方說while(1)則死循環。對於for循環。第二個表達式不寫則爲死循環。For （var i=1; ; i++）

當循環次數不肯定的時候使用死循環，使用死循環必須有可以使其跳出的break語句

函數

函數就是把完成特定功能的一段代碼封裝起來。給該功能起一個名字（函數名）。哪裏須要實現該功能就在那裏調用該函數。函數能夠在任什麼時候間任何地方調用

做用：使程序變得簡短而清晰，有利於程序維護。能夠提升程序開發的效率。提升了代碼的重用性。

當代碼封裝到函數中時，這段代碼何時執行，在什麼地方執行都是可控的。

如何定義一個函數？

Function 函數名(參數列表){

函數體，也就是代碼塊；

}

function關鍵字不能少，
函數名----顧名思義（功能名）
（a,b,c）函數中有三個參數，分別是參數a,參數b,參數c.在函數體重能夠對這三個參數進行操做
{函數體} 所謂的函數體就是爲了實現功能而書寫的代碼，其中有個return語句，後面只能夠跟一個值，就是函數的返回值。Return能夠寫也能夠不寫。碰到return語句時，函數調用結束。

而定義此函數時，。裏面的參數叫形參 function isFlower( a ){} 裏面的a是形參

當調用函數時，小括號裏面的值叫作實參，實際的值，具體的數值isFlower(i ) 這個i就是實參，

由於定義函數時須要一個參數，在調用函數時須要給該函數傳遞一個具體的數值，也就是i，這個行爲叫作傳參。傳參也就是賦值。

對於大部分語言，實參的個數須要與形參的個數類型一致。可是對於js語言來講，不會檢查實參的個數，也不會檢查形參的個數

Js語言能夠傳遞任意個參數

在js中每個函數的函數體中都有一個arguments對象。它相似一個數組

獲取每個實參的值arguments[0] 獲得第一個實參。Arguments.length獲得傳遞實參的個數

函數的重載：函數名同樣，可是函數的形參不同（個數不同，類型不同，順序不同）。可是由於JS語言不去檢測參數，因此JS中沒有函數的重載

因此在js語言中，當函數名與上面的函數名同樣的時候，新的函數會覆蓋掉舊的函數，函數會被從新定義。不會實現重載！js語言中是沒有函數重載的

變量與做用域

函數的做用域

局部變量：在函數塊中定義 的變量 做用域範圍：函數體內

全局變量：函數外面定義的變量，做用域是整個HTML頁面，另外在函數塊中定義時沒有var關鍵字的也叫全局變量

Js在加載script標籤時，先把標籤的全局變量的聲明給執行一遍（開闢空間），而後纔開始執行，因此在定義的全局變量b=「abc」以前alert（b），會提示undifind

當局部變量與全局變量名字同樣的時候，在局部變量的做用域範圍內，局部變量起做用。可是若是我想在局部變量的做用域內使用全局變量。寫window.全局變量名

函數的返回值：

直接輸出
賦值給一個變量
做爲另外一個函數調用的參數 gcd（gcd（2，3），12）
能夠做爲表達式的一部分參與運算

函數的調用：1函數名（） 2.事件觸發（js語言中使用機率最高）

函數調用注意：1.能夠在任何地方調用函數，2能夠在一個函數體中調用另外一個函數，3.能夠在函數體中本身調用本身（這種函數叫遞歸函數）

沒有函數名的叫匿名函數 function（）{代碼塊}

調用時，把這個匿名函數賦值給一個變量 var f=function(){代碼塊} 經過變量名（）調用匿名函數。調用時f();

Onfocus()得到焦點 onblur（）失去焦點這是鼠標須要點擊如下才能實現

遞歸函數對棧空間的消耗大。若是遞歸的次數太多的話會形成棧溢出。理解比較麻煩常常用於特定的狀況，好比二叉樹的遍歷，計算階乘

遞歸函數相似於循環，任何一個單層循環均可以寫成遞歸函數

For(var i=1;i<=5;i++){

Document.write(「hero」);

}

改爲遞歸：

Function printhero(n){

If(n>=1){ //循環的條件

Document.write(「hero」); // 循環操做

Printhero（n-1）;//步進

}else{

Return;

}

數組(經常使用的官方的引用類型)

數組中的每一個值叫作元素，每個元素都有本身的位置。這個位置叫作索引，索引從0開始

對JS語言來講同一個數組中能夠放入不一樣類型的數據

字面量法建立數組

// 1.字面量法建立數組

var arr=[];

//當使用字面量法建立數組的同時給數組賦值，最後一個若是加，會形成ie8及如下讀取數組長度+1，形成瀏覽器兼容問題，因此不加，

var arr1=[1,2,,4,5.56,true,"gag"];

console.log(arr1.length);

console.log(typeof(arr1));//object 引用類型至關於其它語言中的類。

//數組是js語言中使用機率較高的引用類型之一

構造函數法

//2.構造函數法建立數組（new關鍵字能夠省略，new的意思是程序員手動在堆空間開闢空間）

var arr2 = new Array();//空數組

var arr3 = new Array(20);//建立了一個容量爲20 的數組

var arr4 = new Array(1,2,3,4)//建立了一個容量爲4的數組

var arr6 = new Array(4);

arr6=[1,2,3,4,5,6,7];// 不能這樣給new出來的數組這樣賦值，要經過遍歷

//使用構造函數法穿件數組的時候，若是隻傳一個值，這個值是number類型的，那麼必須是大於等於0的整數，不然會報數組非法

// 獲取數組的方法下標法

// 對js而言沒有數組越界的概念，當[index]超過數組的長度時，數組會自動擴充到index+1

數組的遍歷

var arr=[1,2,3,4,5,6,7,8,9,10];

console.log(arr.length);//獲取數組的長度

arr.length=8;//能夠經過修改數組length的值來修改數組的長度，長度變化後，後面的值就被刪除或者添加undefined。

console.log(arr.length);

// 遍歷數組----就是獲取數組的每個數組元素

//先給數組賦值

var arr1=new Array(20);

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

arr1[i]=i*2;

}

//1,遍歷數組for循環方法

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

document.write(arr1[i]+" ");

}

//2.for in 前面j是循環變量（也就是下標，從0開始到數組長度）。 in後面是數組名字

for(var j in arr1){

document.write(arr1[j]+" ");

}

//3.forEach ECMAScript5.0的新內容

//forEach是對數組中的每個數組元素進行函數體中的操做,他不支持break語句能夠有return語句

// 裏面是一個匿名函數，匿名函數的形參(num也能夠其它名字，必須有。)就是數組的元素，把整個匿名函數看成forEach的實參

// 只有在遍歷數組取值的時候才能使用for in 和forEach

arr1.forEach(function(num){document.write(num+" ")})

上面的它就至關於：function fun（num）{

Document.write(num+」」);

}

For(var i=0;i<arr1.length;i++){

Fun(arr1[i]);

}只是這兩個在底層封裝好了

數組中經常使用的方法

var arr=[1,1,2,3,4];

// 1 .push() 向數組末尾添加元素，返回值是改變以後數組的長度，原數組改變

arr.push("abc",34,23);

// 2 .pop()彈出數組的元素，刪除數組末尾的元素數組的長度減一，返回值是彈出來的數組元素

console.log(arr.length);

console.log(arr.pop()+"pop的返回值，也就是最後一個元素");

console.log(arr);

//3.shift() 彈出第一個元素,返回值是刪除的第一個元素

arr.shift(v1,v2,v3,……);

//4 .unshift()在頭部插入元素，返回值是改變後數組的長度

arr.unshift("asdf",200);

// 5.join(str)將數組元素按照寫入參數連接成字符串，若是不寫是默認逗號連接返回值是鏈接好後的字符串自己數組不變

arr.join("*");

//6.reverse()將數組元素倒置，返回的是倒置後的數組，原數組改變

arr.reverse();

// 7.concat(v1,v2,v3,……)將數組的數組元素與參數拼接起來，在最後面拼接，造成新的數組

// 返回值L：返回新拼接成的數組，可是原來的數組不會改變

arr.concat(1,2,"csd");

// 8.slice(startIndex,endIndex)截取數組的一部分。返回值是返回截取到的部分，原來的不變

arr.slice(2,5);//從下標爲2到5，可是包括2 不包括5

// 9 splice（index,howmany,v1,v2，……）向數組添加數組元素，或者刪除數組元素，index必須寫，意思是從下標幾開始

// howmany爲0，表示不刪除元素。howmany爲2，刪除從index開始自己+後面長度共爲2的元素

// v1，v2可選的，替換的數組元素，刪除了上面的添加了這倆

// 注意上面index都包括了自己

// 10.toString() 將數組轉換成字符串，返回值是生成新的字符串，可是原來的數組不會改變

arr.toString();

// 11. indexOf(v1)//從數組的頭部開始查找v1，返回v1第一次出現的下標（沒找到返回-1）

arr.indexOf(4);

// 12 .lastIndexOf(v1)從數組的尾部開始查找，返回v1第一次出現的下標

數組的排序

冒泡排序法

升序，1相鄰的數組進行比較；大的沉底 2.開始的一對到最後一對比較共進行進行length-1輪外層循環控制趟數內層進行比較，比較次數爲length-1-i；

3第一輪對全部的數組元素，都要進行冒泡比較，除最後一個元素（它無法和後面的比較了，後面沒了）

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

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

if(arry[k]<arry[k+1]){

var little=arry[k];

arry[k]=arry[k+1];

arry[k+1]=little;

}

選擇排序

從頭開始和後面全部的元素進行比較，每次肯定最頭上的

var arr=[0.4,5,3,12,-3]

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

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

if(arr[i]>arr[j]){

var thr =arr[i];

arr[i] = arr[j];

arr[j]= thr;

}

alert(arr);

3 sort官方也定義了一個數組的排序函數，可是是按照ascII碼的大小從第一位開始比較，也就是3會大於29；

若是想要按照本身的規則進行排序，咱們須要給sort傳遞一個實參，實參爲函數名

var arr=new Array(3,2,8,1,50);

arr.sort(compare);

// 從小到大的排序 a和b表明的是數組的前一個元素和後一個元素

function compare(a,b){

if(a>b){

return 1;

}else if(a==b){

return 0;

}else{

return -1

}

// 或者直接

// if(a>b){

// return true;

// }else{

// return false;

// }

// 再或者直接

// return a-b;

}

數組交換元素位置

var arr=["a","b"];

[arr[0],arr[1]] = [arr[1],arr[0]];

字符串

字符串經常使用的方法

// 字符串的包裝類型-----添加了方法屬性

var str="abc"; //string類型

var str2 = new String("abcdefg"); //object類型，爲引用類型，包含屬性和方法

console.log(str);

console.log(str2); //{}----引用類型的實例

//在js中string類型的字符串也能夠使用object類型中包含的屬性方法

//js會默認的將string類型轉換成object類型，而後使用在object類型中定義好的屬性和方法

// 字符串經常使用的屬性和方法

// 1.長度 length 僅僅可讀，無法修改

str2.length=10;//不能夠

console.log(str2.length);

// 2.獲取指定下標的字符 charAt() 下標從0開始的

// 返回值是字符

console.log(str2.charAt(1));

// 3.獲取指定下標的字符的ASCII碼， charCodeAt(index)

// 返回值 ASCII碼（0~127的整數）

console.log(str2.charCodeAt(1));

// 4.將ASCII碼轉換成對應的字符， String.fromCharCode(); 這個必須用引用類的類名String來調用

console.log(String.fromCharCode(65)); //輸出大寫的A

// 5.查找子串，從字符串開頭查找子串，返回子串第一次出現的位置，

// indexOf("子串"); 而lastIndexOf("子串")是從後面找，找不到都是返回-1

console.log(str2.indexOf("cde"));

// 6.替換子串 replace("被替換的子串","變化後的子串");

// 返回值是被替換後的字符串，可是原來的字符串並無改變

// 參數1是被替換的字符串或者正則表達式參數2是替換後的字符串

/*初窺正則表達式（在//之間寫着）

/abc/標記

標記：g----就是全局

i--不區分大小寫

比方說str="abcabcaacdaacaa"

str2.replace("aa","***");這樣只替換第一個aa

str2.replace("/aa/gi","***");這樣替換全部aa且不區分大小寫Aa也被替換

// 7.截取子串 substring(參數1，參數2)，只有一個參數的時候是截取到末尾，【兩個是截取中間的，不管一個或兩個參數原來的字符串不會改變=數組slice】

// 返回值是截取到的子串，

// 8.substr(參數1，參數2); 一個參數截取到末尾，兩個參數時，參數二表明截取的長度

// 9.字符串大小寫轉換toUpperCase(); 轉大寫toLowerCase();轉小寫原來的字符串不會改變

// 10.字符串相等的判斷 == 返回true或者false

// ==是值相等就能夠10=="10" true ===是絕對至關類型值都同樣 10==="10" false

// 11.split字符串分隔符與數組的join()想對應，它是將字符串分割成數組

var str="welcome to beijing";

alert(str.split(" "));

字符串的大小比較，是從頭也就是下標爲0開始比較兩個字符串的第一個位數的ascri碼比較，若是下標爲0的相同，再比較下標爲1的。。直到找到不一樣的

字符串調用正則表達式的方法:

Str.math(parrent);

Str.search();

// 字符串關於正則表達式的函數

// match() 返回符合模式的子串組成數組或者是null

// search() 返回下標或者 -1

// 只要找到返回下標，找不到返回-1 全局g修飾無用與RegExp 的test()同樣

// replace(parrent,"新內容") 返回值就是替換以後的新字符串但原來的字符串不變

// split(parrent) 返回值是數組

var str="this is a BOX or box?what a box……box";

var rex=str.match(/box/gi);

console.log(rex instanceof Array);

console.log(rex);

console.log(str.search(/box/i));

console.log(str.replace(/box/gi,"top"));

console.log(str);

BOM

------瀏覽器對象模型

// BOM(瀏覽器對象模型) Browser Object Model

// BOM就是js獲取以及管理各個瀏覽器的內容

// js經過window這個全局對象來管理瀏覽器

// 因此在html頁面定義全局變量函數都屬於window這個全局對象的屬性和方法

var a=100;

function fun(){

// alert("我是一個函數");

var b="abc";

window.a;

}

// alert(window.a);

window.fun();

window的對象屬性

// window的對象屬性有：

// document文檔 history歷史 location地址 frames框架 navigator導航器（獲取瀏覽器是哪一個廠商的） screen屏幕（獲取分辨率啥的）

// 上面前三個重要

window.location.href="www.baidu.com";

window.location.reload();//刷新帶本地緩存

window.location.reload(true);//不帶本地緩存

window.history.back(); //上一個歷史記錄

window.history.forward(); //下一個歷史記錄

window.history.length;//獲取歷史記錄的長度

window.history.go(數值); 去第幾條歷史記錄【在去的歷史記錄中，back和forward不會產生新的history，正數值往前，負值日後】

經常使用的方法

window.open("3.html","_blank","width=100px,height=300px,top=100px,left=30px,toolBar=yes,location=no");其中toolBar是工具條

window.open("3.html","","fullscreen=yes");

window.close();//這種方式關閉的窗口，在FF只能關閉window.open();打開的窗口

alert(彈出框)，confirm（選擇框） prompt（輸入框）方法

模態彈出框（意思是不點擊讓當前窗消失，就沒法操做其它的）

showModalDialog("url也就是要跳轉的頁面",參數2,"dialogWidth=200px;dialogHeight=200px");

第一個參數是將要打開的模態框的地址，參數2是將要傳遞到模態框的數據，參數3是模態框的一些數據。

參數2要在那個模態框裏面接受一下用，

經常使用的事件

window.onload()=function(){

//頁面加載完成後（執行完最後的html）執行裏面，無所謂script的位置了

$("id").onclick=function(){

//這是給按鈕的點擊事件賦值/綁定了一個函數

}

window.onscroll()=function(){

//瀏覽器滾動觸發此方法

console.log("go away!!");

// 瀏覽器支持那個屬性就取哪一個屬性的值,獲取瀏覽器滾動的高度值

var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;

console.log(scrollTop);

能夠經過修改document.body.scrollTop||document.documentElement.scrollTop這兩個的值來控制滾動條滾動的距離;[回到頂部]

var top=document.getElementById('top');

top.onclick=function(){

document.documentElement.scrollTop=0;

document.body.scrollTop=0;

}

窗口大小變化事件onresize();

window.onresize=function(){

console.log("便便便便");

//獲取可視區域的寬高

var width = document.documentElement.clientWidth||document.body.clientWidth||document.innerWidth;

var height=document.documentElement.clientHeight||document.body.clientHeight||document.innerHeight;

console.log(width+"width"+height+"height");

定時器

連續性定時器

setInterval(函數名,時間(毫秒單位));//每隔固定的時間調用一次函數

clearInterval(定時器的名字);//中止某個定時器

延時定時器

setTimeout(函數名,時間); //過了指定的時間後，函數纔會執行，只執行一次

clearTimeout(定時器名字); //清除定時器

DOM

文檔對象模型

W3c定義的訪問html的標準

如何獲取獲取、修改、添加、和刪除標籤

節點

HTML文檔中的全部內容都是節點

整個頁面是文檔節點

整個標籤是元素節點

標籤裏面的屬性就是屬性節點

頁面中直接寫的文本或者標籤之間的空白叫文本節點

註釋叫註釋節點

節點層級關係：根節點、父節點、子節點、兄弟節點

獲取元素節點方法：

document.getElementById();

var oinput =document.getElementsByTagName(「標籤名」); 返回值是一個集合（下面倆也是，因此是elements）

用instanceof 來判斷某個對象是否是某個引用類型的實例

alert(oinput instanceof Array);

document.getElementsByClassName(「clsaa屬性的值」)經過class獲取(IE8如下的瀏覽器沒法獲取)

document.getElementsByName(「name的值」); 有name屬性的標籤，通常是表單元素用

上面的四種方法都是從整個文檔中查找元素節點。我要是想查找某元素（也就是標籤、對象）的子節點元素（這個對象.getElementxxxxxx）：

對象.getElementsXXX();

如：document.getElementById("box").getElementsByTagName("div")；ID爲box下面的子節點

獲取官方定義的屬性節點

document.getElementById().屬性名------------也就是先獲取到元素節點（標籤）而後 .屬性名字【返回的是這個屬性的值】

設置官方定義的屬性節點的屬性值

document.getElementById(「IDname」).屬性名=」屬性值」；屬性值必需要用引號括起來。

獲取自定義的屬性節點【用不大到啊】

Document.getElementById(「」).getAttribute(「本身寫在標籤中的屬性名」);//獲得的是本身寫在標籤中的屬性名的屬性值

Document.getElementById().setAttribute(「本身寫的屬性的屬性名「,」這個名的值」);

修改本身寫的屬性的屬性名的屬性值

Document.getElementById().removeAttribute(「本身編寫的屬性名」);//把本身寫的屬性名刪除掉

獲取文本屬性的方法

innerHTML獲取文本標籤之間的內容，可是不包括這個文本標籤

outerHTML獲取文本標籤之間的內容，包括這個文本標籤

innerText 只獲取裏面的文本信息不包括裏面的標籤

經常使用的元素節點

對象.tagName標籤名字對象 .className獲取class的值。。不能是.class

對象.id.title

對象.屬性名.屬性值或者$(「id」).style[「width」];

Css腳本化(樣式操做)

設置行間樣式表的屬性的屬性值

$(「id」).style.width=「100px 「若是是個border-radius 修改爲borderRadius 不認識-

設置內部樣式表或外部樣式表

$(「id」).style.width=」100px」;

【這是獲取行間樣式表的方式】也就是$(「id」).style.width;

獲取內部樣式表或外部樣式表的屬性值

Window.getComputedStyle($(「id」),null)[「屬性名」]；這是非IE下的獲取方法，null指的是僞類，沒有就寫null

$(「id」).currentStyle[「屬性名」]; IE瀏覽器下獲取方法

style與getComputedStyle區別：前者可讀可寫，後者只讀，style獲取的屬性少，只能獲取行間樣式表中所設置的（若是複合屬性能獲取到全部的複合屬性的值），後者是獲取最終的屬性，電腦上全部的樣式屬性

// 封裝一個函數，經過這個函數得到相應的屬性

function getStyle(element,attr){

if(window.getComputedStyle){

return getComputedStyle(element,null)[attr];

}else if(window.currentStyle){

return element.currentStyle[attr];

}else{

return element.style[attr];

}

console.log(getStyle(元素,"height"));

建立元素節點

Document.createElement(「div」);

只能由document來調用，參數是標籤名字

//父節點.appendChild(子節點名字)

//將子節點添加到父節點孩子列表的最後一個

$("list").insertBefore(firstLi,lis) 在誰前面添加。參數1是新加的，二是舊的

document.body.appendChild(odiv); 必定要記得添加到頁面上用這句話

父節點.removeChild(「子節點名字」); //移除節點

this.parentNode.parentNode 這個parentNode是當前節點的父節點

document. createTextNode 建立一個文本節點，（固然只要是建立就要添加到父節點上咯）

對象偏移量

//offsetLeft-------偏移量 left的值（父元素及以上都沒沒定位就是相對於body，直到找到有定位的爲止）

//offsetTop-------偏移量top的值（父元素及以上都沒沒定位就是相對於body，直到找到有定位的爲止）

// offsetWidth-------節點自己的width的值

// offsetHeight------節點的height的值

//offsetParent -----獲取該節點上面進行了相對定位的父節點，都沒找到就找到了最終進行了相對定位的body

rightW=$("box").offsetParent.offsetWidth-$("box").offsetLeft-$("box").offsetWidth;

後面爲一些經常使用屬性方便查找：

clientHeight     獲取對象的高度，不計算任何邊距、邊框、滾動條，但包括該對象的補白。
clientLeft     獲取    offsetLeft     屬性和客戶區域的實際左邊之間的距離。
clientTop     獲取    offsetTop     屬性和客戶區域的實際頂端之間的距離。
clientWidth     獲取對象的寬度，不計算任何邊距、邊框、滾動條，但包括該對象的補白。
offsetHeight     獲取對象相對於版面或由父座標 offsetParent    屬性指定的父座標的高度。
offsetLeft     獲取對象相對於版面或由  offsetParent   屬性指定的父座標的計算左側位置。
offsetParent     獲取定義對象    offsetTop     和    offsetLeft     屬性的容器對象的引用。
offsetTop     獲取對象相對於版面或由    offsetTop    屬性指定的父座標的計算頂端位置。
offsetWidth     獲取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的寬度。
offsetX     設置或獲取鼠標指針位置相對於觸發事件的對象的    x     座標。
offsetY     設置或獲取鼠標指針位置相對於觸發事件的對象的    y     座標。
clientX,clientY   鼠標當前相對於網頁的位置，當鼠標位於頁面左上角時clientX=0, clientY=0
screenX, screenY是相對於用戶顯示器的位置

網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： wind ow.screen.width
屏幕可用工做區高度： window.screen.availHeight
屏幕可用工做區寬度：window.screen.availWidth

事件

事件就是用戶或者瀏覽器執行的某種動做 click load等都是事件的名字

事件處理程序，就是響應事件的函數，事件處理程序的名字都是on開頭的。通常都是小寫

比方onclick onblur等

HTML事件處理程序 將事件處理程序（onclick）添加在html的標籤中沒法使用this指針

DOM0 事件處理程序

JS中獲得HTML標籤（元素節點），給這個元素節點的事件處理程序賦值一個匿名函數

這個函數就屬於此元素節點的一個方法。在該函數中能夠使用this指針，能夠訪問這個元素節點的其餘屬性

Var btn=document.getElementById(「box」);

Btn.onclick=function(){ Btn.onclick=null取消事件處理程序

Alert(this.id)//會出來box；

}

經常使用的事件

window.onload=function(){

alert("網頁加載完畢");

}

window.onunload=function(){

// 頁面要跳轉走時觸發，只有IE支持

alert("本頁面要死翹翹了");

//通常進行內存空間的釋放

}

window.onscroll=function(){

// 由於只要滾動就調用，全部最簡單的操做

}

window.onresize=function(){

//最簡單的操做，觸發頻率過高了，爲了提升效率

}

document.getElementById('pic').onload=function(){

圖片加載完成事件

alert("圖片加載完畢觸發我,須要寫在圖片html的下面，要否則圖片都加載完了就無法觸發了");

}

鼠標事件

若是一個元素同時具備單擊和雙擊事件如何處理？不過雙擊用的比較少

Var timer;

元素(對象).onclick=function(){

clearTimeout(timer);

Timer=setTimeout(function(){

Alert(「單擊」)}，500)；

}

元素(對象).ondblclick=function(){

clearTimeout(timer);

Alert(「雙擊」);

}

元素(對象).onmouseover=function(){

鼠標從元素外部進入元素內部的時候觸發此事件

}

Document.onmousemove=function(e){

鼠標滑動執行裏面的代碼，我若是傳過一個e來

e.clientX 和e.clientY 獲得當前鼠標位置，而後隨鼠標運動

}

元素(對象).onmouseout=function(){

鼠標從元素內部劃出到元素外部的時候觸發執行這裏面代碼

}

元素(對象).onmousedown=function(){

當鼠標點下去的時候執行此處代碼

}

元素(對象).onmouseup=function(){

當鼠標擡起時觸發的事件

}

鍵盤事件

document.onkeydown=function(){

鍵盤按下執行此區域

}

document.onkeyup=function(e ){

鍵盤擡起執行此區域

e.keyCode;獲得鍵盤上的操做的鍵的ascii碼

}

document.onkeypress=function(){

鍵盤按下可打印的鍵時執行此區域【你像shift，Capslk（大寫鎖定） fn ctrl等就不打印】

只有按下字符鍵盤才觸發這裏

}

事件流

頁面接收事件的順序

點擊div：Div-----body-----html-----document---------window 由小及大事件冒泡IE

點擊div：Window-----document-----html----body----div 由大及小事件捕獲網景

W3C事件流

分爲三步：事件捕獲--------->目標階段---------> 事件冒泡

Window-----document-----html----body===div===body-----html-----document------window

經常使用的是事件冒泡，當點擊div卻不想讓div獲得這個事件而在半路攔截下來的時候才用事件捕獲

DOM0級事件處理程序，只會在事件冒泡中執行，在事件捕獲中不起做用

DOM2級事件處理程序，添加一個監聽事件addEventListener（）

$(「ID」).addEventListener("事件名",函數,布爾值) 布爾值true表示在事件捕獲階段觸發事件，false爲事件冒泡階段觸發事件;函數也能夠寫在外面，只寫個函數名

清除事件處理程序用removeEventListener("事件名",函數,布爾值); 裏面的參數必須和上面的參數如出一轍，而且中間的函數必須是函數名，不能是匿名函數

oDiv.addEventListener("click",btnClick,false);

// 布爾值true表示在事件捕獲階段觸發事件，false爲事件冒泡階段觸發事件

document.addEventListener("click",function(){console.log("document")},false)

function btnClick(){console.log("btn");}

每個事件處理程序都有一個事件對象event，包含了事件的基本信息，有共有的屬性

Event.bubbles 返回true或false 判斷此事件是否冒泡爲true可調用------->

event.stopPropagation(); 阻止此事件的進一步冒泡或者捕獲

$(「id」).onclick=function(eventaa){

eventaa.stopPropagation();

}

Event.cancelable;是否能取消默認事件若是能取消就調用event.preventDefault()取消

比方說給a標籤加點擊了取消默認事件，點擊後就不跳轉了

Event.type 返回的是事件名看下面例子

function onevent(e){

switch(e.type){

case "mouseover":

console.log("鼠標懸浮");

break;

case "mouseout":

console.log("鼠標離開");

break;

case "click":

console.log("點擊我");

break;

}

window.onload=function(){

$("box").onclick=onevent;

$("box").onmouseover=onevent;

$("box").onmouseout=onevent;

}

event.currentTarget 獲取當前正在處理事件的當前元素，比方說我點擊了當前div，當前div的currentTarget是div。可是它的父級body也有點擊事件，父級裏面的currentTarget指的是body。而下面的target都是出來的div 由於我自己點的就是div。Body的事件只是冒泡形成的

Event.target 事件的目標元素，點擊的當前，而currentTarget 獲取到的多是冒泡形成的獲取成父級

瀏覽器的鼠標事件屬性

// 在瀏覽器可視窗口的位置

console.log("瀏覽器可視窗口X+"+e.clientX,"瀏覽器可視窗口Y+"+e.clientY);

//在頁面中的位置

console.log("整個頁面X："+e.pageX,"整個頁面Y："+e.pageY);

//在屏幕上的座標

console.log("在整個屏幕上的X"+e.screenX,"在整個屏幕上的Y"+e.screenY);

alert("你按得是誰？"+e.button); //檢測按下的是什麼鍵0是左鍵1是滾輪2是右鍵

阻止瀏覽器右鍵彈出框

Document.oncontextmenu=function(){

Return false;

}

時間Date

世界協調時間，也就是世界時間。從1970年1月1日0點開始

獲取當前時間：

// 獲取當前時間,傳參是無效的

var d=Date();

console.log(d);

// new Date()構造函數獲取時間

var d2=new Date();

console.log(d2);

1不傳參數獲得的是當前的時間

// 當用構造行數的時候火狐出格林尼治時間，谷歌是轉換成當地時間

//2 傳入毫秒數，從1970 1月1日開始計算加上傳的參數，能夠是負值就是1970年以前的

var d3=new Date(24*3600*1000);

console.log("da3"+d3);

//3傳入一個表示時間的字符串月日，年時：分：秒

var d4=new Date("6 22,2016 12:00:00");

這個字符串也能夠是 「2016-6-22」還能夠是「2016/6/22」

console.log(d4);

若是不寫時分秒，會默認是0

若是用2016-6-22 來表示傳的字符串的話，日也能夠不寫，是今後月第一天開始

// ISO標準寫法 2016-06-12 月份是兩位的 假設開發者所在的時區是0度，因此用戶看到的=========時間應該是當地日期，也就是+8小時=

// 非ISO寫法若是月份不加0 假設開發者所在時區和用戶在一塊兒【這是火狐的事情，FF就沒事次奧】

var d5=new Date("2016-06-22");

console.log(d5);

// 傳入年月日來建立日期對象

// （年,月[,日,時,分,秒]）括號裏面的可不寫

// 月份的記錄從0開始的 0----1月，1----2月。。。。。。。。

var d6=new Date(2016,6,12); 不加引號只能這樣寫,也就是說傳的參數是數值的話只能用逗號隔開

經常使用的方法

獲取四位年份:

Var day=new Date();

day.getFullYear(); 獲取年份

day.getMonth();獲取月份，由於月是從0開始的，因此要加1

day.getDate();獲取日期

day.getDay(); 獲取星期幾

day.getHours(); 獲取小時

day.getMinutes(); 獲取分鐘

day.getSeconds(); 獲取秒數

// 設置年月日（在設置時間時，沒有邊界，若是超出會在前面位加或者減去，比放說，4日26點，會自動變成5日3點，若是是負的會減去，也就是說傳入的月份、日期、時分秒超過範圍的話會自動調整爲正確的時間）

d.setFullYear(2015);

d.setMonth(13);

d.setDate(12);

// 星期不能夠設置

d.setHours(20);

日期的計算

日期相減是返回兩個日期對象相差的毫秒數，相加是先將兩個對象轉換成字符串，返回這兩個字符串的拼接

日期的靜態方法

Date.parse(參數是一個日期格式的字符串，返回的是這個日期距離1970年1月1日的毫秒數); 注：這裏傳入的參數都是東八區的時間，會先轉換成格林尼治時間（-8小時）再算毫秒數。

日期格式：

月日,年時:分:秒假設開發者在經度0的時區上

2016-04-22 16:06:59 或者2016-04-08

2016/06/22 16:06:59 2016/03/23

Var d =new Date();

d.getTime(); 獲取某個日期從1970年距今的毫秒數

d.setTime(); 修改日期距離1970年的毫秒數，對應的日期也會修改

正則表達式

JS中的正則表達式就是RegExp Reg(合法的) Exp(表達式)

正則表達式的建立方法：

1構造函數法建立正則表達式：

Var parrent=new RegExp(「abc」);

一個參數裏面的參數abc就叫作模式也能夠理解成後期須要匹配的東西

Var parrents=new RegExp(「abc」,」gi」);

兩個參數，前面的是模式後面的是模式修飾符, 參數2可寫可不寫

比方說過濾敏感詞彙，我把敏感詞彙放到一個數組裏面，而後循環這個數組，每次構造一個正則表達式，表達式每次的模式就是循環取出來的每次的敏感詞，而後我讓它全局，替換，把替換好的再賦值給原來的字符串，第二次循環就是替換已經替換過上次敏感詞的字符串，達到敏感詞過濾的效果

2.字面量法建立

var parent=/box/;

或者反斜槓後面添加模式修飾符：var parrent /box/gi;

正則表達式經常使用的方法：

1.test(); 檢索正則表達式中所描述的模式是否存在於字符串中，存在返回true 不存在返回false；可用i修飾，可是g寫不寫就無所謂了

Var parrent=new RegExp(「box」,」i」);

Var str=」this is a Box」; parrent.test(str); 返回true；

2.Exec();方法

也是用來檢索字符串中是否存在表達式中所描述的模式，可是他返回的是存在的這個值，沒有就返回null 另外，則個方法還有一個index屬性，調用後返回的是這個值存在的位置

Var parrent= /box/gi;

var str="this is aBOX or box?what a box……box";

Var tex=Parrent.exec(str);

返回的是Box ，tex.index;返回的Box在這個字符串中的下標

若是調用第二遍這個方法，就從已經找到的位置繼續往下尋找，返回的就是第二個box和這個box的下標，直到最後找不到返回null ，而這個時候調用的index是報錯的。沒有怎麼告訴下標呢，是吧

這個方法能夠透過循環找出全部的下標

While(1){

Var ss=parrent.exec(str);

If(ss==null){

Break;

}

Alert(Ss.index);

}

3compile();方法，用來修改模式，還可用來增長、修改、刪除模式修飾符

Parrent.compile(「bzx」,」g」); 就修改完了，我無論之前的正則表達式是什麼，反正從如今開始按照我執行就行了。

有幾個字符串的方法結合正則表達式使用

// 字符串關於正則表達式的函數

// match() 返回符合模式的子串組成數組或者是null

var str="this is a BOX or box?what a box……box";

var rex=str.match(/box/gi);

// search() 返回下標或者 -1 str.search(/box/i)

// 只要找到返回下標，找不到返回-1 和字符串的indexOf差很少與RegExp 的test()同樣全局g修飾無用

// replace(parrent,"新內容") 返回值就是替換以後的新字符串但原來的字符串不變

str.replace(/box/gi,"top")

// split(parrent) 返回值是數組當正則表達式用/[,?]/表示的時候，就能依據不一樣的標誌分割成數組

一些經常使用的元字符

[ ] 表明單個字符，不管裏面多少表達式，要知足一種就能匹配上，一個【】匹配一個字符

Javascript面向對象

【內置對象】

Object、String、Array、Math-------宿主對象 DOM 、BOM等。

【字面量對象】

經過點對象 . 屬性名或者對象[「屬性名」] 來訪問（包括得到值和賦值操做）字面量對象內部的屬性值

簡單的說能夠理解爲「名稱-值」（鍵值對）；

這種數據類型至關於java語言中的HashMap，C語言中的散列表，Python中字典以及objective-c中的字典等。

這種數據結構能夠實現各類複雜的需求，因此適用於各大編程語言中。

語法：字面量對象用大括號表示」{ }」,內部是由各類「名稱-值」對組成。

名稱和值之間用冒號「：」鏈接，各組」名稱-值」之間用逗號「，」隔開。

注意最後一組不須要加逗號「，」 。

名稱部分（屬性）：是由javascript字符串表示。

值部分：能夠是javascript任何數據類型（包括字面量對象，甚至函數）。

例：//建立一個含有多組屬性-值的字面量對象

var obj3 = {

"name" : "邁克爾·斯科菲爾德",

"age" : 18,

"isMarry" : true,

"friends" : ["小明","小紅","小白"],

"wife" : {

"name" : "曉雪",

"age" : 18

"sayHello" : function(){

//this表明obj3對象自己

console.log("你們好，我是"+this.name);

}

};

//調用字面量對象內部的字面量對象

console.log("得到曉雪："+obj3.wife.name); //優先用這種

console.log("得到曉雪："+obj3["wife"]["name"]);

console.log("得到曉雪："+obj3.wife["name"]);

console.log("得到曉雪："+obj3["wife"].name);

// 修改屬性的值

obj3.name="小飛俠";

obj3.sex = "男";

若是以前obj3裏有這個sex屬性，那麼這個操做是修改操做，不然就是添加一個屬性和值得操做。

Javascript是一種面向對象的動態腳本語言。它的語法和特性是基於C和java等語言的。

【面向過程思想】

注：C語言是面向過程的

解決某個問題，看的是「如何」解決這個問題，是一種數學邏輯的映射，按照步驟執行。

【面向對象思想】

注：Java是面向對象的

解決某個問題，看的是「誰」能解決這個問題。把問題拆解成各個「對象」，對象處理相應的功能邏輯，「對象」之間協同完成工做。對象做爲接收消息的基本單位。同時是一種生活邏輯的映射。

【面向對象的幾個專業術語】

1.類（class）：某一種事物的抽象，是建立對象的模板。

2.對象（object）：是某一種事物的實例（真實的東西）。就是能找到具體的東西

3.方法（method）：是對象的行爲。

4.屬性（property）：是對象的特徵。

【重點從幾個角度說下類和對象】

1.從生活邏輯的角度來看

類：人對象：我、奧巴馬

電腦這臺戴爾電腦，你的這臺戴爾電腦

超級英雄超人、蜘蛛俠、綠巨人都對，可是葫蘆娃不對，二娃對

2.從封裝的角度來看

函數：對一些功能邏輯的封裝，爲了封裝完以後能重複使用

類：對屬性（變量）和行爲（函數）的封裝。

總結：面向對象編程，是以對象爲基本單位進行編程的。但有對象以前，必定要先有類。對象是經過類建立出來的。我們JS沒有「類」的概念，不過咱們能夠經過其餘方式來模擬「類」。（ECMA6已經支持類的概念，不過和傳統面嚮對象語言的類仍是不太同樣）

//構造函數方式建立對象

function Person(name,age,sex){

this.name=name;

this.age=age;

var sex = sex; //私有屬性：構造函數外部，沒法直接訪問的屬性叫作私有屬性

// 創建一個所謂的橋樑，來間接的訪問私有屬性

// 獲取私有屬性的間接方法

this.getSex = function () {

return sex;

}

this.setSex = function (_sex) {

sex=_sex; //這裏是設置其屬性值，因此不必return 分工明確

}

this.sayHello=function(){

console.log("你們好，我叫：" + this.name +"年齡："+this.age + "性別：" +sex);

}

// return this; 這句不用寫

//若是外面經過new關鍵字來調用這個構造函數的話，會自動返回this，也就是當前建立的對象

//經過new關鍵字配合構造函數，建立一個對象（實例）

//其原理：首先在堆內存申請了一塊存儲空間，同時在這裏建立了一個Person類型的對象，會分配給這塊空間一個地址，那麼咱們想經過棧裏的變量來訪問堆裏的這個對象，只能經過指針來訪問。其語法以下

var person = new Person();

模擬類建立對象

function makePerson (name, age) {

return {

"name" : name,

"age" : age,

"sayHello" : function () {

//this指針指向當前對象。

console.log("你們好，我叫：" + this.name + " 年齡：" + this.age);

}

};

}

//經過函數建立一個對象

var person1 = makePerson("小雪人", 18);

//在建立一個對象

var person2 = makePerson("小火人", 19);

//調用各自的sayHello方法

person1.sayHello();

person2.sayHello();

類方法建立對象

//類方法，經過類名（構造函數的名字）直接調用的方法，不須要建立對象，就能夠調用的方法

function Person(name){

this.name=name;

// 我就是個空殼子，一個對象空間

}

//其實類方法自己本身不具有建立對象的功能，實質上依然是經過new關鍵字配合構造函數來建立對象

Person.createPerson=function(name){

return new Person(name);

}

var person1= Person.createPerson("曉雪");

構造函數方式建立對象(就是個模板最經常使用的)

構造函數爲了和普通函數區分開，每每構造函數的首字母大寫

function Person () {

// this永遠表明當前對象，也就表明着每次調用Person構造函數建立出來的那個對象。

this.name = "曉雪";

this.age = 18;

this.sayHello = function () {

console.log("你們好，個人名字：" + this.name + "年齡：" + this.age);

}

// return this; 這句不用寫

//由於若是外面經過new關鍵字來調用這個構造函數的話，會自動返回this，也就是當前建立的對象

}

//經過new關鍵字配合構造函數，建立一個對象（實例）

var person = new Person();

我若是不new構造函數直接使用的話內部的this指針會指向全局

===============================================================================

===============================================================================

私有屬性

function Person(name,age,sex){

this.name=name;

this.age=age;

var sex = sex; //私有屬性：構造函數外部，沒法直接訪問的屬性叫作私有屬性

// 創建一個所謂的橋樑，來間接的訪問私有屬性

// 獲取私有屬性的間接方法

this.getSex = function () {

return sex;

}

this.setSex = function (_sex) {

sex=_sex; //這裏是設置其屬性值，因此不必return 分工明確

}

person1.sex="男"; //注意這裏不是修改內部的私有屬性，而是新增一個sex屬性

//調用"橋樑"間接訪問私有屬性

person1.setSex("未知"); 這樣才能訪問到

console.log(person1.getSex());

屬性訪問器(感受用不到呀)

function Duck(name,age){

this.name=name;

this.age=age;

Object.defineProperty(this,"name",{

"get" : function (){

console.log("這是get訪問器！！");

return name;

"set" : function(userName){

console.log("這是set訪問器");

if(userName!="曉雪"){

console.log("只要曉雪");

return;

}

name=userName;

}

});

}

var dack1=new Duck("小灰",6);

dack1.name="小蘇";

dack1.name="小劉";

console.log(dack1.name);

這種方式能夠防止隨便修改、訪問、屬性值

原型模式

每一個構造函數都有一個原型屬性（prototype）這個原型屬性指向一個原型對象，咱們能夠給這個原型對象設置屬性和方法，這些屬性和方法能夠給經過該構造函數建立的對象使用。換句話說，也能夠理解爲經過該構造函數建立出來的對象，繼承於這個原型對象，能夠直接使用原型對象的屬性和方法。

【如下這種建立對象的有一個好處就是相比較上面而言，更節省空間，上面的方法在不一樣的對象裏，下面的是不管創造出多少對象，共用一個方法，也就是說方法在同一塊內存堆裏】

function Person(name){

this.name=name;

}

Person.prototype.sayHello=function(){

//這個this依然表示當前經過Person構造函數建立出來的對象

console.log("你們好，我叫:"+this.name);

}

與原型相關的知識點：

1.支持運行時添加方法，在添加方法以前建立的對象，依然能夠使用這個方法

也就是說，我先new出了實例對象來，我又在下面給構造函數添加了方法，這個上面new出來的實例依然能夠使用這個方法

2.也能夠給內置構造函數的原型添加方法

String.prototype.reverse = function () {

var resultStr = "";

for (var i = this.length - 1; i >=0; i--) {

resultStr += this[i];

}

return resultStr;} str.reverse() "小雪轉大雪".reverse()

3.也支持從新覆蓋掉，原來的方法,

注意：！！！！不到萬不得已的時候，千萬別去覆蓋系統自帶的方法。不然後果自負！！！！

Array.prototype.indexOf = function (ele) {

console.log("亂改！");

}

原型鏈及其原型方法和屬性相關

何爲原型鏈：

每一個對象都有一個對應的原型對象，這個原型對象自己也是一個對象，那麼既然它也是一個對象，因此它也應該會有一個屬於它的原型對象，以此類推，一直到Object.prototype爲止。Object.prototype的原型是null。經過以上分析，會造成一條鏈子，這條鏈子被稱做爲原型鏈。

例：

//經過不一樣的方式來生成原型鏈

var obj = {

"name" : "小雪"

}

obj對象繼承了Object.prototype的屬性和方法

所生成的原型鏈爲：

obj --> Object.prototype --> null

數組

var arr = ["小雪", "小王"];

arr對象繼承了Array.prototype的屬性和方法

所生成的原型鏈爲：

arr --> Array.prototype --> Object.prototype --> null

函數

function fn () {

console.log("小雪");

}

fn對象繼承了Function.prototype的屬性和方法

所生成的原型鏈爲：

fn --> Function.prototype --> Object.prototype --> null

自定義對象

function Person (name) {

this.name = name;

}

var person1 = new Person("小雪");

person1對象繼承了Person.prototype的屬性和方法

生成的原型鏈爲：

person1 --> Person.prototype --> Object.prototype --> null

//Object.create()：這個方法能夠用來建立對象，建立出來的對象繼承於這個方法的參數。換一句話說，也就是，這個方法的參數是一個對象，並且它是建立出來的那個對象的原型對象。

var a = {

"name" : "包女士"

}

//經過Obejct.create方法生成一個新的對象

var b = Object.create(a);

//生成的原型鏈：b --> a --> Object.prototype --> null

console.log(b.name);

var c = Object.create(b);

//生成的原型鏈：c --> b --> a --> Object.prototype --> null

console.log(c.name);

var d = Object.create(null);

//生成的原型鏈：d --> null

//constructor：每一個原型對象都有constructor屬性，這個屬性指向的是該原型對象所在的構造函數

console.log(Person.prototype.constructor);

console.log(person1.constructor);

//hasOwnProperty(): 判斷一個對象是否有某個屬性，返回值是一個布爾值

console.log(Person.prototype.hasOwnProperty("constructor"));

console.log(person1.hasOwnProperty("constructor")); //是false ，證實這個constructor不是person1的，是繼承來的

總結：當調用某個對象的屬性或方法的時候，首先去查找該對象自身是否有這個屬性和方法，若是沒有的話，就沿着原型鏈去往上找，若是找到了就能夠直接使用，若是沒找到，就繼續找，以此類推，直到找到null爲止。

Object.getPrototypeOf(): 返回一個對象的原型對象

console.log(Object.getPrototypeOf(person1));

isPrototypeOf(): 判斷一個對象是不是另一個對象的原型對象

console.log(b.isPrototypeOf(c)); //b是c的原型對象因此是true

Map認識

//Map的認識和使用

//是一種映射結構，JS裏的Map至關於JS裏的字面量對象，其結構基本同樣。map裏就是一種"鍵值對"的關係集合。

//Map至關於java中的HashMap、OC中的字典、python中的字典等

var map=new Map();

//map的添加方法

// 要添加的是一對鍵值對（也能夠理解爲是屬性和值，值能夠是任何JS類型）

console.log(map);

map.set("name","曉雪");

map.set("age",18);

console.log(map);

// 刪除的方法

// map.delete("age");

console.log(map);

//經過某個鍵（key或者叫作屬性）得到該鍵對應的值

console.log(map.get("name") );

//判斷map中是否有某個鍵

console.log(map.has("age"));

//修改方法和增長方法是同一個方法【map有個特性那就是鍵，或者叫key、屬性是不能重複的，因此調用set方法的時候，若是這個屬性不存在則是添加操做，存在則是修改操做】

console.log(map.set("name","曉雪她媽") );

//map的長度

console.log(map.size);

各類遍歷的整理

//聲明一系列數據結構

//構造函數

function Person(name){

this.name=name;

}

//數組

var arr = [new Person("有鬼"),new Person("白牛"),new Person("撼地神牛")];

//字面量對象

var dog = {

"name" : "幻影長矛手",

"type" : "蓋倫"

}

//Map :Map是無序不重複的

var map= new Map();

map.set("name","虛空假面");

map.set("sex","男");

/***************************普通的for循環遍歷*********************************/

// 遍歷數組最普通的：用for循環

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

console.log(arr[i].name);

}

/***********************for****in 循環遍歷*************************/

// 遍歷數組用for in遍歷數組性能很差，容易形成下標錯亂

// 左邊變量表示數組的下標，

// 右邊變量表示要遍歷的數組

for( var tempIdx in arr){

console.log(arr[tempIdx].name);

}

遍歷對象：for……in很是適合去遍歷字面量對象

//左邊變量：是這個對象的屬性

//右邊的變量：要遍歷的對象

for(var tempProp in dog){

// 注意：當屬性爲變量的時候，要用方括號語法去訪問！！

// console.log(dog.tempProp);

console.log(dog[tempProp]+"我是什麼？");

}

/*************************forEach()******************************/

// 若是遍歷數組，這個方法實際上是Array.prototype.forEach 也就是數組原型的方法

// forEach的參數是一個匿名回調函數；這個匿名函數的參數1.數組的每一個元素，2.數組的下標，3.當前數組對象

console.log("=========================三個參數寫幾個都行================================");

//注意foreach遍歷不能break 、continue 和return;

arr.forEach(function (ele,idx) {

console.log(ele.name);

});

// 遍歷map

// 若是遍歷map、這個方法實際上是Map.prototype.forEach

// forEach的參數是一個匿名回調函數；這個匿名函數的參數1.value值 2.key 鍵 3.當前map對象

console.log("======================三個參數寫幾個都行=======================");

map.forEach(function(value,key,map){

console.log(key+":"+value);

})

/*****************for....of遍歷*********************/

//遍歷數組

//第一個變量：數組中的每個元素

//第二個參數：要遍歷的數組對象

for(var tempEle of arr){

console.log(tempEle.name);

}

//遍歷map

//第一個參數: 是一個數組，數組中有兩個元素[key ,value]

//第二個參數：要遍歷的map對象

console.log("==============遍歷map=============");

for ( var [key,value] of map ){

console.log(key+"*******"+value);

}

// 或者：

for ( var temp of map ){

console.log(temp[0]+"*******"+temp[1]);

}

另外還有jQuery的兩種遍歷方法

//$.each():遍歷和$("").each()差很少後者是jQuery對象調用

$("").each() :只能遍歷jQuery對象，參數是一個匿名函數，匿名函數的參數分別是下標和元素

$.each() : 不管什麼對象(DOM/jQuery)都能遍歷,若是遍歷的是一個數組，那麼匿名函數中的參數分別是下標和元素，若是遍歷的是一個字面量對象，那麼匿名函數中的參數分別是屬性和值【數組和對象，map遍歷不了】a

舉例說明：

var arr = ["fai","ye","得","吼"];

$.each(arr,function(idx,ele){

console.log(idx+"======"+ele);

})

//遍歷對象

var obj = {

name : "負心串",

age : 18

}

$.each(obj,function(propaa,valueaa){

console.log(propaa+"======="+valueaa);

});

var person = {

name : "陳老師",

friends : [

{

name : "張女士"

{

name : "敏兒"

{

name : "小謝"

}

grilFriend : {

name : "網紅之一"

}

$.each(person,function(prop,value){

if(prop=="friends"){

//此時的value就是數組

$.each(value,function(idx,ele){

console.log(ele.name);

});

}

})

This的使用總結

在javascript中，函數都運行在某個運行環境中，運行環境也能夠理解爲是一個對象，函數內部的this指針會跟據當前的運行環境改變而改變

/*****全局環境******/

console.log(this); //window

/*******構造函數中*******/

function Person(name){

// this表明當前構造函數建立出來的對象

this.name=name;

}

console.log(new Person("邁克爾").name); //邁克爾

/*******在某個函數中*******/

function fn(){

console.log(this.name);

}

var obj1 = {

name:"可兒",

objFn1:fn

}

var obj2 = {

name:"菲兒",

objFn2:fn

}

obj1.objFn1(); //可兒

obj2.objFn2(); //菲兒

/*******在dom元素中**********/

<input type="button" value="這是另一個牛逼按鈕" onclick="btnClick(this);" /

function btnClick(ele){

// ele就是點擊按鈕後傳過來的指針，這個this就表示當前點擊的按鈕元素

alert(ele.value);

}

/**********在字面量對象中************/

var a ={

age:19,

aFn:function(){

console.log( this.age );

}

var b = {

age:18,

// bFn:a.aFn; 這樣寫this就會指向b，因此age是18

bFn: function(){

a.aFn(); //這樣寫this仍是運行在a對象裏，因此age是19

}

b.bFn(); //19

/**************有的時候，一個對象的層次結構很深，咱們想取出內部的某個函數，咱們不要直接提取，而是要提取這個函數所在的對象***************/

var c = {

d : {

sex : "男",

sayFn : function(){

console.log(this.sex);

}

//我把c.d.sayFn拿出來可是沒調用（運行），付給了testFn，this指針就變成了全局的環境，全局沒有sex 因此是undefined

var testFn=c.d.sayFn;

testFn(); //undefined

var testObj = c.d; //這樣就提取到男了，也就是說要提取函數所在的對象

testObj.sayFn();

</script>

固定this指針

//由於this指針的指向是根據運行環境而決定的，有的時候咱們須要在特定的環境下去運行，這裏用到了call方法和apply方法就能夠使用

var name="碧波";

var obj = {

name: "喬丹"

}

function fn(){

console.log(this.name);

}

fn(); //this指向window name是碧波

fn.call(obj);// 讓fn函數的運行環境變成在obj內運行 name是喬丹

function fn2(a,b){

console.log(a+b);

}

fn2.call(this,3,8)//fn2.call(this)與fn2();一個樣

fn2(3,8);

apply方法和call實現的功能如出一轍，只不過若是帶參數的話，apply接受的是一個數組而已。

fn2.apply(this,[5,8]);

做用域

/*******************局部做用域******************************/

function fn2(){

var parentName="局部做用域";

console.log("局部做用域:"+parentName);

}

fn2();

// try.....catch語句：運行在try...catch中的代碼，若是出錯了的話，不會像以前那樣程序崩掉，後面的代碼沒法執行，而是會捕獲到這個錯誤或者異常。

// console.log(parentName);這是個局部變量，會報錯

try{

console.log(parentName);

}catch(execption){

//若是出現異常，catch會捕捉到，而且打印異常信息

console.log(execption.toString());

}

//注意，javascript當中沒有塊級做用域的概念，只有函數做用域的概念

function fn3(){

for(var i=0;i<4;i++){

}

console.log(i); //沒有塊級做用域能夠訪問到，那個for循環就是塊級

}

fn3();

//注意：javascript當中，若是沒有用var聲明的變量，則是全局變量

function fn4(){

testname="猜猜我是全局的仍是局部的";

}

fn4(); //必須運行一次函數纔會生成，才能在外面調用到

做用域鏈

/*做用域鏈和原型鏈很是類似，就是說當你訪問某個變量的時候，首先去做用域鏈的最低端去找，若是找不到，則去找它的父級做用域，以此類推，直到找到全局做用域位置*/

var name="陳奕迅";

function fn(){

var name="耿耿";

function subfn(){

var name="盧星宇";

console.log(name);

}

function subFn2 (){

console.log(name);

}

subfn(); //盧星宇

//其原理：當調用subfn函數的時候，會把subfn所在的執行環境放到做用域鏈的最低端，而後再把fn函數放到它的上面，最後再放入全局做用域 subfn()----------->fn()----------->window

subFn2();

}

fn();

JSON

JSON(javascript Object Notation);是一種輕量級數據交換格式。

JSON是javascript的一個子集。JSON不是JS獨有的，其餘語言也用它，可是它是JS演變出來的。

JSON的語法基本就和javascript字面量語法如出一轍，無非就是一個字符串，但其內部的格式徹底和javascript字面量同樣

序列化：把javascript對象轉換成JSON格式字符串的操做叫作序列化（爲了給服務器傳輸數據用）

JSON.stringify();

反序列化：把JSON格式字符串轉換成javascript對象的操做叫作反序列化（通常從服務器獲取JSON格式數據後，須要進行反序列化操做）

JSON.parse();

AJAX

【客戶端和服務器交互模型】

客戶端和服務器（C/S）架構，是最基本的互聯網通訊架構。

客戶端包括：桌面應用（C/S）、瀏覽器應用（B/S）、移動應用等。

服務器包括：web服務器、數據庫服務器等。

推送：服務器主動給客戶端發送數據

拉取：向服務器發送請求獲取數據

客戶端和服務器各自擅長作的：

在用戶輸入表單的時候：客戶端通常作數據格式的校驗，而服務器通常作數據的業務邏輯處理。

【HTTP協議】

HTTP協議是超文本傳輸協議。該協議規定了客戶端和服務器傳輸交互的約定（協議），（推薦一本書：TCP/IP詳解），

經過這個協議纔可讓客戶端和服務器正確的傳輸(交互)。

HTTP協議通訊的兩大步驟：

1：請求：客戶端向服務器索取數據。

2：響應：請求後，服務器端反饋給客戶端的數據或狀態。

【GET請求和POST請求】

GET請求：明文請求，若是請求有參數，會在連接(URL)的後面以問好「？」拼接，例如：http://10.192.0.1:8080?username=suming&password=123456

若是是多個參數，參數中間用「&」符號拼接，這種請求方式會把信息暴露在用戶面前。

POST請求：密文請求,請求參數會放在請求體中。這種請求不會把信息暴露在用戶面前。

GET請求和POST請求的選擇狀況：

1.若是請求的數據量特別大或者須要有上傳功能的話必須使用POST請求。

2.get請求相對於post請求來講，安全性略差，若是要請求的數據具備嚴重的隱私性的話，建議使用POST請求。

3.若是僅僅是數據查詢的操做建議使用get請求

4.若是是其它操做，建議使用POST請求。

【同步和異步】

同步：至關於請求一次事後，要等到此次請求的響應後，才能繼續下一次請求。（不多用，用戶體驗差）

異步：請求一次後，不須要等到此次請求的響應後，就能夠進行其它請求。

【Ajax】

Ajax異步的javascript和XML,也就是說，Ajax就是經過javascript語言，去異步請求以後，獲得響應，局部刷新代碼

兩個特色：異步請求、局部刷新。

【ajax的原生開發流程】

1.建立請求對象（異步）

建立核心的XMLHttpRequest請求對象，Ajax編程都是經過這個對象來進行的

注意：瀏覽器對XMLHttpRequest對象的支持有所不一樣。

1）大部分主流瀏覽器都支持XMLHttpRequest對象

var xhr=new XMLHttpRequest(); //造了一個請求對象

2）IE6 var xhr = new ActiveXObject("Msxml2.XMLHTTP");

3)IE6如下的 var xhr = new ActiveXObject("Microsoft.XMLHTTP");

2.打開與服務器的連接

建立完請求對象後，經過請求對象的open()方法，這個方法能夠與服務器創建連接。

open(method,url,flag);

三個參數： 1：表示用什麼請求方式。GET、POST等。

2：要請求服務器的路徑,若是用的是get請求，若是有參數的話，要拼接在URL的後面

3：表示是不是異步請求，默認是異步的，不用寫就能夠

var xhr = new XMLHttpRequest();

xhr.open("GET","http://10.xxx.xx.xxx:8080/?name=su&pwd=123456",true);

3.發送請求：

與服務器創建連接後，在利用請求對象的send()方法去發送請求

若是用的是GET請求，send方法內的參數寫null就行，若是是post請求，請求有參數的話，請求參數要寫在send方法內

var xhr = new XMLHttpRequest();

xhr.open("GET","http://10.0.0.1:8080/",true);

xhr.send(null);

//注意：若是是POST請求，那麼在調用send方法以前，要設置請求頭。

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4.接收服務器響應：

當請求對象調用完send方法後，就能夠等待服務器的響應，請求對象會根據響應的不一樣狀態觸發一個onreadystatechange事件。

請求對象的幾種狀態碼：

0：未初始化完成，只是建立了XMLHttpRequest對象，還未調用open方法

1：初始化完成，請求開始，開始調用open方法，但沒調用send方法

2：請求發送，就是說已經調用了send方法。

3：開始接收服務器的響應。

4：讀取接收服務器響應後返回的數據。（響應完全結束）

當狀態碼發生改變的時候，會觸發onreadystatechange事件，共觸發5次

能夠利用請求對象的readyState屬性來查看當前的狀態碼。

真正開發的時候咱們只關心狀態碼爲4的時候。

【服務器響應的狀態碼】

200：響應正常（這就是咱們最後想要的狀態碼）

404：找不到要訪問的URL

500：服務器方面的錯誤。

咱們能夠利用請求對象的status屬性來查看服務器狀態碼

最後咱們要寫相似於

var xhr=new XMLHttpRequest();

xhr.open("GET","",true);

xhr.send(null);

xhr.onreadystatechange = function (){

if(xhr.readyState == 4 && xhr.status == 200){

//這裏是咱們想要的返回的JSON串

xhr.responseText;(再把這個反序列化)

}

轉換爲正規的JS代碼:

//1.建立請求對象

var xhr;

if(window.XMLHttpRequest){

xhr=new XMLHttpRequest();

}else if(window.ActiveXObject){

//IE6

var versions = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];

for(var tempVersion of versions){

xhr = new ActiveXObject(tempVersion);

if(xhr!=undefined){

//若是知足第一個就不是undefined了。直接退出循環就OK

break;

}

}else{

throw new Error("該瀏覽器不支持ajax！");

}

//2.創建連接

xhr.open("GET","car.json",true);

//3.發送請求

xhr.send(null);//給個null是爲了兼容火狐

//4.接收響應

xhr.onreadystatechange = function(){

//當狀態碼爲2、3、4的時候觸發

if(xhr.readyState==4 && xhr.status==200){

//反序列化，轉換成JS字面量對象

var rootObj=JSON.parse(xhr.responseText)

}

混合繼承

//混合繼承:利用類世繼承和原型鏈繼承一塊兒來實現繼承

function Person(name){

this.name = name;

}

Person.prototype.say = function(){

console.log("名字："+this.name);

}

function Student(name,age){

Person.call(this,name); //這裏學生類繼承了父類自己的屬性，這裏也就是name可是它繼承不了方法；

this.age = age;

}

Student.prototype = new Person(); //這裏繼承了父類的say方法

Student.prototype.say = function(){

console.log("孩子本身的："+this.name+"--"+this.age); //又把say方法重寫了

}

var student1=new Student("小紅",18);

var student2=new Student("小李",19);

student1.say();

student2.say();

jQuery

【庫】

1.所謂庫就是利用javaScript原生語言編寫的一套使用方便以及功能強大的一些JS文件

2.使用庫的好處：使用庫能夠簡化代碼，不用再去寫重複的代碼，並且不用去考慮那些所謂的兼容問題。

【jQuery庫】

jQuery是目前爲止前端程序猿使用最多的一個庫，並且是前端程序猿必須學的一個庫，它能解決瀏覽器的不兼容問題，提供了相同的訪問接口，程序猿不用再關心這些非計算、非業務無關的問題了。

jQuery的特色：壓縮後僅有幾十Kb，很是小巧。能夠經過鏈式語法進行調用。能夠經過CSS選擇器進行DOM操做。支持插件開發，可拓展性強。

jQuery能夠獲取文檔元素，而且對其進行操做（包括增刪改查，修改樣式等），能夠響應用戶的交互。能夠簡化經常使用的javascript邏輯

jQuery的版本：

大概分爲三個版本，1.X版本 2.x版本 3.x版本；1.x版本相對於2.x版原本說支持IE6、7、8 2.x版本支持IE9及以上，根據需求決定使用哪一個版本。能夠去jQuery的官網請下載

3.x版本正式版剛發佈不久（最好使用2.x）;

導入JQuery

【基礎選擇器】

>表示選中指定的元素惟一的一級子代元素；

+表示選中指定元素其後緊鄰的惟一一個元素；

~表示選中指定元素其他全部的元素；

【過濾選擇器】

在jQuery中全部的過濾選擇器都以冒號開頭

:not()在指定的元素當中排除某一個元素或某一類元素

：eq()按照指定的索引值進行過濾，（索引值從零開始）

：gt（）過濾大於指定索引值的全部元素

: lt ()過濾小於指定索引值的全部元素；【不管大於仍是小於都不包含本身自己】

【篩選選擇器】

這其中有3個巨頭選擇器，父子兄；

特色：全部的篩選選擇器都是一個函數的形式，因此他不會寫在選擇符號的內部

$(this).children(‘.class’).css(‘background’,’red’)

修改css

單屬性修改.css(‘background’,’red’)

多屬性修改.css（｛background:’red’ ,width:’30px’｝）

當是複合屬性修改時比方說background-color：’red’是不能夠的應該是：backgroundColor：’red’【駝峯式命名法】

ID選擇器 $(「#idName」)
//注意：做爲jQuery對象必定要使用jQuery相關的屬性和方法，不能去操做JS原生的屬性和方法 $(「#idName」).innerHTML是錯誤的，用.html();

JQuery對象和 js DOM對象相互轉換

console.log($p1);

經過打印可發現經過構造函數建立得到的jQuery對象都是一個數組，咱們得到數組的第一個元素（就得到了dom對象-js原生）；

var dom_p1 = $p1.get(0); //轉換爲普通的DOM對象

console.log(dom_p1.innerHTML);

js DOM對象轉換成jQuery對象

var $p2 = $(dom_p1); dom_p1本來是個DOM對象，我用$符號括起來就成了JQ對象

類選擇器var $p4 = $(".my_class");
屬性選擇器var $p5 = $("[name = span_name]");
屬性過濾，得到屬性前綴相關:得到class屬性值的前綴爲my_的全部元素

var $p6 = $("[class ^=開頭]");

得到class屬性值後綴爲_class的全部元素var $p7 = $("[class $=class結尾]");

組合選擇器得到全部input標籤中name屬性爲span_name的標籤

$p8 = $("input[name = span_name]");

多項選擇器： 能夠得到多個不一樣的元素例如$("div,p") 得到全部的div和p元素

層級選擇器：由於JS DOM的結構是有層級關係的，單純的經過基本的選擇器是沒法知足咱們的查找需求，這時候咱們就須要用到層級選擇器，層級選擇器其實就是說祖先與後代的關係

子選擇器： 層級選擇器包含子選擇器，只不過子選擇器是描述父與子的關係

過濾選擇器： 過濾選擇器通常不單獨使用，經過和其它選擇器配合使用，能更精確的查找某些元素

層級選擇器

// 得到全部的div和li

var $many_1 = $("div,li");

//得到全部div下的javascript語言所在的層級元素

var $js_1 = $("div li.lang_javascript");

// 子選擇器：

//得到全部ul下的javascript語言所在的層級元素

$js_5 = $("ul>li.lang_javascript");

console.log($js_5.length);

//得到全部類名叫作lang的ul下的javascript語言所在的li

$js_6 = $("ul.lang>li.lang_javascript");

console.log($js_6.length);

// 過濾選擇器：

//得到類名爲lang的ul元素下的第一個li元素

var filter_1 = $("ul.lang li:first");

console.log(filter_1.html());

//得到類名爲lang的ul元素下的最後一個li元素

var filter_2 = $("ul.lang li:last");

console.log(filter_2.html());

//得到類名爲lang的ul元素下的某一個li元素 從0開始

var filter_3 = $("ul.lang li:eq(1)");

console.log(filter_3.html());

// 得到類名爲lang的ul元素下的全部偶數li元素

var filter_4 = $("ul.lang li:even");

console.log(filter_4[0].innerHTML+"====="+filter_4[1].innerHTML);

// 得到類名爲lang的ul元素下的全部奇數li元素

var filter_5 = $("ul.lang li:odd");

console.log(filter_5[0].innerHTML+"====="+filter_5[1].innerHTML);

// 得到類名爲lang的ul元素下的全部下標小於2的li元素

var filter_6 = $("ul.lang li:lt(2)");

console.log(filter_6[0].innerHTML+"====="+filter_6[1].innerHTML);

// 得到類名爲lang的ul元素下的全部下標大於2的li元素

var filter_7 = $("ul.lang li:gt(2)");

console.log(filter_7.html());

// 得到全部隱藏的div

var filter_8 = $("div:hidden");

console.log(filter_8.html());

// 得到全部可見的div

var filter_9 = $("div:visible");

console.log(filter_9.html());

// 得到類名爲lang的元素下的除了類名爲lang_javascript的全部li元素

var filter_10 = $("ul.lang li:not(.lang_javascript)");

var filter_11 = $("ul.lang li:not([class = lang_javascript])");

console.log(filter_11.length);

//得到類名爲lang 的ul下的包含文本爲java的li元素

// 注意 此內容查找是模糊查找，只要包含某段內容的就會找出來

var filter_12 = $("ul.lang li:contains('java')"); //javascript和java都符合

console.log(filter_12.html());

console.log(filter_12.length);

//得到全部子元素爲空或文本爲空的元素

var filter_13 = $(":empty");

console.log(filter_13);

// 得到全部div爲空的或者全部p爲空的元素(多項選擇)

var filter_14 = $("div:empty,p:empty");

console.log(filter_14.length);

// 得到全部包含li元素的div元素

var filter_15 = $("div:has('li')");

console.log(filter_15.length);

// 得到全部ul下的第一個li元素

// 注意：:first :last :eq等是獲取惟一的一個元素，而不是多個

var filter_16 = $("ul li:first"); //一個

console.log(filter_16.length);

// first-child是爲每一個父元素匹配下面的第一個子元素同理last-child

var filter_17 = $("ul li:first-child"); //兩個

console.log(filter_17.length);

//得到全部ul下的某一個li元素 nth-child(2)是從1開始算的，eq是從0開始算的

var filter_18 = $("ul li:nth-child(2)");0

console.log(filter_18[0].innerHTML+"===="+filter_18[1].innerHTML);

// 獲取僅有一個li子元素的ul

var filter_19 = $("ul li:only-child");

console.log(filter_19.html());

表單選擇器

表單選擇器：專門用來獲取表單相關的選擇器

// 獲取全部input元素

var f1 = $(":input");

/獲取表單裏全部text

var f2 = $(":text");

var f3 = $(":password");

//獲取表單裏全部的radio事件

var f4 = $(":radio");

$("[type=button]").get(0).onclick = function(){

// console.log(this.value);

// 獲取全部被checked選中的元素

//注意：包括radio、checkbox以及select都適用

var f5= $(":checked");

console.log(f5.length);

// 獲取全部checkbox被checked的元素

var f6= $(":checkbox:checked") ;或者

var f7 = $("[type = checkbox]:checked");

console.log(f6.length);

console.log(f7.length);

//專門給select標籤使用

var f8 = $(":selected");

console.log(f8.length);

// 得到全部表單禁用的元素

var f9 = $(":disabled");

console.log(f9.val());

}

查找和過濾選擇器

查找和過濾：對結果集再進一步的查找或過濾

注意：和以前的:first/:last/:eq/同樣，獲取的是一個元素

first():查找結果集裏的第一個

last():查找結果集裏的最後一個

eq():查找結果集裏的某一個從0開始算

var f1 = $("ul.lang li").first();

next();獲取下一個元素（描述的是兄弟關係）

prev();獲取上一個元素（…………………………）

// 獲取ul下的第三個li的下一個元素

var f4 = $("ul li").eq(2).next();

獲取ul下的最後一個元素的上一個元素的上一個元素

var f6 = $("ul li").last().prev().prev();

描述的是祖先和晚輩，父與子的關係

parent(): 獲取父元素

parents():獲取祖先們 所獲得的第一個是相鄰的

children():獲取孩子們

// 獲取第一個li的父親

var f7 = $("ul li").first().parent();

// 獲取第一個li的祖先們

var f8 = $("ul li").first().parents();

獲取第一個li的祖先們中的div元素

var f9 = $("ul li").first().parents("div");

// 獲取ul下的全部孩子

var f10 = $("ul").children();

// 獲取class爲ruby的孩子

var f11 = $("ul").children("[class=lang_ruby]");

console.log(f11.length);

console.log(f11.html());

如下描述的都是同級關係

siblings();得到當前元素的全部鄰居元素 先獲取出全部的來再從頭開始計算

nextAll();獲取當前元素的後面全部元素 第一個元素是最靠近調用的那個元素

prevAll();獲取當前元素的前面全部元素 第一個元素是最靠近調用的那個元素

find():按照條件查找某些子元素找它下面的子元素

filter(): 經過結果集，按照條件過濾找結果集裏面的

not(): 經過結果集，利用not去排除

var f18 = $("ul").find("[class=lang_java]");

var f19 = $("ul li").filter("[class = lang_java]");

var f20 = $("ul li").not("[class = lang_php]");

is();判斷某個結果集裏面是否有某個元素，返回值是true或false

var f21 = $("ul li").is("li");

hasClass();判斷某個結果集裏面是否有某個類，返回值是true或false

var f22 = $("ul li").first().hasClass("lang_js");

操做屬性相關

//html和text的用法區別

console.log(li2.html()); //保持原始數據不變

console.log(li2.text()); //對立面特殊html標籤轉譯比方說&會變成&

// 設置值 正好和得到值反過來，html能轉譯了，而text寫什麼是什麼

$(".div_1").html("<span style ='color:red;'>這是經過htm（）設置的span元素</span>");

//結果是變紅後的：這是經過htm（）設置的span元素

$(".div_1 span").text("我盟出來麼"); 有span標籤的話，會把它當字符串

addClass（）；給元素添加類樣式

$("#p_1").addClass("class_p");

removeClass(): 給元素移除樣式

$("#p_1").removeClass("class_p");

toggleClass():從添加和移除樣式之間進行切換

$("#p_1").toggleClass("class_p");

css():給元素設置樣式或獲取樣式

$(".lang_js").css("color","red");

//獲取

console.log($(".lang_js").css("color"));

//多個樣式的設置

$(".lang_js").css({

"font-size" : "50px",

color : "green"

});

// 或者鏈式語法

$(".lang_js").css("font-size","12px").css("color","blue");

function fn6(ele){

//val()方法得到value值和設置value值,須要先轉換成jQuery對象

$(ele).val("改變本身");

console.log($(ele).val());

}

FIS3使用

1。cmd模式下在當前程序在的那個目錄下: fis3 server start

2. fis3 server open

3.fis3 release -cwL （後面是表示發佈同時監聽）

[-c, clean 清除編譯緩存]

[-w、watch 啓動文件監聽]

【會啓動文件監聽功能，當文件變化時會編譯發佈變化了的文件以及依賴它的文件。加了此參數，命令不會立刻退出，而是常駐且監聽文件變化，並按需再次執行。想中止命令須要使用快捷鍵 CTRL+c 來強制中止。】

[-L、live 啓動 livereload 功能]

fis3 release -d ./output 發佈到當前目錄下的output目錄下[發佈到指定的路徑下]

這樣修改html文件及其依賴文件，啓動open時獲得的網頁地址效果會自動改變

達到壓縮源代碼的效果（相似百度）

在根目錄，也就是index.html目錄下，新建一個js文件 fis-conf.js 此js文件其內部

內容爲：

//用來壓縮html文件的

fis.match('*.html', {

//invoke fis-optimizer-html-minifier

optimizer: fis.plugin('html-minifier')

});

// 用來壓縮js文件的

fis.match('*.js', {

useHash: false, // default is true

// 指定壓縮插件 fis-optimizer-uglify-js

optimizer: fis.plugin('uglify-js', {

// option of uglify-js

})

});

//用來壓縮css文件的

fis.match('*.css', {

useHash: false, //default is `true`

// compress css invoke fis-optimizer-clean-css

optimizer: fis.plugin('clean-css', {

// option of clean-css

})

});

此時從新啓動監聽，，ctrl+c退出

啓動時可能報這個錯誤。。須要繼續安裝插件

npm install -g 錯誤中，中括號裏面其中一個

Node.js使用

在這個服務器裏面有個js文件隨便叫什麼名字裏面的內容：

var express = require('express');

var app = express();

// 能夠配置路徑（蘇明）

var url = "/shop_list";

app.get(url, function (req, res) {

var obj = {

name : "滾蛋"

}

console.log(req.query.page); //獲得請求數據的參數

var obj2 = {

"page_count": 2411,

"errno": 0,

"errmsg": ""

}

// 判斷請求參數中是否有page這個參數

// res.json(obj2);

// 返回jsonp格式

res.jsonp(obj2);

});

app.listen(4200); //監聽的端口號

//這個時候我想獲得數據訪問的連接就是 http://10.0.0.1:4200/shop_list就能獲得數據

// 我想訪問這些json數據的項目裏面的js請求時寫

// $(function(){

// // 展現商鋪列表數據

// $.getJSON("http://127.0.0.1:4100/shop_list?callback=?page1",null,function(data){

// console.log(data);

// })

// });

關於jsonp比較好的文章：http://kb.cnblogs.com/page/139725/

git新浪雲使用

進入想要建立git的目錄，執行：

git init 【這個命令是設置當前目錄爲git的倉庫這個目錄此時就是本地一個暫存區】

git remote add sunshine 倉庫地址【建立一個git遠程倉庫，能夠經過git remote查看倉庫有哪些】

git add 文件或者文件夾【將文件選中放入暫存區】

git commit -m 「有意義的說明」【這裏已經提交到本地倉庫了，在.git中有一個暫存區一個本地倉庫】

git push sunshine master：1 【部署到雲服務器的版本1中】

想刪除就是 git push sunshine ：1

Git diff 查看工做區和暫存區區別

git diff HEAD~n 工做區和本地倉庫區別

http://www.cnblogs.com/zhongxinWang/p/4205339.html

紅色，有改動，未添加進倉庫，紅變綠，添加了未提交遠程倉庫

git 版本控制工具

master 線上分支------發佈代碼

dev 開發分支

qa 測試分支

git代碼存在的環境: 線上本地版本庫內存

git pull origin dev //拉取代碼到本地倉庫(先把別人作的弄下來)

把本身作的東西加到弄下來的代碼裏面去

git status 查看

git add www/index.html

git commit -am "開發默認頁面"

git push origin dev//推送代碼到線上

git checkout qa //切換分支

git merge dev //到qa以後把dev代碼合併到qa分支上

WEB安全

學名：XSS 跨站腳本攻擊代碼注入

解決方案：

1.轉譯。比方說檢測到< 括號替換成<,>替換成>，或者直接用模板引擎，比分baidu.template，就會自動過濾掉。

2.進行過濾

CSRF 跨站僞造請求

這方面須要後臺提供一個token(隨機碼), 一個惟一標識，會隨時變的，前端會獲得這個token提交的時候會拿這個實時的碼與後臺的token作對比，相同才能發送請求，不然屏蔽掉

性能優化之圖片懶加載

1給圖片設置寬高，讓圖片佔位

2不直接顯示圖片，先把圖片連接存起來，比方說放到img標籤的data-src=」」裏面

3，判斷當前屏幕的位置，將當前屏幕內的圖片展現出來，也就是將存起來的圖片（data-src），放到src內

代碼開始

Var imgs = document.querySelectorAll(‘img’); 全部的圖片

當前屏幕的高度 var h = window.innerHeight;

Document.onscroll = thatop; 滾動條事件，觸發函數加載當前屏幕的圖片

Function thatop(){

獲取滾動條的位置（當前屏幕的位置）後面方法是獲取IE瀏覽器當前屏幕的位置

Var t=document.documentElement.scrollTop ||document.body.scrollTop；

當前屏幕的高度+滾動條的位置(最頂部)= 當前屏幕的位置（可視區域）t+h;

Var num = t+h;

For(var i=0; i<imgs.length;i++){

If(imgs[i].offsetTop <=num){

Imgs[i].src = imgs[i].getAttribute(‘data-src’);

}

當檢測到圖片距離最頂端的距離,小於當前屏幕的高度與滾動條捲上去的高度加和,就說明它被滑動上來了.那麼把提早請求下來的路徑地址給src屬性(屬性的獲取),即可以展現

經過以上分析須要知足如下幾點:

1.給圖片設置寬高，讓圖片佔位

2.不直接顯示圖片，先把後臺請求到的圖片連接存起來，比方說放到 img標籤的data-src=」」裏面

3，判斷當前屏幕的位置，將當前屏幕內的圖片展現出來，也就是將存起來的圖片（data-src），放到src內

Ⅱ.僞代碼:

下圖爲臨時qq截圖畫的一張表,有點兒醜哈

簡單說明下:

包裹綠色圖片的外層紅框爲手機屏幕,紅框裏面的就是當前看到的,紅框上面的就是滾動條往下滑動遮擋的,紅框下面的就是用戶還沒來得及看的.

綠色框爲圖片列表(比方說天貓商城上的商品)

右側紫色的爲滾動條

那麼以基礎知識來轉化成僞代碼,語言敘述中加粗的是知識點:

1.當前屏幕(高度): window.innerHeight;

2.滾動條捲上去的部分:document.documentElement.scrollTop(要考慮兼容性)

3.圖片距離最頂端的距離:offsetTop

4.實時監聽:scroll事件

5.屬性獲取:getAttribute

Ⅲ.代碼產出物:

//全部的圖片

Var imgs = document.querySelectorAll(‘img’);

//當前屏幕的高度

var currentViewHeight = window.innerHeight;

//滾動條事件，觸發函數加載當前屏幕的圖片

Document.onscroll = thatop;

Function thatop(){

//獲取滾動條捲上去高度,後面方法是獲取IE瀏覽器當前屏幕的位置

Var hiddenHeight=document.documentElement.scrollTop ||document.body.scrollTop；

當前屏幕最低端到隱藏區域最頂部的距離= 當前屏幕的高度（可視區域）+隱藏的

Var totalHeight = currentViewHeight +hiddenHeight;

For(var i=0; i<imgs.length;i++){

If(imgs[i].offsetTop <=totalHeight ){

Imgs[i].src = imgs[i].getAttribute(‘data-src’);

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

前端總結的學習筆記

DIV+CSS佈局部分

小技巧

使用服務器字體及陰影

[給標題加省略號]

CSS新增背景屬性

CSSsprites雪碧圖技術（css精靈）

移動端佈局形式：

彈性盒佈局（梳理）

彈性盒佈局(懂懂)

手機端頁面

手機端事件

在文本前插入東西

插入計數器

清除浮動最有力的方法：

響應式佈局

HTML5

音頻/視頻

本地存儲

離線緩存

CSS3

CSS3——變形

動畫效果

瀏覽器標準規範

瀏覽器的兼容性

常見問題及解決

圖片問題

LESS學習

SEO(搜索引擎優化)

javaScript學習

ECMAscript（基礎語法）

運算符

流程控制

數學方法

循環

While

Do -- while循環

For循環

函數

變量與做用域

數組(經常使用的官方的引用類型)

字面量法建立數組

構造函數法

數組的遍歷

數組中經常使用的方法

數組的排序

冒泡排序法

選擇排序

字符串

字符串經常使用的方法

字符串調用正則表達式的方法:

BOM

window的對象屬性

經常使用的方法

經常使用的事件

定時器

DOM

節點

獲取元素節點方法：

獲取官方定義的屬性節點

獲取文本屬性的方法

Css腳本化(樣式操做)

建立元素節點

對象偏移量

事件

鼠標事件

鍵盤事件

事件流

時間Date

正則表達式

Javascript面向對象

【字面量對象】

模擬類建立對象

類方法建立對象

構造函數方式建立對象(就是個模板 最經常使用的)

屬性訪問器(感受用不到呀)

原型模式

Map認識

各類遍歷的整理

This的使用總結

構造函數方式建立對象(就是個模板最經常使用的)