input標(biāo)簽屬性介紹

name屬性：表示元素的名稱，也就是name的值代表當(dāng)前input元素的名字；

id屬性：用于css引用或者其他引用

value屬性：表示當(dāng)前input框內(nèi)顯示的文字

style屬性：用于設(shè)置css樣式。如顏色，背景色等

type屬性:用于設(shè)置輸入框的類型，最重要的屬性

input標(biāo)簽的type屬性詳述

其type屬性有多種類型：

? ? ? ? ? ? ? ? ? ? ? ? 文本框（type=text)，

? ? ? ? ? ? ? ? ? ? ? ? 按鈕（type=button)，

? ? ? ? ? ? ? ? ? ? ? ? 單選（type=radio)

? ? ? ? ? ? ? ? ? ? ? ? 復(fù)選（type=checkbox)

? ? ? ? ? ? ? ? ? ? ? 下拉列表（type=select)

? ? ? ? ? ? ? ? ? ? ? 文本域（type=textarea)

用Input標(biāo)簽，利用其type屬性，從而可以設(shè)置一系列表單元素，input表簽放在form表單中。

placeholder屬性

Placeholder 是 HTML5 新增的一個(gè)表單標(biāo)簽屬性，當(dāng) input 或者 textarea 設(shè)置了該屬性后，該屬性的值將作為灰字提示顯示在文本框中，當(dāng)文本框獲得焦點(diǎn)（或輸入內(nèi)容）時(shí)，提示文字自動(dòng)消失。

修改 Placeholder 文本顏色

默認(rèn)情況下，Placeholder 的文字是灰色，輸入的文字是黑色。而我們拿到的設(shè)計(jì)稿上的色值往往并不與默認(rèn)情況下完全一致。那么，如何修改 Placeholder 的色值呢？ 如果直接寫input{color:red;}，IE10 和 Firefox下，Placeholder 文字和輸入文字都變成了紅色，在 Chrome 和 Safari 下，Placeholder 文字顏色不變，只有輸入的文字變成紅色。 顯然，這種做法是行不通的。因?yàn)槲覀冎幌敫淖?Placeholder 文字的顏色，并不想改變輸入文字的顏色。正確的寫法如下：

::-moz-placeholder{color:red;}? ? ? ? ? ?

//Firefox::-webkit-input-placeholder{color:red;}? ?

//Chrome,Safari:-ms-input-placeholder{color:red;}? ? ? ?

//IE10

使 Placeholder 兼容所有瀏覽器

前面我們知道了，IE6 到 IE9 并不支持原生的 Placeholder，并且即使在支持原生 Placeholder 的瀏覽器上，其表現(xiàn)也并不一致。在實(shí)際項(xiàng)目中，如何使所有瀏覽器都一致地支持 Placeholder呢？

1、如果只需要讓不支持 Placeholder 的瀏覽器能夠支持改功能，并不要求支持原生 Placeholder 的瀏覽器表現(xiàn)一致，那么可以采用如下方法：

function placeholder(nodes,pcolor) {

if(nodes.length && !("placeholder" in document_createElement("input"))){? ?

for(i=0; i<nodes.length; i++){? ?

var self = nodes[i], placeholder = self.getAttribute('placeholder') || '';? ? ? ? ?

self.onfocus = function(){?

if(self.value == placeholder){?

self.value = '';

self.style.color = "";?

}?

}?

self.onblur = function(){?

if(self.value == ''){?

self.value = placeholder;?

self.style.color = pcolor;? ? ?

}? ?

}? ? ?

self.value = placeholder;

self.style.color = pcolor;?

}

}

}

2、如果需要自定義樣式，并且希望 Placeholder 在所有瀏覽器下表現(xiàn)一致，可以通過利用 label 標(biāo)簽?zāi)M一個(gè) Placeholder 的樣式放到輸入框上，當(dāng)輸入框獲得焦點(diǎn)的時(shí)候隱藏 label，當(dāng)輸入框失去焦點(diǎn)的時(shí)候顯示 label。

<script>

$(function(){

$('.for_text').click(function(){?

$('.text').focus()? })?

$('.text').blur(function(){? ?

$('.for_text').hide();?

})})

</script>

<style>

.for_text{

position:absolute;

cursor:text;

margin:5px;

color:#999;

}

