cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery中DOM操作实例分析

jQuery中DOM操作实例分析

韦小宝
韦小宝asal
2017-11-28 10:12:581584semak imbas

本文实例讲述了jQuery中DOM操作的方法。对使用jQuery对dom可以讲是jQuery最大的意义进行，让我们来看看jQuery对dom操作的实力分析吧！！

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

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

希望本文所述对大家的jQuery程序设计有所帮助。更多请到PHP中文网搜索哦~

相关推荐：

jQuery使用ajax读取本地json文件的案例

JQuery图片轮播效果的实现实例

异步搜索jquery select插件的使用方法

Atas ialah kandungan terperinci jQuery中DOM操作实例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery选择器符号分析Artikel seterusnya：使用jQuery实现input数值增量和减量的方法

Artikel berkaitan

Lihat lagi