<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.test2 {
background: #bbffaa;
}
.test3 {
background: yellow;
}
.test2,.test3{
border: 1px solid red;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h2>.click()方法</h2>
<h4>测试一</h4>
<button>元素绑定事件,弹出回调中的this</button>
<script type="text/javascript">
//this指向button元素
$("button:eq(0)").click(function() {
alert(this)
})
</script>
<h4>测试二</h4>
<div class="test2">
<p>$('button:first').click(function(e) {alert(this)})</p>
</div>
<button>指定触发事件</button>
<script type="text/javascript">
$('p').click(function(e) {
alert(e.target.textContent)
})
//this指向button元素
$("button:eq(1)").click(function() {
$('p').click() //指定触发绑定的事件
})
</script>
<h4>测试三</h4>
<div class="test3">
<p>$('.right').click(1111, set)</p>
</div>
<button>不同函数传递数据</button>
<script type="text/javascript">
//不同函数传递数据
function data(e) {
alert(e.data) //1111
}
function a() {
$("button:eq(2)").click(1111, data)
}
a();
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h2>.dbdblclick()方法</h2>
<div class="left">
<div class="aaron">
<p>$('button:first').dblclick(function(e) {alert(this)})</p>
</div>
</div>
<div class="right">
<div class="aaron">
<p>$('.right').dblclick(1111, set)</p>
</div>
</div>
<button>双击触发：绑定事件this</button>
<button>双击触发：指定触发事件</button>
<button>双击触发：不同函数传递数据</button>
<script type="text/javascript">
//this指向button元素
$("button:eq(0)").dblclick(function() {
alert(this)
})
</script>
<script type="text/javascript">
$('p').dblclick(function(e) {
alert(e.target.textContent)
})
//this指向button元素
$("button:eq(1)").dblclick(function() {
$('p').dblclick() //指定触发绑定的事件
})
</script>
<script type="text/javascript">
//不同函数传递数据
function data(e) {
alert(e.data) //1111
}
function a() {
$("button:eq(2)").dblclick(1111, data)
}
a();
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h2>.focusin()方法</h2>
<div class="left">
<div class="aaron">
点击聚焦：<input type="text" />
</div>
</div>
<div class="right">
<div class="aaron1">
点击聚焦并传递参数：<input type="text" />
</div>
</div>
<script type="text/javascript">
//input聚焦
//给input元素增加一个边框
$("input:first").focusin(function() {
$(this).css('border','2px solid red')
})
</script>
<script type="text/javascript">
//不同函数传递数据
function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusin('阅谁问君诵，水落清香浮', fn)
}
a();
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h2>.focusout()方法</h2>
<div class="left">
<div class="aaron">
点击触发失去焦点：<input type="text" />
</div>
</div>
<div class="right">
<div class="aaron1">
点击触发失去焦点并传递参数：<input type="text" />
</div>
</div>
<script type="text/javascript">
//input失去焦点
//给input元素增加一个边框
$("input:first").focusout(function() {
$(this).css('border','2px solid red')
})
</script>
<script type="text/javascript">
//不同函数传递数据
function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusout('阅谁问君诵，水落清香浮', fn)
}
a();
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left div,
.right div {
width: 350px;
height: 150px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
}
p {
height: 50px;
border: 1px solid red;
margin: 30px;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h2>.hover()方法</h2>
<div class="left">
<div class="aaron1">
<p>触发hover事件</p>
</div>
</div>
<script type="text/javascript">
// hover()方法是同时绑定 mouseenter和 mouseleave事件。
// 我们可以用它来简单地应用在 鼠标在元素上行为
$("p").hover(
function() {
$(this).css("background", 'red');
},
function() {
$(this).css("background", '#bbffaa');
}
);
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.test2 {
background: #bbffaa;
}
.test3 {
background: yellow;
}
.test2,
.test3 {
border: 1px solid red;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h2>.mousedown()方法</h2>
<h4>测试一</h4>
<button>弹出回调中的鼠标键</button>
<script type="text/javascript">
//this指向button元素
$("button:eq(0)").mousedown(function(e) {
alert('e.which: ' + e.which)
})
</script>
<h4>测试二</h4>
<div class="test2">
<p>$('button:first').mousedown(function(e) {alert(this)})</p>
</div>
<button>指定触发事件</button>
<script type="text/javascript">
$('p').mousedown(function(e) {
alert(e.target.textContent)
})
//this指向button元素
$("button:eq(1)").mousedown(function() {
$('p').mousedown() //指定触发绑定的事件
})
</script>
<h4>测试三</h4>
<div class="test3">
<p>$('.right').mousedown(1111, set)</p>
</div>
<button>不同函数传递数据</button>
<script type="text/javascript">
//不同函数传递数据
function data(e) {
alert(e.data) //1111
}
function a() {
$("button:eq(2)").mousedown(1111, data)
}
a();
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left div,
.right div {
width: 350px;
height: 150px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
}
p{
height: 50px;
border: 1px solid red;
margin: 30px;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h2>.mouseover()方法</h2>
<div class="left">
<div class="aaron1">
<p>鼠标离开此区域触发mouseover事件</p>
<a>mouseover事件触发次数：</a><br/>
<a>mouseover冒泡事件触发次数：</a>
</div>
</div>
<h2>.mouseenter()方法</h2>
<div class="right">
<div class="aaron2">
<p>鼠标离开此区域触发mouseenter事件</p>
<a>mouseenter事件触发次数：</a><br/>
<a>mouseenter冒泡事件触发次数：</a>
</div>
</div>
<br/>
<script type="text/javascript">
var i = 0;
$(".aaron1 p").mouseover(function(e) {
$(".aaron1 a:first").html('mouseover事件触发次数：' + (++i))
})
var n = 0;
$(".aaron1").mouseover(function() {
$(".aaron1 a:last").html('mouseover冒泡事件触发次数：' + (++n))
})
</script>
<script type="text/javascript">
var i = 0;
$(".aaron2 p").mouseenter(function(e) {
$(".aaron2 a:first").html('mouseenter事件触发次数：' + (++i))
})
var n = 0;
$(".aaron2").mouseenter(function() {
$(".aaron2 a:last").html('mouseenter冒泡事件触发次数：' + (++n))
})
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left div,
.right div {
width: 350px;
height: 150px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
}
p{
height: 50px;
border: 1px solid red;
margin: 30px;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h2>.mouseout()方法</h2>
<div class="left">
<div class="aaron1">
<p>鼠标离开此区域触发mouseout事件</p>
<a>mouseout事件触发次数：</a><br/>
<a>mouseout冒泡事件触发次数：</a>
</div>
</div>
<h2>.mouseleave()方法</h2>
<div class="right">
<div class="aaron2">
<p>鼠标离开此区域触发mouseleave事件</p>
<a>mouseleave事件触发次数：</a><br/>
<a>mouseleave冒泡事件触发次数：</a>
</div>
</div>
<br/>
<script type="text/javascript">
var i = 0;
$(".aaron1 p").mouseout(function(e) {
$(".aaron1 a:first").html('mouseout事件触发次数：' + (++i))
})
var n = 0;
$(".aaron1").mouseout(function() {
$(".aaron1 a:last").html('mouseout冒泡事件触发次数：' + (++n))
})
</script>
<script type="text/javascript">
var i = 0;
$(".aaron2 p").mouseleave(function(e) {
$(".aaron2 a:first").html('mouseleave事件触发次数：' + (++i))
})
var n = 0;
$(".aaron2").mouseleave(function() {
$(".aaron2 a:last").html('mouseleave冒泡事件触发次数：' + (++n))
})
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left div,
.right div {
width: 300px;
height: 80px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h2>.mousemove()方法</h2>
<h4>测试一</h4>
<button>点击：指定触发mousemove事件</button>
<script type="text/javascript">
$('h2').mousemove(function(e) {
alert('触发h2元素绑定的mousemove')
})
$("button:eq(0)").click(function(e) {
$('h2').mousemove() //指定触发绑定的事件
})
</script>
<h4>测试二</h4>
<div class="left">
<div class="aaron1">
<p>鼠标在绿色区域移动触发mousemove</p>
<p>移动的X位置：</p>
</div>
</div>
<script type="text/javascript">
//绑定一个mousemove事件
//触发后修改内容
$(".aaron1").mousemove(function(e) {
$(this).find('p:last').html('移动的X位置：' + e.pageX)
})
</script>
<h4>测试三</h4>
<div class="right">
<div class="aaron3">
<p>鼠标移动：不同函数传递数据</p>
<p>数据：</p>
</div>
</div>
<script type="text/javascript">
//不同函数传递数据
function data(e) {
$(this).find('p:last').html('数据:' + e.data)
}
function a() {
$(".right").mousemove(1111, data)
}
a();
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left div,
.right div {
width: 350px;
height: 150px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
}
p{
height: 50px;
border: 1px solid red;
margin: 30px;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h2>.mouseout()方法</h2>
<div class="left">
<div class="aaron1">
<p>鼠标离开此区域触发mouseout事件</p>
<a>离开元素,mouseout事件触发次数：</a>
</div>
</div>
<div class="right">
<div class="aaron2">
<p>鼠标移动：不同函数传递数据</p>
<a>离开元素,mouseout事件触发次数：</a>
</div>
</div>
<br/>
<button>点击：指定触发mouseout事件</button>
<script type="text/javascript">
var n = 0;
//绑定一个mouseout事件
$(".aaron1 p:first").mouseout(function(e) {
$(".aaron1 a").html('离开元素,mouseout事件触发次数：' + (++n))
})
</script>
<script type="text/javascript">
$('h2').mouseout(function(e) {
alert('触发h2元素绑定的mouseout')
})
$("button:eq(0)").click(function(e) {
$('h2').mouseout() //指定触发绑定的事件
})
</script>
<script type="text/javascript">
var n = 0;
//不同函数传递数据
function data(e) {
$(".right a").html('mouseout事件触发次数：' + (++n) + '<br/> 传入数据为 ：'+ e.data)
}
function a() {
$(".right p:first").mouseout('data = 吴者然', data)
}
a();
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left div,
.right div {
width: 350px;
height: 150px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
}
p{
height: 50px;
border: 1px solid red;
margin: 30px;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h2>.mouseover()方法</h2>
<div class="left">
<div class="aaron1">
<p>鼠标移进此区域触发mouseover事件</p>
<a>进入元素内部,mouseover事件触发次数：</a>
</div>
</div>
<div class="right">
<div class="aaron2">
<p>鼠标移动：不同函数传递数据</p>
<a>进入元素内部,mouseover事件触发次数：</a>
</div>
</div>
<br/>
<button>点击：指定触发mouseover事件</button>
<script type="text/javascript">
var n = 0;
//绑定一个mouseover事件
$(".aaron1 p:first").mouseover(function(e) {
$(".aaron1 a").html('进入元素内部,mouseover事件触发次数：' + (++n))
})
</script>
<script type="text/javascript">
$('h2').mouseover(function(e) {
alert('触发h2元素绑定的mouseover')
})
$("button:eq(0)").click(function(e) {
$('h2').mouseover() //指定触发绑定的事件
})
</script>
<script type="text/javascript">
var n = 0;
//不同函数传递数据
function data(e) {
$(".right a").html('mouseover事件触发次数：' + (++n) + '<br/> 传入数据为 ：'+ e.data)
}
function a() {
$(".right p:first").mouseover('data = 吴者然', data)
}
a();
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<h2>.mouseup()方法</h2>
<div class="left">
<div class="aaron">
<p>$('button:first').mouseup(function(e) {alert(this)})</p>
</div>
</div>
<div class="right">
<div class="aaron">
<p>$('.right').mouseup(1111, set)</p>
</div>
</div>
<button>绑定事件this</button>
<button>指定触发事件</button>
<button>不同函数传递数据</button>
<script type="text/javascript">
//this指向button元素
$("button:eq(0)").mouseup(function(e) {
alert('e.which: ' + e.which)
})
</script>
<script type="text/javascript">
$('p').mouseup(function(e) {
alert(e.target.textContent)
})
//this指向button元素
$("button:eq(1)").mouseup(function() {
$('p').mouseup() //指定触发绑定的事件
})
</script>
<script type="text/javascript">
//不同函数传递数据
function data(e) {
alert(e.data) //1111
}
function a() {
$("button:eq(2)").mouseup(1111, data)
}
a();
</script>
</body>
</html>
效果图：
相关推荐
其中，“JQ鼠标滚轮事件”是jQuery提供的一种方便的方式来监听和处理用户的鼠标滚轮动作。这个功能允许开发者在用户滚动鼠标滚轮时执行特定的代码，为网页添加更丰富的交互性。 首先，我们来理解一下鼠标滚轮事件的...
【标题】"jq鼠标滚动视差效果.zip"所涉及的知识点主要集中在JavaScript（JS）特效的实现，特别是鼠标滚动事件的应用以及视差滚动效果。视差滚动是一种网页设计技术，通过让不同背景元素以不同速度移动，营造出深度感...
本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一种简洁的方式来处理DOM元素上的事件，包括滚轮事件。要监听滚轮事件，可以使用`$(element)....
在本项目中，我们关注的是一个使用jQuery和CSS3实现的动态效果，即"JQ鼠标经过标题向上弹出特效.zip"。这个特效主要用于增强网页的互动性，当用户将鼠标悬停在特定标题上时，会有一个图像或信息框自下而上弹出，提供...
标题“JQ 鼠标选中内容松开后弹窗”所指的，是使用JavaScript库jQuery（简称JQ）实现的一种交互功能，即当用户在页面上选择一段文本后，一旦鼠标松开，就会触发一个弹窗显示选定的内容。这种功能常用于提供额外信息...
【标题】"jq鼠标滚动视差效果"是一个利用JavaScript库jQuery实现的互动视觉特效，它在用户滚动鼠标滚轮时，创造出一种深度感和动态视差。这种效果常见于现代网页设计中，能够提升用户体验，使浏览过程更具沉浸感。 ...
综上所述，“jq 鼠标提示效果”项目涵盖了jQuery的使用、鼠标事件处理、CSS样式设计、HTML结构构建等多个方面的知识，旨在提升网页的交互性和用户体验。通过深入理解并实践这些知识点，开发者可以创造出更加生动、...
综上所述，"jq实现鼠标按下移动轴"这个项目涵盖了jQuery的基本使用、鼠标事件的处理、CSS定位的应用以及边界限制的实现，这些都是Web开发中常见的交互设计技术。通过理解和实践这些知识，开发者可以创建更富交互性的...
"jq鼠标滑过二级菜单.rar"这个压缩包文件包含了一个使用jQuery实现的特殊下拉菜单案例，它专注于解决非父子标签形式排列的二级菜单在鼠标滑过时的显示与隐藏问题。 首先，让我们理解jQuery的基础知识。jQuery是一个...
下面就来系统的介绍一下jQuery鼠标事件。 (1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。 $('p').click(function(){ alert('click function is running !'); } ); ...
"jq鼠标移动特效"指的是利用jQuery来实现当鼠标在网页元素上移动时，产生视觉上的动态效果。这种特效在网站设计中常见，可以增加用户交互体验，使页面更具吸引力。 jQuery中的鼠标移动事件主要有两种：`mouseenter`...
鼠标事件的监听和响应是这个功能的关键，通过jQuery的`.hover()`方法可以实现对鼠标移入和移出事件的监听，并根据事件触发相应的滚动暂停或恢复。 以下是该知识点的详细解析： 1. HTML基础：HTML（HyperText ...
"鼠标事件——解压小黄人"这个项目，显然涉及到利用JavaScript（jq，即jQuery库）处理鼠标活动来改变动画表情的表现。这里我们将深入探讨相关知识点。 首先，jQuery是一个流行的JavaScript库，它简化了DOM操作、...
在IT行业中，JavaScript库jQuery（简称jq）是前端开发中常用的一个工具，它极大地简化了DOM操作、事件处理以及动画效果。本示例探讨的是如何使用jQuery实现一个常见且有趣的交互功能：当用户将鼠标移动到商品图片上...
3. **鼠标事件对象**：在事件处理器函数中，可以访问到一个事件对象，其中包含了关于事件的信息，如`event.pageX`和`event.pageY`分别表示鼠标点击时相对于页面左上角的X和Y坐标。这些坐标在拖拽过程中非常有用。 4...
### jQuery鼠标事件详解 在网页开发中，合理利用jQuery库能极大地提高JavaScript代码的编写效率。jQuery通过封装一系列复杂的DOM操作，使得开发者能够更轻松地处理网页中的元素和事件。本文将详细介绍jQuery中与...
`mouseenter`事件在鼠标进入元素时触发，而`mouseleave`事件在鼠标离开元素时触发。以下是一个简单的示例： ```javascript $(document).ready(function() { var hoverEffect = $('#hover-effect'); var ...
实现的效果鼠标移到缩略图上会显示该图的大图，并且大图跟随鼠标移动；或是移动到提示文字上，也可以显示图片。并且含有方向判别功能，具体来说就是如果缩略图在页面的左半部分，则大图显示在鼠标的右侧，如果缩略图...
在这个项目中，“jQ鼠标滑过显示二级下拉菜单代码”是利用jQuery实现的一个功能，当用户将鼠标悬停在一级菜单上时，二级下拉菜单会自动展开，提供更丰富的导航选项。 首先，我们来理解HTML5的基础结构。HTML5引入了...