在js中如何獲取到你點選的元素的html、物件、屬性值、以及自定義的屬性值
阿新 • • 發佈:2019-02-04
前言:記錄自己在工作中遇到的小問題,積少成多!因為是新手,有什麼寫的不好的地方還希望大家能夠指出來。有什麼更好的解決方法也希望大家能提出來,一起交流分享!(小弟在這裡先謝謝大家)
直接上程式碼:
1、jsp頁面程式碼
<p>首先定義兩個按鈕,新增一些常規屬性type、id、value</p> <p>其次再定義給每個按鈕一個自定義的屬性custom</p> 與方法一配套的input <input type="button" id="button1" value="按鈕1" custom="這是自定義的屬性1" onclick="button1(this)"/> </br> </br> 與方法二配套的input <input type="button" id="button2" value="按鈕2" custom="這是自定義的屬性2"/>
2、js程式碼
3、執行結果<script type="text/javascript"> //現在我們要做的就是點選button,獲取到他的整個html或者整個物件 //方法一:直接給button一個onclick事件 function button1(e){ //得到html console.log(e) //得到物件 console.log($(e)) //得到自定義的custom console.log($(e).attr("custom")) } //方法二:通過js動態的給按鈕新增一個click事件 $(function(){ $("#button2").click(function(){ //得到html console.log(this) //得到物件 console.log($(this)) //得到自定義的custom console.log($(this).attr("custom")) }) }) </script>
紅框是點選按鈕1的效果!!!
綠框是點選按鈕2的效果!!!
見下圖:
4、總結
1、使用attr屬性可以獲取到自定義的屬性(attr也可以設定自定義的屬性,例:$(this).attr("custom","這是修改後的自定義屬性") 這樣就可以吧"這是自定義的屬性"修改為"這是修改後的自定義屬性值")