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

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

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

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

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

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

一、分页

分页的基本思想是根据datatable的页码及每页显示的行数，将数据从数据库分段提出，然后再填充到表格中，以达到分页的效果。

这里需要用到datatable插件的几个属性：

"sEcho"：这个属性需要原封不动地传回给datatable，具体的作用我也不清楚，但是根据它值的变化情况来看，好像是一个 *** 作次数的计数（之前我一直把它当做是pageindex来用，结果发现，不论我在datatable中是翻下一页还是翻上一页，它一直在增加。）

"iDisplayStart"：这个属性，根据字面意思理解，就是每段数据开始的行数，比如第一页的数据就是从0开始计，那么它就是0，每页显示的行数是10，那么第二页的第一行的iDisplayStart就是10。

"iDisplayLength"：这个属性就是每页显示的行数。

然后是数据库 *** 作，只需要从数据库查询其中一段数据，然后输出出来，转成JSON格式，让datatable插件获取。在网上可以找到很多分页的方法，选择了其中一种，使用row_number()的分页的存储过程。具体代码如下(根据sql创建存储过程模板）：

存储过程的两个参数，pageindex表示页索引即当前页码，不懂datatable有没有这项属性，所以是用计算的方法得来的，就是iDisplayStart/iDisplayLength+1。pagesize可以直接从datatable获得。

服务端的代码，我创建了一个datasource.ashx文件，代码如下：

DataTableToObjects类的代码如下：

需要注意的一点：iTotalRecords与iTotalDisplayRecords是两个不同的值，是改变分页栏显示用的参数，这里因为没有考虑数据过滤功能，所以都设置成数据的总的行数。

然后是客户端的代码，与之前的差不多：

因为测试，所以只提取了表中的三个字段，并且关闭了数据过滤及排序功能，其中，"bLengthChange"可以设置成true，因为服务端会获取datatable的iDisplayLenth参数，即使每页显示数变化，数据也可以正常获取。

这样就实现了jquery.datatable插件的服务端分页获取数据。

创建按钮 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像素的空间。传媒查询块可以用多个图标规则：

---