ホームページ > 記事 > ウェブフロントエンド > JQuery_jqueryのイベントとアニメーションの使用例
この記事の例では、JQuery でのイベントとアニメーションの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
1.バインドイベント
上記の操作では、バインド イベントを新たに学習しました。バインド イベントには 3 つのパラメーターがあります。最初のパラメーターは、click、dbclick、mouseover などのイベントの名前です。2 番目のパラメーターは、データです。オブジェクトに渡される、3 番目のパラメータはバインドされたイベント関数を処理するために使用されるメソッドです。また、ここではアニメーションでの例、つまり表示または非表示も記述されています。 show() と Hide() を学習する前に、通常は bool 型変数を定義するだけですが、表示/非表示の処理ボタンを作成する場合は上記のようになります。これはまだ非常に煩わしいので、show() と Hide() を学習すると、はるかに簡単になります。つまり、直接非表示にしたり表示したりできるようになります。明らかに、コード処理は単純です。
2.イベントとイベントバブリングを切り替えます
トグル イベント: マウス クリック イベントをシミュレートします。最初のイベントはマウスが要素上に移動するとトリガーされ、2 番目のイベントはマウスが要素から離れるとトリガーされます。 2 つのイベントは相互に切り替えることによってトリガーされます。さらに、イベント バブリングについても説明します。実際には、ページ上に複数のイベントが存在することも、複数の要素が 1 つのイベントに対応することもあります。上記のようにページに 2 つの要素があり、1 つの div 要素が別の div 要素にネストされており、両方にクリック イベントがバインドされているとします。すると、内側の div 要素をクリックすると、外側の div 要素も表示されます。ただイベントが湧き出ているだけです。ここで注意する必要があるのは、これらはすべてイベントにバインドされているということです。クリック イベントのみが内部で発生することは当然のことだと思われがちです。
3. イベントを削除し、複数のイベントを連続して追加します
上記で、バインド イベントはイベントを追加すること、バインド解除はイベントを削除することであることを学びました。それを比較することができます。へへ、複数のイベントを連続して追加する場合、実際にはイベントを追加してバインドを続けるときです。イベントを追加します。
4. シミュレーションイベント
私たちが調査した上記のバインド イベント、クリック イベントなどは、通常、ボタンをクリックすることによってトリガーできるイベントです。ただし、場合によっては、クリック効果を実現するためにユーザー操作をシミュレートする必要があります。たとえば、次のような場合です。ユーザーがクリックすることなく後でクリック イベントがトリガーされた場合は、trigger() メソッドを使用してシミュレーション操作を完了します。
5. その他のイベント
アニメーション方法
6. 複数行テキストボックスの応用 - 高さ変更