それは何されるクエリ?
jQueryのは、一般的に使用される機能のためのJavaScriptコードをカプセル化したHTML文書の操作、イベント処理、アニメーションやAjaxのインタラクションの設計を最適化するために、簡単なJavaScriptのデザインパターンを提供し、高速で簡潔なJavaScriptフレームワークです。
これは、HTMLドキュメントの操作、イベント処理、アニメーションやAjaxのインタラクションの設計を最適化するために、簡単なJavaScriptのデザインパターンを提供し、一般的に使用される機能のためのJavaScriptコードをカプセル化します。
jQueryの効果 - 非表示と表示
.SHOW()隠された要素が表示されるようになっています。効果:また、要素の高さ、幅、不透明度の属性を変更
.hide()表示要素は隠され、その反対を示すように
.toggle()メソッドがhide()およびshow()メソッドを切り替えるために使用されます。隠された要素を表示し、表示された要素を非表示
シンプルで強力なフロントエンドフレームワークjQueryの、アニメーションとジャンケンゲーム
フォントファミリ:Consolas、メンロー、宅配便、モノスペース。フォントサイズ:16pxに;
ホワイトスペース:ノーマル; 色:RGB(34、34、34)。フォントスタイル:ノーマル; フォントバリアント-リガチャ:ノーマル;
フォントバリアントキャップ:ノーマル; フォント重量:ノーマル; 文字間隔:ノーマル;
孤児:2; テキスト整列:開始。テキストインデント:0PX。テキスト変換:なし。未亡人:2;
単語間隔:0PX。-webkit-テキストストローク幅:0PX。背景色:RGB(255、255、255); "> 1 <DOCTYPE HTML> 2345678 $(ドキュメント).ready(関数(){9 $(!" #隠す」()関数(){$ 10をクリックしてください。 ( "P"))(非表示; 11}); 12 $ {13 $( "P")を表示()( "#ショー"()関数を(クリック); 14}); 15}); 16171819
あなたは「隠す」ボタンをクリックすると、私は消えます。
隠されたディスプレイ20 21 2223jQueryの効果 - フェード
.fadeIn()フェード表示の隠し要素ましょう
.fadeOut()表示素子を隠すフェードするように、透明度を変更します
。FadeToggle()メソッドは、フェードイン()。フェードアウト及び()メソッドとの間で切り替えることができます。要素が残っている場合、fadeToggle()は、要素にフェード効果を追加します。要素がフェードされる場合、fadeToggle()は、要素にフェードを追加します。
最終的に透過性を示す第2パラメータを受信fadeToggleと.fadeTo(時間、最終的な透明度関数)
1 <!DOCTYPE htmlの> 2345678 $(ドキュメント).ready(関数(){9 $( "ボタン")をクリックします(関数(){10 $( "#のDIV1")fadeToggle();。。11 $( "# DIV2 ")fadeToggle(" 遅い "); 12 $(" #1 DIV3" )fadeToggle(3000); 13}); 14}); 15161718
例としては、fadeToggle()は、異なる速度(速度)パラメータを使用示します。
19クリックしてフェードイン/アウト202122
2324
252627
jQueryの効果 - スライド
.slideDown()隠された要素が表示されるように、効果は上から下で、高さを増加させます。
.slideUp()表示要素が隠れているので、効果は、高さを低減するために、下から上です。
。SlideToggle()メソッドは、slideDown()とslideUp()メソッドとの間で切り替えることができます。要素が下方に摺動する場合、slideToggle()が摺動可能に上向き。要素が上方にスライドされた場合、slideToggle()摺動可能に下方これら。
1 <!DOCTYPE HTML> 2345678#パネル、#フリップ
9 {
10パディング:5pxの;
11テキスト整列:センター。
12背景色:#1 e5eecc。
13国境:固体1pxの番号のc3c3c3。
14}
15 #panel
16 {
17パディング:は50px;
18ディスプレイ:なし。
19}
20 2122 $(ドキュメント).ready(関数(){23 $( "#フリップ")slideToggle()が "遅い"(関数(){24 $( "#パネル")をクリックして、.. 25}); 26} ); 2728293031私のポイント、パネルを表示または非表示にします。32Hello世界!3334
jQueryの効果-animate()メソッド
.animate({最終的なスタイル属性、オブジェクトキー}
アニメーションのイベント、
アニメーション( "線形"、 "スイング")、
)アニメーションコールバック関数の実装後
アニメーション注:
対象のパラメータは、キーがこぶのルールを使用する必要があります
アニメーションの唯一の属性値の型を使用することができ、非数値属性の種類は、アニメーション化することができません
1 <!DOCTYPE htmlの> 2345678 $(ドキュメント).ready(関数(){$ 9( "ボタン")をクリックします(関数(){10vardiv = $( "DIV"); 11div.animate({左: '100pxに'}、 "遅い"); 12div.animate({のfontSize:' 3emは '}) "遅い"; 13}); 14}); 1516 171819开始动画20
デフォルトでは、すべてのHTML要素には、静的な位置を持っており、不動です。あなたが変更する必要がある場合は21、私たちは、要素の属性は、相対的な固定、または絶対で配置する必要があります!
22HELLO232425ます。https://www.jianshu.com/p/9deccb31fd19で再現