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. 图解Eclipse中配置Maven并创建Maven的Web工程

      打开eclipse,Windows->Preferences,如下图所示: 2 在Preferences作如下配置,如下图所示: 3 配置完Maven的安装目录后,还需要配置Maven的配置 ...

  2. 主题模型之潜在语义分析（Latent Semantic Analysis）

    主题模型(Topic Models)是一套试图在大量文档中发现潜在主题结构的机器学习模型,主题模型通过分析文本中的词来发现文档中的主题.主题之间的联系方式和主题的发展.通过主题模型可以使我们组织和总结 ...

  3. hdu 4925 黑白格

    http://acm.hdu.edu.cn/showproblem.php?pid=4925 给定一个N*M的网格,对于每个格子可以选择种树和施肥,默认一个苹果树收获1个苹果,在一个位置施肥的话,周围 ...

  4. PHP内存溢出Allowed memory size of 解决办法

    PHP内存溢出Allowed memory size of 解决办法 博客分类: php   ============================Allowed memory size of  x ...

  5. CentOS 7安装fail2ban+Firewalld防止SSH爆破与CC攻击

    准备工作 1.检查Firewalld是否启用 #如果您已经安装iptables建议先关闭 service iptables stop #查看Firewalld状态 firewall-cmd --sta ...

  6. 使用jQuery实现一个类似GridView的编辑，更新，取消和删除的功能

    先来看看下面实时效果演示: 用户点击编辑时,在点击行下动态产生一行.编辑铵钮变为disabled.新产生的一行有更新和取消的铵钮,点击“取消”铵钮,删除刚刚动态产生的行.编辑铵钮状态恢复. 更新与删除 ...

  7. iis支持asp.net4.0的注册命令使用方法

    32位的Windows: 1. 运行->cmd 2. cd C:\Windows\Microsoft.NET\Framework\v4.0.30319 3. aspnet_regiis.exe ...

  8. “全栈2019”Java多线程第二十九章：可重入锁与不可重入锁详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  9. [BZOJ2738]矩阵乘法（整体二分+二维树状数组）

    整体二分+二维树状数组. 好题啊!写了一个来小时. 一看这道题,主席树不会搞,只能用离线的做法了. 整体二分真是个好东西,啥都可以搞,尤其是区间第 \(k\) 大这种东西. 我们二分答案,然后用二维树 ...

  10. jzoj4223

    考慮這樣一種暴力:將所有<=x的邊按照類似最小生成樹的方式加入答案,然後用下面的方法統計答案: 1.首先加入一條邊 2.看這條邊是否將會合成聯通塊,如果會,那麼加進這條邊,記這條邊一端聯通塊大小 ...