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. Mac 下netstat和linux下不一样

    Linux's netstat command options and OS X(/BSD)'s have almost nothing to do with each other. Of the o ...

  2. NSString copy && strong

    http://www.cocoachina.com/ios/20150512/11805.html 我们在声明一个NSString属性时,对于其内存相关特性,通常有两种选择(基于ARC环境):stro ...

  3. 《mysql必知必会》学习_第四章_20180724_欢

    P27: select prod_name from products; # select 列 from 表 # 从表products 中检索 名为 prod_name 的列 P28 多个语句一起必须 ...

  4. js加减运算·传参

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  5. cxgrid显示海量数据

    cxgrid显示海量数据 在默认情况下,cxgrid显示几万条以上的数据会很慢.怎么办? 交下面的属性设为TRUE以后,速度飞快. 但速度是快了,自动计算列的合计值这些功能却失效了,正所谓有得必有失!

  6. openstack手动安装

    安装文档: https://github.com/yongluo2013/osf-openstack-training/blob/master/installation/openstack-iceho ...

  7. C#实现枚举的相关操作

    枚举中的Descript()描述值,以及枚举值是一种一一对应的关系.我们可以获取其描述值和枚举值,存放到字典中, 在实际的使用中我们就可以轻松的根据枚举值来获取其描述值,也可以通过枚举的描述值来获取其 ...

  8. .NET MVC 学习笔记（二）— Bootstrap框架

    二..NET MVC 学习笔记(一)—— Bootstrap框架 在实际开发过程中,页面的样式问题是让人很头疼的问题,良好的用户界面可以大大提高用户体检,而在你没有前端开发人员的火力支援情况下,并不是 ...

  9. js怎么样根据select的name取到值

    先看一下ASP.NET MVC的html: 在jQuery中,可以写:

  10. OCP新题，2019题库出现大量新题，062-第22题

    choose two Your database is running in ARCHIVELOG mode. You want to take a consistent whole database ...