.text{

padding:5px;

}

</style>

<form>

<label for="text" class="for_text">請(qǐng)輸入文本</label>

<input type="text" name="text" class="text"/>

</form>

3、最后一種方法，也是使用最常見的，但是不能改變文本的顏色，使用腳本的方式判斷文本框的值，獲取焦點(diǎn)或者輸入文本的時(shí)候，如果為預(yù)設(shè)的值，那么就清空文本框，失去焦點(diǎn)的時(shí)候，如果文本框的值為空，則替換為我們預(yù)設(shè)的值。

<input type="text" name="text" value="請(qǐng)輸入文本" class="text"onFocus="if(this.value=='請(qǐng)輸入文本')

this.value = ''"onBlur="if(this.value=='')

this.value='請(qǐng)輸入文本'"/>

let:

實(shí)現(xiàn)塊級(jí)作用域

ES6 新增關(guān)鍵字let，可以使用 let 關(guān)鍵字來實(shí)現(xiàn)塊級(jí)作用域。let 聲明的變量只在 let 命令所在的代碼塊 {} （離let最近的{}）內(nèi)有效，在{} 之外不能訪問。

在 ES6 之前，JavaScript 只有兩種作用域： 全局作用域和私有作用域， 沒有塊級(jí)作用域的概念，使用 var 關(guān)鍵字聲明的變量在{} 外依然能被訪問到（函數(shù)內(nèi)使用 var 聲明的變量只能在函數(shù)內(nèi)訪問，如果不使用 var 則是全局變量）。

// 塊級(jí)作用域

{

? ? let s=3;

? ? console.log(s);//3

}

console.log(s);//s is not defined

不存在變量提升

let聲明的變量不會(huì)進(jìn)行變量提升，但是有一個(gè)語(yǔ)法檢測(cè)的機(jī)制，會(huì)在代碼自上而下執(zhí)行之前先進(jìn)行語(yǔ)法檢測(cè)，看是否有語(yǔ)法錯(cuò)誤（是否有重復(fù)聲明的變量、是否有l(wèi)et聲明的變量在聲明前訪問），如果有就直接報(bào)錯(cuò)。

console.log(a);//Uncaught ReferenceError: a is not defined

let a=2;

阻斷了與window的關(guān)系

let聲明的變量不會(huì)成為window對(duì)象的屬性。

let a=2;

console.log(window.a);// undefined

不能重復(fù)聲明

let a=2;

console.log(a);

var a=3; // 不能進(jìn)行重復(fù)的聲明：Uncaught SyntaxError: Identifier 'a' has already been declared

console.log(3);

注意：如果在{}中用function聲明變量，代碼塊內(nèi)部會(huì)進(jìn)行語(yǔ)法檢測(cè)，如果發(fā)現(xiàn)有重名的變量就直接報(bào)錯(cuò)

{

? ? function fn(){};

? ? var fn = 2;//SyntaxError: Identifier 'fn' has already been declared

}

暫時(shí)性死區(qū)

如果代碼塊中存在let和const命令，這個(gè)代碼塊從一開始就對(duì)這些命令聲明的變量形成了封閉作用域。只要是在聲明之前就使用這些變量，就會(huì)報(bào)錯(cuò)。代碼塊內(nèi)，在使用let聲明變量之前的那個(gè)區(qū)域內(nèi)，該變量都是不可用的（不允許訪問），一旦訪問就報(bào)錯(cuò)。這就是“暫時(shí)性死區(qū)”（temporal dead zone，簡(jiǎn)稱 TDZ）。

可以理解為，只要一進(jìn)入當(dāng)前作用域，經(jīng)過詞法檢測(cè)就已經(jīng)知道待使用變量是誰了，但是不可獲取，只有等到聲明變量的代碼執(zhí)行后，才可以獲取和使用該變量。

const

const聲明一個(gè)只讀的常量 。一旦聲明， 常量的值就不能改變。常量 所謂的常量就是不能改變的值

const PI = 3.1415;

PI // 3.1415

PI = 3;

// TypeError: Assignment to constant variable.

上面代碼表明改變常量的值會(huì)報(bào)錯(cuò)。const聲明的變量不得改變值，這意味著，const一旦聲明變量，就必須立即初始化(賦值)，不能留到以后賦值。

