Home >Web Front-end >HTML Tutorial >Xiaoqiang's road to HTML5 mobile development (36) – DOM operations in jQuery

Xiaoqiang's road to HTML5 mobile development (36) – DOM operations in jQuery

黄舟Original: 2017-02-04 14:49:47943browse

1. Query

Use the selector to find the node

Use html() / text() / attr() to output the node text and attribute value.

Note: Use 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 for drop-down list, create

$(html)

3, insert node

append();

prepend();

after();

before();

<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. Delete node

remove();

remove(selector);

empty();Clear content

$(&#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. Copy node

clone();

clone(true); Make the copied node also have behavior

6. Attribute operation

Read: attr(' ');

Setting: attr(' ', ' ');

Or set multiple attributes attr({" ", " "});

Delete: removeAttr(' ');

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

7. Style operation

Get and set: attr("class", " ");

Append: addClass(' ', ' ');

Switch styles: toggleClass(' ', ' ');

Whether there is a certain style 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. Set and get html, text and value

html() / html(' ')

text() / text(' ')

val(); Set and read the value of the element

9. Traverse

children()

next();

prive();

siblings(): all brothers

10, comprehensive example

<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;);  
    });  
  
    $(&#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;); 和上面是等价的  
    });  
  
    $(&#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();  
    });  
  
    $(&#39;#b1&#39;).click(function(){  
        var $node = $(&#39;ul li:eq(2)&#39;).clone();  
        $(&#39;ul&#39;).append($node);  
          
        var $node = $(&#39;ul li:eq(2)&#39;).clone(true);  
        $(&#39;ul&#39;).append($node);  
    });  
  
    $(&#39;ul li:eq(2)&#39;).click(function(){  
        //可以使用this来访问符合$(&#39;selecotr&#39;)查询条件的节点  
            //alert(this.innerHTML);  
            alert($(this).html());  
    });  
  
    $(&#39;#b1&#39;).click(function(){  
        $(&#39;#d1&#39;).attr({"class":"s1","style":"font-size:40pt"});  
    });  
  
    $(&#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;);  
    });  
    $(&#39;#b1&#39;).click(function(){  
        alert($(&#39;input[type=text]&#39;).val();  
        alert($(&#39;select&#39;).val());  
        //单选和多选框不能这样写  
        alert($(&#39;:radio&#39;).val());  
        alert($(&#39;:checkbox&#39;).val());  
        //要这样去写  
        var $node = $(&#39;:radio&#39;);  
        $node.each(function(){  
            //if($(this).attr(&#39;checked&#39;)){  
            //  alert($(this).val());  
            //}  
            if(this.checked){  
                alert(this.value);  
            }  
        });  
    });  
    $(&#39;#b1&#39;).click(function(){  
        var $items = $(&#39;ul&#39;).children();  
        //如果查询返回的是多个节点，可以使用length属性返回节点的个数  
        alert($items.length);  
        //如何遍历  
        $items.each(function(i){  
            //$(this)html();  
            alert(this.innerHTML);  
        });  
    });  
});  
</script>  
      
<style>  
    .s1{  
        color:yellow;  
    }  
    .s2{  
        border:1px solid black;  
    }  
</style>  
  
<body>  
    <div>hello</div>  
    <ul>  
        <li>item1</li>  
        <li id="i1">item2</li>  
        <li>item3</li>  
    </ul>  
    <div id="d1" style="background-color:red;">hello</div>  
    <input type="button" value="clickMe" id="b1"/>  
    <input type="text" name="name"/><br/>  
    male:<input type="radio" name="sex" value="m"/>  
    female:<input type="radio" name="sex" value="f"/>  
    fishing:<input type="checkbox" name="intrest" value="fishing"/>  
    cookinng:<input type="checkbox" name="intrest" value="cooking"/>  
    sleeping:<input type="checkbox" name="intrest" value="sleeping"/>  
    <select>  
        <option value="bj">beijing</option>  
        <option value="sh">shanghai</option>  
        <option value="tj">tianjing</option>  
    </select>  
</body>

The above is Xiaoqiang's HTML5 mobile development road (36) - the content of DOM operations in jQuery. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Xiaoqiang’s road to HTML5 mobile development (35) - Detailed explanation of filters in jQueryNext article：Xiaoqiang’s road to HTML5 mobile development (35) - Detailed explanation of filters in jQuery

See more

Xiaoqiang's road to HTML5 mobile development (36) – DOM operations in jQuery

Related articles