`
axl234
  • 浏览: 268941 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery点击div之外的地方div本身消失

 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>

<body style="background:black;width:100%;height:100%;margin:0;padding:0">

    <div id="showdiv" style="background:white">click here to show a div.</div>

    <div id="test" style="background:white;width:150px;height:150px;">

        <ul>

   <li>list 1</li>

   <li>list 2</li>

        </ul>

 

</div>

</body>

<script type="text/javascript">

$(function() {

$("#test").click(function(e) {

e?e.stopPropagation():event.cancelBubble = true;

});

$(document).click(function() {

$("#test").fadeOut();

});

})

</script>

</html>

分享到:
评论

相关推荐

    jquery点击div层图片爆炸碎裂效果

    标题中的“jquery点击div层图片爆炸碎裂效果”是指一种基于jQuery实现的前端交互特效,当用户点击一个div元素(通常包含图片)时,图片会模拟出爆炸并碎裂的效果,给用户带来视觉冲击和互动体验。这个效果常用于游戏...

    JQuery-DIV弹窗

    当点击遮罩层或关闭按钮时,弹窗和遮罩层都会淡出消失。 这样的弹窗效果不仅提升了用户体验,还能确保用户专注于弹出的窗口内容,防止他们被其他页面元素分散注意力。在实际项目中,可以根据需求对弹窗的样式、内容...

    jquery监听DIV的事件

    本篇文章将深入探讨如何使用jQuery来监听一个DIV元素的事件,以便于我们在其状态变化时执行相应的代码。 首先,理解jQuery中的事件处理是非常重要的。jQuery提供了丰富的API来绑定和触发DOM元素上的事件。在jQuery...

    jQuery单击div更改背景颜色

    现在,我们编写jQuery代码来监听div的点击事件并改变其背景色。这可以在文档加载完成后执行,以确保jQuery库已经加载并准备好使用。我们可以在`&lt;script&gt;`标签内写入以下代码: ```javascript $(document).ready...

    jquery监听div内容的变化具体实现思路

    上述代码中,我们通过bind()方法为ID为laneconfigdisplay的div绑定了一个名为contentchanged的自定义事件,然后在适当的地方通过trigger()方法触发这个事件。但是这里contentchanged事件的具体实现并没有详细说明,...

    jquery div拖动排序效果代码.zip

    本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果,结合CSS样式,创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先,我们需要在HTML中设置好基础结构。创建一系列的div元素,每个div代表一个...

    jQuery Easing div切换效果的例子

    在本文中,我们将深入探讨jQuery Easing插件及其在实现div切换效果中的应用。jQuery Easing是一个非常实用的工具,它扩展了jQuery的核心动画功能,提供了丰富的缓动函数,使得过渡效果更加平滑、动态,为网页增添...

    jquery+div实现同时滑动切换的图文展示特效插件下载.rar

    3. **jQuery事件绑定**:使用jQuery的`.click()`或`.on('click')`方法监听用户触发的事件,如点击按钮或滑动指示器。 4. **动画效果**:在事件触发时,调用jQuery的`.animate()`方法,为当前显示的div添加滑出动画,...

    jQuery超强div固定位置布局特效插件

    **jQuery超强div固定位置布局特效插件** 在网页设计中,动态布局是提升用户体验的关键因素之一。这款基于jQuery的插件允许开发者实现div元素在页面滚动时保持在特定位置的效果,如固定侧边栏、顶部导航或者浮动按钮...

    jQuery拖动div元素标签

    本教程将深入探讨如何利用jQuery UI库中的Draggable功能来实现div元素的拖动,以及如何通过append方法动态添加元素。首先,我们需要了解jQuery UI库的基本用法。 **jQuery UI Draggable组件** jQuery UI的Draggable...

    用jQuery向div中添加Html文本内容的简单实现

    下面小编就为大家带来一篇用jQuery向div中添加Html文本内容的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    jQuery 局部div刷新和全局刷新方法总结

    接下来,我们将详细介绍如何使用jQuery进行局部div刷新和全局刷新。 局部div刷新主要指的是只刷新页面中某个特定的div元素区域。这在实现动态内容更新、表单提交、无刷新页面体验等方面有着重要的应用价值。jQuery...

    jquery模拟div多选checkbox下拉框

    1. **jQuery选择器和DOM操作**:在创建这个下拉框时,jQuery的选择器会用于选取特定的DOM元素,例如`&lt;div&gt;`和`&lt;input type="checkbox"&gt;`。同时,jQuery提供了丰富的DOM操作方法,如`.append()`用于添加元素,`....

    Jquery Sortable实现div拖动排序效果

    本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先,你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库,而 jQuery UI 提供了包括Sortable在内的多种...

    jQuery实现点击除了特定div的页面其它地方,隐藏该div功能。

    jQuery实现点击除了特定div的页面其它地方,隐藏该div功能。 在触发DOM上的某个事件的时候会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括产生事件的元素、事件类型等相关信息,思路一中div的...

    jquery实现div模块轮播切换

    本文将深入探讨如何使用 jQuery 来实现一个div模块的轮播切换效果,这种效果通常用于展示多个图片或内容块,使得用户可以在有限的页面空间内浏览更多的信息。 首先,我们需要在HTML中创建轮播的基础结构。这通常...

    jquery 滑动DIV

    本教程将详细讲解如何利用jQuery实现一个滑动DIV的效果,适用于图片轮播或移动端应用的界面交互。 首先,我们需要在HTML文件中创建一个包含待滑动内容的容器。这个容器可以是DIV元素,里面包含多张图片或其它内容。...

    jquery特效DIV层跟随页面向下滚动

    当用户滚动页面时,一个特定的div元素(通常包含重要的信息或导航)会固定在屏幕的一侧,保持可见,即使用户滚动页面也不会消失。这种效果常被称为“粘性头部”或“固定侧边栏”。 jQuery是一个轻量级的JavaScript...

    jquery_div.rar_div显示特效_jquery_div

    本教程将深入探讨如何利用jQuery实现层(div)的显示与隐藏特效,以创建更加动态和交互性的用户体验。 首先,我们需要理解HTML中的`&lt;div&gt;`元素。`&lt;div&gt;`是一个块级元素,常用于组织页面布局或作为内容的容器。通过...

    移动div(jquery)

    标题“移动div(jquery)”暗示我们将讨论如何使用jQuery来实现div元素的动态移动效果,这在创建交互式用户界面时非常常见。下面,我们将深入探讨这个主题,并结合“描述”中的“值得拥有”,来展示jQuery在处理div...

Global site tag (gtag.js) - Google Analytics