Detaillierte Erläuterung der Funktion jQuery.contents()

Die Funktion

contents() wird verwendet, um alle untergeordneten Knoten des aktuell übereinstimmenden Elements auszuwählen (einschließlich Textknoten, Annotation--Knoten usw.) und sie in Form einer jQuery zurückzugeben Objekt.

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

Diese Funktion wurde in jQuery 1.2 hinzugefügt.

jQueryObject.contents( )

Rückgabewert

contents()Der Rückgabewert der Funktion ist vom Typ jQuery und gibt ein neues jQuery-Objekt zurück, das alle untergeordneten Knoten des Elements enthält, das mit dem aktuellen jQuery-Objekt übereinstimmt (einschließlich aller Knotentypen wie Elemente, Text, Kommentare usw.).

Solange sich zwischen zwei HTML-Tags Leerzeichen (Leerzeichen, Zeilenumbrüche usw.) befinden, werden diese als Textknoten behandelt.

Wenn das Element ein d5ba1642137c3f32f4f4493ae923989c ist, werden alle Dokumentknoten des Dokuments ausgewählt.

Wenn kein passendes Element vorhanden ist, wird ein leeres jQuery-Objekt zurückgegeben.

Beispiel und Beschreibung

Nehmen Sie den folgenden HTML-Code als Beispiel:

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

Der folgende jQuery-Beispielcode wird verwendet, um die spezifische Verwendung von content() zu demonstrieren Funktion:

//返回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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Funktion jQuery.contents(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!