文書ディレクトリ

スタイル操作

操作cssスタイル

操作類

jQuery常用効果

表示と非表示

のプルアップとドロップダウン

フェードアウト

カスタムアニメーション

部分パラメータ意味

まとめ

スタイルアクション

cssスタイルの操作

$("selector").css("attribute");//    
$("selector").css("attribute","value");//    

ここで、スタイルを設定するときのパラメータは、スタイルを一括設定するためのオブジェクトであってもよい.

操作クラス

$("selector").addClass("classname");//   
$("selector").removeClass("classname");//   
$("selector").toggleClass("classname");//   

元のJSでクラス名classNameを操作すると元のクラス名が上書きされますが、jQueryではクラス名のみが操作されます.実例としてはtab欄切り替えなどがある.

jQueryの一般的な効果

表示と非表示

$("selector").show([speed],[easing],[fn]);//    
$("selector").hide([speed],[easing],[fn]);//    
$("selector").toggle([speed],[easing],[fn]);//    

ここで、speedパラメータは要素の表示と非表示の速度を制御し、easingパラメータは切替効果を制御し、fnはコールバック関数を表し、要素の表示または非表示後に選択的にイベントをトリガーする.

プルアップとドロップダウン

$("selector").slideDown([speed],[easing],[fn]);//    
$("selector").slideUp([speed],[easing],[fn]);//    
$("selector").slideToggle([speed],[easing],[fn]);//    

現実的なケースとしてはプルダウンメニューなどがあります.

フェードアウト

$("selector").fadeIn([speed],opacity,[easing],[fn]);//    
$("selector").fadeOut([speed],opacity,[easing],[fn]);//    
$("selector").fadeTo([speed],opacity,[easing],[fn]);//                
$("selector").fadeToggle([speed],opacity,[easing],[fn]);//          

カスタムアニメーション

一般的なコード形式は次のとおりです.

$("selector").animate(params,[s],[e],[f]);//     

ここでparamsパラメータは要素のスタイルプロパティであり、一般的にはオブジェクトの形式です.よくある例は王者の栄光のオルガン効果がある.

部分パラメータの意味

パラメータ
意味
selector
セレクタ
attribute
ツールバーの
value
値
classname
クラス名
opacity
不透明度(Opacity)

まとめ

まず、今期の知識点はたくさんありますが、共通点がたくさんあります.1~2種類を上手に使えば、他のものも上手になります.次に、知識点は死んで、人は生きていて、私たちが自分の思想、論理に参加して、それからコードフォーマットに照らして操作して、多くの面白い効果を生むことができます.最後に、これらの操作、例えば表示の非表示、プルダウンの引き上げ、フェードアウトなど、短時間で複数回トリガーするとアニメーションまたは効果キューが形成されます.つまり、前回の操作が完了するまで次の操作を実行しなければなりません.実行を待つアニメーションまたは効果はキューを形成します.この解決策はstop()関数を追加し、アニメーションまたは効果の前に追加する必要があります.これにより、次の操作をトリガーしたときに、前回の操作を停止することができます.