些元素默認帶有padding, 比如ul標簽。
*{margin:0;padding:0;}
讓所有的標簽內外邊距是都 0 ;
*的執行效率不高, 所以我們使用并集選擇器, 羅列出所有的標簽(不用背, 有專業的清除默認樣式的樣式表, 以利于今后學習)
當然, 以上的寫法是我們練習的寫法。
真正的工作我們如下寫法:
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
最常用
天在寫一個關于 html 中 select 下拉元素選擇的動態事件時,發現如果使用 javascript 中的 click 事件的話,會被執行兩次。網上查了一下資料,發現 select 元素下拉選中事件并不適合使用 click 來觸發,而要使用 change 事件。
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>
點擊下拉后,輸出信息如下:
通過上圖可以發現,如果 select 元素的下拉菜單使用 click 事件的話,會輸出兩次結果,也就說在展開下拉菜單之前與選擇下拉菜單之后分別觸發了 click 事件,所以 select 下拉選項的觸發事件,不能使用 click,而使用 change 事件。
示例代碼
<select name="mochu" onchange="GetVal(this)"> <option value="下拉1">選項1</option> <option value="下拉2">選項2</option> <option value="下拉3">選項3</option> <option value="下拉4">選項4</option> </select> <script> function GetVal(obj){ //代表的是選中項的index索引 var index = obj.selectedIndex; //代表的是選中項的的值 var val = obj.options[index].value; //代表的是選中項的text var txt = obj.options[index].text; console.log(index); console.log(val); console.log(txt); } </script>
輸出結果:
要:禁止input緩存,禁止select緩存
有時候,我們頁面的輸入框,我們再頁面里輸入內容后,并不保存,但是刷新頁面會發現值為輸入的頁面,完全沒有從新去從后臺取值,這是怎么回事呢?如下:
雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆
<input type="text" value="">
<select>
<option value="1">1</option>
<option value="2">1</option>
</select>
其實多數瀏覽器默認會緩存input的值,只有使用ctl+F5強制刷新的才可以清除緩存記錄。如果不想讓瀏覽器緩存input的值,很簡單,只需要價格屬性即可:autocomplete=”off”。
例如上面例子,改為如下就不會緩存啦:
<input type="text" autocomplete="off" value="">
<select autocomplete="off">
<option value="1">1</option>
<option value="2">1</option>
</select>
聽說還有一種直接加在form表單里也可以,但是因為我已經很久沒有用form表單提交數據啦,都是用ajax異步提交的,所以我就沒有采取這種方法,也很簡單的如下:
<form action="#" autocomplete="off">
<input type="text" value/>
</form>
當然,沒試過不知道行不行,應該是沒問題的!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。