1. 程式人生 > >在js中如何獲取到你點選的元素的html、物件、屬性值、以及自定義的屬性值

在js中如何獲取到你點選的元素的html、物件、屬性值、以及自定義的屬性值

前言:記錄自己在工作中遇到的小問題,積少成多!因為是新手,有什麼寫的不好的地方還希望大家能夠指出來。有什麼更好的解決方法也希望大家能提出來,一起交流分享!(小弟在這裡先謝謝大家)

直接上程式碼:

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程式碼

<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>
3、執行結果

紅框是點選按鈕1的效果!!!

綠框是點選按鈕2的效果!!!

見下圖:



4、總結

1、使用attr屬性可以獲取到自定義的屬性(attr也可以設定自定義的屬性,例:$(this).attr("custom","這是修改後的自定義屬性") 這樣就可以吧"這是自定義的屬性"修改為"這是修改後的自定義屬性值")