怎么用jquery在頁面上動(dòng)態(tài)創(chuàng)建一個(gè)button按鈕

需要準(zhǔn)備的材料分別有：電腦、html編輯器、瀏覽器。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)陵川免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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è)確定按鈕。

怎么用jquery在頁面上動(dòng)態(tài)創(chuàng)建一個(gè)button按鈕？

創(chuàng)建按鈕 data-role=button

給HTML元素添加 data-role="button" 屬性。jQuery Moble就會(huì)給此元素增強(qiáng)為按鈕樣式。 Jquery

Mobile框架包含了一組最常用的移動(dòng)應(yīng)用程序所需的圖標(biāo)，為了減少下載的大小，Jquery

Mobile包含的是的白色的圖標(biāo)sprite圖片，并自動(dòng)在圖標(biāo)后添加一個(gè)半透明的黑圈以確保在任何背景色下圖片都能夠清晰顯示。

樣式鏈接按鈕

在一個(gè)網(wǎng)頁的主要內(nèi)容塊，你可以樣式的任何錨鏈接為按鈕添加 data-role="button"

屬性。該框架將加強(qiáng)與標(biāo)記和類的鏈接方式鏈接按鈕。例如，這個(gè)標(biāo)記：

圖標(biāo)樣式列表

jQuery Mobile 自帶很多按鈕小圖標(biāo)，如下圖所示：

左箭頭：data-icon="arrow-l"

右箭頭：data-icon="arrow-r"

上箭頭：data-icon="arrow-u"

下箭頭：data-icon="arrow-d"

刪除：data-icon="delete"

添加：data-icon="Plus"

減少：data-icon="minus"

檢查：data-icon="Check"

齒輪：data-icon="gear"

前進(jìn)：data-icon="Forward"

后退：data-icon="Back"

網(wǎng)格：data-icon="Grid"

五角：data-icon="Star"

警告：data-icon="Alert"

信息：data-icon="info"

首頁：data-icon="home"

默認(rèn)情況下，所有的圖標(biāo)都放在按鈕的按鈕文本左。此默認(rèn)可以覆蓋使用 data-iconpos

屬性來設(shè)置圖標(biāo)的右上方（top）、底部（bottom）、右側(cè)（right）、左側(cè)（left）的文本。例如，標(biāo)記：

隱藏圖片上的文字 data-iconpos="notext"

你也可以創(chuàng)建一個(gè)圖標(biāo)按鈕，設(shè)置

data-iconpos="notext"。按鈕插件將隱藏的文字在屏幕上，但把它作為給屏幕閱讀器和設(shè)備支持工具提示上下文鏈接標(biāo)題屬性。例如，data-iconpos="right"，data-iconpos="notext"：

使用自定義圖標(biāo)，需要指定 data-icon 值。Jquery Mobile的button插件會(huì)將生成一個(gè)CSS類，它的前綴是ui-icon-

，后面的是data-icon值。假如：有一個(gè)按鈕 data-icon 屬性的值為 myapp-email，即 data-icon=“

myapp-email”。那么生產(chǎn)的CSS類是：ui-icon-myapp-email。

然后你可以在你的樣式表寫一個(gè)CSS規(guī)則來定義

ui-icon-myapp-email。然后在css中指定這個(gè)類的背景圖片地址。為了保持與其他圖標(biāo)的視覺上的一致性，請創(chuàng)建一個(gè)白色18x18像素的PNG-8圖標(biāo)，并且保存為Alpha透明度。

這將創(chuàng)建標(biāo)準(zhǔn)分辨率的圖標(biāo)，但許多設(shè)備都有非常高的分辨率的顯示器，就像iPhone

4的視網(wǎng)膜顯示器。添加一個(gè)高清圖標(biāo)，創(chuàng)建一個(gè)圖標(biāo)，36X36像素（18像素大小完全相同的兩倍），并添加第二個(gè)規(guī)則使用WebKit分鐘裝置像素比例：2。媒體查詢到目標(biāo)的規(guī)則只有以高分辨率顯示器。指定背景圖片高清圖標(biāo)文件和設(shè)置背景像素大小18x18將安裝36個(gè)像素圖標(biāo)到同一個(gè)18像素的空間。傳媒查詢塊可以用多個(gè)圖標(biāo)規(guī)則：

jquery 動(dòng)態(tài)創(chuàng)建元素的方式介紹及應(yīng)用

一般動(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è)圖片或者其他資源加載很長時(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";

}

);

或者使用簡便語法:

復(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ù).

所以請大家將修改DOM的函數(shù)使用此方法調(diào)用.

另外還要注意document.createElement和innerHTML的區(qū)別.

如果可以請盡量使用document.createElement和$("div/")的形式創(chuàng)建對(duì)象.

如何使用jquery動(dòng)態(tài)創(chuàng)建一個(gè)select控件

jquery文檔操作的append()或?appendTo()方法可以在被選元素的結(jié)尾插入內(nèi)容，因此可用于動(dòng)態(tài)創(chuàng)建select控件

$("div").append("select/select");??????????//?在已經(jīng)存在的div標(biāo)簽下創(chuàng)建select元素

$("option/option").appendTo($("select"));??//?為select元素添加option選項(xiàng)

實(shí)例演示：動(dòng)態(tài)創(chuàng)建一個(gè)含有兩個(gè)選項(xiàng)——“黑”“白”的select控件，并默認(rèn)選中“白”這個(gè)選項(xiàng)

示例代碼如下

創(chuàng)建Html元素

div?class="box"

span點(diǎn)擊按鈕后創(chuàng)建select標(biāo)簽，并默認(rèn)選中“白”這個(gè)選項(xiàng)：/spanbr

div?class="content"/div

input?type="button"?value="創(chuàng)建select標(biāo)簽"

/div

設(shè)置css樣式

div.box{width:300px;padding:20px;margin:20px;border:4px?dashed?#ccc;}

div.box?span{color:#999;font-style:italic;}

div.content{width:250px;margin:10px?0;padding:20px;border:2px?solid?#ff6666;}

select{width:150px;height:30px;border:1px?solid?#6699FF;}

編寫jquery代碼

$(function(){

$("input:button").click(function()?{

//?創(chuàng)建select

$("div.content").append("select/select");

//?添加選項(xiàng)

$("option/option").val('0').text("黑").appendTo($("select"));

$("option/option").val('1').text("白").appendTo($("select"));

//?設(shè)置默認(rèn)選項(xiàng)

$("select").val('1');

})

})

觀察效果

初始狀態(tài)

點(diǎn)擊按鈕創(chuàng)建select控件之后