Was ist dom in jquery

Dom in jquery ist die Abkürzung für „Document Object Model“, das sich auf das Dokumentobjektmodell bezieht und eine Reihe von Webstandards der internationalen Organisation W3C darstellt; dom definiert eine Reihe von Eigenschaften, Methoden und Ereignissen für den Zugriff auf HTML-Dokumente Objekte, die von jquery verwendet werden können. Wird zum Lesen und Ändern von HTML-Dokumenten verwendet.

Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.2.1-Version, Dell G3-Computer.

Was ist dom in jquery?

Der dom in jquery bezieht sich auf das Document Object Model, eine Reihe von Webstandards der internationalen Organisation W3C. Es definiert eine Reihe von Eigenschaften, Methoden und Ereignissen für den Zugriff auf HTML-Dokumentobjekte.

jquery dom bezieht sich auf das Document Object Model, eine Reihe von Webstandards der internationalen Organisation W3C, mit denen JavaScript HTML-, XHTML- und XML-Dokumente lesen und ändern kann.

Was ist DOM?

Um etwas auf der Seite zu ändern, muss JavaScript Zugriff auf alle Elemente im HTML-Dokument erhalten. Dieser Eintrag wird zusammen mit den Methoden und Eigenschaften zum Hinzufügen, Verschieben, Ändern oder Entfernen von HTML-Elementen über das Document Object Model (DOM) abgerufen.

1998 veröffentlichte das W3C die erste Version der DOM-Spezifikation. Diese Spezifikation ermöglicht den Zugriff und die Manipulation jedes einzelnen Elements einer HTML-Seite.

Alle Browser haben diesen Standard implementiert, sodass DOM-Kompatibilitätsprobleme fast unmöglich zu finden sind. DOM kann von JavaScript zum Lesen und Ändern von HTML verwendet werden. -DOM erscheint noch früher als DOM Core, das einige prägnantere Notationen zur Beschreibung der Eigenschaften verschiedener HTML-Elemente bietet.

Zum Beispiel: Verwenden Sie HTML-DOM, um die Formularobjektmethode abzurufen: document.forms

CSS-DOM

CSS-DOM ist eine Operation für CSS. In JavaScript besteht die Hauptfunktion der CSS-DOM-Technologie darin, verschiedene Attribute des Stilobjekts abzurufen und festzulegen. Durch Ändern der verschiedenen Attribute des Stilobjekts kann die Webseite verschiedene Effekte darstellen.

Methode zum Festlegen der Schriftfarbe eines Stilobjekts eines Elements: elements.style.color = „red“ DOM-Operation in JQuery

Finden Sie den Knoten

Der HTML-Inhalt des Elements kann über die Methode text () gelesen werden, die dem innerHTML-Attribut des DOM entspricht

$(function(){ 
var $para = $("p");         // 获取<p>节点 
var $li = $("ul li:eq(1)");         // 获取第二个<li>元素节点 
var p_txt = $para.attr("title");     // 输出<p>元素节点属性title 
var ul_txt = $li.attr("title");         // 获取<ul>里的第二个<li>元素节点的属性title 
var li_txt = $li.text();         // 输出第二个<li>元素节点的text 
});

Knoten einfügen

Löschen Sie Knoten:

Es ist zu beachten, dass beim Löschen eines Elements, wenn das aktuelle Element untergeordnete Elemente enthält, diese zusammen gelöscht werden. Beim Löschen eines Elements wird ein Verweis auf das aktuell gelöschte Element und diese Elemente zurückgegeben kann in Zukunft wieder verwendet werden.

