js - 學習準備1

 

 

location.search會帶着url後邊的那個問號，好比http://www.yintai.com?url=10&conm=edd，那麼location.search爲?url=10&conm=edd

 

交換兩個數的位置：

var a=5;
var b=12;

a=a+b;
b=a-b;
a=a-b;

alert('a:'+a);
alert('b:'+b);

 

ajax注意：

一、從服務器取過來都是字符串

eva('('+str+')');

new Function("return " + str);

二、不關心後綴，全部文件編碼一致

在js中，若是你使用一個不存在變量，報錯，若是你使用一個不存在的屬性，是undefined

 

 

var a = 12;

function show(a) {

　　a = 5;

}

show(a);

alert(a);

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

結果： 12

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

var a = [1,2,3];

function show(a) {a = [2,3,4]}

show(a);

alert(a);

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

結果：[1,2,3];

分析：show(a); 至關於show( var a = a);第一個a是show方法裏面的參數，第二個a是傳過來的數組的引用，因此第一個a只是

獲得了[1,2,3]的引用，在show裏邊，第一個a又被賦值了[2,3,4]的引用，就是第一個a的指向變了，可是全局變量a的指向仍是[1,2,3];

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

var a = [1,2,3];

function show(a) {a[0]="abc";}

show(a);

alert(a);

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

結果：['abc', 2, 3]

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

 

爲何玩正則？

方便、性能極高

 

 

 

 

 

　　 

 

function show(){
alert("show");
}
//高級瀏覽器
//obj.addEventListener(事件名，函數)

document.addEventListener("click",show,false);

document.onclick = show;

點擊document會彈出兩個show。

 

克隆節點：

obj.cloneNode(true/false);

true: 深度克隆 會把當前元素內的全部節點都複製
false: 淺克隆 只會複製當前元素

刪除屬性：obj.removeAttribute(屬性名);

 

 

"事件"捕獲：setCapture 把全部元素的事件都集中在一個元素上

特色： 1 ie獨有
2 只能給元素添加捕獲
3 只能給鼠標事件添加捕獲 不能給鍵盤事件

ie:
oDiv.setCapture();
oDiv.releaseCapture();

 

oText.onkeydown = function(ev) {

　　var oEvent = ev || event;

      if(oEvent.keyCode==13 && oEvent.ctrlKey && oEvent.shiftKey && oEvent.altKey) {

                 //同時按下回車，ctrl鍵，shift鍵及alt鍵就會進入if

                 alert("同時按下了回車，ctrl鍵，shift鍵， alt鍵");

     }

}

 

----------------------------------
詭異事情：
1.
Function instanceof Object
Object instanceof Function
Function instanceof Function
Object instanceof Object
2.
alert(arr instanceof Array);
alert(Array instanceof Function);
alert(arr instanceof Function);
3.
Object.prototype.a=5;

var a=12;
alert(a instanceof Object);

包裝類：
數字、字符串、布爾

數字-> new Number
字符串-> new String
布爾-> new Boolean
new Number(12)

檢測對象具體類型：
instanceof: 檢測本身父級，父級的父級...
constructor: 它的構造函數是誰，直接父級

請檢測一個對象是不是json？
function isJson(arg){
return arg.constructor==Object;
}

typeof：檢測類型

原型鏈：對象用到了一個方法，先找自身，再是本身的父級，再是父級的父級

*默認狀況，全部的東西都屬於Object

var oDate = new Date();
alert(typeof oDate);  //object
alert(typeof Date);  //function

嚴格模式：如何開啓嚴格模式？

'use strict';

嚴格模式好處：
1. 修復了局部函數裏面this
2. 定義變量必須加var
3. 不容許你在if、for等裏面是定義函數
4. 幹掉了with

嚴格模式做用範圍：
1. 最大也衝不出script標籤
2. 單個函數
3. 做用於整個js文件

*** 每一個js文件開頭必定要加 嚴格模式 'use strict';

嚴格模式兼容麼？不兼容

 

this:當前發生事件的對象(元素)
當前的方法屬於誰

 

好習慣：
1. 不用的東西刪除 拖拽 jsonp
2. 儘可能不使用全局變量
3. 能使用系統提供函數，堅定不本身寫
4. 儘可能使用正則操做字符串

 

做用域：
1. 全局變量：在哪裏都能使用，生存週期長，直到瀏覽器關閉，佔資源
2. 局部變量：只能在函數內部使用,生存週期極短，幾乎不耗資源
3. 閉包：子函數可使用父函數局部變量，若是子函數得不到釋放，整條做用域鏈上面局部變量都會保留。

