`

JQ 事件绑定

 
阅读更多

style.css

*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; }

 

demo1.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").bind("click",function(){
		$(this).next("div.content").show();
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">什么是jQuery?</h5>
	<div class="content">
		jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。
        jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、
        操作DOM、处理事件、执行动画和开发Ajax。
        它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
	</div>
</div>
</body>
</html>

 

demo2.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").bind("click",function(){
	    var $content = $(this).next("div.content");
	    if($content.is(":visible")){
			$content.hide();
		}else{
			$content.show();
		}
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">什么是jQuery?</h5>
	<div class="content">
		jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。
        jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、
        操作DOM、处理事件、执行动画和开发Ajax。
        它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
	</div>
</div>
</body>
</html>

 

demo3.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").bind("mouseover",function(){
	    $(this).next("div.content").show();
	});
	  $("#panel h5.head").bind("mouseout",function(){
	     $(this).next("div.content").hide();
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">什么是jQuery?</h5>
	<div class="content">
		jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。
        jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、
        操作DOM、处理事件、执行动画和开发Ajax。
        它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
	</div>
</div>
</body>
</html>

 

demo4.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").mouseover(function(){
	    $(this).next("div.content").show();
	});
	$("#panel h5.head").mouseout(function(){
	     $(this).next("div.content").hide();
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">什么是jQuery?</h5>
	<div class="content">
		jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。
        jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、
        操作DOM、处理事件、执行动画和开发Ajax。
        它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
	</div>
</div>
</body>
</html>

 

效果图：

 

 

 

 

  • 大小: 13.6 KB
分享到：
| JQ DOM准备
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    浅谈jQuery事件绑定原理

    当给dom用jq的方法绑定了事件,会生成对应的时间列表 可以看下面的例子(请在firefox中查看 因为firefox中对象支持toSource()) 代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=”...

    JQ 循环获取ID绑定时间代码

    JQ 循环获取ID绑定时间代码 根据你的需求可以改正click hover 等一系列的时间相应操作数据，纯手写 我一直在使用。 重复使用很有价值。 文件后缀是.PHP但是里面是纯JQ代码。 带注释！

    JQ鼠标滚轮事件

    为了使用jQuery的`mousewheel`事件，我们需要首先在页面中引入jQuery库，然后通过`.on()`方法绑定事件监听器。以下是一个基本的示例： ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery 鼠标滚轮事件示例 ...

    JQuery 给元素绑定click事件多次执行的解决方法

    原绑定方法： $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法； 解决办法更改绑定方法为： $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click...

    jquery 绑定 form表单数据

    jquery插件 利用json 绑定 form 表单数据

    jQuery事件绑定和委托实例

    jQuery事件绑定和委托是JavaScript库jQuery中用于处理用户交互的核心机制。它们允许开发者响应用户的动作，如点击、鼠标悬浮、键盘输入等。本文将详细解释这些概念，并通过实例展示其用法。 1. `on()` 方法 `on()` ...

    jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下： jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要...

    JQ 事件冒泡

    例如，我们可以在一个父元素上绑定事件处理器，来捕获所有子元素的事件，而无需分别为每个子元素单独绑定。这样可以减少代码量，提高性能。 ```javascript // 使用JQuery选择器获取父元素 var parentElement = $('#...

    在layui下对元素进行事件绑定的实例

    要注意的是记得要先引用element操作模块 ，否则是无法绑定的 格式： $[removed](事件，标识，function(){}); layui.use(['jquery', 'form', 'table', 'element'], function() { var form = layui.form; var ...

    JQ JS javascript echarts 多图表 多曲线 多柱状图 多饼图 多仪表盘 加载 多图表加载

    jQuery（简称JQ）是基于JavaScript的一个库，它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务，使得开发者能更高效地编写代码。ECharts则是百度开发的一个开源的JavaScript数据可视化库，它提供了丰富的图表...

    jquery单选框radio绑定click事件实现方法

    ` 是主要的事件绑定部分。这段代码的作用是监听所有的单选按钮，当用户点击其中任意一个时，会触发click事件并执行匿名函数内的代码。`click`是jQuery提供的事件处理方法，用于在元素被点击时执行回调函数。 在点击...

    JQ 其它的点击事件用法

    4. **事件委托** - 这是一种高效处理大量或动态元素的策略，通过在较高级别的元素上绑定事件，然后根据事件的目标元素来处理。例如： ```javascript $('#container').on('click', 'a', function() { // 处理所有...

    jquery绑定事件不生效的解决方法

    然而，有时我们可能会遇到jQuery绑定事件不生效的情况，这通常与代码执行时机、DOM加载状态或代码本身的问题有关。针对标题和描述中提到的问题，我们将深入探讨解决这类问题的方法。 首先，问题的核心在于jQuery的...

    jquery 监听 键盘 事件

    jQuery提供了`.on()`方法来绑定事件，包括键盘事件。键盘事件主要有三种类型： - `keydown`：当用户按下键盘上的键时触发。 - `keyup`：当用户释放键盘上的键时触发。 - `keypress`：当键盘上的键被按下并释放（或...

    JQ 文本框得到失去焦点

    - **事件绑定方式**：除了直接在元素上绑定事件外，还可以使用`.on()`方法来绑定事件，如`.on('focus', function() {...})`。 - **事件冒泡与阻止**：了解事件冒泡机制，以及如何使用`.stopPropagation()`阻止事件...

    jQuery的事件预绑定

    预绑定，顾名思义，就是在Web页面上的控件还没出现之前就绑定好事件。预绑定主要是指jQuery中的.on()方法。 2. Demo HTML代码 &lt;input type=button id=test value=test/&gt; 一般的jQuery代码： $('#root')....

    jqAPI，简介方便

    3. **事件处理（Events）**：jQuery 的事件处理简化了 JavaScript 中的事件绑定，如 `click()` 用于绑定点击事件，`on()` 方法可以同时绑定多个事件。 4. **动画（Animation）**：`fadeIn()`, `slideUp()`, `...

    jq翻页

    在这个场景下，"jq翻页"涉及到的主要知识点包括jQuery选择器、DOM操作、事件绑定以及Ajax请求。 首先，我们需要理解jQuery的选择器。jQuery提供了丰富的选择器，如`$("#id")`用于选取ID为指定值的元素，`$(".class...

    关于动态生成dom绑定事件失效的原因及解决方法

    之前做项目都是直接用jquery的bind绑定事件，不过当时都不是动态生成dom元素，而是已经页面中原本存在的dom元素进行事件绑定，最近在测试给动态生成的dom绑定事件的时候发现事件失效，于是就测试了一下： ...

Magicbox
Global site tag (gtag.js) - Google Analytics