jQuery --表单之change事件
生活随笔
收集整理的這篇文章主要介紹了
jQuery --表单之change事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .result{
8 300PX;
9 height: 100PX;
10 border: solid;
11 }
12 </style>
13 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
14
15 </head>
16 <body>
17 <p>input 元素</p>
18 <p>監聽value值的變化，當有改變時，失去焦點后觸發change事件，對于單選按鈕和復選框，當用戶用鼠標作出選擇時，該事件立即被觸發</p>
19 <p>select元素</p>
20 <p>對于下拉選擇框，當用戶用鼠標作出選擇時，該事件立即觸發</p>
21 <p>texta</p>
22 <p>多行文本輸入框，當有改變時，失去焦點時觸發change事件</p>
23
24 <div class='left'>
25 <input class="target1" type="text" value="監聽input的改變"/>
26
27 </div>
28 <div class='d1'>
29 select:
30 <select class="sl">
31 <option value="option1" selected="selected">option1</option>
32 <option value="option3" selected="selected">option3</option>
33
34 </select>
35
36 </div>
37 <div class='3'>textarea:
38 <textarea class="aa3" rows="5" cols="30">多行文本的輸入控件
39 </textarea>
40
41 </div>
42 <p>輸出結果：</p>
43 <div class="result"></div>
44 <script>
45 //監聽input的改變
46 $('.target1').change(function(e){
47 $('.result').html(e.target.value);
48 });
49 //監聽select
50 $('.sl').change(function(e){
51 $('.result').html(e.target.value);
52 });
53 //監聽textarea
54 $('.aa3').change(function(e){
55 $('.result').html(e.target.value);
56 });
57 </script>
58 </body>
59 </html>
運行結果：
總結
以上是生活随笔為你收集整理的jQuery --表单之change事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VSCode的Vue插件Vetur设置
- 下一篇： AWS助理架构师认证考经