JQ 鼠标事件

编程语言 2018-05-09 23:38:34 阅读次数: 0 
<!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>

 效果图：

 

猜你喜欢

转载自onestopweb.iteye.com/blog/2365648
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022