jQuery中DOM操作實(shí)例分析
更新時(shí)間：2015年01月23日 11:26:22 投稿：shichen2014
這篇文章主要介紹了jQuery中DOM操作方法,實(shí)例分析了dom對(duì)象的創(chuàng)建、屬性的修改、樣式的修改、動(dòng)態(tài)綁定事件等技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery中DOM操作的方法。分享給大家供大家參考。具體分析如下：
這里主要設(shè)計(jì)的dom操作包括：dom對(duì)象的創(chuàng)建(JS方式和jquery方式)、屬性的修改、樣式的修改、動(dòng)態(tài)綁定事件
代碼如下：
復(fù)制代碼 代碼如下:
<html xmlns="
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<title>動(dòng)態(tài)創(chuàng)建對(duì)象</title>
</head>
<body>
<div id="testDiv">測(cè)試圖層</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\">動(dòng)態(tài)創(chuàng)建的div</div>";
var testDiv = document.getElementById("testDiv");
var select = document.createElement("select");
select.options[0] = new Option("加載項(xiàng)1", "value1");
select.options[1] = new Option("加載項(xiàng)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 ); //空值
})
//動(dòng)態(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>動(dòng)態(tài)創(chuàng)建對(duì)象</title>
</head>
<body>
<div id="testDiv">測(cè)試圖層</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\">動(dòng)態(tài)創(chuàng)建的div</div>";
var testDiv = document.getElementById("testDiv");
var select = document.createElement("select");
select.options[0] = new Option("加載項(xiàng)1", "value1");
select.options[1] = new Option("加載項(xiàng)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 ); //空值
})
//動(dòng)態(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>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery向上遍歷DOM樹(shù)之parents(),parent(),closest()之間的區(qū)別
- JQuery包裹DOM節(jié)點(diǎn)的方法
- JQuery替換DOM節(jié)點(diǎn)的方法
- JQuery復(fù)制DOM節(jié)點(diǎn)的方法
- JQuery刪除DOM節(jié)點(diǎn)的方法
- JQuery插入DOM節(jié)點(diǎn)的方法
- JQuery創(chuàng)建DOM節(jié)點(diǎn)的方法
- JQuery查找DOM節(jié)點(diǎn)的方法
- jQuery中dom元素上綁定的事件詳解
- JQuery遍歷DOM節(jié)點(diǎn)的方法
相關(guān)文章
淺析jquery與checkbox的checked屬性的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺析jquery與checkbox的checked屬性的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-04-04
jQuery中的類(lèi)名選擇器（.class）用法簡(jiǎn)單示例
這篇文章主要介紹了jQuery中的類(lèi)名選擇器（.class）用法,簡(jiǎn)單介紹了jQuery類(lèi)名選擇器的概念、原理并結(jié)合實(shí)例形式分析了類(lèi)選擇器的簡(jiǎn)單使用方法,需要的朋友可以參考下2018-05-05
JQUERY 對(duì)象與DOM對(duì)象之兩者相互間的轉(zhuǎn)換
jquery對(duì)象的相應(yīng)方法DOM對(duì)象不能使用，而DOM對(duì)象的相應(yīng)方法jquery也不能使用。所以在具體項(xiàng)目中要注意Jquery對(duì)象與DOM對(duì)象的轉(zhuǎn)換問(wèn)題2009-04-04
jquery.blockUI.js上傳滾動(dòng)等待效果實(shí)現(xiàn)思路及代碼
上傳滾動(dòng)等待效果想必大家在很多場(chǎng)合都有見(jiàn)過(guò)吧，本文將介紹jquery.blockUI.js實(shí)現(xiàn)上傳滾動(dòng)等待效果，感興趣的你可不要錯(cuò)過(guò)了哈，希望可以幫助到你2013-03-03
jQuery實(shí)現(xiàn)獲取table表格第一列值的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取table表格第一列值的方法,涉及jQuery針對(duì)table表格元素的遍歷與讀取相關(guān)技巧,需要的朋友可以參考下2016-03-03
jQuery+vue.js實(shí)現(xiàn)的多選下拉列表功能示例
這篇文章主要介紹了jQuery+vue.js實(shí)現(xiàn)的多選下拉列表功能,涉及jQuery+vue.js數(shù)據(jù)綁定及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
jQuery實(shí)現(xiàn)簡(jiǎn)單的間隔向上滾動(dòng)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的間隔向上滾動(dòng)效果,實(shí)例分析了jQuery通過(guò)animate與setInterval控制dom元素滾動(dòng)特效的技巧,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細(xì)介紹了Jquery UI 模仿淘寶搜索下拉列表功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
用jQuery toggleClass 實(shí)現(xiàn)鼠標(biāo)移上變色
這篇文章主要介紹了用jQuery toggleClass 實(shí)現(xiàn)鼠標(biāo)移上變色,需要的朋友可以參考下2014-05-05
在jQuery中最快的選擇器是ID選擇器，因?yàn)樗苯觼?lái)自于JavaScript的getElementById()方法2009-05-05