----------------------------------
function show(){
var a=12;
alert(a);
}
//函數調用以前 a 沒有
show(); //中 a 有
//函數完畢 a 沒有

----------------------------------
var a=12;
function show(){
alert(a);
}
//函數調用以前 a 有
show(); // 有
// 有
----------------------------------
function show(){
var a=12;
document.onclick=function(){
alert(a);
}
}
document.onclick=null;
// 以前 沒有 a
show(); // 有a
// 完 有a
----------------------------------
function show(){
var a=12;
var b=5;
document.onclick=function(){
alert(b);
}
}

show();
----------------------------------
function aaa(){
var a=12;
function bbb(){
var b=5;
function ccc(){
var c=6;
document.onclick=function(){
var num=10;
alert(d);
}
}
ccc();
}
bbb();
}
aaa();

做用域鏈：子函數若是用一個變量，首先先找本身，本身的父級，父級的父級.....直到到全局，報錯

 

(function(win){

})(window)
--------------------------------------
性能優化：
js -> 幻燈片
js -> html5 -> 遊戲

項目：
1. 穩定性
2. 維護性
3. 性能
--------------------------------------
性能：
1. 網絡性能
2. 執行性能(代碼)

網絡性能：
工具：
f12 -> network
name 資源名稱
path 資源路徑
method 請求方法
status 狀態碼
type 資源類型
主類型/次類型
text/html
text/css
image/jpeg
zns/json
initiator 發起人 (此資源是由誰引起)
size 資源大小
time 資源加載所需時間
timeline 時間線
total 總共耗時
stalled 卡 瀏覽器此時響應速度
DNS lookup 域名解析 DNS服務器問題
initial connection 瀏覽器鏈接數
request send 客戶端網絡帶寬，發送數據過大
waiting 服務器配置，後臺代碼
Content Download 接收內容，服務器帶寬

DNS: Domain Name System 域名解析
http://www.baidu.com/ -> IP地址

web服務器：
iis、apache、tomcat、nginx等
BWS/1.1 Tengine(concat) JDWS

link ref="index.css,news.css,list.css"

firefox -> firebug ->yslow
yslow: 給網站打分
人家優化建議，學習方向
chrome->audits

方法：
1. http請求越少越好
合併
css，js，圖片等

index.css
news.css main.css
list.css

圖片 -> css sprites

合併方法：
a). 手動
b). 工具
2. http請求越小越好
壓縮 分號
css、js、圖片

壓縮方法：
a). 手動
b). 工具 yui compressor

http://tool.oschina.net/
3. 圖片延遲加載
4. CDN -> 財務
CDN： Content Delivery NetWork 內容分發網絡
5. 阻塞加載(同步加載):
非阻塞加載(並行加載、異步加載):

頁面：
css,js,html，圖片

css,html,圖片 並行加載
js 阻塞加載

爲何js須要阻塞加載？
穩定

由於js阻塞加載，因此通常作法，把js放到body最後

<a href="javascript:;">鏈接</a>
<img src="1.1.png">

yslow: put css at top, put javascript at bottom

我的建議：
1. 外部的js文件，下載下來，而後放到body後面
2. 本身寫的js文件，必定要放到head之間

 

split()中若是寫的是字符串，它就認爲你以字符串的形式分隔，若是寫的是正則，那麼就是以正則的形式分隔
split("\\s")  它其實找的是\s這個字符串，而不是空白

 

hack:

注意：先寫標準的樣式，再寫hack（這樣才能樣式覆蓋）

_或- IE6hack寫法

+或* IE6/7

*+在一塊兒表示僅IE7有效，好比*+html/body div{background:blue;}

若是寫成*+div{background:blue}就沒有效果

\0  IE8+    background:blue\0;

\9  IE系列瀏覽器

:root    高級瀏覽器（chrome、FF、IE9+）    如:root div{background:red;}

火狐瀏覽器：@-moz-document url-prefix() { div {width:200px; height:200px; background:red;} }

chome谷歌瀏覽器：

@media screen and (-webkit-min-device-pixel-ratio:0) {div{width:200px; height:200px; background:blue;}}

 

條件註釋：

IE10+不兼容條件註釋

<!--[if IE 6]> .. <![endif]--> IE6
<!--[if IE 7]> .. <![endif]--> IE7
<!--[if IE]> .. <![endif]--> IE系列（不包括IE10）
<!--[if lt IE 7]> .. <![endif]--> 小於
<!--[if gt IE 7]> .. <![endif]--> 大於
<!--[if gte IE 7]> .. <![endif]--> 大於等於
<!--[if !IE]>--> 非IE瀏覽器（包括IE10）<!--<![endif]-->

 

