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. day09_雷神_模块二

    day09 序列化之json 之前我们学习过用eval内置方法可以将一个字符串转成python对象,不过,eval方法是有局限性的,对于普通的数据类型,json.loads和eval都能用,但遇到特殊 ...

  2. java并发的处理方式

    1 什么是并发问题. 多个进程或线程同时(或着说在同一段时间内)访问同一资源会产生并发问题. 银行两操作员同时操作同一账户就是典型的例子.比如A.B操作员同时读取一余额为1000元的账户,A操作员为该 ...

  3. 利用 TFLearn 快速搭建经典深度学习模型

      利用 TFLearn 快速搭建经典深度学习模型 使用 TensorFlow 一个最大的好处是可以用各种运算符(Ops)灵活构建计算图,同时可以支持自定义运算符(见本公众号早期文章<Tenso ...

  4. CentOS7下gitlab的搭建

    gitlab的搭建 安装基础包 yum -y install curl policycoreutils openssh-server openssh-clients 启动sshd systemctl ...

  5. Idea14 生成webservices

    一直为idea生成soap协议的webservices而纠结,当初做axis2的时候,用的是eclipse,用它的插件来生成.这次做短信平台,决定要换一下,因为eclipse用axis2生成的接口,会 ...

  6. 3.翻译：EF基础系列--EF怎么工作的？

    原文链接:http://www.entityframeworktutorial.net/basics/how-entity-framework-works.aspx 这里,你将会大概了解到EF是怎么工 ...

  7. Unity 环境区域网格化

    在使用A星算法和物体布局的过程中,常常会使用的网格的概念,即建立在网格的基础上,会使得游戏的相关编程变得简单的多. 格子的代码: using System.Collections; using Sys ...

  8. 获取webpart方法以及连接字符串记录

    在页面地址后面添加?contents=1就可以显示所有页面的webpart部件了 server=wtcsps05;database=Testing_DB;uid=sqluser;password=wt ...

  9. 关于css3中的flex

    参考几篇文章: Flex 布局语法教程 IE10中的Flexible Box("Flexbox")布局 “老”的Flexbox和“新”的Flexbox 一个可以练习的地方: NEW ...

  10. centos下配置nginx遇到的一些基本的坑

    作为一个用.net的渣渣,常年混迹在window平台下,对Linux啥都不懂.随着.net core开源.跨平台后,也开始学习下linux. 在Desktop/Webs下放了一个index.html的 ...