在以前做項目編程的時候,還是自己寫Demo練習的時候,不管是用JavaScript還是用Jquery給標籤元素綁定對象,都習慣使用選擇器進行元素標籤對象的獲取,在最近看項目的過程中發現有人習慣直接使用I標籤的ID或者Name直接獲取對象,我在看到代碼的時候還一下沒反應過來,在這裡做個記錄,避免忘記
使用選擇器獲取對象並綁定事件
<input type="button" id="javaScript" value="測試01">
<input type="button" id="jquery" value="測試02">
<script type="text/javascript">
$(function(){
/* JqueryId選擇器 */
$("#jquery").on("click",function(){
alert("id選擇器");
});
});
/* 通過ID獲取對象 */
var testBtn = document.getElementById("javaScript");
testBtn.onclick=function(){
alert("js");
};
</script>我們都知道,id和name兩個屬性在JS中是很特殊的兩個屬性,我們很多情況下關於獲取對象,綁定事件用得最多的是id。在前後台值的傳遞的時候我們更多的用的是name。兩者都很重要,也有不同,id在頁面上需保持唯一性。
當在js代碼中如果標籤的id名和js中內置的函數或者其他保留字段重名,那麼在頁面加載渲染的時候,在頂層環境中會自動生成一個與Id名相同的window對象,那麼我們在通過id綁定事件的時候也就可以寫成這樣
jqueryTest.onclick=function(){
alert("id");
};或者這樣
window.jqueryTest.onclick=function(){
alert("id");
};對於name屬性來說,也有這種特性,不過只限於特定的對象,例如form,iframe,applet,embed,object,img等。
當name屬性唯一時,以form標籤舉例
<script type="text/javascript">
$(function(){
$("#btnId").on("click",function(){
alert("觸發");
testName.submit();
});
});
</script>
<body>
<form action="" id="testId" name="testName">
<input type="text" id="testInput" name ="userName">
<input id="btnId" type="button" value="提交">
</form>
</body>在這裡,我們不給表單做submit按鈕,而是直接用button,點擊後一樣會觸發form表單的submit事件。
當name 不唯一的時候,這裡我們以embed標記舉例,當name不唯一時,生成是是一個只讀的數組,我們可以用for循環或者for each進行遍歷
<embed src="#" id="embed01" name="embedTest">
<embed src="#" id="embed02" name="embedTest">
<embed src="#" id="embed03" name="embedTest">
<script type="text/javascript">
for(var i=0;i<embedTest.length;i++){
console.log(embedTest[i].id);
};
</script>這裡控制台日誌會輸出以下結果

以上就是通過元素id或者name直接取值的方法,當然作為一個非專業前端人員,個人推薦還是使用選擇器進行取值,因為直接用name或id,當一個對代碼不熟悉的人直接看到這個代碼的時候,第一反應就是testName.submit()這種要麼testName是一個封裝的對象,要麼就是自己框架的方法。
原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/274063.html
微信掃一掃
支付寶掃一掃