$(function(){
var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
$li.appendTo(“ul”); // 把刚才删除的又重新添加到<ul>元素里
});
//或
$(function(){
$("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title删除不等于"菠萝"的<li>元素删除
});

Element löschen:

löscht alle Nachkommenknoten im zweiten Li in der Straße. Hinweis: Der Unterschied zwischen „leer“ und „remove“ besteht darin, dass „leer“ die untergeordneten Knoten innerhalb des Elements löscht, während das Element selbst erhalten bleibt.

$(function(){
     $("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容
  });

Kopieren Sie den Knoten:

Dieses kopierte neue Element weist kein Verhalten auf, d. h. wenn Sie auf das geklonte neue Element klicken, gibt es kein zuvor festgelegtes Klickereignis. Bei Bedarf können Sie einen Parameter im übergeben clone-Methode clone(true) bedeutet, dass beim Kopieren eines Elements auch die gebundenen Ereignisse im Element kopiert werden.

$(function(){ 
    $("ul li").click(function(){ 
        $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素 
    }) 
});

Ersatzknoten:

$(function(){ 
    $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); 
    // 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 
});

Wrap-Knoten: wrap,wrapAll,wrapInner

$(function(){
    $(“span”).wrap(“<strong></strong>”);
})    
运行结果代码：
<strong><span>选择你最喜欢的水果</span></strong>

$("span").wrapAll("<strong></strong>");//以第一个为开始往后面紧贴   这个会破坏页面结构

Ergebnis nach der Ausführung

<strong>
    <span>选择你最喜欢的水果</span>
    <span>选择你最喜欢的水果</span>
</strong>
<span>选择你最喜欢的水果</span>
$("span").wrapInner ("<strong></strong>");

Ergebnis nach der Ausführung

<span><strong>选择你最喜欢的水果</strong></span>

Attribut Betrieb

//取值
var p_txt = $("p").attr(“title”);
//设置属性
//找到a元素且有其中含有字符串“link”，修改属性href为“index.html"
$(function(){
    $("a:contains('link')").attr("href",“index.html");        
})
//如果想同时设置多个属性可以使用一下代码
$("a:contains('link')").attr({"href":“index.html","title":"test"});    //键值对    
attr({"属性1":"值1","属性2":"值2","属性3":"值3"})
  //删除属性 
  $(“a”).removeAttr(“title”);

Hinweis: Es gibt viele Funktionen in jQuery Gleichzeitig implementiert es das Abrufen und Festlegen von Werten, einschließlich html(), text(), height(), width(), val(), css() usw.

Stiloperation

//读取和设置样式    使用属性方式 读取样式    
var p_class = $(“p”).attr(“class”);
 //设置样式
$(“p”).attr(“class”,”high”);

Hinweis: Durch die Verwendung der Attributmethode wird der ursprüngliche Stil ersetzt. Wenn Sie zusätzliche Effekte erzielen möchten, können Sie addClass

Additional style:Style:

<style type="text/css">
    .high    {font-weight:bold;    color:red; }
    .another{font-style:italic; color:blue;}
</style>

html:

<p title="选择你最喜欢的水果" class="high">选择你最喜欢的水果</p>      
//class="height another"  样式也可以这样写，中间用空格隔开

jQuery:

$(“p”).addClass(“another”);

Hinweis: Die Stileinstellung folgt zwei Regeln: Wenn einem Element mehrere Klassenwerte hinzugefügt werden, entspricht dies dem Zusammenführen ihrer Stile. Wenn verschiedene Klassen dasselbe Stilattribut festlegen, überschreibt letzteres das erstere.

Stil entfernen

 //移除样式
    $(“p”).removeClass(“high”);
 //同时移除多个样式
    $(“p”).removeClass(“high”).removeClass(“another”);
//样式全部移除
    $(“p”).removeClass();

Toggle

Der erste Funktionsblock in der Toggle-Ereignisdefinition wird ausgeführt, wenn der erste Klick ausgeführt wird, und die Toggle-Ereignisdefinition wird ausgeführt, wenn der Mit dem zweiten Klick wird der zweite Funktionsblock ausgeführt und so weiter. Die

$(function(){
    $(“p”).toggle(function(){        //内置方法一 添加样式
        $(this).addClass(“another”);            
    },function(){                //内置方法二 删除样式            
     $(this).removeClass(“another”);        
    })        
})   //会一直循环

toggleClass-Methode hat eine ähnliche Funktion. Wenn auf den Hyperlink geklickt wird, wird der Code zum Festlegen des Stils ausgeführt. Zu diesem Zeitpunkt wird automatisch beurteilt, ob der aktuelle Stil nicht aktiviert ist dem entsprechenden Element wird der Stil hinzugefügt. Wenn er sich auf dem aktuellen Element befindet, wird er gelöscht.

$(function(){
    $(“#link”).click(function(){
        $(“p”).toggleClass(“another”);            
        return false;
    })        
})

Setzen und abrufen Wenn nichts in den Klammern steht, holen Sie es sich einfach, wenn es etwas gibt, setzen Sie es

--HTML文本值 
//取值
    var p_html = $(“p”).html();
  //设置
    $(“p”).html(“<strong>选择你最喜欢的水果</strong>”);
--text()方法  文本
//取值
　　var p_text = $(“p”).text();
//设置值
   $(“p”).text(“选择你最喜欢的水果”);
--val()方法  value
//取值
  var txt_value = $(this).val();
//设置值
  $(this).val("");

Durchqueren Sie die Knoten

CSS-DOM

  //取值
    $(“p”).css(color);
  //设置值
    $(“p”).css(“color”,”red”);
  //和attr一样可以一次设置多个样式
    $(“p”).css({“color”:”red”,”background”:”#003333”});
  //透明度设置
    $(“p”).css(“opacity”,”0.5”);

相关视频教程推荐：jQuery视频教程

Das obige ist der detaillierte Inhalt vonWas ist dom in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!