<!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. 打地鼠游戏iOS源代码项目

    打地鼠游戏源代码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源代码.这也是一款高质量的打地鼠游戏源代码.能够拥有逐步上升的关卡的设置,大家能够在关卡时设置一些商业化的模式来盈利的,很完美的 ...

  2. 第七篇：几个经典的TCP通信函数

    前言 在TCP通信中要使用到几个非常经典的函数,本文将对这几个函数进行一个简短的使用说明. socket()函数 函数作用:创建一个网际字节流套接字 包含头文件:sys/socket.h ( 后面几个 ...

  3. SuperSlide——再次接触

    原来自己很早之前就接触过SuperSlider这个神奇的插件,原谅自己又得了“健忘症”,因此昨天就把自己“坑”了一把: 前言: 交易一期的项目即将上线,在解决测试同事们提出的bug的时候,无意间看到页 ...

  4. vs2008设置dll、lib库的输出路径

    vs2008中,有些项目上的功能是要生产库文件给其他项目调用的,以下是一些设置库文件(x.dll和x.lib)输出路径的方法. 设置x.dll 输出路径方法是在右键项目的"属性"- ...

  5. nil、Nil、NULL与NSNull的区别及应用

      总结 nil:OC中的对象的空指针 Nil:OC中类的空指针 NULL:C类型的空指针 NSNull:数值类的空对象 详细解析应用如下: 1.nil 指向一个对象的指针为空 在objc.h中的定义 ...

  6. JS-对象查找父级

    之前在寻找两个以上的父级,一直傻傻的用parent().parent()... 今天,需要写五个,当然以前也是写过五个的,但是今天总想着换个简单的方式,至少不要.parent().parent().p ...

  7. poj_3987 Trie图

    题目大意 有N个病毒,病毒由A-Z字母构成,N个病毒各不相同.给出一段程序P,由A-Z字母构成,若病毒在在程序P或者P的逆转字符串P'中存在,则该程序P被该病毒感染.求出程序P被多少种病毒感染. 题目 ...

  8. SASS环境搭建及HBuilder中sass预编译配置

    ---------------------------------Ruby环境安装-------------------------------- 至于为什么要安装ruby环境请移步:https:// ...

  9. Ubuntu 如何更改用户密码

    你需要为第一个帐户创建一个密码.这可以用 passwd 命令来完成. 系统会提示输入你的旧密码一次,输入你的新密码两次.用 root 用户更改用户 paul 的密码[root@bigboy root] ...

  10. jquery.js与sea.js综合使用

    jquery.js与sea.js综合使用   目录 模块定义 define id dependencies factory exports require require.async require. ...