IE6不支持png半透明

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png-img');
</script>
<![endif]-->

 

表達式（僅適用於IE系列瀏覽器）
-------------------------------------------
background:expression( 語句 );

div { height:200px; background:expression(document.documentElement.clientWidth<400?'red':'green');}

<!--[if IE 6]>
<style>
a { hide-focus:expression(this.hideFocus=true); }
</style>
<![endif]-->

 

重置樣式
-------------------------------------------
h1-6/p/ul/ol/dl margin-top margin-bottom
body margin-top margin-left maring-right margin-bottom

ol/ul padding-left

dd margin-left

table border-collapse:collapse;
td/th padding

input margin-top margin-left

form margin-top margin-bottom IE6

select margin

 

 

 

 

eval 能執行任何js代碼

通常不用 太強大 不可控
注入攻擊

 

while for 區別

for --- 個數肯定循環

while 個數不定
沒區別 能用for的地方 都能用while
能用while地方 都能用for

 

return
返回值 的數據類型 是任意的，你給什麼類型的就返回什麼類型！
參數 、變量 、返回值 都是同樣
1 程序碰到return 程序終止
2 return 後面有明確的值 返回相應的數據
3 return ; 返回一個undefined
4 沒有return 也是返回一個undefined 系統自帶
函數每執行一次 就會複製一次！！！！

 

連等：var a = b = c = d = 1; console.log(a,b,c,d);

 

 

 

 

 

類型   前綴   類型    實例
對象    o     object    oDiv
數組    a    Array    aItems
字符串    s    String    sUserName
整數    i    Integer    iItemCount
布爾值    b    Boolean    bIsComplete
浮點數    f    Float    fPrice
函數    fn    Function    fnHandler
正則表達式    re    RegExp    reEmailCheck
變體變量    v    Variant    vAnything

模 % 整數求【餘數】
10%3 1              0模上任何數都是0

基本類型：數字，字符串，布爾值，undefined

符合類型(object) : 能夠再分的

除了基本數據類型，其餘的都是複合數據類型

if中爲false的狀況：
false,0,"",null, undefined, NaN

var a = "";//false
a = " ";//true

if(a){
alert(true);
} else {
alert(false);
}

選項卡

typeof

number, string, boolean, object, undefined, function

typeof null是object

typeof undefined 是undefined

undefined：2種狀況：
一、真的沒有定義
二、定義了沒有賦值
三、訪問沒有的屬性

null：表示空對象，可是空對象也是對象。因此typeof null --》 object
null：給了可是是空的
undefined：沒有給東西

null和undefined的區別


parseInt()
原理：從左到右掃描整個字符串，碰到不是數字的就返回。若是第一個就不是數字的話，返回結果是NaN

Number（參數）
參數不能有非數字的東西，若是有的話--》NaN
NaN加減乘除（包括取膜等）任何值都是NaN

NaN永遠不等於NaN        isNaN()

隱式類型轉換：

var a = "12";
var b = 12;

alert(a == b);//true 勤快 先轉換數據類型 再比較
alert(a === b);//false 太懶 直接比較

alert("11" - "5"); alert("string"-5); alert(typeof "11" - "5");

typeof "11" - "5"就至關於(typeof "11") - "5"

閉包：子函數能使用父函數的變量 （東西）

獲取非行間樣式
高級瀏覽器
getComputedStyle("操做的元素", false).樣式的屬性名
低級瀏覽器 ie8-
操做的元素.cuurentStyle.樣式的屬性名
不能操做複合樣式
js裏面操做樣式都得駝峯標識

注意：這兩個都是隻能讀取，不能設置，不能獲取複合樣式(好比background就獲取不到)

即若是你要直接獲取style的所有值是獲取不到的，只能一個一個樣式的獲取，除非你用cssText(這個獲取的也是行內樣式，就是標籤內的樣式)

還有一點就是，在高級瀏覽器中，若是要獲取border-width屬性，那麼必須border-style，border-color都有值，不然獲取到的會是0px(在只設置了border-width這個屬性的狀況下)

obj.currentStyle.borderWidth      getComputedStyle(obj, false).borderWidth

運算符：
一、算術運算符
二、比較運算符
三、賦值運算符
四、邏輯運算符
運算符的優先級：最好加括號（）！！！
經常使用優先級：
賦值《邏輯《比較《算術

