请教,怎么用jquery或js给button显示文本改变呢
[问题点数：5分，结帖人Srawo]
请教,怎么用jquery或js给button显示文本改变呢
[问题点数：5分，结帖人Srawo]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2009年12月 Web 开发大版内专家分月排行榜第二
2009年10月 Web 开发大版内专家分月排行榜第三
2009年12月 Web 开发大版内专家分月排行榜第二
2009年10月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。jQuery UI 教程
jQuery UI API - 按钮部件（Button Widget）
描述：可主题化的按钮和按钮集合。
版本新增：1.8
按钮部件（Button Widget）加强了标准表单元素的功能，比如按钮（button）、输入（input）、锚（anchor），用适当的悬停（hover）和激活（active）样式来主题化按钮。
除了基本的按钮，单选按钮和复选框（input 类型为 radio 和 checkbox）也可以转换为按钮。相关的标签（label）设计成按钮的样式，点击时更新底层的输入。为了能正常工作，需要给 input 一个 id 属性，并指向标签（label）的 for 属性。不要把 input 放在标签（label）内，否则会。
为了分组单选按钮，Button 也提供了一个额外的小部件，名为 Buttonset。Buttonset 通过选择一个容器元素（包含单选按钮）并调用 .buttonset() 来使用。Buttonset 也提供了可视化分组，因此当有一组按钮时都可考虑使用它。它会选择所有的后代，并对它们应用 .button()。您可以启用和禁用一个按钮集，这将会启用和禁用所有包含的按钮。销毁按钮集会调用每个按钮的 destroy 方法。对于分组的单选按钮和复选框按钮，推荐使用带有 legend 的 fieldset 来提供一个可访问的分组标签。
当使用一个类型为 button、submit 或 reset 的 input 时，仅限于支持纯文本无图标标签。
按钮部件（Button Widget）使用
来定义它的外观和感观的样式。如果需要使用按钮指定的样式，则可以使用下面的 CSS class 名称：
ui-button：表示按钮的 DOM 元素。该元素会根据
选项添加下列 class 之一：ui-button-text-only、ui-button-icon-only、ui-button-icons-only、ui-button-text-icons。
ui-button-icon-primary：用于显示按钮主要图标的元素。只有当主要图标在
选项中提供时才呈现。
ui-button-text：在按钮的文本内容周围的容器。
ui-button-icon-secondary：用于显示按钮的次要图标。只有当次要图标在
选项中提供时才呈现。
ui-buttonset：Buttonset 的外层容器。
该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。
如果设置为 true，则禁用该 button。
代码实例：
初始化带有指定 disabled 选项的 button：
$( ".selector" ).button({ disabled: true });
在初始化后，获取或设置 disabled 选项：
var disabled = $( ".selector" ).button( "option", "disabled" );
$( ".selector" ).button( "option", "disabled", true );
要显示的图标，包括带有文本的图标和不带有文本的图标（查看
选项）。默认情况下 ，主图标显示在标签文本的左边，副图标显示在右边。显示位置可通过 CSS 进行控制。
primary 和 secondary 属性值必须是 ，例如，"ui-icon-gear"。如果只使用一个图标，则 icons: { primary: "ui-icon-locked" }。如果使用两个图标，则 icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }。
代码实例：
初始化带有指定 icons 选项的 button：
$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
在初始化后，获取或设置 disabled 选项：
var icons = $( ".selector" ).button( "option", "icons" );
$( ".selector" ).button( "option", "icons", { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } );
{ primary: null, secondary: null }
要显示在按钮中的文本。当未指定时（null），则使用元素的 HTML 内容，或者如果元素是一个 submit 或 reset 类型的 input 元素，则使用它的 value 属性，或者如果元素是一个 radio 或 checkbox 类型的 input 元素，则使用相关的 label 元素的 HTML 内容。
代码实例：
初始化带有指定 label 选项的 button：
$( ".selector" ).button({ label: "custom label" });
在初始化后，获取或设置 label 选项：
var label = $( ".selector" ).button( "option", "label" );
$( ".selector" ).button( "option", "label", "custom label" );
是否显示标签。当设置为 false 时，不显示文本，但是此时必须启用
选项，否则 text 选项将被忽略。
代码实例：
初始化带有指定 text 选项的 button：
$( ".selector" ).button({ text: false });
在初始化后，获取或设置 text 选项：
var text = $( ".selector" ).button( "option", "text" );
$( ".selector" ).button( "option", "text", false );
jQuery (plugin only)
完全移除 button 功能。这会把元素返回到它的预初始化状态。
该方法不接受任何参数。
代码实例：
调用 destroy 方法：
$( ".selector" ).button( "destroy" );
jQuery (plugin only)
禁用 button。
该方法不接受任何参数。
代码实例：
调用 disable 方法：
$( ".selector" ).button( "disable" );
jQuery (plugin only)
启用 button。
该方法不接受任何参数。
代码实例：
调用 enable 方法：
$( ".selector" ).button( "enable" );
option( optionName )
获取当前与指定的 optionName 关联的值。
optionName
类型：String
描述：要获取的选项的名称。
代码实例：
调用该方法：
var isDisabled = $( ".selector" ).button( "option", "disabled" );
PlainObject
获取一个包含键/值对的对象，键/值对表示当前 button 选项哈希。
该方法不接受任何参数。
代码实例：
调用该方法：
var options = $( ".selector" ).button( "option" );
option( optionName, value )
jQuery (plugin only)
设置与指定的 optionName 关联的 button 选项的值。
optionName
类型：String
描述：要设置的选项的名称。
类型：Object
描述：要为选项设置的值。
代码实例：
调用该方法：
$( ".selector" ).button( "option", "disabled", true );
option( options )
jQuery (plugin only)
为 button 设置一个或多个选项。
类型：Object
描述：要设置的 option-value 对。
代码实例：
调用该方法：
$( ".selector" ).button( "option", { disabled: true } );
jQuery (plugin only)
刷新按钮的视觉状态。用于在以编程方式改变原生元素的选中状态或禁用状态后更新按钮状态。
该方法不接受任何参数。
代码实例：
调用 refresh 方法：
$( ".selector" ).button( "refresh" );
返回一个包含 button 的 jQuery 对象。
该方法不接受任何参数。
代码实例：
调用 widget 方法：
var widget = $( ".selector" ).button( "widget" );
create( event, ui )
buttoncreate
当创建按钮 button 时触发。
类型：Event
类型：Object
注意：ui 对象是空的，这里包含它是为了与其他事件保持一致性。
代码实例：
初始化带有指定 create 回调的 button：
$( ".selector" ).button({
create: function( event, ui ) {}
绑定一个事件监听器到 buttoncreate 事件：
$( ".selector" ).on( "buttoncreate", function( event, ui ) {} );
一个简单的 jQuery UI 按钮（Button）。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&按钮部件（Button Widget）演示&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.10.2.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&button&按钮标签&/button&
$( "button" ).button();
一个简单的 jQuery UI 按钮集（Buttonset）。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&按钮部件（Button Widget）演示&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.10.2.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&fieldset&
&legend&最喜欢的 jQuery 项目&/legend&
&div id="radio"&
&input type="radio" id="sizzle" name="project"&
&label for="sizzle"&Sizzle&/label&
&input type="radio" id="qunit" name="project" checked="checked"&
&label for="qunit"&QUnit&/label&
&input type="radio" id="color" name="project"&
&label for="color"&Color&/label&
&/fieldset&
$( "#radio" ).buttonset();
关注微信下载离线手册jQuery Mobile修改button的内容
jQuery Mobile修改button的内容。
使用jQuery Mobile也有一段时间了，最近同事提出，他需要更改button的内容，但是修改不了。我也试着修改了几次，button的内容其实是更改了，但是页面并未刷新。在调试中使用了console.log()方法打印各种日志，再结合api文档，发现button方法可以进行刷新。
打印信息：
更新内容：$('#btn').val("如有疑问,请加QQ群：共同学习!").button("refresh");禁用按钮：$('#btn').attr('disabled',"");隐藏按钮：$('#btn').parent("div").css('display','none');设置按钮左侧为圆角：$('#btn').parent("div").addClass('ui-first-child');设置按钮右侧为圆角：$('#btn').parent("div").addClass('ui-last-child');如有疑问,请加QQ群：共同学习!用心创造滤镜
扫码下载App
汇聚2000万达人的兴趣社区下载即送20张免费照片冲印
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
一个爱笑,却总笑得傻傻的家伙
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(11091)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'jQuery UI插件之datepicker的自定义设置',
blogAbstract:'
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}收藏，24.6k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
RT，做Web开发经常能遇到需要给一个按钮绑定一个点击事件的情况。
例如HTML标签：
&button type="submit" id="foo"&Bar&/button&
第一种，如果使用jQuery绑定点击事件的一种做法是：
$("#foo").click(function(event) {
/* Act on the event */});
第二种，纯js的做法可以是这样：
document.getElementById('#foo').addEventListener('click', function() {
/* Act on the event */}, false);
第三种，我们也可以直接在button标签中使用onclick，例如：
&button id="foo" onclick="dosomething()"&Bar&/button&
同时在head或者单独的js文件中定义dosomething()
function dosomething(){/* Act on the event */}
请问从响应速度，后期维护等方面来看哪一种方法是best practice? 或者在什么情况下这几种方法最合适？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
HTML或原生js是单一对应绑定的，绑多了只留最后一个。jQuery是追加绑定的，绑多少执行多少。这个在每一本jQuery的书中都是首先提到的事情。
在单一绑定的条件下，由于jQuery底层其实也是js实现，所以速度区别并不大。至少“绑定”这个环节并不会成为速度的瓶颈。
总有人认为jQuery只是一堆无用的语法糖……但事实上，按照二八规律，至少80%以上的程序员，在做负载等要求不那么严格的“小程序”。所以从维护的角度上，我建议用jQuery绑定，简单清楚，最容易维护。
原生js，这是真正的熟练者的工具，如果能写明白那可能更不错。
唯一不能容忍的是HTML中用onclick事件混杂js。这样做的结果就是html前端和js前端的工作混在了一起，难以分离工作任务，进而难以维护，“项目毁于各部门的扯皮和推诿之中”。这种做法临时调试可以，但如果正式成品中大范围出现，那么html和js部分的责任人都必须检讨。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
第一种和第二种的效果是一样，可以附加多个事件处理函数，并不是只有使用jquery才能做到。
第三种方法不推荐使用，原则上HTML代码只能体现网页的结构，具体的行为应该使用javascript代码进行绑定。
除非页面上绑定事件的元素超过上万个，否则响应速度的时候就不必纠结了，只做个事件绑定还是很快的。我测试了一下，使用addEventListener绑定3000次，耗时3-4毫秒。
如果项目中统一使用jQuery的话，建议使用第一种做法，顺便还解决了IE的不兼容问题。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
前者绑定的事件是复写的方式，后者（jQuery）是添加的方式，也就是说如果用jQuery给同一个按钮绑定两次点击事件，那么这两个事件都会被触发执行，而如果是原生js绑定的事件，则后面的会覆盖前面的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
只知道$('#aa')返回一个包含符合条件的dom的数组，click() 可以为数组中的多个元素绑定click事件，但是html里边的onclick只能给一个dom元素绑定click事件，具体单个情况下谁快不清楚。
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
举报理由：
推广（招聘、广告、SEO 等）方面的内容
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
不友善内容
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：
扫扫下载 App
SegmentFault
一起探索更多未知