JQuery动态创建DOM、表单元素的实现代码

代码如下:

<!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">
<!--
///动态创建一个div
$(function(){
$('<div />',{
id:'test',
text:"this is a div",
"class":"warpper",
click:function(){
var text=$(this).text();
alert(text);
}
}).appendTo("body");
});
//创建input:text
$(function(){
$('<input />',{
type:"text",
val:"input text somethings...",
name:"userName"
}).appendTo("body");
});
//创建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);
});
//创建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>

赞 (0)

相关推荐

  • jQuery Mobile框架中的表单组件基础使用教程

    jQuery Mobile框架中的表单组件基础使用教程

    一.表单组件基础 1.组件简介 jQuery Mobile 中的表单组件是基于标准 HTML ,然后在此基础上增强样式,因此即使浏览器不支持 jQuery Mobile 表单仍可正常使用.需要注意的是, jQuery Mobile 会把表单元素增强为触摸设备很容易使用的形式,因此对于 iphone/ipad 与 Android 使用 Web 表单将会变得非常方便. jQuery Mobile 的表单组件有以下几种: (1)文本输入框, type="text" 标记的 input 元素会

  • 让jQuery Mobile不显示讨厌loading界面的方法

    jQuery Mobile 的一个BUG: 当不采用 ajax 以及 他自己的 back 返回的时候,即: 点击浏览器后退按钮时,将会从缓存之中加载页面,此时,讨厌的 loading 动画出来了,而且一直不消失. 网上找了好多解决方法,搜索了好久都没有好用的,今天突然想起来个釜底抽薪,直接动jqeury-mobile 的类库. 用编辑器打开, 找到显示pageLoading的方法, showPageLoadingMsg 的定义处: 然后加上一句代码,if("".length<5)

  • jquery mobile实现拨打电话功能的几种方法

    如果需要在移动浏览器中实现拨打电话,发送email,调用sns等功能,jquery mobile提供的接口是一个好办法. 采用url链接的方式,实现在safari ios,android 浏览器,webos 浏览器,塞班浏览器,ie,operamini等主流浏览器,进行拨打电话功能. 1.最常用的方式: 复制代码 代码如下: <a href="tel:+120">报警!</a> 在拨号界面,显示号码,并提示拨打. 支持大部分的浏览器,但是在qq浏览器上支持不好.

  • jQueryMobile之Helloworld与页面切换的方法

    jQueryMobile之Helloworld与页面切换的方法

    本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持全球主流的移动平台.就是能够迅速能把页面写成APP的界面,让用户浏览网页,相当于在使用布局好的app一样. 首先要在jQueryMobile(点击此处本站下载)下载一个压缩包,然后把这个压缩包的所有内

  • jQuery Mobile的loading对话框显示/隐藏方法分享

    显示loading对话框方法是: 复制代码 代码如下: $.mobile.showPageLoadingMsg(); 也可设置参数 复制代码 代码如下: $.mobile.showPageLoadingMsg("b","加载中",false); 隐藏loading对话框方法是: 复制代码 代码如下: $.mobile.hidePageLoadingMsg();

  • 使用jQueryMobile实现滑动翻页效果的方法

    使用jQueryMobile实现滑动翻页效果的方法

    本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: 滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇[jQuery手机浏览器中拖拽动作的艰难性分析]中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢

  • jquery-mobile基础属性与用法详解

    本文实例讲述了jquery-mobile基础属性与用法.分享给大家供大家参考,具体如下: 写在前面 本文是根据w3c 学习轨迹,自己研习过程中记录下的笔记,只供自己学习轨迹记录之用,不喜勿喷. 0. 引入库 引入对应的文件: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="

  • 使用jquery mobile做幻灯播放效果实现步骤

    使用jquery mobile,可以很容易实现幻灯播放效果,下面讲解下. 1.引入相关的jqury mobile类库 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" />

  • jquerymobile局部渲染的各种刷新方法小结

    在JQueryMobile页面在第一次初始化进行一次整体渲染,动态生成的需要局部渲染. 在jquerymobile实现listview局部渲染的方法: 复制代码 代码如下: function queryPublishOrderList(trackOrDealOrInsp,userCode,type,pageNum){      var queryPublishOrderListURL="http://xxx.xxx.xxx.xxx/Myapp/WorkOrderSelByTypeService.

  • jquery-mobile表单的创建方法详解

    本文实例讲述了jquery-mobile表单的创建方法.分享给大家供大家参考,具体如下: 一.注意事项 1. <form> 元素必须设置 method 和 action 属性 2. 每个表单元素必须设置唯一的 "id" 属性. 该 id 在站点的页面中必须是唯一的. 这是因为 jQuery Mobile 的单页面导航模型允许许多不同的"页面"同时呈现. 3. 每个表单元素必须有一个标记(label). 请设置 label 的 for 属性来匹配元素的 i

  • jQuery Mobile弹出窗、弹出层知识汇总

    先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" data-overlay-theme="b" data-position-to="window" data-dismissible="false"> <a href='javascript:void(0)' data-rel="ba

  • jquery mobile页面跳转后样式丢失js失效的解决方法

    用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 方法: 将当前页面b.html需要用到的css以及js放在<page>div内. 原理: 由于jqm的ajax跳转的时候,只会把b.html中<page>内的内容加载进dom,而<page>外的代码都不会加载,所以导致在<page>外的js和css都失效了.

随机推荐