CSS 清除瀏覽器默認(rèn)樣式

些元素默認(rèn)帶有padding, 比如ul標(biāo)簽。

*{margin:0;padding:0;}

讓所有的標(biāo)簽內(nèi)外邊距是都 0 ；

*的執(zhí)行效率不高, 所以我們使用并集選擇器, 羅列出所有的標(biāo)簽(不用背, 有專(zhuān)業(yè)的清除默認(rèn)樣式的樣式表, 以利于今后學(xué)習(xí))

當(dāng)然, 以上的寫(xiě)法是我們練習(xí)的寫(xiě)法。

真正的工作我們?nèi)缦聦?xiě)法:

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

最常用

天在寫(xiě)一個(gè)關(guān)于 html 中 select 下拉元素選擇的動(dòng)態(tài)事件時(shí)，發(fā)現(xiàn)如果使用 javascript 中的 click 事件的話，會(huì)被執(zhí)行兩次。網(wǎng)上查了一下資料，發(fā)現(xiàn) select 元素下拉選中事件并不適合使用 click 來(lái)觸發(fā)，而要使用 change 事件。

select元素下拉的click事件

html代碼

<select name="mochu" id="mochu">
 <option value="1">下拉1</option>
 <option value="2">下拉2</option>
 <option value="3">下拉3</option>
 <option value="4">下拉4</option>
</select>
<script>
 $('#mochu').click(function(){
 console.log($(this).val());
 });
</script>

點(diǎn)擊下拉后，輸出信息如下：

通過(guò)上圖可以發(fā)現(xiàn)，如果 select 元素的下拉菜單使用 click 事件的話，會(huì)輸出兩次結(jié)果，也就說(shuō)在展開(kāi)下拉菜單之前與選擇下拉菜單之后分別觸發(fā)了 click 事件，所以 select 下拉選項(xiàng)的觸發(fā)事件，不能使用 click，而使用 change 事件。

javascript select 元素的觸發(fā)事件

示例代碼

<select name="mochu" onchange="GetVal(this)">
 <option value="下拉1">選項(xiàng)1</option>
 <option value="下拉2">選項(xiàng)2</option>
 <option value="下拉3">選項(xiàng)3</option>
 <option value="下拉4">選項(xiàng)4</option>
</select>
<script>
 function GetVal(obj){
 //代表的是選中項(xiàng)的index索引
 var index = obj.selectedIndex;
 //代表的是選中項(xiàng)的的值
 var val = obj.options[index].value;
 //代表的是選中項(xiàng)的text
 var txt = obj.options[index].text;
 console.log(index);
 console.log(val);
 console.log(txt);
 }
</script>

輸出結(jié)果：

要：禁止input緩存，禁止select緩存

有時(shí)候，我們頁(yè)面的輸入框，我們?cè)夙?yè)面里輸入內(nèi)容后，并不保存，但是刷新頁(yè)面會(huì)發(fā)現(xiàn)值為輸入的頁(yè)面，完全沒(méi)有從新去從后臺(tái)取值，這是怎么回事呢？如下：

雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆

<input type="text" value="">
<select>
<option value="1">1</option>
<option value="2">1</option>
</select>

其實(shí)多數(shù)瀏覽器默認(rèn)會(huì)緩存input的值，只有使用ctl+F5強(qiáng)制刷新的才可以清除緩存記錄。如果不想讓瀏覽器緩存input的值，很簡(jiǎn)單，只需要價(jià)格屬性即可：autocomplete=”off”。

例如上面例子，改為如下就不會(huì)緩存啦：

<input type="text" autocomplete="off" value="">
<select autocomplete="off">
<option value="1">1</option>
<option value="2">1</option>
</select>

聽(tīng)說(shuō)還有一種直接加在form表單里也可以，但是因?yàn)槲乙呀?jīng)很久沒(méi)有用form表單提交數(shù)據(jù)啦，都是用ajax異步提交的，所以我就沒(méi)有采取這種方法，也很簡(jiǎn)單的如下：

<form action="#" autocomplete="off">  
<input type="text" value/>  
</form>

當(dāng)然，沒(méi)試過(guò)不知道行不行，應(yīng)該是沒(méi)問(wèn)題的！

在線咨詢(xún)

上一篇：前端性能優(yōu)化(二)-瀏覽器緩存機(jī)制
下一篇：網(wǎng)站seo具體怎么做？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

CSS 清除瀏覽器默認(rèn)樣式

select元素下拉的click事件

javascript select 元素的觸發(fā)事件

您的項(xiàng)目需求