Maison > Article > interface Web > Le chemin de Xiaoqiang vers le développement mobile HTML5 (36) – Opérations DOM dans jQuery

Le chemin de Xiaoqiang vers le développement mobile HTML5 (36) – Opérations DOM dans jQuery

黄舟original: 2017-02-04 14:49:47909parcourir

1. Requête

Utilisez le sélecteur pour trouver le nœud

Utilisez html() / text() / attr() pour afficher le texte du nœud et la valeur de l'attribut.

Remarque : la liste déroulante utilise 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 Créer

$(html)

3. >

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

remove();

remove(selector);

empty(); Effacer le contenu

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

Copier le nœud

clone();

clone(true); Faire en sorte que le nœud copié ait également un comportement

6. Opération d'attribut

Lire : attr(' ');

Définir : attr(' ', ' ');

Ou définir plusieurs attributs attr({" ", " "});

Supprimer : supprimerAttr(' ' );

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

7. Opération de style

Obtention et définition : attr("class", " ");

Ajout : addClass(' ', ' ' );

Changer de style : toggleClass(' ', ' ');

S'il existe un 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. Définir et obtenir le HTML, le texte et la valeur

html() / html(' ')

text() / text(' ')

val(); Définir et lire la valeur de l'élément

9. Traversée

enfants()

suivant();

prive();

frères et sœurs() : tous les frères

10. Exemple complet

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

Ce qui précède est le contenu de la route de développement mobile HTML5 de Xiaoqiang (36) - Fonctionnement DOM dans jQuery Pour plus de contenu connexe, veuillez faire attention au site Web chinois PHP (www.php. .cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le chemin de Xiaoqiang vers le développement mobile HTML5 (35) - Explication détaillée des filtres dans jQueryArticle suivant：Le chemin de Xiaoqiang vers le développement mobile HTML5 (35) - Explication détaillée des filtres dans jQuery

Articles Liés

Voir plus