jQueryのチェーンプログラミングスタイルの詳細な例

$("#box").css("背景", "ピンク").css("フォントサイズ":"29px");
$("#box").siblings().css("背景", "");

$("#box").css("背景", "ピンク").siblings().css("背景", "赤");

    //js でオブジェクトを宣言します var obj = {  
         name:"名前", 
        説明: 関数(){   
        console.log(this); // 現在のオブジェクトを出力します console.log(this.name); // オブジェクトのプロパティを呼び出します return this; // チェーンプログラミングの原則は、メソッドを呼び出した後、メソッド自体がオブジェクトを返すことです。
},  
      読み取り: 関数(){  
        console.log("こんにちは!");    
        これを返します。 
    }}

<本文>
    <div>
        <ul class="メニュー">
            <li class="level1">
                <a href="#">フルーツ</a>
                <ul class="level2">
                    <li><a href="#">アップル</a></li>
                    <li><a href="#">パイナップル</a></li>
                    <li><a href="#">カンタロープ</a></li>
                </ul>
            </li>
            <li class="level1">
                <a href="#">主食</a>
                <ul class="level2">
                    <li><a href="#">麺類</a></li>
                    <li><a href="#">マントウ</a></li>
                    <li><a href="#">米</a></li>
                </ul>
            </li>
        </ul>
    </div>
</本文>

<script type="text/javascript">
    $(関数() {
        $(".level1 > a").click(function() {
            $(this).addClass("current").next().show().parent.siblings().children("a").removeClass("current").next().hide();
            false を返します。
        });
    });
</スクリプト>

<script type="text/javascript">
    $(関数() {
        $(".level1 > a").click(function() {
            // 現在のスタイルを現在の要素に追加します $(this).addClass("current")
                // 次の要素が表示されます。next().show()
                // 親要素の兄弟要素の子要素 ​​a から現在のスタイルを削除します。element.parent.siblings().children("a").removeClass("current")
                // 次の要素は hidden.next().hide(); です。
            false を返します。
        });
    });
</スクリプト>

<script type="text/javascript">
    $(関数() {
        $("li").show().unbind("click");
    });
</スクリプト>

<script type="text/javascript">
    $(関数() {
        $(this).removeClass("マウスアウト")
            .addClass("マウスオーバー")
            。停止（）
            .fadeTo("速い", 0.5)
            .fadeTo("速い", 1)
            .unbind("クリック")
            .click(関数() {
                .......
            });
    });
</スクリプト>

<script type="text/javascript">
    $(関数() {
        $(this).addClass("highLight")
            .children("a").show().end()
            .siblings().removeClass("highLight")
            .children("a").hide();
    });
</スクリプト>