JQuery事件
JQuery事件注册
单个事件注册
element.事件(function ( { })
$ ( "div" ) .click ( function () {事件处理程序 })
其他事件和原生基本一致。
JQuery事件处理
事件处理on()绑定事件
(1) on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法∶
element.on (events,[selector] ,fn)
events:—个或多个用空格分隔的事件类型，如"click"或""keydown”。
selector:元素的子元素选择器。
fn:回调函数即绑定在元素身上的侦听函数。
第一种事件处理on()绑定事件写法：
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
},
mouseleave: function() {
$(this).css("background", "blue");
}
});
第二种事件处理on()绑定事件写法
$("div").on("mouseenter mouseleave", function () {
$(this).toggleClass("current");
});
(2) on()方法可以实现事件委派操作
事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$('ul' ).on ( ' click", 'li', function ( { // 事件绑定在ul上，触发通过li
alert ( "hello world! " );
});
在此之前有bind), live) delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
(3) n()方法动态创建的元素
click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
$("ol").on("click", "li", function () {
alert(11);
})
事件处理off()解绑事件
off()方法可以移除通过on0方法添加的事件处理程序。
| 方法 | 描述 |
|---|---|
| $(“div”).off(); | 解除div上的所有事件处理程序 |
| $(“div”).off(“click”); | 解除div身上的点击事件 |
| $(“ul”).off(“click”, “li”); | 解绑事件委托， 解除li的click事件委托 |
one()事件 但是它只能触发事件一次
如果有的事件只想触发一次，可以使用one()来绑定事件。
$("p").one("click", function() {
alert(11);
})
自动触发事件trigger()
有些事件希望自动触发.比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
element.click() // 第一种简写形式 会触发元素的默认行为
element.trigger ("type") / / 第二种自动触发模式 会触发元素的默认行为
$("p") .on ("click", function () {
alert ("hi~") ;
});
s ("p") .trigger("click"); // 此时自动触发点击事件，不需要鼠标点击
element.triggerHandler(type) // 第三种自动触发模式 不会触发元素的默认行为
input获得焦点事件
$("input").on("focus", function() { // 有光标闪烁默认行为
$(this).val("你好吗");
});
| 方法 | 描述 |
|---|---|
| $(“input”).focus(); | 有光标闪烁默认行为 |
| $(“input”).trigger(“focus”); | 有光标闪烁默认行为 |
| $(“input”).triggerHandler(“focus”); | 无光标闪烁默认行为 |
JQuery事件对象
事件被触发，就会有事件对象的产生。
element.on (events, [selector] ,function(event) { })
event就是事件对象
阻止默认行为: event.preventDefault()或者return false
阻止冒泡: event.stopPropagation()
JQuery事件拓展案例
点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中。
点击的删除按钮，可以删除当前的微博留言。
$(function () {
// 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
$(".btn").on("click", function () {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'>删除</a> ")
$("ul").prepend(li);
li.slideDown(); // 下滑
$(".txt").val(""); // 清空输入框
})
// 2.点击的删除按钮，可以删除当前的微博留言li
// on可以给动态创建的元素绑定事件
// $("绑定事件的父元素").on("事件","触发事件的子元素"，function(){"回调函数"})
$("ul").on("click", "a", function () {
$(this).parent("li").slideUp(function () {
$(this).remove();
});
});
})
JQuery其他方法
JQuery拷贝对象
如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法
$.extend ( [deep], target, object1,[objectN ])
-
Deep：如果设为true为深拷贝，默认为false浅拷贝
-
Target：要拷贝的目标对象
-
object1：待拷贝到第一个对象的对象。
-
objectN：待拷贝到第N个对象的对象。
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
深拷贝，前面加true，完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被考贝对象。
$.extend(true, targetObj, obj);
如果targetObj内没有数据：把obj拷贝给targetObj
如果targetObj内数据重复，把obj拷贝并覆盖targetObj，多余的数据保留
多库共存
JQuery使用 作为标示符，随着 J Q u e r y 的流行 ; 其他 j s 库也会用这 作为标示符，随着JQuery的流行;其他js 库也会用这 作为标示符，随着JQuery的流行;其他js库也会用这作为标识符，这样一起使用会引起冲突。
震要一个解决方案，让iQuery和其他的s库不存在冲突，可以同时存在，这就叫做多库共存。
JQuery解决方案:
(1) 把里面的$符号统一改为JQuery.比如JQuery(“div”")
(2) JQuery变量规定新的名称: $.noConflict() var xx = $.noConflict();
JQuery 释放对$ 控制权 让用自己决定
var aaa = JQuery.noConflict(); // 自定义控制符
aaa.each(); // aaa就相当于$
JQuery常用插件
JQuery功能比较有限，想要更复杂的特效效果，可以借助于JQuery插件完成。
注意:这些插件也是依赖于JQuery来完成的，所以必须要先引入JQuery文件，因此也称为JQuery插件。
JQuery插件常用的网站:
(1) JQuery插件库 http://www.jq22.com/
(2) JQuery之家 http://www.htmleaf.com/
JQuery插件使用步骤:
(1) 引入相关文件。( JQuery文件和插件文件)
(2) 复制相关html、css、js (调用插件)。
图片懒加载（提高网页性能）
图片懒加载：图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载
当我们页面滑动到可视区域，再显示图片。
我们使用JQuery插件库EasyLazyload。注意，此时的js引入文件和js调用必须写到DOM元素(图片）最后面
全屏滚动( fullpage.js )
gitHub : https://qithub.com/alvarotrigo/fullPage.js
中文翻译网站: http://www.dowebok.com/demo/2014/77/
bootstrapJS插件
bootstrap框架也是依赖于JQuery开发的，因此里面的js插件使用，也必须引入JQuery文件。
Bootstrap的基本html格式：
<div class="container">
页面内容
</div>
本地存储
本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringify()
获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()
本地存储特性
(1) 数据存储在用户浏览器中
(2) 设置、读取方便、甚至页面剧新不丢失数据
(3) 容量较大，sessionStorage约5M、localStorage约20M
(4) 只能存储字符串，可以将对象JSON.stringify0编码后存储
window.sessionStorage
(1) 生命周期为关团浏览器窗口
(2) 在同一个窗口(页面)下数据可以共亨
(3) 以键值对的形式存储使用
| 方法 | 描述 |
|---|---|
| sessionStorage.setItem(key, value) | 存储数据 |
| sessionStorage.getltem(key) | 获取数据 |
| sessionStorage.removeltem(key) | 删除数据 |
| sessionStorage.clear() | 删除所有数据 |
window.localStorage
(1) 生命周期永久生效，除非手动删除否则关闭页面也会存在
(2) 可以多窗口(页面）共享(同一浏览器可以共享)
(3) 以键值对的形式存储使用
| 方法 | 描述 |
|---|---|
| localStorage.setltem(key, value) | 存储数据 |
| localStorage.getltem(key) | 获取数据 |
| localStorage.removeltem(key) | 删除数据 |
| localStorage.clear() | 删除所有数据 |
本地存储拓展案例
案例: toDoList
文本框里面输入内容，按下回车，就可以生成待办事项。
点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
点击已完成事项复选框，就可以把当前数据添加到特办事项里面。
但是本页面内容刷新页面不会丢失。
刷新页面不会丢失数据，因此需要用到本地存储localStorage
核心思路∶不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
存储的数据格式: var todolist = [title: 'xxx’, done: false]]
注意点1∶本地存储localStorage里面只能存储字符串格式，因此需要把对象转换为字符串JSON.stringify(data)。
注意点2∶获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse()我们才能使用里面的数据。
切记︰页面中的数据，都要从本地存储里面获取，这样刷断页面不会丢失数据，所以先要把数据保存到本地存储里面。
利用事件对象.keyCode判断用户按下回车键(13)。声明一个数组，保存数据。
先要读取本地存储原来的数据(声明函数getData()，放到这个数组里面。之后把最新从表单获取过来的数据，追加到数组里面。
最后把数组存储给本地存储(声明函数savaDate0)
toDoList本地存储数据渲染加载到页面
因为后面也会经常渲染加载操作，所以声明一个函数load，方便后面调用
先要读取本地存储数据。(数据不要忘记转换为对象格式)
之后遍历这个数据($.each0 )，有几条数据，就生成几个小li添加到ol里面。
每次渲染之前，先把原先里面ol的内容清空，然后渲染加载最新的数据。
toDoList删除操作
点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。
核心原理∶先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
我们可以给链接自定义属性记录当前的索引号
根据这个索引号删除相关的数据----数组的splice(i, 1)方法
存储修改后的数据，然后存储给本地存储
重新渲染加载数据列表
因为a是动态创建的，我们使用on方法绑定事件
toDoList正在进行和已完成选项操作
当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。
点击之后，获取本地存储数据。
修改对应数据属性done为当前复选框的checked状态。
之后保存数据到本地存储重新渲染加载数据列表
load加载函数里面，新增一个条件如果当前数据的done为true就是已经完成的，就把列表渲染加载到ul里面
如果当前数据的done为false，则是待办事项，就把列表渲染加载到ol里面
toDoList统计正在进行个数和已经完成个数
在我们load函数里面操作
声明2个变量: todoCount待办个数doneCount 已完成个数
当进行遍历本地存储数据的时候，如果数据done为false，则todoCount++,否则doneCount++
$(function () {
// 1. 按下回车 把完整数据 存储到本地存储里面
// 存储的数据格式 var todolist = [{title: "xxx", done: false}]
load(); // 页面加载调用
$("#title").on("keydown", function (e) {
if (e.keyCode == 13) {
var local = getDate(); // 把本地存储中的数据返回给local
// 把local数组进行更新数据 把最新的数据追加给local数组
local.push({ title: $(this).val(), done: false });
// 把这个数组local 存储给本地存储
setDate(local);
load();
$(this).val(""); // 清空输入框内容
}
})
// 3. toDoList 删除操作
$("ol, ul").on("click", "a", function () {
// 先获取本地存储
var data = getDate();
// 修改数据
var index = $(this).attr("id"); // 获取点击元素的索引号
// splice(index,num) 删除数组元素，从索引号index开始，删除num个
data.splice(index, 1);
// 保存到本地存储
setDate(data);
// 重新渲染页面
load();
})
// 4. toDoList 正在进行和已完成选项操作
$("ol ,ul").on("click", "input", function () {
// 先获取本地存储的数据
var data = getDate();
// 修改数据
var index = $(this).siblings("a").attr("id");
data[index].done = $(this).prop("checked"); // 把当前复选框选中状态传递给本地数据
console.log(data);
// 保存到本地存储
setDate(data);
// 重新渲染页面
load();
})
// 读取本地存储数据
function getDate() {
var data = localStorage.getItem("todolist");
if (data) {
// 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
return JSON.parse(data);
} else {
return [];
}
}
// 保存本地存储数据
function setDate(data) {
// localStorage.setItem(key, value); 保存本地存储数据
// 本地存储只识别字符串格式，数据转成字符串个事
localStorage.setItem("todolist", JSON.stringify(data));
}
// 渲染加载数据
function load() {
// 读取本地存储的数据
var data = getDate();
// 遍历之前先要清空ol里面的元素内容
$("ol, ul").empty();
var todoCount = 0; // 正在进行的个数
var doneCount = 0; // 已经完成的个数
// 遍历这个数据
$.each(data, function (i, n) {
// console.log(n);
if (n.done) {
$("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
doneCount++;
} else {
$("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
todoCount++;
}
});
$("#todoCount").text(todoCount);
$("#donecount").text(doneCount);
}
})
308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
