Heim > Artikel > Web-Frontend > Analyse von DOM-Operationsbeispielen in jQuery

Analyse von DOM-Operationsbeispielen in jQuery

韦小宝Original: 2017-11-28 10:12:581522Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode der DOM-Manipulation in jQuery. Man kann sagen, dass die Verwendung von jQuery für Dom-Operationen die größte Bedeutung von jQuery hat. ! Die wichtigsten hier entwickelten Dom-Operationen umfassen:

Erstellung eines Dom-Objekts

(JS-Methode und JQuery-Methode), Änderung von Attributen, Änderung von Stilen und dynamische Bindung von Ereignissen
Der Code lautet wie folgt:

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird. Für weitere Informationen suchen Sie bitte

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<title>动态创建对象</title>
</head>
<body>
<div id="testDiv">测试图层</div>
<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA"/>
<input type=text id=inputTest readonly=true />
<div id="testDiv5" customer="customer data 1">获取自定义数据-1</div>
<div id="testDiv6">获取自定义数据-2</div>
<script type="text/javascript">
//document.getElementById("testDiv").innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>";
var testDiv = document.getElementById("testDiv");
var select = document.createElement("select");
select.options[0] = new Option("加载项1", "value1");
select.options[1] = new Option("加载项2", "value2");
select.size = "2";
var object = testDiv.appendChild(select);
$("img").each(function(index) {
this.alt = "changed";//修改dom属性信息
//alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
});
$("#inputTest").removeAttr("readonly");
//alert($("#inputTest").attr("readonly"));
$(function()
{
alert("attr(\"width\"):" + $("#testDiv").attr("width"));//undifined
alert("css(\"width\"):" + $("#testDiv").css("width"));//auto(ie6) 或1264px(ff)
alert("width():" + $("#testDiv").width()); //正确的数值1264
alert("style.width:" + $("#testDiv")[0].style.width ); //空值
})
//动态绑定单击事件
$("#testDiv5").bind("click", function(event)
{ alert($(event.target).attr("customer")); });
//绑定只执行一次的单击事件
$("#testDiv6").one("click", { customer: "customer data 2",a:"aaa" }, function(event)
{ alert(event.data.customer) });
</script>
</body>
</html>

auf der

PHP Chinese-Website 🎜>JQuery verwendet Ajax, um lokale JSON-Dateien zu lesen

JQuery-Implementierung des Bildkarusselleffekts BeispielSo verwenden Sie das asynchrone Such-JQuery-Select-Plug-in

Das obige ist der detaillierte Inhalt vonAnalyse von DOM-Operationsbeispielen in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery-SelektorsymbolanalyseNächster Artikel：jQuery-Selektorsymbolanalyse

In Verbindung stehende Artikel

Mehr sehen