true 1  false  0  null 0

alert(null + 1) //null 0

alert(undefined + 3); //NaN

 

Math.random()[0, 1)
n到m的隨機數[n, m)
Math.random()*(m-n) + n
獲取n到m的隨機數

10、

this.style.width = "400px";
this.style.borderWidth = "20px";
this.style.cssText = "width:400px; height:400px; border-wdith:20px;"

批量設置樣式(cssText)：一、會覆蓋行間樣式   二、能設置又能讀取

還有一個設置樣式的方法是width， 不推薦使用

function show(){//return undefined; 沒有return的狀況下，系統會默認加上} alert(show());

var time = oDate.getTime();//1970.1.1 0點開始 到如今的一個毫秒數

s = 130

m parseInt(s/60) 分鐘

s s%60 秒

var str = "aaaaa"; 字符串是由字符組成
str.charAt(index) 字符（char）在 第index 位置

11、

getElementsByClassName("className")  //兼容性IE8-

js語法不容許花括號後面直接跟圓括號

封閉空間 ： 自執行函數

functoin show(){}

show(參數列表)

(show)(參數列表)

(functoin show(參數列表){})(參數列表)

(function(參數列表){

})(參數列表);

優勢：

1 防止重名
2 解決i的問題

12、

getByClass兼容性寫法 2014-08-24  getByClass3.html

字符串： length

charAt(index) "abc" charAt(1) b
indexOf(str)
lastIndexOf(str)
substring(beginIndex[,endIndex])
substr(beginIndex, length)

split("切分規則")
toUpperCase();
toLowerCase();

json的for in方法

數組：

sort，reserve，length，join，concat，shift，unshift，push，pop，splice

pop沒有數據，彈出undefined，從最後一位彈出；

//字符串比較，中文沒有可比性 亂比

var a = "中國";
var b = "日本";
alert(a < b);

var a = "a"; var b = "b"; alert(a<b);

數組的方法：

concat() 鏈接兩個或更多的數組，並返回結果。
join() 把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
pop() 刪除並返回數組的最後一個元素
push() 向數組的末尾添加一個或更多元素，並返回新的長度。
reverse() 顛倒數組中元素的順序。
shift() 刪除並返回數組的第一個元素
slice() 從某個已有的數組返回選定的元素,請注意，該方法並不會修改數組，而是返回一個子數組。若是想刪除數組中的一段元素，應該使用方法 Array.splice()
sort() 對數組的元素進行排序
splice(index,howmany,item1,.....,itemX) 刪除元素，並向數組添加新元素。
index 必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。
howmany 必需。要刪除的項目數量。若是設置爲 0，則不會刪除項目。
item1, ..., itemX 可選。向數組添加的新項目。
返回值類型：Array 包含被刪除項目的新數組，若是有的話。
toSource() 返回該對象的源代碼。
toString() 把數組轉換爲字符串，並返回結果。
toLocaleString() 把數組轉換爲本地數組，並返回結果。
unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。var arr = ["4", "5", "6"];arr.unshift("1", "2");alert(arr);
valueOf() 返回數組對象的原始值

var a = 2; var b = 5; alert(Math.max(a,b)); alert(Math.min(a,b));

 

十3、

var oH4 = document.createElement("h4");

oH4.innerHTML = '<a href="javascript:;">hello</a>';

oDiv.appendChild(oH4);

appendChild只能添加Node節點

 

十4、

getAttribute不能徹底代替obj.屬性名，好比一個checkbox(後邊用oCk代替)，oCk的checked屬性的值爲false和true，而若是你用getAttribute獲取checked的值的話，若是標籤中沒有checked這個屬性，那麼返回的是null。即便你選中了checkbox，可是沒有給該標籤上的checked賦值，那麼用getAttribute獲取的值仍是null。

獲取這個月有多少天

var oDate = new Date();
oDate.setDate(1);
oDate.setMonth(oDate.getMonth() + 1);
oDate.setDate(0);

 

十5、

預解析：把變量的定義（僅僅是定義）提高到做用域的最頂上

預解析的做用範圍：一、函數  二、<script>標籤

var aLi = oUl.children;

aLi.legnth; aLi[0];

父節點：oUl.parentNode，oUl.parentNode.style.display="none";

首個子節點：

//IE8-  oUl.firstChild.tagName

//高級瀏覽器   oUl.firstElementChild.tagName

 

十6、

var oSelect = document.getElementById("city");

var aOption = oSelect.getElementsByTagName("option");

oSelect.onchange = function() {

　　alert(this.value);

      alert(this.selectedIndex);

      alert(aOption[this.selectedIndex].innerHTML);

      //給select中動態添加一個option

      var oNewOption = new Option("顯示到頁面上的值", "提交的時候的值");

　　aOption.add(oNewOption);  //還能夠寫成oSeelct.add(oNewOption);

}

select:

索引：oSelect.selectedIndex

　　options: oSelect.options   數組

　　添加option：

　　　　一、先建立：var newOpt = new Option("顯示的文本", "給後臺用的文本");

　　　　二、插入：oSelect.options.add(newOpt);

　　　　　　　　oSelect.add(newOpt);

　　　　　　刪除：oSelect.options.remove(index);

　　　　　　　　oSelect.remove(index);

十7、

JS的remove(index)方法，主要用用於從下拉列表刪除選項。

該方法從選項數組的指定位置移除<option>元素。若是指定的下標比0小，或者大於或等於選項的數目，remove()方法會忽略它，而且什麼也不作

aOption.remove(0);    aOption.remove(1);   oSelect.remove(0);   oSelect.remove(1);  aOption和oSelect均可以使用remove方法

 

十8、

var str = "123abc";

alert(typeof str++);

alert(str);

var abc = "123";

alert(typeof abc);

alert(typeof abc++);

alert(typeof abc);

 

十9、

str.charCodeAt(index);   字符串轉碼

var str = "abc你好";

document.write(str.charCodeAt(1) + " | " + str.charCodeAt(3));

String.fromCharCode(code)   編碼轉字符串

var str = "張三";

document.write(str.charCodeAt(0) + " | " + str.charCodeAt(1));//24352 19977

document.write(String.fromCharCode("24352") + " | " + String.fromCharCode("19977"));

寫出0到255編碼的全部值

var arr = [];
for(var i = 1; i <= 255; i++){
    arr.push(i + "=" +String.fromCharCode(i))
}
document.write(arr.join(" <br />"));

0x  十六進制

\u  unicode碼

中文的範圍4e00  -  9fa5

全部漢字的unicode編碼

var arr = [];
for(var i = 0x4E00; i < 0x9FA5; i++ ){
    arr.push(String.fromCharCode(i));
}
document.write(arr.join(" "));

 

二10、

文字的寫法
alert("一");
alert("\u4E00");
alert("一"=="\u4E00"); //true

數據的加密和解密：2014-08-31

文字加密.html + 文字加密2.html

計算文本大小.html（注意：若是字符編碼以ANSI的形式，那麼一箇中文是2個字節，若是是無BOM的UTF-8的形式編碼，那麼一箇中文是3個字節，若是是有BOM的UTF-8的形式編碼，那麼是4個字節，若是是gb2312的話，是2個字節）

 

二11、

逗號表達式

//逗號表達式：以最後一個爲準  逗號表達式的優先級最低

if(1,1,doucment,0,"") { //逗號表達式以最後一個爲準

　　alert(true);

} else {

　　alert(false);

}

alert(1,0);

function show(a) {

　　alert(a);

}

show(1,0);

var a = (12,5);
alert(a);

 

二12、

預解析

狀況一：

<script type="text/javascript">alert(a); //報錯</script>

<script type="text/javascript">var a = 12;</script>

狀況二：

<script type="text/javascript">var a = 12;</script>

<script type="text/javascript">alert(a); //沒問題</script>

 

var a = 2; var b = 5; alert(Math.max(a,b)); alert(Math.min(a,b));
var a = 2; alert(Math.pow(a,3));//N方
var a = -12.51; alert(Math.abs(a));//絕對值
var a = -12.51; alert(Math.ceil(a));//向上取整 返回整數 (經過數軸想一想上下)
var a = -12.51; alert(Math.floor(a));//向下取整 返回整數 (經過數軸想一想上下)
var a = 4; alert(Math.sqrt(a));//開方
var a = -12.51; alert(Math.round(a));//四捨五入 返回整數

var str="123abc";
alert(typeof str++);//Number
alert(str); //NaN
alert(null == undefined);

return只能寫在function中，不能寫在其餘地方，好比for循環中就不能寫return;

屬性的訪問方式： 1點 （.） 2 [] 能用點的地方 都能用中括號

innerHTML ： 能設置 也能修改 寫標籤

var a = 12; alert(window.a);

預解析: 把變量的定義（僅僅是定義）提高到做用域的最頂上
var a = 12; 1變量的定義 2變量賦值
做用範圍： 1 函數
2 script標籤
var a;//定義
alert(a);//undefined
a = 12;//賦值
//若是變量是一個函數 按變量走
show();
var show = function (){
var a = 5;
alert(a);
}();
<script>var a = 12;</script><script>alert(a);</script>
<script>alert(a);//報錯</script><script>var a = 12;</script>

字符編碼
var str = "張三"; document.write(str.charCodeAt(0));//24352 19977
document.write(String.fromCharCode(97));//24352 19977
中文的範圍
var arr = [];
for(var i = 0x4E00; i < 0x9FA5; i++ ){
arr.push(String.fromCharCode(i));
}
document.write(arr.join(" "));
alert("一"); alert("\u4E00"); alert("一"=="\u4E00");
20140727JS學習\2014-08-31\計算文本的大小；文字加密；文字解密

逗號表達式：
if(1,1,document,0,""){//逗號表達式以最後一個爲準
alert(true);
} else{
alert(false);
}
<script>alert(1,0);function show(a){ alert(a); }show(1,0);</script>
<script>var a = (12,5);alert(a);</script>

js排序

js組成：
1.ECMAScript 翻譯 --- 解釋器
2.DOM document object model 文檔對象模型 document 操做頁面元素
3.BOM browser object mode 瀏覽器對象模型 window 操做瀏覽器
兼容性：
ECMAScript ---- 幾乎沒有兼容性問題
DOM --- 60-70%
BOM --- 基本不兼容

標籤 = 元素 = 節點
節點：文本節點 --文字　　元素節點-標籤
父節點： obj.parentNode
孩子節點： obj.children 數組 只包含第一層

首尾節點： 沒用
firstElementChild || firstChild
lastElementChild || lastChild
children[0] children[len-1]

兄弟節點：
previousElementSibling || previousSibling
nextElementSibing || nextSibing

oUl.insertBefore(oLi,null);
父級.insertBefore(須要移動節點，往誰前面);
oUl.insertBefore(oLi,null) 和oUl.appendChild(oLi); 等價
插入到元素的最後一個位置 必須是null
刪除元素： 父級.removeChild(節點);

body ----> document.body
html ----> document.documentElement
document 是全部節點的父級 結構上的父級

BOM: window
window.alert(); window.navgator.userAgent window.console.log();
var oNewWin = window.open(url,打開的方式[,屬性]);
返回一個新打開頁面的一個引用；
chrome 攔截 用戶體驗
ff 攔截
ie 打開
*** 用戶本身打開 瀏覽器不會阻止
url : 打開的一個地址
打開方式：
a target: _self 當頁打開 _blank 新開頁

window.close();
ff 沒反應 安全 1 若是要關閉 須要修改ff的配置文件
2 用戶本身打開的頁面才能關閉
chrome 馬上關閉
IE 有提示

obj.offsetWidth 盒模型的寬度
obj.offsetHeight 高度
盒模型： width + padding + border
顯示的元素纔有盒模型的概念
1 沒有寬高 也有值
2 display：none 元素 沒有offsetWidth/Height

scroll事件
chrome:
document.body.scrollTop/scrollLeft 滾動的高度 / 左側滾動的距離
ff ie:
document.documentElement.scrollTop/scrollLeft

當前可視區的高度 寬度
document.documentElement.clientHeight/clientWidth

location 能獲取也能設置
protocol http/https/ftp/file
protocol 協議 "http:"
host 域名 "www.a.com"
pathname 路徑 "/app/a.html"
search 數據 "?a=12"
hash 錨 "#1"

獲取屬性的方式：
3 種： 1 點
2 []
3 getAttribute
獲取：getAttribute(屬性名)
設置： setAttribute("屬性名"，值)
特性： setAttribute 的屬性 只能經過 getAttribute獲取
getAttribute值能獲取 setAttribute的屬性 不能訪問 .形式添加的屬性
IE8- getAttribute能獲取.形式添加的屬性
經過setAttribute設置的屬性，IE8-下也能經過.的形式獲取該屬性的值
用途： get/setAttribute 用來設置和獲取自定義屬性

offsetLeft/offsetTop
offsetLeft: 元素到定位父級的一個距離
offsetParent:定位父級
parentNode: 結構的父級
document 結構的父級 body ==> html ==> document
body 定位的父級 body offsetParent ==> null

20140727JS學習\2014-09-21\選中文本;

oBtn.onclick這樣的事件會相互覆蓋，addEventListener不會相互覆蓋

 

已複習到2014-10-19