JQuery動態(tài)創(chuàng)建DOM、表單元素的實現(xiàn)代碼
更新時間:2011年08月09日 19:13:37 作者:
代碼很簡單,直接上代碼。別忘記引用JQuery包。
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>createElement</title>
<style type="text/css">
.warpper{ border:1px solid red; padding:8px;}
</style>
<script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
<script type="text/javascript" language="javascript">
<!--
///動態(tài)創(chuàng)建一個div
$(function(){
$('<div />',{
id:'test',
text:"this is a div",
"class":"warpper",
click:function(){
var text=$(this).text();
alert(text);
}
}).appendTo("body");
});
//創(chuàng)建input:text
$(function(){
$('<input />',{
type:"text",
val:"input text somethings...",
name:"userName"
}).appendTo("body");
});
//創(chuàng)建input select
$(function(){
var slt=$('<select />',{name:"country" });
$('<option />',{
val:"0",
text:"請選擇"
}).appendTo(slt);
$('<option>',{
val:"CN",
text:"China",
selected:"selected"
}).appendTo(slt);
$("body").append(slt);
});
//創(chuàng)建radio
$(function(){
$('<input />',{
type:"radio",
name:"rdo",
checked:"checked",
val:"男"
}).appendTo("body");
$('<label>',{
text:"男",
}).appendTo("body");
$('<input />',{
type:"radio",
name:"rdo",
val:"女"
}).appendTo("body");
$('<label>',{
text:"女"
}).appendTo("body");
});
//creat checkbox
$(function(){
$('<input />',{
type:"checkbox",
name:"cbox",
val:"1",
checked:"checked"
}).appendTo("body");
});
$(function(){
$('<input />',{
type:"file",
name:"myfile"
}).appendTo("body");
});
//-->
</script>
</head>
<body>
<form>
</body>
</html>
相關(guān)文章
基于jQuery實現(xiàn)多標簽頁切換的效果(web前端開發(fā))
這篇文章主要介紹了基于jQuery實現(xiàn)多標簽頁切換的效果(web前端開發(fā))的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07
jQuery 學習第七課 擴展jQuery的功能 插件開發(fā)
在介紹如何擴展jQuery之前,先大致看下jQuery源碼(以1.3.2版本為例)。2010-05-05
淺析jquery數(shù)組刪除指定元素的方法:grep()
下面小編就為大家?guī)硪黄獪\析jquery數(shù)組刪除指定元素的方法:grep()。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
詳解jQuery移動頁面開發(fā)中的ui-grid網(wǎng)格布局使用
這篇文章主要介紹了jQuery移動頁面開發(fā)中的ui-grid網(wǎng)格布局使用,以講解多列頁面布局方式為主,需要的朋友可以參考下2015-12-12
jquery動畫2.元素坐標動畫效果(創(chuàng)建一個圖片走廊)
今天文章的內(nèi)容是關(guān)于使用jquery的animate方法,修改html元素的position屬性,創(chuàng)建一個圖片走廊2012-08-08

