1. 程式人生 > 實用技巧 >js-API 02 獲取元素和事件

js-API 02 獲取元素和事件

一,對錶單的禁用
document.getElementById("txt").disabled=true;

二,阻止a連結的跳轉
return false
1,<!--第一種寫法:-->
<a href="http://www.baidu.com" onclick="alert('11'); return false">百度</a>

第一種缺點 程式碼不分離,不符合低耦合,高內聚的規範
2,<!--第二種寫法-->
<script>
function f1() {
alert("哇塞,好漂亮哦");
return false;
}
</script>
<a href="http://www.baidu.com" onclick="return f1()">百度</a>

第二種程式碼 缺點同上
3,<!--第三種寫法:--> <a href="http://www.baidu.com" id="ak">百度</a> <script> document.getElementById("ak").onclick=function () { alert("嘎嘎"); return false; }; </script> 第三種 行為與結構分離 無缺點 三,滑鼠事件 滑鼠移入 onmouseover 屬性在滑鼠指標移動到元素上時觸發 滑鼠移出 事件名稱 onmouseout 屬性在滑鼠指標移動到元素外時觸發。 四,焦點事件 獲取焦點 事件名稱 onfoucus 事件描述 onfocus 事件在物件獲得焦點時發生,用於input 失去焦點 事件名稱 onblur 事件描述 onblur 事件會在物件失去焦點時發生,一般也用於表單輸入框 五,獲取元素 根據name名獲取元素
var inputs = document.getElementsByName('hobby'); 根據類名獲取元素 var mains = document.getElementsByClassName('main'); 根據選擇器來獲取元素 QuerySelector 與 QuerySelectAll,其中第一個是返回一個匹配的元素,後面返回匹配到的所有元素 六,innerText寫內容 innerText和textContent innerText和innerHTML的區別 使用innerText主要是設定文字的,設定標籤內容,是沒有標籤的效果的 innerHTML是可以設定文字內容 innerHTML主要的作用是在標籤中設定新的html標籤內容,是有標籤效果的 七,自定義屬性 獲取屬性 Api名稱 getAttribute(
"自定義屬性的名字") 設定屬性 setAttribute("屬性的名字","屬性的值"); 移除屬性 my$("dv").removeAttribute("屬性名稱");