いくつかの古典的で一般的に使用される jQuery のヒント_jquery

> さて、このテーマは長い間ぶら下がっていますが、そろそろ変更する時期が来ました。それでは、自分の好みに合ったテーマを探してみます。
> ところで、最近PHPに傾いていて、噛めば噛むことができることに気づいたので、本題に戻りました(*^_^*)ふふ。

1. Jquery ライブラリを呼び出す:

> はは、多くの子供たちはすでに知っていると思いますが、忘れてしまうと大変なことになります。
> 最初のものは、一般的に使用される Google ホスティングの jQuery ライブラリ アドレスです。
> 2 番目は、jQuery 公式 Web サイトのライブラリのアドレスです。いつでも最新バージョンを入手できます。

コードをコピー コードは次のとおりです:

< ;script src ="http://code.jquery.com/jquery-latest.js">

2. Load() 関数:

＞これもとても良くて色々なところで使えます。
> たとえば、一部の画像が読み込まれない前にプロンプ​​トを追加したいとします。
> または、ページ読み込みプロセスの最後の要素で使用して、ページ全体に読み込みプロンプトを表示します。
> 以下は単なる例であり、セレクターは Img タグを選択します。
> 次に属性を検索しますが、属性のタイプは画像アドレスである Src の後に画像アドレスの内容が続きます。
> 画像がロードされると、画像がロードされたことを示すプロンプト ボックスが表示されます。
> 注意! ！ターゲット要素に入力されたものとまったく同じ Src を入力してください。そうでないと失敗します。

コードをコピーします コードは次のとおりです。

<script> document).ready(function($){ <BR>$('img').attr('src', '/global/tool/picroom/save/beauty/00001.jpg') <BR> .load(function) () { <BR>alert('画像が読み込まれました') <BR>}); <BR><BR> <BR>> :// /www.evlos.org/global/demo/jquery_load <BR></script>

3. 単純な垂直方向の中央揃え:

> ここでは、Height() 関数が使用され、セレクター内のドキュメントが使用されます。はページ全体を表します。
> 以下は、クラスが Move で、It_height が要素の高さとして定義されている要素を検索しています。
> 次に、変数 Global_height をページ全体の高さ、つまりページの上部から下部までの距離として定義します。
> 次に、この要素の上部からの距離をページ全体の高さの半分に調整します。


> はは、子供用の靴に興味がある人ならすでに推測できると思います。
> jQuery の CSS 調整機能は非常に強力ですO(∩_∩)O。

コードをコピーします コードは次のとおりです。 <script> document).ready(function($){ </script>

var global_height = $(document).height();

var it_height = $('.move').height();
$('. move') .css({'position' : 'absolute' , 'top' :
global_height/2 - it_height/2})



> デモ ページ ポータル: http://www.evlos.org/global/demo/jquery_height

4. jQuery と Onclick イベントの組み合わせ:

コードをコピーします

コードは次のとおりです:

移動してください !

> 上記のコードをここに置くと、この DIV をマウスでクリックした後にコードが実行されます。

5. ReplaceWith 関数:

> 次のコードは、クラスが Demo である要素を検索し、それを完全に置き換えます。
> 前後のタグも含めて全体の意味になりますので、置換関数にタグを忘れずに記述してください。

コードをコピー コードは次のとおりです:

<script>jQuery(document).ready(function($){ <BR> $('.demo').replaceWith('<div style="padding-top:30px">置換されました !</script>

> ;') ;
});

> デモページポータル: http://www.evlos.org/global/demo/jquery_replace >
6. Load() 関数の適用 (ページ読み込みプロンプト):

> まず、CSS をページの右上隅に絶対配置します。

コードをコピーします コードは次のとおりです:

#loading {

位置:絶対 ; z-index:900;テキスト整列:センター;
背景色:#eef2fa;ボーダー:1px
カラー:#000;フォントサイズ:12px; パディング:3px ;width: 80px;
right:0;top:0;
}


> 次に、すべての画像が読み込まれた後、jQuery を使用して Loading DIV を非表示にします。

> 先ほどコードをテストしていたら、間違ったアドレスを書いてしまい、危うく発狂しそうになりました。

コードをコピーします コードは次のとおりです。

<script> document).ready(function($){ <div class="codebody" id="code2082">$('img').load(function(){ <BR> $('#loading').css("display","none"); <BR>}) ; <BR>}); <BR><BR> <BR>> どこにでも DIV を挿入してください O(∩_∩)O <BR><BR><div id="loading">読み込み中...</script>