在移动互联网时代,HTML5开发越来越收到欢迎。

于是各种HTML5的框架都出来了。因为对于jquery的熟悉，jquery mobile 为多数人选择学习的对象。我也是众多追求者之中的一个。近期一直在开发jQuery Mobile的相关应用。

并颇有心得。再这里和大家一起分享一下。

好了，我们之间上代码： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>如有不懂。请加qq群：135430763，共同学习！

</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

  </head>

  <body>

    <div data-role="page" id="page" data-theme="b">

		<div data-role="header" data-position="fixed" data-theme="b">

			<h1>

				如有不懂，请加qq群：135430763。共同学习！

</h1>

			<a href="javascript:location.reload();" data-role="button" class="ui-btn-right" data-icon="refresh">刷新</a>

		</div>

		<div data-role="content">

			<p>

				点击button2。隐藏button1。而且将button2改为圆角

			</p><p>

				点击button3。显示button1，而且将button2改为非圆角

			</p>

			<p>

				如有不懂，请加qq群：135430763。共同学习！

</p>

			<p>

				如有不懂，请加qq群：135430763，共同学习。

			</p>

			<p>

				如有不懂。请加qq群：135430763，共同学习！

			</p>

			<p>

				如有不懂，请加qq群：135430763，共同学习！

</p>

			<div data-role="controlgroup" data-type="horizontal">

				<input type="button" value="我是button1" data-inline="true" id="btn1">

				<input type="button" value="我是button2" data-inline="true" id="btn2">

				<input type="button" value="我是button3" data-inline="true" id="btn3">

			</div>

			<p>

				点击button5，隐藏button4。而且将button5改为圆角

			</p>

			<p>

				点击button6，显示button4，而且将button5改为非圆角

			</p>

			<div data-role="controlgroup" data-type="horizontal">

				<a href="#" data-role="button" id="a4">我是button4</a>

				<a href="#" data-role="button" id="a5" onclick="hideA();return false;">我是button5</a>

				<a href="#" data-role="button" id="a6" onclick="showA();return false;">我是button6</a>

			</div>

		</div>

		<div data-role="footer" data-position="fixed" data-theme="b">

			<span style="height: 40px; line-height: 40px; text-align: center; display: block; font-size: 9px;">如有不懂，请加qq群：135430763，共同学习！</span>

		</div>

	</div>

	<script type="text/javascript">

		//给button2绑定click事件

		$('#btn2').unbind().bind('click',function(){

			//隐藏button1

			$('#btn1').parent("div").css('display','none');

			//给button2加入样式，使button2变成圆角

			$('#btn2').parent("div").addClass('ui-first-child');

		});

	    //给button3绑定click事件

		$('#btn3').unbind().bind('click',function(){

			//隐藏button1

			$('#btn1').parent("div").css('display','');

			//给button2减去ui-first-child样式

			$('#btn2').parent("div").removeClass('ui-first-child');

		});

		//a5标签的onclick事件

		function hideA(){

			$('#a4').css('display','none');

			//给a5标签加入样式，使a5标签变成圆角

			$('#a5').addClass('ui-first-child');

		}

		//a6标签的onclick事件

		function showA(){

			$('#a4').css('display','');

			//给a5标签删除样式，使a5标签变成非圆角

			$('#a5').removeClass('ui-first-child');

		}

	</script>

  </body>

</html>

在看看执行效果：

更具体的学习资料，请点击下载：http://download.csdn.net/download/xmt1139057136/7447463

欢迎大家关注我的个人博客，如有不懂，请加qq群：135430763进行共同学习！

jQuery Mobile(jqm)button的隐藏和显示,包含a标签,圆角和非圆角button的更多相关文章

  1. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  2. jquery动画（控制动画隐藏、显示时间轴）

    <!DOCTYPE html><html> <head>    <meta http-equiv="Content-type" conte ...

  3. jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等（二）

    Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar ...

  4. jQuery关于复制（复制隐藏文字+显示文字）跳转，Clipboard

    html: (直接上扎实的数据,框子自己搭建) <script type="text/javascript" src="../../js/jquery.min.js ...

  5. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  6. jquery的隐藏与显示

    ###显示与隐藏,通过用hide()和show()函数来实现 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback ...

  7. jquery mobile将页面内容当成弹框进行显示

    注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...

  8. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  9. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

随机推荐

  1. 小P寻宝记——好基友一起走

    小P寻宝记--好基友一起走 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 话说.上次小P到伊利哇呀国旅行得到了一批宝藏.他是 ...

  2. GO语言UDP小笔记

    <pre style="margin-top: 0px; margin-bottom: 0px;"><span style=" color:#0000f ...

  3. nyoj-647-奋斗小蜗牛在请客（进制转换）

    奋斗小蜗牛在请客 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 一路艰辛一路收获.成功爬过金字塔的小蜗牛别提多高兴了.这不为了向以前帮助他的哥们们表达谢意,蜗牛宴请 ...

  4. 【Python】python网络协议

    套接字是常见的低级别的网络通讯协议,在此基础上,还有很多其他的网络通讯协议.用于实现client-server的网络互联,以下对这些协议做一个简单的介绍. 1.文件传输 FTP:文件传输协议.能够上传 ...

  5. 广东工业大学2016校赛决赛－网络赛 1169 Problem A: Krito的讨伐 优先队列

    Problem A: Krito的讨伐 Description Krito终于干掉了99层的boss,来到了第100层.第100层可以表示成一颗树,这棵树有n个节点(编号从0到n-1),树上每一个节点 ...

  6. P1233 木棍加工

    P1233 木棍加工 题目描述 一堆木头棍子共有n根,每根棍子的长度和宽度都是已知的.棍子可以被一台机器一个接一个地加工.机器处理一根棍子之前需要准备时间.准备时间是这样定义的: 第一根棍子的准备时间 ...

  7. JavaScript：让你彻底弄清offset

    ylbtech-JavaScript:让你彻底弄清offset 1.返回顶部 1. 很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张 ...

  8. centos 出现的问题

    1.DNS问题,导致yum没得源 echo "nameserver 8.8.8.8">>/etc/resolv.conf 2.CentOS 7最小化安装后找不到‘ifc ...

  9. 获取sqlserver数据字典的完整sql

    SELECTsysobjects.name AS 表名称 , --------------as 的作用:为字段起一个别名 --sysproperties.[value] AS 表说明 , ------ ...

  10. Linux目录结构(一)

    linux文件系统的最顶端是/,称为linux的root,所有的目录.文件.设备都在/之下. 文件类型 linux有四种基本文件系统类型:普通文件.目录文件.连续文件和特殊文件.可以用file命令来识 ...