在移动互联网时代,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. sqlite学习笔记7：C语言中使用sqlite之打开数据库

    数据库的基本内容前面都已经说得差点儿相同了.接下看看如何在C语言中使用sqlite. 一 接口 sqlite3_open(const char *filename, sqlite3 **ppDb) 打 ...

  2. [iOS翻译]《iOS7 by Tutorials》在Xcode 5里使用单元測试（上）

    简单介绍: 单元測试是软件开发的一个重要方面.毕竟,单元測试能够帮你找到bug和崩溃原因,而程序崩溃是Apple在审查时拒绝app上架的首要原因. 单元測试不是万能的,但Apple把它作为开发工具包的 ...

  3. 转：centos下升级git版本的操作记录

    https://www.cnblogs.com/kevingrace/p/8252517.html 在使用git pull.git push.git clone的时候,或者在使用jenkins发版的时 ...

  4. Windows下Word.exe在哪?

    在这里: C:\Program Files\Microsoft Office\root\Office16

  5. TCP/IP协议族简介

    OSI网络分层介绍 网络结构的标准模型是OSI模型,由国际互联网标准化组织定义的网络分层模型.虽然目前没有完全按照这种模型实现的网络协议栈,但是学习这个模型对于我们理解网络协议还是很有帮助的. 1.O ...

  6. .NET平台开源JSON序列化

    转载: http://blog.csdn.net/ddgweb/article/details/39643747 一个简单示例: String str = "{’name’:’cyf’,’i ...

  7. VS头部自动注释

    1.找你的vs安装目录, 比如我的是在D盘D:\Program Files\Microsoft\VS2013\Common7\IDE 2.然后点击右上角的 搜索. 搜索Class.cs文件 3.把里面 ...

  8. （转）Django学习之 第一章：Django介绍

    Django: Python编程Web框架 如果你上djangoproject.com你会发现对Django的如下解释: “Django is a high-level Python Web fram ...

  9. Android开发中：小米2S DDMS 不显示

    参考:http://bbs.xiaomi.cn/thread-5672159-1-1.html

  10. 坑人的SQL Server检测数字类型的函数ISNUMERIC

    前几天,遇到一个十分棘手的问题,有同事提出在是字符类型的列中进行起止号计算,大体是这样的 新起号＝上一条止号+1 新止号＝新起号+数量 而在这一列的数据是这样的 库存 CN003?005007 000 ...