jQuery学习第三天
文章目录
1.事件注册
- 语法
element.事件(function(){})
- 例如
$("div").click(function(){})
2. jQuery事件处理
2.1 事件处理on（）绑定事件
- 语法
element.on(events,[selector],[data],fn)
-
events:触发事件，事件之间用逗号隔开
-
selector:选择选择器元素的后代
-
date:传给fn的事件对象
-
fn：事件处理函数
2.1.1 绑定多个事件
$(“div”).on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});
2.1.2 多个事件，相同处理程序
$(“div”).on(“mouseover mouseout”, function() {
$(this).toggleClass(“current”);
});
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
height: 200px;
width: 200px;
background-color: pink;
}
.current {
background-color: blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<script>
$(function() {
// 1.事件绑定，绑定多个事件
$(".one").on({
click: function() {
$(this).css({
"backgroundColor": "skyblue"
})
},
"mouseout mouseover": function() {
$(this).toggleClass("current");
}
})
// 多个事件，一个回调函数
$(".two").on({
"mouseout mouseover": function() {
$(this).toggleClass("current");
}
})
})
</script>
</body>
</html>
- 效果图
2.2 事件委派
- 使用on处理事件，给父元素绑定事件，子元素作为触发事件源，子元素的事件冒泡到父元素
- 使用selector参数：触发的子代事件源
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<ul>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
</ul>
<script>
$(function() {
// 1.给父元素绑定事件，而子元素为子代触发源，冒泡：事件委派
$("ul").on("click", "li", function(e) {
// alert("弹框");
// $(this)为触发源li，而不是绑定事件的ul
console.log($(this));
$(this).css({
color: "red"
})
})
})
</script>
</body>
</html>
- 效果图
2.3 动态绑定事件
- 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<ol>
</ol>
<script>
$(function() {
// 1.后面创建的元素也可以绑定事件
// 1.普通方法
// $("ol li").click(function() {
// alert(111);
// })
// 2.on事件方法,li需要写在触发源上
// $("ol li").on({
// "click": function() {
// alert(111);
// }
// })
$("ol").on("click", "li", function() {
alert(111)
})
var li1 = $("<li>我是一个li标签</li>");
$("ol").append(li1);
})
</script>
</body>
</html>
- 普通方法效果图
- on方法动态绑定
发布留言案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
width: 600px;
height: 30px;
background-color: pink;
line-height: 30px;
padding: 3px;
margin: 10px;
}
a {
float: right;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<input type="text" placeholder="请输入留言"><button>发布</button>
<ul>
</ul>
<script>
$("button").on("click", function() {
if ($("input").val() == "") {
alert("输入不能为空");
} else {
// 添加li标签
var li = $("<li>" + $("input").val() + "<a href='#'>删除</a></li>");
$("ul").prepend(li);
}
})
// 动态绑定事件
$("ul").on("click", "li a", function() {
$(this).parent("li").remove();
})
</script>
</body>
</html>
- 效果图
2.4 off（）解绑事件
-
off()方法可以移除通过on（）方法添加的事件处理程序
-
解绑所有事件
$("div").off()
- 解绑某个事件
$("p").off("click")
- 解绑事件委托
$("ul").off("click","li")
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<ul>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
</ul>
<script>
$(function() {
// 第一个div绑定事件
$(".one").on({
click: function() {
console.log("one被点击了");
},
mouseover: function() {
console.log("鼠标移入one中");
}
})
// 第二个div绑定事件
$(".two").on({
click: function() {
console.log("two被点击了");
},
mouseover: function() {
console.log("鼠标移入two中");
}
})
// 事件委托
$("ul").on("click", "li", function() {
alert("弹框");
})
// 移除第一个div的所有事件绑定
$(".one").off();
// 移除第二个div标签的某个事件绑定
$(".two").off("mouseover");
// 移除ul的事件委托
$("ul").off("click", "li");
})
</script>
</body>
</html>
- 效果图
one 绑定事件，只触发一次，之后不触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>我是一个div</div>
<script>
$(function() {
// one绑定事件，只触发一次
$("div").one("click", function() {
alert("one");
})
})
</script>
</body>
</html>
- 效果图
2.5 自动触发事件
- 元素.事件()，会触发默认行为
element.click()
- 元素.trigger(“事件类型”),会触发默认行为
element.trigger("type")
- 元素.triggerHander(“事件类型”),不会触发默认行为
element.triggerHander("focus")
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<input type="text">
<script>
$(function() {
// 绑定事件
$("input").on("focus", function() {
$(this).val("hello");
})
// 1.element.focus()，// 值变化后有光标闪烁
// $("input").focus();
// 2.element.trigger(type),值变化后也有闪烁
$("input").trigger("focus");
// 3.element.triggerHandle(type)，阻止默认行为（光标闪烁）
// $("input").triggerHandler("focus");
})
</script>
</body>
</html>
- 有默认行为
- 无默认行为
3.jQuery事件对象
- 事件被触发，就会有事件对象
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
$(function() {
// 事件冒泡
$(document).on("click", function() {
console.log("点击了doc");
})
$("div").on("click", function(e) {
console.log(e);
console.log("点击了div");
// 阻止冒泡
e.stopPropagation();
})
})
</script>
</body>
</html>
- 冒泡效果图
- 阻止冒泡效果图
4. jQuery拷贝对象
-
将某个对象拷贝（合并）给另外一个对象使用
-
语法
$.extend([deep],target,object1,[objectN])
- deep:如果设置为true，为深拷贝，如果为false，浅拷贝
- target:拷贝到的目标对象
- object1:待拷贝到目标对象的对象1
- objectN:待拷贝到目标对象的对象N
- 浅拷贝在拷贝复杂数据类型时，是拷贝地址
- 深拷贝在拷贝复制数据类型时，是拷贝对象
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<script>
$(function() {
var target = {
name: 200,
};
var target1 = {
name: 200,
msg: {
id: 100
}
}
var object1 = {
name: 18,
age: 11,
msg: {
address: "666"
}
};
// 浅拷贝
$.extend(target, object1);
console.log(target);
console.log(object1);
// 深拷贝
$.extend(true, target1, object1);
console.log(target1);
console.log(object1);
})
</script>
</body>
</html>
- 效果图
注意点：深拷贝和浅拷贝的区别
5. 多库共存
-
问题描述
- jQuery使用 作 为 标 示 符 ， 随 着 j Q u e r y 的 流 行 ， 其 他 j s 库 也 会 用 这 个 作为标示符，随着jQuery的流行，其他js库也会用这个 作为标示符，随着jQuery的流行，其他js库也会用这个作为标识符，这样一起使用会引起冲突
-
解决方案
- 把里面的$符号统一改为jQuery
- jQuery变量规定新的名称:$.noConflict()
var xx=$.noConflict()
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div></div>
<script>
// 比如一个其他库，使用$作为函数名称
function $(ele) {
return document.querySelector(ele);
}
// 在使用$(jQuery的方法时会报错)
// $.each();
// 1.解决方法1 改成jQuery标识符
// jQuery.each();
// 解决方法二 自定义标识符
var newName = jQuery.noConflict();
console.log(newName("div"));
</script>
</body>
</html>
- 冲突效果图
- 第一种方法
- 第二种方法
6.jQuery插件
-
网站
-
使用方法
- 引入css，js
- 复制相应的html结构
6.1 瀑布流插件
- 下载地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<style type="text/css">
#gallery-wrapper {
position: relative;
max-width: 75%;
width: 75%;
margin: 50px auto;
}
img.thumb {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
border-radius: 5px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
padding: 10px;
}
.white-panel h1 {
font-size: 1em;
}
.white-panel h1 a {
color: #A92733;
}
.white-panel:hover {
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
margin-top: -5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
</style>
</head>
<body>
<section id="gallery-wrapper">
<article class="white-panel">
<img src="images/P_000(1).jpg" class="thumb">
<h1><a href="#">我是轮播图片1</a></h1>
<p>里面很精彩哦</p>
</article>
<article class="white-panel">
<img src="images/P_001.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="images/P_002.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="images/P_003.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="images/P_004.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="images/P_005.jpg" class="thumb">
<h1><a href="#">我是轮播图片1</a></h1>
<p>里面很精彩哦</p>
</article>
<article class="white-panel">
<img src="images/P_006.jpg" class="thumb">
<h1><a href="#">我是轮播图片1</a></h1>
<p>里面很精彩哦</p>
</article>
<article class="white-panel">
<img src="images/P_007.jpg" class="thumb">
<h1><a href="#">我是轮播图片1</a></h1>
<p>里面很精彩哦</p>
</article>
</section>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<script type="text/javascript">
$(function() {
$("#gallery-wrapper").pinterest_grid({
no_columns: 3,
padding_x: 15,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
</script>
</body>
</html>
- 效果图
6.2 图片懒加载插件
- 下载地址
- 效果图
7.一个综合案例
-
仿制todolist
-
css文件
body {
margin: 0;
padding: 0;
font-size: 16px;
background: #CDCDCD;
}
header {
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
}
section {
margin: 0 auto;
}
label {
float: left;
width: 100px;
line-height: 50px;
color: #DDD;
font-size: 24px;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header input {
float: right;
width: 60%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
border: none
}
input:focus {
outline-width: 0
}
h2 {
position: relative;
}
span {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
border-radius: 20px;
background: #E6E6FA;
line-height: 22px;
text-align: center;
color: #666;
font-size: 14px;
}
ol,
ul {
padding: 0;
list-style: none;
}
li input {
position: absolute;
top: 2px;
left: 10px;
width: 22px;
height: 22px;
cursor: pointer;
}
p {
margin: 0;
}
li p input {
top: 3px;
left: 40px;
width: 70%;
height: 20px;
line-height: 14px;
text-indent: 5px;
font-size: 14px;
}
li {
height: 32px;
line-height: 32px;
background: #fff;
position: relative;
margin-bottom: 10px;
padding: 0 45px;
border-radius: 3px;
border-left: 5px solid #629A9C;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
ol li {
cursor: move;
}
ul li {
border-left: 5px solid #999;
opacity: 0.5;
}
li a {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
width: 14px;
height: 12px;
border-radius: 14px;
border: 6px double #FFF;
background: #CCC;
line-height: 14px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
footer {
color: #666;
font-size: 14px;
text-align: center;
}
footer a {
color: #666;
text-decoration: none;
color: #999;
}
@media screen and (max-device-width: 620px) {
section {
width: 96%;
padding: 0 2%;
}
}
@media screen and (min-width: 620px) {
section {
width: 600px;
padding: 0 10px;
}
}
- html和css
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ToDoList—最简单的待办事项列表</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
</section>
</header>
<section>
<h2>正在进行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已经完成 <span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
<footer>
Copyright © 2014 todolist.cn
</footer>
<script>
$(function() {
// 存储到localstroage的对象
var todolist = [
];
// 页面刷新时加载
flesh();
// 今日任务输入框获得焦点，且输入回车保存数据
$("#title").on("focus", function() {
$(document).on("keypress", function(e) {
if (e.keyCode == 13) {
// alert(11);
// 创建一个任务的对象
var todoObj = {};
todoObj.test = $("#title").val();
todoObj.done = false;
// 任务对象加入数组
todolist.push(todoObj);
console.log(todoObj);
// 存储到localstorage
localStorage.setItem("todolist", JSON.stringify(todolist));
// 刷新页面
flesh();
}
})
})
// 切换正在运行和已经完成的任务
function mytog(done1, now) {
var text = now.parent("li").text();
var num = 0;
console.log(1);
/*
可优化的遍历操作
*/
$.each(todolist, function(index, ele) {
if (ele.test == text) {
num = index;
console.log(num);
return false;
// break;
}
})
// console.log(index);
todolist[num].done = done1;
// console.log(todolist);
// now.prop("checked", true);
localStorage.setItem("todolist", JSON.stringify(todolist));
flesh();
}
// 删除任务
function del(now) {
var text = now.parent("li").text();
var num = 0;
console.log(1);
/*
可优化的遍历操作
*/
$.each(todolist, function(index, ele) {
if (ele.test == text) {
num = index;
console.log(num);
return false;
// break;
}
})
// console.log(index);
// 删除数组元素
todolist.splice(num, 1);
// todolist[num].done = done1;
// console.log(todolist);
localStorage.setItem("todolist", JSON.stringify(todolist));
flesh();
}
// 切换完成
$("ol").on("click", "li input", function() {
var now = $(this);
mytog(true, now);
})
// 切换未完成
$("ul ").on("click", "li input", function() {
var now = $(this);
mytog(false, now);
})
// 删除操作
$("ul").on("click", "li a", function() {
del($(this));
})
$("ol").on("click", "li a", function() {
del($(this));
})
// 刷新屏幕
function flesh() {
if (localStorage.getItem("todolist")) {
todolist = JSON.parse(localStorage.getItem("todolist"));
} else {
todolist = [];
}
var cntTrue = 0;
var cntFalse = 0;
$("ol").html("");
$("ul").html("");
/*
这部分可以有更好的方法，给每个创建的li标签中的a标签添加对应对象的索引号
可以简化上方的遍历找索引号的操作
*/
$.each(todolist, function(index, ele) {
if (ele.done == false) {
// 创建新的li标签
var li = $("<li><input type='checkbox'>" + ele.test + "<a href='#'></a></li>");
$("ol").append(li);
cntFalse++;
$("h2 span#todocount").html(cntFalse);
} else if (ele.done == true) {
// 创建已经完成的li标签
var li = $("<li><input type='checkbox' checked>" + ele.test + "<a href='#'></a></li>");
$("ul").append(li);
cntTrue++;
$("h2 span#donecount").html(cntTrue);
}
})
if (cntTrue == 0) {
$("h2 span#donecount").html("");
}
if (cntFalse == 0) {
$("h2 span#todocount").html("");
}
}
})
</script>
</body>
</html>
- 效果图
注意点
- 绑定事件时注意动态绑定，因为li标签的存在时有时无，必须使用on绑定事件
- 必须要用ul（常驻）绑定事件
$("ol").on("click", "li input", function() {
var now = $(this);
mytog(true, now);
})
52
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
