`

JQ 其它的点击事件用法

 
阅读更多

demo.html

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.over {
	color: red;
	background: #888;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("div").bind("mouseover mouseout", function(){
		$(this).toggleClass("over");
	});
})
</script>
</head>
<body>
<div style="width:100px;height:50px;">滑入.</div>
</body>
</html>

效果图:

 

demo2.html

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("div").bind("click.plugin",function(){
		$("body").append("<p>click事件</p>");
	});
	$("div").bind("mouseover.plugin", function(){
		$("body").append("<p>mouseover事件</p>");
	});
	$("div").bind("dblclick", function(){
		$("body").append("<p>dblclick事件</p>");
	});
	$("button").click(function() {
		$("div").unbind(".plugin");  
	})
})
</script>
</head>
<body>
<div style="width:100px;height:50px;background:#888;color:white;">test.</div>
<button >根据命名空间,删除事件</button>
</body>
</html>

效果图:

 

demo3.html

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("div").bind("click",function(){
		$("body").append("<p>click事件</p>");
	});
	$("div").bind("click.plugin", function(){
		$("body").append("<p>click.plugin事件</p>");
	});
	$("button").click(function() {
		//click! 是不执行点击事件
		$("div").trigger("click!"); // 注意click后面的感叹号
	});
})
</script>
</head>
<body>
<div style="width:100px;height:50px;background:#888;color:white;">test.</div>
<button >根据命名空间,触发事件</button>
</body>
</html>

效果图:

 

 

 

  • 大小: 21.9 KB
  • 大小: 30.4 KB
  • 大小: 28.4 KB
分享到:
评论

相关推荐

    asp.net弹出框Jq插件用法模板

    本文将详细介绍如何在ASP.NET环境中结合JQuery插件实现弹出框功能,并通过具体的例子——"asp.net弹出框Jq插件用法模板"进行讲解。 首先,我们需要引入JQuery库和相应的弹出框插件。常见的JQuery弹出框插件有jQuery...

    鼠标点击弹窗2_jq效果_

    使用`.show()`方法将隐藏的div显示出来,如果你想在点击其他地方时关闭弹窗,可以添加一个点击事件监听整个body,然后检查点击位置是否在弹窗内: ```javascript $(document).on('click', function(event) { if (!...

    JQ-Slide插件

    首先,我们来看JQ-Slide的基本用法。在HTML中,你需要设置一个包含多个图片或内容的容器,并为每个内容分配一个唯一的ID。例如: ```html &lt;div class="slide" id="slide1"&gt;Slide 1 Content ...

    JQ 点击查看图片可以切换.zip

    本项目"JQ 点击查看图片可以切换.zip"就是利用jQuery来实现一个简单的图片查看和切换功能,这对于提升用户体验,特别是对于展示产品图片或艺术作品的网站来说非常实用。以下是关于这个项目的详细知识点: 1. jQuery...

    JQ ScrollTo 的使用方法

    JQ ScrollTo的基本用法是调用jQuery对象的`.scrollTo()`方法。以下是一个简单的例子,滚动页面至ID为`targetElement`的元素: ```javascript $(document).ready(function() { $('html, body').scrollTo('#target...

    基于JQ动态的导航,导航

    同时,为了让其他导航项恢复原状,我们可以使用`.not()`选择器和`.animate()`配合,确保只有被点击的项执行特定动画。 此外,为了增强用户体验,我们可能还需要实现一些附加功能,比如高亮当前选中的导航项。这可以...

    jQ 展开收缩效果

    首先,我们需要了解jQuery的基本用法。jQuery通过选择器选中页面中的元素,然后对这些元素执行各种操作。例如,我们可能使用`$("#elementID")`来选取ID为`elementID`的元素,或者`$(".class")`来选取所有具有指定...

    jQuery实现点击替换图片.zip

    在点击事件的处理函数中,我们需要判断当前显示的是哪一张图片,并决定接下来展示哪一张。假设我们有一个数组存储了所有图片的URL,可以通过`index`参数获取当前图片的索引,然后根据索引来决定下一张图片: ```...

    jq图片预览功能.zip

    在图片预览的基础上,如果需要添加下载功能,可以创建一个隐藏的`&lt;a&gt;`元素,设置其`href`为Data URL,`download`属性设置为期望的文件名,然后触发点击事件来模拟下载。这样,用户就能在预览满意后,直接从浏览器...

    这是一款JQ旋转木马JQ轮播图插件

    【标题】: "JQ旋转木马JQ轮播图插件" 是一款基于JavaScript库jQuery的图片展示工具,主要用于创建动态、交互式的轮播效果。这种插件在网页设计中广泛使用,能够吸引用户的注意力并优雅地展示一系列图片或内容。 ...

    JQ 中部浮窗

    在IT行业中,JavaScript库jQuery(通常简称为JQ)是一个非常流行的选择,用于简化DOM操作、事件处理和动画效果。"JQ中部浮窗"这个主题涉及到如何在网页的中间位置实现一个始终可见的浮动窗口,这在网页设计中常用于...

    JQ工具包+CSS3工具包

    例如,`$(selector).click(function() {...})`是jQuery中用于添加点击事件的经典用法,而`$.ajax()`则是进行异步HTTP请求的核心函数。通过查阅此文档,开发者可以快速查找并理解jQuery中的各种功能,从而提高开发...

    JQ 复选框全选反选

    例如,我们可以设置一个ID为"selectAll"的复选框,并绑定"click"事件,当用户点击这个复选框时,触发相应的函数,将所有其他复选框选中或取消选中。 ```javascript $("#selectAll").click(function() { $("input...

    JQ 复制节点

    在JavaScript的世界里,jQuery(简称JQ)是一个广泛使用的库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。"JQ 复制节点"这个话题聚焦于jQuery如何复制HTML元素,这是一个常见的需求,特别是在动态构建...

    JQ最新手册 中文版

    通过`.on()`方法,你可以轻松地为元素绑定事件处理函数,例如`$("#button").on("click", function() {...})`会在用户点击id为"button"的元素时执行相应的代码。jQuery还提供了一套简化的事件方法,如`.click()`, `....

    jq 表格拖拽

    要实现这样的功能,首先需要理解jQuery的基本用法,包括选择器(用于选取DOM元素)、事件处理(如mousedown、mousemove和mouseup事件)以及CSS操作(改变元素的位置和样式)。接下来,我们将深入探讨实现jq表格拖拽...

    JQ 隐藏和显示

    在IT领域,jQuery(简称JQ)是一种广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。本文将深入探讨“JQ隐藏和显示”的相关知识点,以帮助您更好地理解和应用这些功能。...

    jq翻书效果

    同时,`$(".selector").click(function() {...})`这样的事件监听器会被用来响应用户的点击动作,触发翻页动画。 接着,我们来看具体的翻书实现。这通常涉及到CSS3的transform属性,尤其是rotate和translate,用于...

    jQuery中focus事件用法实例

    当用户通过鼠标点击、键盘导航或其他方式使某个元素成为当前活动元素时,该元素就会获得焦点,此时`focus`事件会被触发。这篇文章将深入探讨`focus`事件的用法及其在实际应用中的实例。 首先,我们要了解`focus`...

Global site tag (gtag.js) - Google Analytics