怎么用jquery在页面上动态创建一个button按钮

需要准备的材料分别有：电脑、html编辑器、浏览器。

专注于为中小企业提供成都网站设计、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业陵川免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的script标签，输入jquery代码：

$('body').append('input type="button" value="确定"');

3、浏览器运行index.html页面，此时成功通过jquery动态创建了一个确定按钮。

怎么用jquery在页面上动态创建一个button按钮？

创建按钮 data-role=button

给HTML元素添加 data-role="button" 属性。jQuery Moble就会给此元素增强为按钮样式。 Jquery

Mobile框架包含了一组最常用的移动应用程序所需的图标，为了减少下载的大小，Jquery

Mobile包含的是的白色的图标sprite图片，并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。

样式链接按钮

在一个网页的主要内容块，你可以样式的任何锚链接为按钮添加 data-role="button"

属性。该框架将加强与标记和类的链接方式链接按钮。例如，这个标记：

图标样式列表

jQuery Mobile 自带很多按钮小图标，如下图所示：

左箭头：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"

前进：data-icon="Forward"

后退：data-icon="Back"

网格：data-icon="Grid"

五角：data-icon="Star"

警告：data-icon="Alert"

信息：data-icon="info"

首页：data-icon="home"

默认情况下，所有的图标都放在按钮的按钮文本左。此默认可以覆盖使用 data-iconpos

属性来设置图标的右上方（top）、底部（bottom）、右侧（right）、左侧（left）的文本。例如，标记：

隐藏图片上的文字 data-iconpos="notext"

你也可以创建一个图标按钮，设置

data-iconpos="notext"。按钮插件将隐藏的文字在屏幕上，但把它作为给屏幕阅读器和设备支持工具提示上下文链接标题属性。例如，data-iconpos="right"，data-iconpos="notext"：

使用自定义图标，需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类，它的前缀是ui-icon-

，后面的是data-icon值。假如：有一个按钮 data-icon 属性的值为 myapp-email，即 data-icon=“

myapp-email”。那么生产的CSS类是：ui-icon-myapp-email。

然后你可以在你的样式表写一个CSS规则来定义

ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性，请创建一个白色18x18像素的PNG-8图标，并且保存为Alpha透明度。

这将创建标准分辨率的图标，但许多设备都有非常高的分辨率的显示器，就像iPhone

4的视网膜显示器。添加一个高清图标，创建一个图标，36X36像素（18像素大小完全相同的两倍），并添加第二个规则使用WebKit分钟装置像素比例：2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18x18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则：

jquery 动态创建元素的方式介绍及应用

一般动态创建元素可以通过两种方式

1、Dom

HTml

复制代码

代码如下:

var

select

=

document.createElement("select");

select.options[0]

=

new

Option("加载项1",

"value1");

select.options[1]

=

new

Option("加载项2",

"value2");

select.size

=

"2";

testDiv.appendChild(select);

});

通过document的createElement方法创建，然后通过appendChild方法添加到指定的对象中即可

2、JQuery函数创建

$("div

style=\"border:solid

1px

#FF0000\"动态创建的div/div")

通过append，appendto，prepend，prependto等方法添加到指定的对象中，具体可以查看

3、页面加载的时候最好在页面加载完后执行创建

可以使用window.onload,但是在添加新的元素,

但是不幸的是浏览器执行window.onload函数不仅仅是在构建完DOM树之后,

也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后.

所以如果某个图片或者其他资源加载很长时间,

访问者就会看到一个不完整的页面,

甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.

解决办法就是等DOM被解析后,

在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行

复制代码

代码如下:

$(document).ready(

function()

{

testDiv.innerHTML

=

"div

style=\"border:solid

1px

#FF0000\"使用动态创建的$(document).ready(function)方法/div";

}

);

或者使用简便语法:

复制代码

代码如下:

//jQuery

使用$(function)方法

$(

function()

{

testDiv.innerHTML

+=

"div

style=\"border:solid

1px

#FF0000\"使用$(function)方法/div";

}

);

使用$()将我们的函数包装起来即可.

而且可以在一个页面绑定多个函数,

如果使用传统的window.onload则只能调用一个函数.

所以请大家将修改DOM的函数使用此方法调用.

另外还要注意document.createElement和innerHTML的区别.

如果可以请尽量使用document.createElement和$("div/")的形式创建对象.

如何使用jquery动态创建一个select控件

jquery文档操作的append()或 appendTo()方法可以在被选元素的结尾插入内容，因此可用于动态创建select控件

$("div").append("select/select");          // 在已经存在的div标签下创建select元素

$("option/option").appendTo($("select"));  // 为select元素添加option选项

实例演示：动态创建一个含有两个选项——“黑”“白”的select控件，并默认选中“白”这个选项

示例代码如下

创建Html元素

div class="box"

span点击按钮后创建select标签，并默认选中“白”这个选项：/spanbr

div class="content"/div

input type="button" value="创建select标签"

/div

设置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() {

// 创建select

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

// 添加选项

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

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

// 设置默认选项

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

})

})

观察效果

初始状态

点击按钮创建select控件之后

网站栏目：jquery动态创,jquery动态创建的文本框怎么添加事件
本文来源：http://hbruida.cn/article/phcsss.html