1、点击 隐藏/显示 元素

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" type="text/css" href="css/demos.css" />

		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			/*文档结构加载完成后,给2个按钮添加单击事件处理函数。*/

			$(document).ready(function() {

				$('#id-button-show').click(function() {

					$('h3').show();

				});

				$('#id-button-hide').click(function() {

					$('h3').hide();

				})

			});

		</script>

	</head>

	<body>

		<button type="button" id="id-button-show">显示</button>

		<button type="button" id="id-button-hide">隐藏</button>

		<hr />

		<h3>这里是要操作的内容。</h3>

	</body>

</html>

视图：

引用文件：

http://files.cnblogs.com/files/wanghaibin/demos.css 
http://files.cnblogs.com/files/wanghaibin/jquery-1.9.1.js

2、点击 隐藏/显示 元素（2）

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" type="text/css" href="css/demos.css" />

		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			$(document).ready(function() {

				$('#id-button-showhide').click(function() {

					$('h3').toggle();

				});

			});

		</script>

	</head>

	<body>

		<button type="button" id="id-button-showhide">显示/隐藏</button>

		<hr />

		<h3>这里是要操作的内容。</h3>

	</body>

</html>

视图：

jQuery实用Demo的更多相关文章

  1. JQuery AJAX Demo

    JQuery AJAX Demo APP发展集团:347072638(HTML5,APP) 1.先看一个JQuery AJAX Demo HTML端: <!DOCTYPE html PUBLIC ...

  2. jQuery实用工具集

    插件描述:jQuery实用工具集,该插件封装了常用功能,如序列化表单值获取地址栏参数window对象操作等 此工具集包含判断浏览器,判断浏览终端,获取地址栏参数,获取随机数,数据校验等常用操作功能 引 ...

  3. jquery mobile demo

    <!DOCTYPE html> <html> <head> <title>jQuery Mobile Demo</title> <me ...

  4. JQuery编程demo练习

    JQuery练习demo:     编敲代码,实现:     1.选中当中一列的复选框时,该复选框所在行的背景色高亮显示(黄色). 2.取消选中复选框时,所在行的背景色恢复. ============ ...

  5. jquery选择器demo

    大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  6. jQuery实用的语法总结

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...

  7. jquery Deferred demo

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JQuery实用技巧--学会你也是大神(1)——插件的制作技巧

      前  言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...

  9. JQuery实用技巧

    1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom ...

随机推荐

  1. (spfa) Highway Project (zoj 3946 )

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5718   Highway Project Time Limit: 2 Seco ...

  2. CentOS 5.5 防火墙开启、关闭以及开放指定端口

    之前有讲过公司新买的服务器使用的是CentOS5.5, 部署好Tomcat之后却发现输入114.80.*.*:8080(即ip:8080)却无法显示Tomcat默认的首页. 因为以前部署在Win Se ...

  3. noip第7课资料

  4. tomcat配置之后，localhost：8080访问不到猫界面解决办法

  5. python 的 字节码 导入使用

    1. python 模块文件可以通过编译为字节码的形式: 名字:model.py x = def funt(): import model print(model.x) x = "zhang ...

  6. 如何更好地使用Java 8的Optional

    Java 8中的Optional<T> 是一个可以包含或不可以包含非空值的容器对象,在 Stream API中很多地方也都使用到了Optional. java中非常讨厌的一点就是nullp ...

  7. 区间DP石子合并问题 & 四边形不等式优化

    入门区间DP,第一个问题就是线性的规模小的石子合并问题 dp数组的含义是第i堆到第j堆进行合并的最优值 就是说dp[i][j]可以由dp[i][k]和dp[k+1][j]转移过来 状态转移方程 dp[ ...

  8. .NET 证书加密 存储保存 IIS授权

    最近接到一个任务,加密DotNet项目的配置文件.配置文件里需要加密的地方一共有两块,一个是数据库连接字符串,一个是自定义的所有AppSettings. 一开始接到这个任务我是拒绝的,因为压根不知道怎 ...

  9. 【转】AngularJs HTTP请求响应拦截器

    任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...

  10. SpringBoot使用ModelAndView时配置视图解析器

    spring boot 使用视图modelandview 原文:https://www.cnblogs.com/liyafei/p/7955943.html 1:springboot使用视图解析器,添 ...