jqueryイベントchange()の使い方の詳しい説明-jsチュートリアル-php.cn

jqueryイベントchange()の使い方の詳しい説明

黄舟

リリース： 2018-05-15 10:12:38

オリジナル

9869 人が閲覧しました

この記事は、jqueryのchange()の使い方を主に紹介しており、changeの機能、定義、具体的な使用スキルを分析しています。必要な方は参考にしてください。 jquery の変更と () の使用例。皆さんの参考に共有してください。具体的な解析は以下の通りです:

change() 要素の値が変更されると、changeイベントが発生します。このイベントは、テキストフィールド、テキストエリア、および選択要素にのみ適用されます。

select 要素とともに使用すると、オプションが選択されたときに変更イベントが発生します。テキストフィールドまたはテキスト領域で使用した場合、要素がフォーカスを失ったときにこのイベントが発生します。

1.changeの使い方
1.トリガー変更イベント:選択した要素の変更イベントをトリガー

2.変更イベントに

関数

をバインド:実行する関数選択した要素の変更イベントが発生したとき。

構文: $(selector).change(function)

2. 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 use

l onchange トリガーイベントは、次の 2 つの条件を満たす必要があります。 a）現在のオブジェクトの変化と、キーボードまたはマウスのイベントによってトリガーされます（スクリプトのトリガーは無効です） onpropertychange の非 IE ブラウザバージョン。Firefox や Opera などのブラウザをサポートします。ただし、オブジェクトにバインドされている場合、オブジェクトのすべてのプロパティが変更されるわけではなく、それが機能するだけです。オブジェクトの値が変化したとき。

テキストエリアでユーザーのキーボード入力をキャプチャしたい場合は、onkeyup を使用してイベントを確認するだけです。ただし、onkeyup はコピーと貼り付けをサポートしていないため、テキストエリア内の値の変更を動的に監視する必要があります。 onpropertychange (IE ブラウジングで使用されるブラウザ) と oninput (非 IE ブラウザ) は一緒に使用されます。

onpropertychange のバグ

コードの実装中に、テキストエリアの入力ボックスのフォントスタイルを変更するために obj.className="XX" が使用されている場合、テキストエリアのクリック時にユーザーに応答するときに入力が発生することが判明しました。 IE では最初の文字に対して onpropertychange がトリガーされないというバグがあるため、次のように設定する必要があります: 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 中国語 Web サイトの他の関連記事を参照してください。