锋利的Jquery(p的onclick()事件)

浏览数：29 / 时间：2015年06月09日

1、一个p元素的点击事件

 1 <html xmlns="http://www.w3.org/1999/xhtml" >
 2 <head runat="server">
 3     <title>无标题页</title>
 4     <script type="text/javascript">
 5         function ClickMe() {
 6             alert(‘张晶是个粪堆‘);
 7         }
 8     </script>
 9 </head>
10 <body>
11     <form id="form1" runat="server">
12     <div>
13        <p onclick="ClickMe();">点击我</p>
14     </div>  
15     </form>   
16 </body>
17 </html>

2、所有p元素的点击事件

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <title></title>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <script type="text/javascript">
 6 window.onload = function(){//页面所有元素加载完毕
 7     var items = document.getElementsByTagName("p");//获取页面中的所有p元素
 8     for(var i=0;i < items.length;i++){    //循环
 9         items[i].onclick = function(){  //给每一个p添加onclick事件
10             //doing something...
11             alert("suc!");
12         }
13     }
14 }
15 </script>
16 </head>
17 <body>
18 <p>测试1</p>
19 <p>测试2</p>
20 </body>
21 </html>

3、带有循环的

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <title></title>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <script type="text/javascript">
 6 window.onload = function(){//页面所有元素加载完毕
 7     var items = document.getElementsByTagName("p");//获取页面中的所有p元素
 8     for(var i=0;i < items.length;i++){    //循环
 9         items[i].onclick = function(){  //给每一个p添加onclick事件
10             //doing something...
11             alert("suc!");
12         }
13     }
14 }
15 </script>
16 </head>
17 <body>
18 <p>测试1</p>
19 <p>测试2</p>
20 </body>
21 </html>