jQuery事件
- 1.四种常见的注册方式
- 1.jQuery事件注册
- 2.自动触发事件
- 3.jQuery事件对象
- 2.on绑定事件优势
- 发布微博简单案例
- 3.jQuery事件委派的优点以及方式
- 4.绑定事件和解绑事件
- on绑定事件
- off解绑事件
- jQuery 其他方法
- jQuery拷贝对象
- 多库共存
- jQuery插件
- 1.瀑布流
- 2.图片懒加载
- 案例toDoList
绿色
紫色
橙色
1.四种常见的注册方式
1.jQuery事件注册
1. 单个事件注册 需要分开写
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
2. 事件处理 on 在匹配元素上绑定一个或者多个事件的处理函数 使用对象的方式
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
},
mouseleave: function() {
$(this).css("background", "orange");
}
})
2.2事件on另外一种写法
$("div").on("mouseenter mouseleave", function() {
// alert(11);
$(this).toggleClass("current");
})
2.自动触发事件
-
元素.事件
会触发元素默认行为
$("div").click();
-
元素.trigger("事件")
会触发元素默认行为
$("input").trigger("focus");
$("div").trigger("click");
-
元素.triggerHandler("事件")
不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus", function() {
$(this).val("ninhao ");
});
$("input").triggerHandler("focus");
3.jQuery事件对象
- 与之前的webAPI 一样可参考webAPI
<script>
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
// 阻止冒泡
event.stopPropagation();
});
})
</script>
2.on绑定事件优势
- 可以绑定多个事件
- on可以实现事件委托(委派)
- on 可以给未来动态创建的元素绑定事件 之前的传统的单个事件不能实现给未来元素绑定事件
$("ul").on("click", "li", function() {
// 绑定事件是ul 触发事件是li
// alert(1);
});
//on 可以给未来动态创建的元素绑定事件 之前的传统的单个事件不能实现给未来元素绑定事件
$("ol").on("click", "li", function() {
alert(22);
});
//创建ol里面的li
var li = $("<li>我是未来的li</li>");
$("ol").append(li);
发布微博简单案例
- 点击发布按钮增加元素li并且滑动显示
- 采用on的方式给元素li里面的a(删除)按钮绑定事件
<script>
$(function() {
// 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中
$(".btn").on("click", function() {
var li = $("<li></li>");
//点击发布按钮 增加ul里面的li
li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
$("ul").prepend(li);
//让输入的内容滑动出来
li.slideDown();
//输入完内容之后让留言框为空
$(".txt").val("");
})
// 2.点击的删除按钮,可以删除当前的微博留言li
/* $("ul a").click(function() {//此时的click不能给动态创建的a添加事件
alert(11);
}) */
//所以使用on给动态创建的元素绑定事件
$("ul").on("click", "a", function() {
// alert(22);
$(this).parent().slideUp(function() {
$(this).remove();
});
});
});
</script>
3.jQuery事件委派的优点以及方式
4.绑定事件和解绑事件
on绑定事件
- 事件只触发一次用one绑定事件
$("p").one("click", function() {
alert('p');
})
off解绑事件
- 解除div身上的所有事件
$("div").off();
- 解除div身上的click事件
$("div").off("click");
- 解绑事件委托
$("ul").off("click", "li");
jQuery 其他方法
jQuery拷贝对象
- 想要把某个对象拷贝给另外一个对象使用,使用$.extend();
- 把obj拷贝给targetObj targetObj本身没有内容
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
$.extend(targetObj, obj);
console.log(targetObj);
- 把obj拷贝给targetObj targetObj本身有内容,obj会覆盖原来的targetObj内容
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
$.extend(targetObj, obj);
console.log(targetObj)
- 把obj拷贝给targetObj obj有什么 targetObj 就会得到什么
- 浅拷贝 把原来的复杂数据类型的地址拷贝给了目标对象,修改目标对象会影响被拷贝对象。
var targetObj = {
id: 0,
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: "andy",
msg: {
age: 18
}
};
$.extend(targetObj, obj);
console.log(targetObj);
targetObj.msg.age = 20;
console.log(targetObj); //20
console.log(obj); //20
- 深拷贝 完全克隆数据 不会覆盖原来的数据会保留targetObj里面的sex:‘男’,即不冲突的属性会合并到一起
var targetObj = {
id: 0,
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: "andy",
msg: {
age: 18
}
};
$.extend(true, targetObj, obj);
console.log(targetObj);
// 修改被拷贝的对象
targetObj.msg.age = 20;
console.log(targetObj); //20
console.log(obj); //18
多库共存
- jQuery使用作为标识符,这样一起使用就会产生冲突;
- 客观需求 :需要一个解决方案,让JQuery和其他js库不冲突,可以同时存在叫做多库共存
- 解决方案: 1.把里面的$统一用jQuery 2.允许用户自己更改名称
<script>
$(function() {
/* function $(ele) {
return document.querySelector(ele);
} */
console.log($("div"));
// 1.如果是$冲突就使用jQuery
// jQuery.each();
// 2.让用户自己定义
var suib = jQuery.noConflict();
suib("span");
console.log(suib("span"));
})
</script>
jQuery插件
jQuery功能有限,借助jQuery插件完成;
jQuery插件网址: 1.jQuery插件库:http://www.jq22.com/ 2.jQuery之家 : http://www.htmleaf.com/
1.瀑布流
jQuery之间瀑布流案例:
- 引入相关文件。(jQuery文件和插件文件)
- 复制相关的html,css,js
2.图片懒加载
1.只加载显示用户看到的页面图片,当页面滑动到可视区域,再显示图片,可以减轻服务器加载负载
快速替换代码:ctrl+h
2.使用jQuery插件库Easyla<script src="js/EasyLazyload.min.js"></script>
这句话必须放到DOM元素最后面
3.全屏滚动 fullpage.js
全屏滚动网站:http://github.com/alvarotrigo/fullPage.js 中文翻译网址:http://www.dowebok.com/demo/2014/77/ 4.bootstrap JS 插件 需要拷贝须有bootstrap文件;
模态框有两种写法参考官方文档,使用id关联,
掌握bootstrap使用
案例toDoList
案例第一步: