Explication détaillée de la fonction jQuery.contents()

La fonction

contents() est utilisée pour sélectionner tous les nœuds enfants de l'élément correspondant actuel (y compris les nœuds de texte, les nœuds d'annotation , etc.), et le renvoie sous la forme d'un jQuery objet.

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

Cette fonction est ajoutée dans jQuery 1.2.

jQueryObject.contents()

Valeur de retour

contents()La valeur de retour de la fonction est de type jQuery et renvoie un nouvel objet jQuery qui contient tous les nœuds enfants de l'élément correspondant à l'objet jQuery actuel (y compris tous les types de nœuds tels que les éléments, le texte, les commentaires, etc.).

Tant qu'il y aura des caractères d'espacement (espaces, nouvelles lignes, etc.) entre deux balises HTML, ils seront traités comme des nœuds de texte.

Si l'élément est un d5ba1642137c3f32f4f4493ae923989c, sélectionne tous les nœuds du document.

S'il n'y a aucun élément correspondant, renvoie un objet jQuery vide.

Exemple et description

Prenons le code HTML suivant comme exemple :

<p id="n1">
    Hello
    <span id="n2">
        CodePlayer
        <span id="n3">A</span>
    </span>
    <!-- 注释内容 -->
    <span id="n4">
        B
        <label id="n5"></label>     
    </span>
</p>

L'exemple de code jQuery suivant est utilisé pour démontrer l'utilisation spécifique du contenu() fonction :

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：[文本内容]、[--注释内容--]或#id
function getTagsInfo($doms){
    return $doms.map(function(){
        if(this.nodeType == 3){ // 文本节点
            return "[" + this.nodeValue + "]";
        }else if(this.nodeType == 8){ // 注释节点
            return "[--" + this.nodeValue + "--]";
        }else{
            return "#" + this.id; 
        }
    }).get();
}
// 匹配n1元素所有的子节点(包括文本节点、注释节点等，下同)
var $n1_contents = $("#n1").contents();
document.writeln( getTagsInfo( $n1_contents ) ); // [ Hello ],#n2,[ ],[-- 注释内容 --],[ ],#n4,[ ]
//匹配span元素所有的子节点
var $span_contents = $("span").contents();
document.writeln( getTagsInfo( $span_contents ) ); // [ CodePlayer ],#n3,[ ],[A],[ B ],#n5,[ ]
// 匹配span元素所有子节点中的非Element节点
var $span_text = $span_contents.filter( function(){
    return this.nodeType != 1;  
} );
document.writeln( getTagsInfo( $span_text ) ); // [ CodePlayer ],[ ],[A],[ B ],[ ]
//匹配n5元素所有的子节点，n5标签中没有任何内容，因此返回空的jQuery对象，匹配0个元素
var $n5_contents = $("#n5").contents();
document.writeln( $n5_contents.length ); // 0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!