并不是變量的值不能改動(dòng)，而是指向的那個(gè)內(nèi)存地址所保存的數(shù)據(jù)不得改動(dòng)；數(shù)據(jù)一半存儲(chǔ)在堆中，對(duì)于簡(jiǎn)單的基本數(shù)據(jù)類型（string number boolean null undefined）值保存在指向的那個(gè)內(nèi)存地址，因此等同于常量。但對(duì)于引用數(shù)據(jù)類型(object array ),變量指向的內(nèi)存地址，保存的只是一個(gè)指向?qū)嶋H數(shù)據(jù)的指針，const只能保證這個(gè)指針是固定的(即指向另一個(gè)固定的地址)，至于它指向的數(shù)據(jù)結(jié)構(gòu)是不是可變的，就完全不能夠控制了。

const foo = {};

// 為 foo 添加一個(gè)屬性，可以成功

foo.prop = 123;

foo.prop // 123

// 將 foo 指向另一個(gè)對(duì)象，就會(huì)報(bào)錯(cuò)

foo = {}; // TypeError: "foo" is read-only

上面代碼中，常量foo儲(chǔ)存的是一個(gè)地址，這個(gè)地址指向一個(gè)對(duì)象。不可變的只是這個(gè)地址，即不能把foo指向另一個(gè)地址，但對(duì)象本身是可變的，所以依然可以為其添加新屬性。

const a = [];//空值也是值

a.push('Hello'); // 可執(zhí)行

a.length = 0;? ? // 可執(zhí)行

a = ['Dave'];? ? // 報(bào)錯(cuò)

上面代碼中，常量a是一個(gè)數(shù)組，這個(gè)數(shù)組本身是可寫的，但是如果將另一個(gè)數(shù)組賦值給a，就會(huì)報(bào)錯(cuò)。

如果真的想將對(duì)象凍結(jié)，應(yīng)該使用Object.freeze方法。

const foo = Object.freeze({});

// 常規(guī)模式時(shí)，下面一行不起作用；

// 嚴(yán)格模式時(shí)，該行會(huì)報(bào)錯(cuò)

foo.prop = 123;

上面代碼中，常量foo指向一個(gè)凍結(jié)的對(duì)象，所以添加新屬性不起作用，嚴(yán)格模式時(shí)還會(huì)報(bào)錯(cuò)。

除了將對(duì)象本身凍結(jié)，對(duì)象的屬性也應(yīng)該凍結(jié)。下面是一個(gè)將對(duì)象徹底凍結(jié)的遞歸函數(shù)。

var constantize = (obj) => {

? Object.freeze(obj);

? Object.keys(obj).forEach( (key, i) => {

? ? if ( typeof obj[key] === 'object' ) {

? ? ? constantize( obj[key] );

? ? }

? });

};

keycode==13

window.onload

window.onload出現(xiàn)的原因？

?我們都知道頁(yè)面的代碼順序是從上往下進(jìn)行加載，很多時(shí)候我們要對(duì)頁(yè)面中的某一個(gè)模塊進(jìn)行操作，這時(shí)候我們常常使用javascript代碼來進(jìn)行操作。為了能夠保證操作的模塊或?qū)ο笤趈s代碼之前就加載了，我們不得不把js代碼放在頁(yè)面的底端。但是我們?cè)谠O(shè)計(jì)頁(yè)面的時(shí)候，為了把js代碼放在一起，或者一個(gè)讓頁(yè)面更加簡(jiǎn)潔的位置，那就有可能出現(xiàn)代碼中操作的對(duì)象未被加載的情況，那么我們?cè)撊绾稳ソ鉀Q呢？這時(shí)候window.onload就被有了存在的意義了。

window.onload是什么？

window.onload是一個(gè)事件，在文檔加載完成后能立即觸發(fā)，并且能夠?yàn)樵撌录?cè)事件處理函數(shù)。將要對(duì)對(duì)象或者模塊進(jìn)行操作的代碼存放在處理函數(shù)中。即：window.onload =function (){這里寫操作的代碼};

node

nodeValue屬性

用于設(shè)置或返回指定結(jié)點(diǎn)的節(jié)點(diǎn)值

nodeValue 屬性對(duì)于文檔節(jié)點(diǎn)和元素節(jié)點(diǎn)是不可用的。

