jQuery学习:事件移除、解绑/阻止冒泡、默认行为/each方
2019-05-08 本文已影响0人
Merbng
移除事件绑定
- 触发事件
触发p的点击事件
$("p").click();
$("p").trigger("click"); - 解绑事件
解绑匹配元素的所有事件
$(selector).off();
解绑匹配元素的所有click事件
$(selector).off("click");
阻止冒泡和阻止浏览器的默认行为
- 阻止浏览器默认行为
e.preventDefault(); - 阻止事件冒泡
e.stopPropagation(); - 既能阻止事件冒泡，也能阻止浏览器默认行为
return false
<a href="http://www.baidu.com" id="link">百度</a>
$(function () {
$("#link").on("click", function (e) {
// 阻止默认行为
// e.preventDefault();
//阻止事件冒泡
e.stopPropagation();
alert("测试");
//既能阻止事件冒泡，也能阻止浏览器默认行为
// return false;
});
$("body").on("click", function () {
alert("点击body");
})
});
each方法
jquery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每个对象设置不同的值，就需要自己进行迭代，
- 作用：变量jQuery对象集合，为每个匹配的元素执行一个函数
方式1：
for (i = 0; i < $("li").length; i++) {
$("li").eq(i).css("opacity", (i + 1) / 10);
}
方式2：(推荐)
$("li").each(function (index, element) {
$(element).css("opacity", (index + 1) / 10);
})
$冲突
jQuery使用$作为标识符，但是如果与其他框架中的$冲突时，jQuery可以释放$符控制权
console.log($);
//jquery释放控制权
// $.noConflict();
var $$ = $.noConflict();//释放
console.log($$);
案例：键盘钢琴导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
width: 900px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.nav li {
width: 100px;
height: 60px;
/*border: 1px solid yellow;*/
float: left;
position: relative;
overflow: hidden;
}
.nav a {
position: absolute;
width: 100%;
height: 100%;
font-size: 24px;
color: blue;
text-align: center;
line-height: 60px;
text-decoration: none;
z-index: 2;
}
.nav span {
position: absolute;
width: 100%;
height: 100%;
background-color: yellow;
top: 60px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="javascript:void(0);">导航1</a>
<span></span>
</li>
<li><a href="javascript:void(0);">导航2</a><span></span></li>
<li><a href="javascript:void(0);">导航3</a><span></span></li>
<li><a href="javascript:void(0);">导航4</a><span></span></li>
<li><a href="javascript:void(0);">导航5</a><span></span></li>
<li><a href="javascript:void(0);">导航6</a><span></span></li>
<li><a href="javascript:void(0);">导航7</a><span></span></li>
<li><a href="javascript:void(0);">导航8</a><span></span></li>
<li><a href="javascript:void(0);">导航9</a><span></span></li>
</ul>
<div>
<audio src="mp3/1.ogg"></audio>
<audio src="mp3/2.ogg"></audio>
<audio src="mp3/3.ogg"></audio>
<audio src="mp3/4.ogg"></audio>
<audio src="mp3/5.ogg"></audio>
<audio src="mp3/6.ogg"></audio>
<audio src="mp3/7.ogg"></audio>
<audio src="mp3/8.ogg"></audio>
<audio src="mp3/9.ogg"></audio>
</div>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
// 给li注册鼠标进入事件，让li下面的span top：0 播放音乐
$(".nav li").mouseenter(function () {
$(this).children("span").stop().animate({top: 0});
// 播放音乐
var idx = $(this).index();
$(".nav audio").get(idx).load();
$(".nav audio").get(idx).play();
}).mouseleave(function () {
$(this).children("span").stop().animate({top: 60});
});
// 节流阀：按下的时候触发，如果没弹起，不让触发下一次
var flag = true;
// 按下1-9这几个数字键，能触发对应的mouseenter事件
$(document).on("keydown", function (e) {
if (flag) {
flag = false;
// 获取按下的键
var code = e.keyCode;
if (code >= 49 && code <= 57) {
$(".nav li").eq(code - 49).mouseenter();
}
}
});
//弹起的时候，触发mouseleave事件
$(document).on("keyup", function (e) {
flag = true;
// 获取按下的键
var code = e.keyCode;
if (code >= 49 && code <= 57) {
// 触发对应的mouseleave事件
$(".nav li").eq(code - 49).mouseleave();
}
})
});
</script>
</body>
</html>
案例：jquery ui插件实现新闻模块（拖拽）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="jquery-ui.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.drag-wrapper {
width: 400px;
margin: 50px auto 0;
/*border: 10px solid #000;*/
}
.drag-bar {
height: 40px;
font-size: 20px;
font-weight: bold;
line-height: 40px;
text-align: center;
background-color: #E6E6E6;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: move;
}
.resize-item {
height: 212px;
border: 1px solid #e6e6e6;
}
.sort-wrapper {
height: 100%;
overflow: hidden;
}
.sort-item {
list-style: none;
padding-top: 10px;
}
.sort-item li {
height: 40px;
line-height: 40px;
padding-left: 20px;
cursor: pointer;
}
.sort-item li:hover {
background-color: #e6e6e6;
}
</style>
</head>
<body>
<div class="drag-wrapper">
<div class="drag-bar">可拖动、排序、变形的新闻模块</div>
<div class="resize-item">
<div class="sort-wrapper">
<ul class="sort-item">
<li>这是第1条新闻!</li>
<li>这是第2条新闻!</li>
<li>这是第3条新闻!</li>
<li>这是第4条新闻!</li>
<li>这是第5条新闻!</li>
<li>这是第6条新闻!</li>
<li>这是第7条新闻!</li>
<li>这是第8条新闻!</li>
<li>这是第9条新闻!</li>
<li>这是第10条新闻!</li>
</ul>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function () {
$(".drag-wrapper").draggable({
handle: ".drag-bar"
});
$(".sort-item").sortable({
opacity: 0.3
});
$(".resize-item").resizable({
handles: "e"
});
});
</script>
</body>
</html>
插件：背景色渐变
query不支持颜色的渐变，颜色最好用十六进制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script src="jquery.color.js"></script>
<script>
$(function () {
//jquery不支持颜色的渐变，颜色最好用十六进制
$("div").animate({backgroundColor: "#ffc0cb"}, 2000, function () {
alert("测试");
});
});
</script>
</body>
</html>
插件：图片懒加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 4000px;
}
</style>
</head>
<body>
<div></div>
<img class="lazy" data-original="imgs/lazyimg.gif" alt="">
<script src="jquery-1.12.4.js"></script>
<script src="jquery.lazyload.js"></script>
<script>
$(function () {
$("img.lazy").lazyload();
});
</script>
</body>
</html>
插件封装：手风琴效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
div {
width: 1200px;
height: 400px;
border: 2px solid #000;
margin: 100px auto;
}
li {
width: 240px;
height: 400px;
float: left;
}
li:nth-child(1) {
background-image: url(images/1.jpg);
}
li:nth-child(2) {
background-image: url(images/2.jpg);
}
li:nth-child(3) {
background-image: url(images/3.jpg);
}
li:nth-child(4) {
background-image: url(images/4.jpg);
}
li:nth-child(5) {
background-image: url(images/5.jpg);
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script src="jquery.accordion.js"></script>
<script>
$(function () {
var colors = ["red", "yellow", "green", "cyan", "pink", "hotpink", "blue", "yellowgreen", "greenyellow", "skyblue"];
$("#box").accordion(colors, 100);
});
</script>
</body>
</html>
jquery.accordion.js
$.fn.accordion = function (colors, width) {
colors = colors || [];
width = width || 0;
var $li = this.find("li");
var boxLength = this.width();
var maxLength = boxLength - ($li.length - 1) * width;
var avgLength = boxLength / $li.length;
// 更改li的颜色
$li.each(function (i, e) {
$(e).css("backgroundColor", colors[i]);
});
// 给li注册鼠标经过事件
$li.on("mouseenter", function () {
$(this).stop().animate({width: maxLength}).siblings().stop().animate({width: width});
})
$li.on("mouseleave", function () {
$li.stop().animate({width: avgLength});
})
};
附链接:
Demo地址
