33-1 jQuery最上位オブジェクト$オブジェクト変換セレクタスタイル操作

57807 ワード

jQuery jquery httml 5 先端

1.jQueryのエントリ関数
jQueryでよく見られる2つのエントリ関数:

//    :     。
$(function () {   
    ...  //       DOM        
}) ; 

//    :   ，       
$(document).ready(function(){
   ...  //       DOM       
});

まとめ:

DOM構造のレンダリングが完了するまで内部コードを実行することができ、すべての外部リソースのロードが完了するまで待つ必要はありません.jQueryはパッケージを完了しました.

は、原生jsにおけるDOMContentLoadedに相当する.

原生jsと異なるloadイベントは、ページドキュメント、外部のjsファイル、cssファイル、ピクチャのロードが完了してから内部コードを実行する.

は、第1の方法をより推奨する.

1.2.4. jQueryの最上位オブジェクト$

$はjQueryの別称で、コードではjQueryの代わりに使用できますが、一般的には便宜上、通常は$を直接使用します.

$はjQueryのトップクラスのオブジェクトで、オリジナルJavaScriptのwindowに相当します.要素を$でjQueryオブジェクトにパッケージすると、jQueryのメソッドを呼び出すことができます.

1.2.5. jQueryオブジェクトとDOMオブジェクト
JQueryメソッドを使用すると、元のJSで取得した要素とは異なり、以下のようにまとめられています.

原生JSで取得したオブジェクトがDOMオブジェクト

である.

jQueryメソッドで取得した要素がjQueryオブジェクトです.

jQueryオブジェクトの本質は、$を用いてDOMオブジェクトをパッケージ化した後に生成されるオブジェクト(擬似配列形式格納)である.

注意:
jQueryメソッドを使用できるのはjQueryオブジェクトのみで、DOMオブジェクトはオリジナルのJavaScirptメソッドを使用します.
1.2.6. jQueryオブジェクトとDOMオブジェクトの変換
DOMオブジェクトとjQueryオブジェクトの間では相互変換が可能である.原生jsはjQueryより大きいので、原生のいくつかの属性と方法jQueryは私たちにパッケージされていません.これらのプロパティとメソッドを使用するには、jQueryオブジェクトをDOMオブジェクトに変換する必要があります.

// 1.DOM     jQuery  ，      
var box = document.getElementById('box');  //   DOM  
var jQueryObject = $(box);  //  DOM      jQuery   

// 2.jQuery       DOM        ：
//   2.1 jQuery  [   ]
var domObject1 = $('div')[0]

//   2.2 jQuery  .get(   )
var domObject2 = $('div').get(0)

まとめ:実際の開発ではDOMオブジェクトをjQueryオブジェクトに変換することが一般的であり,より強力なjQueryのメソッドを呼び出すことができる.
1.3. jQueryセレクタ
1.3.1. ベースセレクタ

$("   ")   //           CSS      ，

