jQuery中DOM操作實例分析
更新時間：2015年01月23日 11:26:22 投稿：shichen2014
這篇文章主要介紹了jQuery中DOM操作方法,實例分析了dom對象的創(chuàng)建、屬性的修改、樣式的修改、動態(tài)綁定事件等技巧,需要的朋友可以參考下
本文實例講述了jQuery中DOM操作的方法。分享給大家供大家參考。具體分析如下：
這里主要設(shè)計的dom操作包括：dom對象的創(chuàng)建(JS方式和jquery方式)、屬性的修改、樣式的修改、動態(tài)綁定事件
代碼如下：
復制代碼 代碼如下:
<html xmlns="
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<title>動態(tài)創(chuàng)建對象</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">獲取自定義數(shù)據(jù)-1</div>
<div id="testDiv6">獲取自定義數(shù)據(jù)-2</div>
<script type="text/javascript">
//document.getElementById("testDiv").innerHTML = "<div style=\"border:solid 1px #FF0000\">動態(tài)創(chuàng)建的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()); //正確的數(shù)值1264
alert("style.width:" + $("#testDiv")[0].style.width ); //空值
})
//動態(tài)綁定單擊事件
$("#testDiv5").bind("click", function(event)
{ alert($(event.target).attr("customer")); });
//綁定只執(zhí)行一次的單擊事件
$("#testDiv6").one("click", { customer: "customer data 2",a:"aaa" }, function(event)
{ alert(event.data.customer) });
</script>
</body>
</html>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<title>動態(tài)創(chuàng)建對象</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">獲取自定義數(shù)據(jù)-1</div>
<div id="testDiv6">獲取自定義數(shù)據(jù)-2</div>
<script type="text/javascript">
//document.getElementById("testDiv").innerHTML = "<div style=\"border:solid 1px #FF0000\">動態(tài)創(chuàng)建的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()); //正確的數(shù)值1264
alert("style.width:" + $("#testDiv")[0].style.width ); //空值
})
//動態(tài)綁定單擊事件
$("#testDiv5").bind("click", function(event)
{ alert($(event.target).attr("customer")); });
//綁定只執(zhí)行一次的單擊事件
$("#testDiv6").one("click", { customer: "customer data 2",a:"aaa" }, function(event)
{ alert(event.data.customer) });
</script>
</body>
</html>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
淺析jquery與checkbox的checked屬性的問題
下面小編就為大家?guī)硪黄獪\析jquery與checkbox的checked屬性的問題。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-04
這篇文章主要介紹了jQuery中的類名選擇器（.class）用法,簡單介紹了jQuery類名選擇器的概念、原理并結(jié)合實例形式分析了類選擇器的簡單使用方法,需要的朋友可以參考下2018-05-05
JQUERY 對象與DOM對象之兩者相互間的轉(zhuǎn)換
jquery對象的相應(yīng)方法DOM對象不能使用，而DOM對象的相應(yīng)方法jquery也不能使用。所以在具體項目中要注意Jquery對象與DOM對象的轉(zhuǎn)換問題2009-04-04
jquery.blockUI.js上傳滾動等待效果實現(xiàn)思路及代碼
上傳滾動等待效果想必大家在很多場合都有見過吧，本文將介紹jquery.blockUI.js實現(xiàn)上傳滾動等待效果，感興趣的你可不要錯過了哈，希望可以幫助到你2013-03-03
jQuery實現(xiàn)獲取table表格第一列值的方法
這篇文章主要介紹了jQuery實現(xiàn)獲取table表格第一列值的方法,涉及jQuery針對table表格元素的遍歷與讀取相關(guān)技巧,需要的朋友可以參考下2016-03-03
jQuery+vue.js實現(xiàn)的多選下拉列表功能示例
這篇文章主要介紹了jQuery+vue.js實現(xiàn)的多選下拉列表功能,涉及jQuery+vue.js數(shù)據(jù)綁定及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了jQuery實現(xiàn)簡單的間隔向上滾動效果,實例分析了jQuery通過animate與setInterval控制dom元素滾動特效的技巧,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細介紹了Jquery UI 模仿淘寶搜索下拉列表功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
用jQuery toggleClass 實現(xiàn)鼠標移上變色
這篇文章主要介紹了用jQuery toggleClass 實現(xiàn)鼠標移上變色,需要的朋友可以參考下2014-05-05
在jQuery中最快的選擇器是ID選擇器，因為它直接來自于JavaScript的getElementById()方法2009-05-05