<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery事件-div的显示隐藏及鼠标的移入移出</title>

<style>

.header{

	width:302px;

	height:40px;

	background:green;

	font-size:20px;

	margin-bottom: 0px;

}

.content{

	width:300px;

	border:1px solid #333;

	background:#CCC;

	display: none;

	margin-top:0px;

}

</style>

</head>

<script type="text/javascript" src="jquery-1.11.1.js"></script>

<script type="text/javascript">

	$(function (){

		//显示隐藏

		$(".header").click(function (){

			var flag = $(".content").is(":hidden");

			if(flag){

				$(".content").show();

			}else{

				$(".content").hide();

			}

		});

		/*

		//使用bind的绑定事件,跟上上面的效果是一样的

		$(".header").bind("click", function (){

			var flag = $(".content").is(":hidden");

			if(flag){

				$(".content").show();

			}else{

				$(".content").hide();

			}

		});

		*/

		/*

		//鼠标的移入移出

		$(".header").mouseover(function (){

			$(".content").show();

		}).mouseout(function (){

			$(".content").hide();

		});

		*/

		/*

		//合成事件 hover()

		$(".header").hover(function (){

			$(".content").show();

		},function (){

			$(".content").hide();

		});

		*/

	});

</script>

<body>

	<h5 class="header" align="center">什么是jQuery？</h5>

	<div class="content">

		Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，

		它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），

		jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

		jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，

		并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，

		而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

		jQuery能够使用户的html页面保持代码和html内容分离，也就是说，

		不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

	</div>

</body>

</html>

jQuery事件-div的显示隐藏及鼠标的移入移出的更多相关文章

  1. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

  2. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  3. 实现对div的显示隐藏

    jQuery对div的显示和隐藏: 显示: 复制代码 代码如下:$("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() j ...

  4. js进阶 13-1 jquery动画中的显示隐藏函数有哪些

    js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...

  5. jQuery插件,判断鼠标的移入移出方向

    今天用jQuery封装了一个简单的插件,判断鼠标的移入移出方向,以后的项目中可能还会遇到这样一个简单的效果,就记录下来吧! 先看结构和样式: <!DOCTYPE html> <htm ...

  6. [转]JQuery控制div外点击隐藏，div内点击不会隐藏

    一直弄清楚这个效果如何实现,看了这篇博客的几行代码原来如此简单,就是利用了事件冒泡而已. 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: $(& ...

  7. div的显示隐藏方法汇总

    JQuery DIV 动态隐藏和显示的方法 1. 如果在载入是隐藏: <head> <script language="javascript"> funct ...

  8. jQuery网页右侧固定层显示隐藏在线qq客服代码

    CSS代码: @charset "utf-8"; ;;} html,body{font-size:12px;font-family:"微软雅黑";outline ...

  9. jQuery控制TR的显示隐藏

    网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: <table> <tr><td ...

随机推荐

  1. Android 中如何从一个App启动另外一个App（如启动支付界面、启动地图界面、应用商场下载App等场景）

    假定两个App,分别是A和B,当A运行某个功能需要启动B,一种是启动B应用,一种直接进入B的某个Activity.搜了很多资料,没有一个完整的.下面就A--Android5.1.1.B--Androi ...

  2. Kafka中Producer端封装自定义消息

    我们知道KeywordMessage就是被kafka发送和存储的对象.所以只需要模拟出这个就可以发送自定义消息了. 比如我需要将用户的id,user,age,address和访问ip和访问date记录 ...

  3. /etc/docker/key.json

    /etc/docker/key.json 描述信息: This is the dockerd key for TLS connections.in web format, that docker us ...

  4. C语言各种存储模式的区别?最常用的存储模式有哪些?

    DOS用一种段地址结构来编址计算机的内存,每一个物理内存位置都有一个可通过段地址一偏移量的方式来访问的相关地址.为了支持这种段地址结构,大多数C编译程序都允许你用以下6种存储模式来创建程序: ---- ...

  5. OnGlobalLayoutListener用法

    1.implements ViewTreeObserver.OnGlobalLayoutListener{} 2.mContentView.getViewTreeObserver().addOnGlo ...

  6. 《C++ Primer Plus》第13章 类继承 笔记

    类继承通过使用已有的类(基类)定义新的来(派生类),使得能够根据需要修改编程代码.共有继承建立is-a关系,这意味着派生类对象也应该是某种基类对象.作为is-a模型的一部分,派生类继承基类的数据称源和 ...

  7. 计算时间：一个C++运算符重载示例

    Time类是一个用于计算时间的类,其原型如下:程序清单11.1 mytime0.h // mytime0.h -- Time class before operator overloading #if ...

  8. PHP（Mysqli和PDO）预处理

    PHP预处理主要是用来防SQL注入的,开发程序的都明白这样一个道理,不能相信用户的任何输入,如果用户输入问题你没有做相应的安全, 那么:你的程序是很危险的,很容易被攻击的!预处理:只分析两个:mysq ...

  9. c++ 函数返回研究[转]

    一,c++函数的返回分为以下几种情况 1)主函数main的返回值:这里提及一点,返回0表示程序运行成功. 2)返回非引用类型:函数的返回值用于初始化在跳用函数出创建的临时对象.用函数返回值初始化临时对 ...

  10. 域渗透学习预备知识-IPC$的入侵防御

    一.什么是IPC$ 以下段落引文自:http://www.xfocus.net/articles/200303/493.html IPC$(Internet Process Connection)是共 ...