当输入域发生变化时改变其颜色:
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 事件发生时运行的函数。