注釋：如果您希望返回元素的文本，請(qǐng)記住文本始終位于文本節(jié)點(diǎn)中，并且您必須返回文本節(jié)點(diǎn)的值（element.childNodes[0].nodeValue）。提示：nodeValue 屬性的替代選擇是 textContent 屬性。

forEach()方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)

var array = ['a', 'b', 'c'];

array.forEach(function(element) {

? console.log(element);

});

forEach方法中的function回調(diào)有三個(gè)參數(shù)：第一個(gè)參數(shù)是遍歷的數(shù)組內(nèi)容，第二個(gè)參數(shù)是對(duì)應(yīng)的數(shù)組索引，第三個(gè)參數(shù)是數(shù)組本身

foreach 語(yǔ)法：

[ ].forEach(function(value,index,array){

? //code something

　　});

setAttribute()

增加一個(gè)指定名稱和治的新屬性，或者把一個(gè)現(xiàn)有屬性設(shè)定為指定的值

elementNode.setAttribute(name,value)

說明：

1.name：要設(shè)置的屬性名

2.value:要設(shè)置的屬性值

注意：

1.把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性，該方法將創(chuàng)建一個(gè)新屬性。

2.類似于getAttribute()方法，setAttribute()方法只能通過元素節(jié)點(diǎn)對(duì)象調(diào)用的函數(shù)

substring（）方法

定義和用法

substring() 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。

substring() 方法返回的子串包括 開始 處的字符，但不包括 結(jié)束 處的字符。

string.substring(from, to)

參數(shù)描述

from必需。一個(gè)非負(fù)的整數(shù)，規(guī)定要提取的子串的第一個(gè)字符在 string Object 中的位置。

to可選。一個(gè)非負(fù)的整數(shù)，比要提取的子串的最后一個(gè)字符在 string Object 中的位置多 1。如果省略該參數(shù)，那么返回的子串會(huì)一直到字符串的結(jié)尾

innerHTML innerText的使用和區(qū)別

document對(duì)象中有innerHTML、innerText這兩個(gè)屬性，都是獲取document對(duì)象文本內(nèi)容，但使用起來還是有區(qū)別的。

1） innerHTML設(shè)置或獲取標(biāo)簽所包含的HTML+文本信息(從標(biāo)簽起始位置到終止位置全部?jī)?nèi)容，包括HTML標(biāo)簽，但不包括自身)

2） outerHTML設(shè)置或獲取標(biāo)簽自身及其所包含的HTML+文本信息（包括自身）

3） innerText設(shè)置或獲取標(biāo)簽所包含的文本信息（從標(biāo)簽起始位置到終止位置的內(nèi)容，去除HTML標(biāo)簽，但不包括自身）

4） outerText設(shè)置或獲取標(biāo)簽自身及其所包含的文本信息（包括自身）

innerText和outerText在獲取的時(shí)候是相同效果，但在設(shè)置時(shí)，innerText僅設(shè)置標(biāo)簽所包含的文本，而outerText設(shè)置包含包括標(biāo)簽自身在內(nèi)的文本。

JS中的rows和cells

Table下面可以有thead和tbody兩個(gè)分組對(duì)象，某些時(shí)候可以代替div使用，比如實(shí)現(xiàn)某部份表格隱藏。

tr是行，th或者td是列，這些對(duì)象構(gòu)成表格陣列

rows集合返回表格中所有行的一個(gè)數(shù)組；

cells集合返回表格中所有單元格的一個(gè)數(shù)組。

rows：表示表格所有行的集合

cells：表示行內(nèi)單元格的集合

語(yǔ)法

tableID.rows[rowsIndex]

tableID.cells[cellsIndex]

var x=document.getElementById('table1').rows[0].cells[0].innerHTML;

// 顯示出第一個(gè)單元格的內(nèi)容

className屬性

通過className屬性設(shè)置某個(gè)元素的class屬性時(shí)將替換該元素原有的class設(shè)置

className 屬性設(shè)置或返回元素的 class 屬性。

如果需要的的“追加”效果而不是“替換”，可以利用字符串拼接操作，把新的class設(shè)置追加到className屬性上去。

elem.className += " intro";? //注意：intro的第一個(gè)字符是空格