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)一致筐赔，可以通過(guò)利用 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、最后一種方法，也是使用最常見(jiàn)的贿肩，但是不能改變文本的顏色峦椰，使用腳本的方式判斷文本框的值，獲取焦點(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)鍵字來(lái)實(shí)現(xiàn)塊級(jí)作用域鹦蠕。let 聲明的變量只在 let 命令所在的代碼塊 {} （離let最近的{}）內(nèi)有效，在{} 之外不能訪問(wèn)在抛。

在 ES6 之前，JavaScript 只有兩種作用域： 全局作用域和私有作用域萧恕， 沒(méi)有塊級(jí)作用域的概念刚梭，使用 var 關(guān)鍵字聲明的變量在{} 外依然能被訪問(wèn)到（函數(shù)內(nèi)使用 var 聲明的變量只能在函數(shù)內(nèi)訪問(wèn)，如果不使用 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聲明的變量在聲明前訪問(wèn)），如果有就直接報(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è)代碼塊從一開(kāi)始就對(duì)這些命令聲明的變量形成了封閉作用域。只要是在聲明之前就使用這些變量夺荒，就會(huì)報(bào)錯(cuò)瞒渠。代碼塊內(nèi)，在使用let聲明變量之前的那個(gè)區(qū)域內(nèi)技扼，該變量都是不可用的（不允許訪問(wèn)）伍玖，一旦訪問(wèn)就報(bào)錯(cuò)。這就是“暫時(shí)性死區(qū)”（temporal dead zone剿吻，簡(jiǎn)稱 TDZ）窍箍。

可以理解為，只要一進(jìn)入當(dāng)前作用域，經(jīng)過(guò)詞法檢測(cè)就已經(jīng)知道待使用變量是誰(shuí)了仔燕，但是不可獲取造垛，只有等到聲明變量的代碼執(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代碼來(lái)進(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)

說(shuō)明：

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

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

注意：

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

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

substring（）方法

定義和用法

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

substring() 方法返回的子串包括 開(kāi)始 處的字符要拂，但不包括 結(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)容，但使用起來(lá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屬性

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

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

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

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