jQuery中DOM操作实例分析

前端技术 2023/09/03 JavaScript

本文实例讲述了jQuery中DOM操作的方法。分享给大家供大家参考。具体分析如下：

这里主要设计的dom操作包括：dom对象的创建(JS方式和jquery方式)、属性的修改、样式的修改、动态绑定事件
代码如下：

http://www.w3.org/1999/xhtml\">
<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>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/8940

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案