Maison >interface Web >js tutoriel >Analyse d'exemples d'opérations DOM dans jQuery

Analyse d'exemples d'opérations DOM dans jQuery

韦小宝original: 2017-11-28 10:12:581600parcourir

L'exemple de cet article décrit la méthode de manipulation DOM dans jQuery. L'utilisation de jQuery sur dom peut être considérée comme la plus grande importance de jQuery Jetons un coup d'œil à l'analyse de la force de jQuery sur les opérations dom ! !

Les principales opérations dom conçues ici incluent : Création d'un objet dom (méthode JS et méthode jquery), modification des attributs, modification des styles et liaison dynamique des événements
Le code est le suivant :

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

J'espère que cet article sera utile à la programmation jQuery de chacun. Pour plus d'informations, veuillez rechercher sur le site Web PHP chinois 🎜>JQuery utilise ajax pour lire les fichiers json locaux

Implémentation de l'effet carrousel d'images JQuery exemple

Comment utiliser le plug-in de sélection jquery de recherche asynchrone

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!

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：Analyse des symboles du sélecteur jQueryArticle suivant：Analyse des symboles du sélecteur jQuery

Articles Liés

Voir plus