快捷導(dǎo)航

jquery中change()用法實例分析

更新時間：2015年02月06日 09:23:18 作者：whazhl

這篇文章主要介紹了jquery中change()用法,實例分析了change的功能、定義及具體的使用技巧,非常具有實用價值,需要的朋友可以參考下

本文實例分析了jquery中change()的用法。分享給大家供大家參考。具體分析如下：

change()當(dāng)元素的值發(fā)生改變時，會發(fā)生 change 事件。該事件僅適用于文本域（text field），以及 textarea 和 select 元素。
當(dāng)用于 select 元素時，change 事件會在選擇某個選項時發(fā)生。當(dāng)用于 text field 或 text area 時，該事件會在元素失去焦點時發(fā)生。

一、change的用法

1、觸發(fā) change 事件：觸發(fā)被選元素的 change 事件

語法: $(selector).change()

2、將函數(shù)綁定到 change 事件：規(guī)定當(dāng)被選元素的 change 事件發(fā)生時運行的函數(shù)。

語法: $(selector).change(function)

二、jquery中change()實例

<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
 $("button").click(function(){
  $("input").change();
 });
});
</script>
</head>
<body>
<button>激活文本域的 change 事件</button>
<p>Enter your name: <input class="field" type="text" /></p>
</body>
</html>

<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
});
</script>
</head>
<body>
<p>在某個域被使用或改變時，它會改變顏色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

AJAX實現(xiàn)瀑布流觸發(fā)分頁與分頁觸發(fā)瀑布流的方法
瀑布流觸發(fā)分頁可以理解為微博中的瀏覽效果、到一定程度時顯示頁數(shù)進行分頁,而分頁觸發(fā)瀑布流可以理解為Twitter拉到一頁設(shè)定的最大條數(shù)后繼續(xù)用瀑布流展示下一頁,接下來我們就來詳細(xì)看看AJAX實現(xiàn)瀑布流觸發(fā)分頁與分頁觸發(fā)瀑布流的方法
2016-05-05
JQuery之proxy實現(xiàn)綁定代理方法
下面小編就為大家?guī)硪黄狫Query之proxy實現(xiàn)綁定代理方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
淺析jquery unbind()方法移除元素綁定的事件
下面小編就為大家?guī)硪黄獪\析jquery unbind()方法移除元素綁定的事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
jQuery實現(xiàn)別踩白塊兒網(wǎng)頁版小游戲
本文主要介紹了jQuery實現(xiàn)別踩白塊兒網(wǎng)頁版小游戲的思路分析與代碼。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
jQuery添加/改變/移除CSS類及判斷是否已經(jīng)存在CSS
正如標(biāo)題所言會用到removeClass移除CSS類、addClass添加CSS類、toggleClass添加或者移除CSS類，hasClass判斷是否已經(jīng)存在CSS
2014-08-08
jquery獲取下拉框中的循環(huán)值
本文主要介紹了jquery獲取下拉框中的循環(huán)值的方法。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
jQuery+css3動畫屬性制作獵豹瀏覽器寬屏banner焦點圖
本文給大家分享的是使用jQuery結(jié)合CSS3制作的仿獵豹瀏覽器寬屏banner焦點圖特效，代碼很簡單，效果卻非常棒，而且兼容各大瀏覽器，這里推薦給大家，有需要的小伙伴參考下。
2015-03-03
jQuery實現(xiàn)移動端下拉展現(xiàn)新的內(nèi)容回彈動畫
這篇文章主要介紹了jQuery實現(xiàn)移動端下拉展現(xiàn)新的內(nèi)容回彈動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
JQuery中SetTimeOut傳參問題探討
無論是window.setTimeout還是window.setInterval，在使用函數(shù)名作為調(diào)用句柄時都不能帶參數(shù)，解決辦法是在此函數(shù)的基礎(chǔ)上在做一層封裝
2013-05-05
jQuery實現(xiàn)的簡單歌詞滾動功能示例
這篇文章主要介紹了jQuery實現(xiàn)的簡單歌詞滾動功能,結(jié)合實例形式分析了基于jQuery插件scroll.js實現(xiàn)滾動功能相關(guān)操作技巧,涉及jQuery結(jié)合時間函數(shù)動態(tài)操作頁面元素相關(guān)實現(xiàn)方法,需要的朋友可以參考下
2019-01-01