首頁 >web前端 >js教程 >jquery事件change()的使用詳解

jquery事件change()的使用詳解

黄舟原創: 2018-05-15 10:12:389895瀏覽

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

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

change()當元素的值改變時，會發生 change 事件。此事件僅適用於文字網域（text field），以及 textarea 和 select 元素。
當用於 select 元素時，change 事件會在選擇某個選項時發生。當用於 text field 或 text area 時，事件會在元素失去焦點時發生。
一、change的用法

1、觸發change 事件：觸發被選元素的change 事件

語法: $(selector).change()

2、將函數綁定到change 事件：規定當被選元素的change 事件發生時執行的函數。

語法: $(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>

oninput,onpropertychange,onchange的用法

l onchange觸發事件必須符合兩個條件：

a）目前物件屬性改變，並且是由鍵盤或滑鼠事件激發的（腳本觸發無效）

b）目前物件失去焦點(onblur)；

l onpropertychange的話，只要目前物件屬性改變，都會觸發事件，但是它是IE專屬的；

# l oninput是onpropertychange的非

IE瀏覽器

版本，支援firefox和opera等瀏覽器，但有一點不同，當它綁定於物件時，並非該物件所有屬性在物件value值發生改變時奏效。

###在textarea中，如果想捕捉使用者的鍵盤輸入，用onkeyup檢查事件就可以了，但是onkeyup並不支援複製和貼上，因此需要動態監測textarea中值的變化，這就需要onpropertychange（用在IE瀏覽器）和oninput（非IE瀏覽器）結合在一起使用了。 ######onpropertychange的bug###### 在程式碼實作時，發現在回應使用者onclick了textarea時，如果使用obj.className="XX";來改變textarea輸入框中字體的樣式，會導致在ie下會有在輸入第一個字元的時候onpropertychange不會觸發的bug，因此需要這樣設定：obj.style.color="#000";######先說jquery, 使用jQuery 函式庫的話，只要同時綁定oninput 和onpropertychange 兩個事件就可以了，範例程式碼：###

$(&#39;#username&#39;).bind(&#39;input propertychange&#39;, function() {    
$(&#39;#content&#39;).html($(this).val().length + &#39; characters&#39;);});

以上是jquery事件change()的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：基於jQuery封裝的分頁組件下一篇：基於jQuery封裝的分頁組件

看更多