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. FatMouse's Speed （hdu 1160）

          #include <iostream> #include <cstdio> #include <cstring> #include <algori ...

  2. （动态规划）免费馅饼--hdu--1176

    http://acm.hdu.edu.cn/showproblem.php?pid=1176 免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  3. Java学习介绍

    Java版本介绍 JavaME:微型版,用于开发小型设备.智能卡.移动终端应用(使用率较低) JavaSE:标准版,用于创建桌面应用(企业用JavaSE创建桌面应用较少) JavaEE:企业版,用于创 ...

  4. 谷歌的java文本差异对比工具

    package com.huawei.common.transfertool.utils; /** * @author Paul * @version 0.1 * @date 2018/12/11 * ...

  5. ASP.NET Web API 异常处理 HttpResponseException 以及Angularjs获取异常信息并提示

    一.HttpResponseException 如果一个Web API控制器抛出一个未捕捉异常,默认地,大多数异常都会被转化成一个带有状态码“500 – 内部服务器错误”的HTTP响应.HttpRes ...

  6. [FMX]获取控件样式中的指定项目以便进行调节

    [FMX]获取控件样式中的指定项目以便进行调节 2017-03-26 • C++ Builder.Delphi.教程 • 暂无评论 • swish •浏览 650 次 FMX 的样式丰富了我们的设计, ...

  7. cxgrid回车移到下一个单元格

    cxgrid回车移到下一个单元格   cxgrid回车移到下一个单元格 作用:表格式录入全键盘操作. 设置cxgrid1Dbtableview1.optionsBehavior.goToNextCel ...

  8. 解决网页出现 net::ERR_ABORTED 404 (Not Found)问题

    1.在web.config配置文件中添加woff字体的MIME类型 在Web.config中的system.webServer节点添加 <staticContent> <remove ...

  9. 迁移桌面程序到MS Store（4）——桌面程序调用Win10 API

    上一篇我们讨论了如何在转制的桌面程序中,通过StartupTask来实现转制版本的开机自启动.实际操作中,我们通过编辑Packaging工程中的Package.appxmanifest文件,来添加自启 ...

  10. 【BZOJ3238】 [Ahoi2013]差异（SAM）

    传送门 BZOJ 洛谷 Solution SA版本的 考虑可以建一个SAM? 那么接下来我们就考虑每一对点对之间的贡献了. 把这个式子化简一下就是无序点对之间的那啥(自己意会一下) 然后我们定义边权为 ...