jquery事件处理之为响应事件添加或删除文本<

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>事件处理之为响应事件添加或删除文本</title>
 8         <style type="text/css">
 9             .button {
10                 width: 120px;
11                 height: 30px;
12                 margin: 5px;
13                 text-align: center;
14                 font-weight: bold;
15                 border: 2px solid;
16             }
17         </style>
18         <script src="jquery-1.5.2.js" type="text/javascript"></script>
19         <script type="text/javascript">
20             $(document).ready(function(){
21                 $('.add').click(function(){
22                     //向前追加
23                     $('div').prepend('<p>Styles makes web page attractive. Website relies heavily on styles.</p>')
24                 })
25                 $('.remove').click(function(){
26                     $('p').remove();
27                 });
28             });
29             
30         </script>
31         <body>
32             <span class="add button">Add Text</span>
33             <span class="remove button">Remove Text</span>
34             <div></div>
35         </body>
36 </html>
posted on 2017-01-21 22:10 Sharpest 阅读(154) 评论(0) 编辑收藏举报