jQuery事件-div的显示隐藏及鼠标的移入移出
<!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的显示隐藏及鼠标的移入移出的更多相关文章
- jquery判断div是否显示或者隐藏
jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...
- jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏
<!doctype html><html> <head> <meta charset="utf-8"> <title>j ...
- 实现对div的显示隐藏
jQuery对div的显示和隐藏: 显示: 复制代码 代码如下:$("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() j ...
- js进阶 13-1 jquery动画中的显示隐藏函数有哪些
js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...
- jQuery插件,判断鼠标的移入移出方向
今天用jQuery封装了一个简单的插件,判断鼠标的移入移出方向,以后的项目中可能还会遇到这样一个简单的效果,就记录下来吧! 先看结构和样式: <!DOCTYPE html> <htm ...
- [转]JQuery控制div外点击隐藏，div内点击不会隐藏
一直弄清楚这个效果如何实现,看了这篇博客的几行代码原来如此简单,就是利用了事件冒泡而已. 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: $(& ...
- div的显示隐藏方法汇总
JQuery DIV 动态隐藏和显示的方法 1. 如果在载入是隐藏: <head> <script language="javascript"> funct ...
- jQuery网页右侧固定层显示隐藏在线qq客服代码
CSS代码: @charset "utf-8"; ;;} html,body{font-size:12px;font-family:"微软雅黑";outline ...
- jQuery控制TR的显示隐藏
网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: <table> <tr><td ...
随机推荐
- usb摄像头的检测
下面写一下过程: 如果你能在http://www.ideasonboard.org/uvc/找到你的摄像头的ID,即UVC支持的,那么就可以在linux下使用了.至于从哪个版本开始内核支持UVC,官方 ...
- tiny6410移植opencv
1．错误1, 解决办法:取消一下两个选项: 2．错误2, 解决办法: 原因是找不到pthread链接库,打开文件夹下的CmakeCache.txt进行修改 3．错误3, 解决办法:
- Java类的设计----访问控制
访问控制 可以对Java类中定义的属性和方法进行访问控制----规定不同的保护等级: public.protected.default.private //仅在类的内部可以访问. private St ...
- 有人问thinkphp的标签解析的时候为什么出现标签内内容空格丢失
举例如下 该代码被解析后 变为 并不是 active li bg 这里面的空格没有了 我试了多次,确实是这样,后来想了想 应该是框架解析的时候自动处理了,然后找了找框架代码 Template.cl ...
- 判断app是否是第一次启动
如何判断app是否是第一启动呢,第一次启动的时候,加载引导页面等, 一下是我的解决方案: 1.在"AppDelegate.h"中找到- (BOOL)application:(UIA ...
- python2.0_day18_django_admin
Django admin的个性化定制首先我们看下,前面章节中定义的models在admin后台管理界面的样子: 然后我们看下老男孩教育点名平台的admin管理表的后台界面样子: admin管理后台常用 ...
- 谷歌Volley网络框架讲解——第一篇
自从公司新招了几个android工程师后,我清闲了些许.于是就可以有时间写写博客,研究一些没来的研究的东西. 今年的谷歌IO大会上,谷歌推出了自己的网络框架——Volley.不久前就听说了但是没有cl ...
- 学习Ruby你需要了解的相关知识（rvm, gem, bundle, rake, rails等）
这篇文章主要介绍了学习Ruby你需要了解的相关知识(rvm, gem, bundle, rake, rails等),需要的朋友可以参考下 Ruby 这个就不用多说了 RVM 用于帮你安装Rub ...
- Deploying Cloud Foundry on OpenStack Juno and XenServer (Part II)
link http://rabbitstack.github.io/deploying-cloud-foundry-on-openstack-juno-and-xenserver-part-ii/ L ...
- LeetCode——Move Zeroes
Description: Given an array nums, write a function to move all 0's to the end of it while maintainin ...