首页 > 技术文章 > jQuery 事件 - change() 方法

aixuexi666888 2021-11-17 16:19 原文

当输入域发生变化时改变其颜色:

 

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $(".field").change(function(){
 7     $(this).css("background-color","#FFFFCC");
 8   });
 9 });
10 </script>
11 </head>
12 <body>
13 <p>在某个域被使用或改变时,它会改变颜色。</p>
14 Enter your name: <input class="field" type="text" />
15 <p>Car:
16 <select class="field" name="cars">
17 <option value="volvo">Volvo</option>
18 <option value="saab">Saab</option>
19 <option value="fiat">Fiat</option>
20 <option value="audi">Audi</option>
21 </select>
22 </p>
23 </body>
24 </html>

定义和用法

当元素的值发生改变时,会发生 change 事件。

该事件仅适用于文本域(text field),以及 textarea 和 select 元素。

change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。

注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

触发 change 事件

触发被选元素的 change 事件。

语法

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $(".field").change(function(){
 7     $(this).css("background-color","#FFFFCC");
 8   });
 9   $("button").click(function(){
10     $("input").change();
11   });
12 });
13 </script>
14 </head>
15 <body>
16 <button>激活文本域的 change 事件</button>
17 <p>Enter your name: <input class="field" type="text" /></p>
18 </body>
19 </html>

参数描述function可选。规定当 change 事件发生时运行的函数。

推荐阅读