When the web page is output, you can use jquery to bind events to various elements, or set styles.

The advantage of doing so is to save code, especially when there are many elements and the events of the elements correspond to the same functions.

Look at the following code:

<div id="divUserList">
		<span><a href="javascript:;" onclick="hi('001')">Zhang San</a></span>
		<span><a href="javascript:;" onclick="hi('002')">Li Si</a></span>
		<span><a href="javascript:;" onclick="hi('003')">Qian Wu</a></span>
		<span><a href="javascript:;" onclick="hi('004')">Zhao Liu</a></span>
		<span><a href="javascript:;" onclick="hi('005')">Chen Qi</a></span>
		<span><a href="javascript:;" onclick="hi('006')">Bastard</a></span>
	</div>
	<script type="text/javascript">
		function hi(code){
			alert("my code is:" + code);
		}
	</script>

Assuming that the list is generated in the background and is very long, there will be a lot of code.

If event dynamic binding is used, it is much simpler:

<div id="divUserList">
	<!-- code Is our custom property -->
	<span code="001">Zhang San</span>
	<span code="002">Li Si</span>
	<span code="003">Qian Wu</span>
	<span code="004">Zhao Liu</span>
	<span code="005">Chen Qi</span>
	<span code="006">Bastard</span>
</div>

<script type="text/javascript">
	$(function () {//Equivalent to the javascript onload function, the page is triggered after loading to ensure that elements of dynamic loading events already exist.
		$("div#In divUserList [code]". each (function () {//id=" divUserList ", all subelements of DVI with"code"attributes are traversed.
			$(this).live("click", function () {//Binding events
				hi($(this).attr("code"));
			});
			
			$(this).css("cursor","pointer");//Setting Style: Mouse Pointer
		});
	});
	function hi(code){
		alert("my code is:" + code);
	}	
</script>