jQuery中DOM操作实例分析
本文实例讲述了jQuery中DOM操作的方法。分享给大家供大家参考。具体分析如下：
这里主要设计的dom操作包括：dom对象的创建(JS方式和jquery方式)、属性的修改、样式的修改、动态绑定事件
代码如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<scripttype="text/javascript"src="jquery-1.3.2.min.js"></script>
<title>动态创建对象</title>
</head>
<body>
<divid="testDiv">测试图层</div>
<imgsrc="images/image.1.jpg"id="hibiscus"alt="Hibiscus"class="classA"/>
<inputtype=textid=inputTestreadonly=true/>
<divid="testDiv5"customer="customerdata1">获取自定义数据-1</div>
<divid="testDiv6">获取自定义数据-2</div>
<scripttype="text/javascript">
//document.getElementById("testDiv").innerHTML="<divstyle=\"border:solid1px#FF0000\">动态创建的div</div>";
vartestDiv=document.getElementById("testDiv");
varselect=document.createElement("select");
select.options[0]=newOption("加载项1","value1");
select.options[1]=newOption("加载项2","value2");
select.size="2";
varobject=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:"customerdata2",a:"aaa"},function(event)
{alert(event.data.customer)});
</script>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。