1.3.2. レベルセレクタ
階層セレクタで最も一般的な2つは、子孫セレクタと子セレクタです.


        $(function()</span> <span class="token punctuation">{</span>
            console.<span class="token function">log</span><span class="token punctuation">(</span>$<span class="token punctuation">(</span><span class="token string">".nav"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            console.<span class="token function">log</span><span class="token punctuation">(</span>$<span class="token punctuation">(</span><span class="token string">"ul li"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>

1.3.3. フィルタセレクタ

     ，                          .

ケースコード

<body>
    <ul>
        <li>        </li>
        <li>        </li>
        <li>        </li>
        <li>        </li>
        <li>        </li>
        <li>        </li>
    </ul>
    <ol>
        <li>        </li>
        <li>        </li>
        <li>        </li>
        <li>        </li>
        <li>        </li>
        <li>        </li>
    </ol>
    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>
</body>

1.3.4. フィルタ方法(ポイント)

	$('li').parent();    
	$('ul').children('li');   $('ul>li'),    (   );
	$('ul').find('li');    $('ul li'),     
	$('.first').siblings('li');      ,       

	$('.first').prevAll();               
	$('.last').prevAll();               

	$('div').hasClass('protected');                 ,   ,   true
	$('li').eq(2);    $('li:eq(2)'),index    0

1.3.4知識マット

$('div').css('  ', ' ')

jQueryの排他思想

//         ，    ：        ，           。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

暗黙反復

//      DOM   （       ）          。
//     ：               ，       ，          ，       ，      。
$('div').hide();  //       div    ，

チェーンプログラミング

//             ，      。
$(this).css('color', 'red').sibling().css('color', '');

1.3.5ケース:淘宝服饰精品ケース
構想分析:1.核心原理:マウスは左側の箱のあるliを通って、コンテンツエリアの箱に対応する画像を表示させ、残りの画像を隠す.2.現在のliのインデックス番号を取得する必要がある場合、対応するインデックス番号のピクチャ3を表示することができる.jQueryは現在の要素インデックス番号$(this)を取得する.index() 4.中間対応のピクチャは、eq(index)メソッドで選択することができる.表示要素show()非表示要素hide()


        // 1.  
        $(function ()</span> <span class="token punctuation">{</span>
            <span class="token selector">// 2.       li 
            $('#left li').mouseover(function ()</span> <span class="token punctuation">{</span>
                var index = $<span class="token punctuation">(</span>this<span class="token punctuation">)</span>.<span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                console.<span class="token function">log</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
                // 3.            
                $<span class="token punctuation">(</span><span class="token string">'#content div'</span><span class="token punctuation">)</span>.<span class="token function">eq</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span>.<span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                // 4.            
                $<span class="token punctuation">(</span><span class="token string">'#content div'</span><span class="token punctuation">)</span>.<span class="token function">eq</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span>.<span class="token function">siblings</span><span class="token punctuation">(</span><span class="token punctuation">)</span>.<span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>

1.4. jQueryスタイル操作
1.4.1. 方法1:cssの操作方法
jQueryはcssメソッドを使用して簡単な要素スタイルを変更することができます.クラスを操作して、複数のスタイルを変更することもできます.
次の3つの形式が一般的です.

// 1.       ，       
var strColor = $(this).css('color');

// 2.        ，   ，    ，       ，       ，                
$(this).css(''color'', ''red'');

// 3.           ，        。            ，          
$(this).css({ "color":"white","font-size":"20px"});

注意:css()はスタイルが少ない場合に使用されることが多く、多くなると不便です.
1.4.2. 方法2:クラススタイルの設定方法
作用は従来のclassListと同等で、クラススタイルを操作することができ、操作クラス内のパラメータが加点しないように注意する.
一般的な3つのクラススタイルの設定方法:

// 1.   
$("div").addClass("current");

// 2.   
$("div").removeClass("current");

// 3.   
$("div").toggleClass("current");

注意:

クラススタイルの設定方法はスタイルの多時操作に適しており、css()の不足を補うことができる.

原生JSではclassNameが要素の元のクラス名を上書きし、jQueryではクラス操作は指定されたクラスに対してのみ操作され、元のクラス名には影響しません.

1.4.3. ケース:tabバー切り替え
構想分析:1.上部のliをクリックし、現在liはcurrentクラスを追加し、残りの兄弟はクラスを削除します.2.クリックすると、現在のliのインデックス番号3が得られる.下のインデックス番号のitemを表示し、残りのitemを非表示にします.
1.5. jQuery効果
jQueryは私たちに多くのアニメーション効果をカプセル化してくれました.最も一般的なのは以下の通りです.

表示非表示:show()/hide()/toggle();

画入:slideDown()/slideUp()/slideToggle();

フェードアウト:fadeIn()/fadeOut()/fadeToggle()/fadeTo();

カスタムアニメーション:animate()

注意:
アニメーションまたはエフェクトがトリガーされると実行され、複数回トリガーされると、複数のアニメーションまたはエフェクトがキューに並んで実行されます.
jQueryは、アニメーションのキューを停止する別の方法を提供します:stop();
1.5.1. 非表示の表示
非表示アニメーションを表示するには、show()/hide()/toggle();
コードデモ

<body>
    <button>  </button>
    <button>  </button>
    <button>  </button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })
            //      ，                 
        });
    </script>
</body>

1.5.2. スリップスリップスリップ
スライドインスライドアウトアニメーションには、slideDown()/slideUp()/slideToggle();
コードデモ

<body>
    <button>    </button>
    <button>    </button>
    <button>    </button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                //     slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                //     slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                //      slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>

1.5.3フェードアウト
フェードインフェードアウトアニメーションには、fadeIn()/fadeOut()/fadeToggle()/fadeTo()の4つの方法があります.
コードデモ

<body>
    <button>    </button>
    <button>    </button>
    <button>      </button>
    <button>     </button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                //    fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                //    fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function() {
                //        fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function() {
                //        fadeTo()             
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

1.5.4カスタムアニメーション
カスタムアニメーションは非常に強力で、パラメータの伝達を通じて以上のすべてのアニメーションをシミュレートすることができます.方法はanimate()です.コードデモ

<body>
    <button>   </button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

1.5.5アニメーションキューの停止
アニメーションまたはエフェクトがトリガーされると実行され、複数回トリガーされると、複数のアニメーションまたはエフェクトがキューに並んで実行されます.
アニメーションのキューを停止する方法はstop()です.

stop()メソッドは、アニメーションまたは効果を停止するために使用されます.

stop()は、前回のアニメーションの終了を停止することに相当します.

まとめ:アニメーションを使用するたびにstop()を呼び出し、アニメーションを呼び出します.
1.5.6. イベントの切り替え
jQueryでは新しいイベントhover()を追加してくれました.機能はcssの偽クラス:hoverに似ています.以下に紹介する
構文

hover([over,]out)     //   over out

over:マウスを要素に移動してトリガーする関数(mouseenterに相当)

out:マウスが要素を移動してトリガーする関数(mouseleaveに相当)

関数が1つしか書かれていない場合、マウスの通過と離脱は

をトリガーします.
hoverイベントとアニメーションの配置を停止するケース

<body>
    <ul class="nav">
        <li>
            <a href="#">  </a>
            <ul><li><a href="">  </a></li><li><a href="">  </a></li><li><a href="">@ </a></li></ul>
        </li>
        <li>
            <a href="#">  </a>
            <ul><li><a href="">  </a></li><li><a href="">  </a></li><li><a href="">@ </a></li></ul>
        </li>
    </ul>
    <script>
        $(function() {
            //     
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery       this     
            //     // show()       hide()     
            //     $(this).children("ul").slideDown(200);
            // });
            // //     
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1.      hover               
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2.      hover          ，                   
            $(".nav>li").hover(function() {
                // stop            
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>

1.5.7. 事例:王者栄耀アコーディオン効果
構想分析:1.マウスがliを通過するには、2つのステップがあります.現在、liの幅は224 pxになり、同時に中の小さな画像が薄くなり、大きな画像が3.残りの兄弟liの幅は69 pxになって、小さいピクチャーは薄くなって、大きいピクチャーは薄くなります

HDu 3037 Saving Beans(組合せ数学)

HTML 5添付ファイルドラッグ&アップロードdrop&google.Gears実装コード