首頁 > web前端 > html教學 > 小強的HTML5行動開發之路(36)-jQuery中的DOM操作

小強的HTML5行動開發之路(36)-jQuery中的DOM操作

黄舟
發布: 2017-02-04 14:49:47
原創
934 人瀏覽過

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中文網(m.sbmmt.com)!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板