需要準(zhǔn)備的材料分別有:電腦、html編輯器、瀏覽器。
創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)新寧,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792
1、首先,打開html編輯器,新建html文件,例如:index.html,并引入jquery。
2、在index.html中的script標(biāo)簽,輸入jquery代碼:
$('body').append('input type="button" value="確定"');
3、瀏覽器運(yùn)行index.html頁面,此時(shí)成功通過jquery動(dòng)態(tài)創(chuàng)建了一個(gè)確定按鈕。
一般動(dòng)態(tài)創(chuàng)建元素可以通過兩種方式
1、Dom
HTml
復(fù)制代碼
代碼如下:
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";
testDiv.appendChild(select);
});
通過document的createElement方法創(chuàng)建,然后通過appendChild方法添加到指定的對(duì)象中即可
2、JQuery函數(shù)創(chuàng)建
$("div
style=\"border:solid
1px
#FF0000\"動(dòng)態(tài)創(chuàng)建的div/div")
通過append,appendto,prepend,prependto等方法添加到指定的對(duì)象中,具體可以查看
3、頁面加載的時(shí)候最好在頁面加載完后執(zhí)行創(chuàng)建
可以使用window.onload,但是在添加新的元素,
但是不幸的是瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構(gòu)建完DOM樹之后,
也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后.
所以如果某個(gè)圖片或者其他資源加載很長(zhǎng)時(shí)間,
訪問者就會(huì)看到一個(gè)不完整的頁面,
甚至在圖片加載之前就執(zhí)行了需要依賴動(dòng)態(tài)添加的元素的腳本而導(dǎo)致腳本錯(cuò)誤.
解決辦法就是等DOM被解析后,
在圖像和外部資源加載之前執(zhí)行我們的函數(shù).在jQuery中讓這一實(shí)現(xiàn)變得可行
復(fù)制代碼
代碼如下:
$(document).ready(
function()
{
testDiv.innerHTML
=
"div
style=\"border:solid
1px
#FF0000\"使用動(dòng)態(tài)創(chuàng)建的$(document).ready(function)方法/div";
}
);
或者使用簡(jiǎn)便語法:
復(fù)制代碼
代碼如下:
//jQuery
使用$(function)方法
$(
function()
{
testDiv.innerHTML
+=
"div
style=\"border:solid
1px
#FF0000\"使用$(function)方法/div";
}
);
使用$()將我們的函數(shù)包裝起來即可.
而且可以在一個(gè)頁面綁定多個(gè)函數(shù),
如果使用傳統(tǒng)的window.onload則只能調(diào)用一個(gè)函數(shù).
所以請(qǐng)大家將修改DOM的函數(shù)使用此方法調(diào)用.
另外還要注意document.createElement和innerHTML的區(qū)別.
如果可以請(qǐng)盡量使用document.createElement和$("div/")的形式創(chuàng)建對(duì)象.
可以得到啊 是你的jquery文件版本太低了吧 ?換個(gè)新的試試
script type ="text/javascript" src="jquery-1.4.3.min.js"/script
$(document).ready(function() {
? ? ? $("#t").addClass("new");
? });
div id="r"
span id="t"world/span
/div
alert($("#r").html());