小強的HTML5行動開發之路（36）－jQuery中的DOM操作-html教學-PHP中文網

小強的HTML5行動開發之路（36）－jQuery中的DOM操作

黄舟

發布： 2017-02-04 14:49:47

原創

942 人瀏覽過

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(); );

<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>

登入後複製

4、刪除節點

remove();

remove(selector);

empty();清空內容

$(&#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();  
});

登入後複製

5、複製節點使複製的節點也具有行為

6、屬性操作

讀取：attr(' ');

設定：attr(' ', ' ');

或一次設定多個屬性attr({" " , " "});

刪除：removeAttr(' ');

$(&#39;#b1&#39;).click(function(){  
    $(&#39;#d1&#39;).attr({"class":"s1","style":"font-size:40pt"});  
});

登入後複製

7、樣式操作

獲取和設定：attr("class", " ");

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

切換樣式：toggleClass(' ', ' ');

是否有某個樣式hasClass(' ');

css(' ', ' ');

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

$(&#39;#b1&#39;).click(function(){  
    $(&#39;div:first&#39;).addClass(&#39;s1 s2&#39;);  
    $(&#39;div:first&#39;).removeClass(&#39;s2&#39;);  
    $(&#39;div:first&#39;).toggleClass(&#39;s1&#39;);  
});

登入後複製

8、設定與取得html,文字與數值

html() / html(' ')

text() / text(' ')

text() / text(' ')) ;設定與讀取元素的值

9、遍歷

children()

next();

prive();

siblings():所有兄弟

10、綜合實例10、35% HTML5行動開發之路（36）－jQuery中的DOM操作的內容，更多相關內容請關注PHP中文網（www.php.cn）！