Xiaoqiang の HTML5 モバイル開発への道 (36) – jQuery での DOM 操作-htmlチュートリアル-php.cn

Xiaoqiang の HTML5 モバイル開発への道 (36) – jQuery での DOM 操作

黄舟

リリース： 2017-02-04 14:49:47

オリジナル

913 人が閲覧しました

1. クエリ

セレクターを使用してノードを検索します

html() / text() / attr() を使用してノードのテキストと属性値を出力します。

注: ドロップダウンリストは val()

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $(&#39;#b1&#39;).click(function(){  
                    //$(&#39;#d1&#39;).html(&#39;java&#39;);  
                    //将节点的属性读出来  
                    //$(&#39;#d1&#39;).attr(&#39;style&#39;);  
                    //$(&#39;#d1&#39;).attr(&#39;style&#39;,&#39;font-size:30pt&#39;);  
                    $(&#39;#d1&#39;).attr(&#39;class&#39;,&#39;s1&#39;);  
                });  
            });  
        </script>  
        <style>  
            .s1{  
                color:red;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="d1">hello</div>  
        <ul>  
            <li>item1</li>  
            <li id="i1">item2</li>  
            <li>item3</li>  
        </ul>  
        <input type="button" id="b1" value="点我"/>  
    </body>  
</html>

ログイン後にコピー

2 を使用します。

$(html)

3 を作成します。

append();

prepend();

after();

before( ; コピーしたノードにも動作を持たせる

6. 属性操作

Read: attr(' ');

Set: attr(' ', ' ');

または複数の属性を設定する attr({" " , " "});

削除:removeAttr(' ');

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $(&#39;#b1&#39;).click(function(){  
                    var $node = $(&#39;<li>item4</li>&#39;);  
                    $(&#39;ul&#39;).append($node);  
                    //$(&#39;ul&#39;).append(&#39;<li>item4</li>&#39;); 和上面是等价的  
                });  
            });  
        </script>  
        <style>  
            .s1{  
                color:red;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="d1">hello</div>  
        <ul>  
            <li>item1</li>  
            <li id="i1">item2</li>  
            <li>item3</li>  
        </ul>  
        <input type="button" id="b1" value="点我"/>  
    </body>  
</html>

ログイン後にコピー

7. スタイル操作

取得と設定: attr("class", " ");

追加: addClass(' ' , ' ' );

スタイルの切り替え: toggleClass(' ', ' ');

特定のスタイルがあるかどうか hasClass(' ');

css(' ', ' ');

css({ ' ': ' ' , ' ': ' '});

$(&#39;#b1&#39;).click(function(){  
    //$(&#39;ul li:eq(1)&#39;).remove();  
    $(&#39;ul li&#39;).remove(&#39;li[id=i1]&#39;);  
            $(&#39;ul li:eq(1)&#39;).empty();  
});

ログイン後にコピー

8. html、テキスト、値の設定と取得

html() / html(' ')

text() / text(' ')

val(); 要素の値を設定および読み取ります

9. Traverse

children()

next();

siblings(): すべての兄弟

10.

上記は Xiaoqiang の HTML5 モバイル開発への道 (36) - jQuery での DOM 操作コンテンツです。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。