[JavaScript知识库] jQuery 3

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> jQuery 3 -> 正文阅读

[JavaScript知识库]jQuery 3

jQuery 为我们提供了方便的事件注册机制，是开发人员易于操作优缺点如下：

优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。

语法

????????语法:
element.事件(function () { })
$ ( "div" ).click (function ( ){事件处理程序})
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change. keydown、keyup.resize、scroll等
<body>
? ? <div></div>
? ? <script>
? ? ? ? $(function() {
? ? ? ? ? ? // 1. 单个事件注册
? ? ? ? ? ? $("div").click(function() {
? ? ? ? ? ? ? ? $(this).css("background", "purple");
? ? ? ? ? ? });
? ? ? ? ? ? $("div").mouseenter(function() {
? ? ? ? ? ? ? ? $(this).css("background", "skyblue");
? ? ? ? ? ? });
? ? ? ? })
? ? </script>
</body>

1.2. jQuery 事件处理

因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下：

on(): 用于事件绑定，目前最好用的事件绑定方法
off(): 事件解绑
trigger() / triggerHandler(): 事件触发

1.2.1 事件处理 on() 绑定事件

因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

语法

on0方法优势1:
可以绑定多个事件，多个处理事件处理程序。
( "div" ) .on ( {
nouseover: function () {},mouseout: function ( ) { },click: function() { }
}) ;
如果事件处理程序相同
( "div" ) .on ( "mouseover mouseout", function ( ) {(this) .toggleclass ( "current");
});
on(方法优势2:
可以事件委派操作。事件委派定义是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
( 'ul' ).on ( 'click', 'li', function (){
alert ( ' hello world! ' ) ;
});
在此之前有bind), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
on0方法优势3:
动态创建的元素，click()没有办法绑定事件, on()可以给动态生成的元素绑定事件
$ ( "div" ).on ( "click" , "p", function () {
..alert("俺可以给动态生成的元素绑定事件")}) ;
?( "div" ) .append( ("<p>我是动态创建的p</p>"));

<body>
? ? <div></div>
? ? <ul>
? ? ? ? <li>我们都是好孩子</li>
? ? ? ? <li>我们都是好孩子</li>
? ? ? ? <li>我们都是好孩子</li>
? ? </ul>
? ? <ol></ol>

? ? <script>
? ? ? ? $(function() {
? ? ? ? ? ? // (1) on可以绑定1个或者多个事件处理程序
? ? ? ? ? ? // $("div").on({
? ? ? ? ? ? // ? ? mouseenter: function() {
? ? ? ? ? ? // ? ? ? ? $(this).css("background", "skyblue");
? ? ? ? ? ? // ? ? },
? ? ? ? ? ? // ? ? click: function() {
? ? ? ? ? ? // ? ? ? ? $(this).css("background", "purple");
? ? ? ? ? ? // ? ? }
? ? ? ? ? ? // });
? ? ? ? ? ? $("div").on("mouseenter mouseleave", function() {
? ? ? ? ? ? ? ? $(this).toggleClass("current");
? ? ? ? ? ? });
??
? ? ? ? ? ? // (2) on可以实现事件委托（委派）
? ? ? ? ? ? // click 是绑定在ul 身上的，但是触发的对象是 ul 里面的小li
? ? ? ? ? ? // $("ul li").click();
? ? ? ? ? ? $("ul").on("click", "li", function() {
? ? ? ? ? ? ? ? alert(11);
? ? ? ? ? ? });

? ? ? ? ? ? // (3) on可以给未来动态创建的元素绑定事件
? ? ? ? ? ? $("ol").on("click", "li", function() {
? ? ? ? ? ? ? ? alert(11);
? ? ? ? ? ? })
? ? ? ? ? ? var li = $("<li>我是后来创建的</li>");
? ? ? ? ? ? $("ol").append(li);
? ? ? ? })
? ? </script>
</body>

1.2.3. 事件处理 off() 解绑事件

当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;

语法

????????off(0方法可以移除通过on0方法添加的事件处理程序。
$("p" ).off()//解绑p元素所有事件处理程序
$("p").off( "click")//解绑p元素上面的点击事件后面的foo是侦听函数名 ( "ul").off ( "click","li");l/解绑事件委托
如果有的事件只想触发一次，可以使用one()来绑定事件。
<body>
? ? <div></div>
? ? <ul>
? ? ? ? <li>我们都是好孩子</li>
? ? ? ? <li>我们都是好孩子</li>
? ? ? ? <li>我们都是好孩子</li>
? ? </ul>
? ? <p>我是一个P标签</p>
?? ?<script>
? ? ? ? $(function() {
? ?? ??? ??? ?// 事件绑定
? ? ? ? ? ? $("div").on({
? ? ? ? ? ? ? ? click: function() {
? ? ? ? ? ? ? ? ? ? console.log("我点击了");
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? mouseover: function() {
? ? ? ? ? ? ? ? ? ? console.log('我鼠标经过了');
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? $("ul").on("click", "li", function() {
? ? ? ? ? ? ? ? alert(11);
? ? ? ? ? ? });
??
? ? ? ? ? ? // 1. 事件解绑 off?
? ? ? ? ? ? // $("div").off(); ?// 这个是解除了div身上的所有事件
? ? ? ? ? ? $("div").off("click"); // 这个是解除了div身上的点击事件
? ? ? ? ? ? $("ul").off("click", "li");
??
? ? ? ? ? ? // 2. one() 但是它只能触发事件一次
? ? ? ? ? ? $("p").one("click", function() {
? ? ? ? ? ? ? ? alert(11);
? ? ? ? ? ? })
? ? ? ? })
? ? </script>
</body>

1.2.4. 事件处理 trigger() 自动触发事件

有些时候，在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;

语法

第—种: trigger0
element.click()1/第一种简写形式
lement.trigger ("type") l/第二种自动触发模式
第二种: triggerHandler(
element.triggerHandler (type)i/第三种自动触发模式
triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。

<body>
? ? <div></div>
? ? <input type="text">
? ? ??
? ? <script>
? ? $(function() {
? ? ? // 绑定事件
? ? ? $("div").on("click", function() {
? ? ? ? alert(11);
? ? ? });

? ? ? // 自动触发事件
? ? ? // 1. 元素.事件()
? ? ? // $("div").click();会触发元素的默认行为
? ? ??
? ? ? // 2. 元素.trigger("事件")
? ? ? // $("div").trigger("click");会触发元素的默认行为
? ? ? $("input").trigger("focus");
? ? ??
? ? ? // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
? ? ? $("input").on("focus", function() {
? ? ? ? $(this).val("你好吗");
? ? ? });
? ? ? // 一个会获取焦点，一个不会
? ? ? $("div").triggerHandler("click");
? ? ? // $("input").triggerHandler("focus");
? ? });
? ? </script>
</body>

1.3. jQuery 事件对象

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

语法

? ? ? ? element.on(events, [selector], function(event) {})

? ? ? ? 阻止默认行为： events.preventDefault()? 或者 teturn false

? ? ? ? 阻止冒泡 event.stopPropagation()

演示代码

?? ?<script>
? ? ? ? $(function() {
? ? ? ? ? ? $(document).on("click", function() {
? ? ? ? ? ? ? ? console.log("点击了document");
? ? ? ? ? ? })
? ? ? ? ? ? $("div").on("click", function(event) {
? ? ? ? ? ? ? ? // console.log(event);
? ? ? ? ? ? ? ? console.log("点击了div");
? ? ? ? ? ? ? ? event.stopPropagation();
? ? ? ? ? ? })
? ? ? ? })
? ? </script>
</body>

1.4. jQuery 拷贝对象

jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。

语法

? ? ? ? $.extend([deep], target, Object1, [objectN])

? ? ? ? 1 deep:如果设为 true 为深拷贝默认为false 浅拷贝

? ? ? ? 2 target 要拷贝的目标对象

? ? ? ? 3 object1? 待拷贝到第一个对象的对象

? ? ? ? 4 objectN: 待拷贝到第N个对象的对象

? ? ? ? 5 浅拷贝目标对象引用的被拷贝的对象地址修改目标对象会影响被拷贝的对象

? ? ? ? 6 深拷贝前面加true 完全克隆修改目标对象不会影响被拷贝对象script>
? ? ? ? $(function() {
? ??? ??? ??? ?// 1.合并数据
? ? ? ? ? ? var targetObj = {};
? ? ? ? ? ? var obj = {
? ? ? ? ? ? ? ? id: 1,
? ? ? ? ? ? ? ? name: "andy"
? ? ? ? ? ? };
? ? ? ? ? ? // $.extend(target, obj);
? ? ? ? ? ? $.extend(targetObj, obj);
? ? ? ? ? ? console.log(targetObj);
? ?
? ??? ??? ??? ?// 2. 会覆盖 targetObj 里面原来的数据
? ? ? ? ? ? var targetObj = {
? ? ? ? ? ? ? ? id: 0
? ? ? ? ? ? };
? ? ? ? ? ? var obj = {
? ? ? ? ? ? ? ? id: 1,
? ? ? ? ? ? ? ? name: "andy"
? ? ? ? ? ? };
? ? ? ? ? ? // $.extend(target, obj);
? ? ? ? ? ? $.extend(targetObj, obj);
? ? ? ? ? ? console.log(targetObj);?
? ? ? ? })
? ? </script>

1.5. jQuery 多库共存

实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。

语法

? ? ? ? jQuery解决方案：

? ? ? ? 1 吧里面的$符号统一改为jQuery 比如 jQuery ("div")

? ? ? ? 2 jQuery 变量规定新的名称: $.noConflict()? var xx = $.noConflict()

????????<script>
?? ?$(function() {
? ?? ??? ?// 让jquery 释放对$ 控制权让用自己决定
? ?? ??? ?var suibian = jQuery.noConflict();
? ?? ??? ?console.log(suibian("span"));
?? ?})
</script>

1.6. jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。这些插件也是依赖于jQuery来完成的，所以必须要先引入

jQuery文件，因此也称为 jQuery 插件。

jQuery 插件常用的网站：

jQuery 插件库 jQuery插件库-收集最全最新最好的jQuery插件
jQuery 之家 jQuery之家-自由分享jQuery、html5、css3的插件库

jQuery 插件使用步骤：
引入相关文件。（jQuery 文件和插件文件）
复制相关html、css、js (调用插件)。

综合案例: toDoList案例分析

? ? ? ? 1 案例介绍?

? ? ? ? 1 文本框里面输入内容按下回车就可以生成代办事项

? ? ? ? 2 点击代办事项复选框就可以吧当前数据添加到已完成事件里面

? ? ? ? 3 点击已完成事项复选框就可以吧当前数据添加到代办事项里面

? ? ? ? 4 但是本页面内容刷新页面不会丢失

案例：toDoList 分析

? ? ? ? 1 刷新页面不会丢失数据啊因为需要用到本地存储 localStorage

? ? ? ? 2 核心思路不管按下回车还是点击复选框都是把本地存储的数据加载到页面中这样刷新关闭页面不会丢失数据

? ? ? ? 3 存储的数据格式 var todolist = {[ title: 'xxx', done: false]}

? ? ? ? 4 注意点 1 本地存储 localStorage 里面只能存储字符串格式因此需要吧对象转换为字符串 JSON.stringify(data)

? ? ? ? 5 注意点2 获取本地存储数据需要吧里面的字符串转换为对象格式 JSQN.parse() 我们才能使用里面的数据

案例：toDoList 按下回车把新数据添加到本地存储里面

? ? ? ? 1 切记页面中的数据都要从本地存储里面获取这样刷新页面不会丢失数据所以先要吧数据保存到本地存储里面

? ? ? ? 2 利用事件对象.keyCode 判断用户按下回车键(13)

? ? ? ? 3 声明一个数据保存数据

? ? ? ? 4 先要读取本地存储原来的数据 (声明函数 getData())? 放到这个数组里面

? ? ? ? 5 之后吧最新从表单获取过来的数据追加到数组里面

? ? ? ? 6 最后吧数据存储给本地存储(声明函数 savaDate())

案例：toDoList 本地存储数据渲染加载到页面

? ? ? ? 1 因为后面也会经常渲染加载操作所以声明一个函数 load 方便后面调用

? ? ? ? 2 先要读取本地存储数据 (数据不要忘记转换为对象格式)

? ? ? ? ?3? 之后遍历这个数据 ($.each())? 有几条数据就生成几个小li 添加到ol 里面?

? ? ? ? 4 每次渲染之前先把原先里面ol的内容清空然后渲染加载最新的数据

toDoList 删除操作

? ? ? ? 1 点击里面的a 链接不是删除的li 而是删除本地储存对应的数据

? ? ? ? 2? 核心原理先获取本地存储数据删除对应的数据保存给本地数据重新渲染列表li

? ? ? ? 3 根据我们可以给链接自定义数据记录当前的索引号

? ? ? ? 4 根据这个索引号删除相关的数据--- 数据的splice(i, 1) 方法

? ? ? ? 5 存储修改后的数据然后存储给本地数据

? ? ? ? 6 重新渲染加载数据列表

? ? ? ? 7 因为a 是动态的我们使用on 方法绑定事件

toDoList 正在进行和已完成选项操作

? ? ? ? 1 当我们·点击了小的复选框修改本地存储数据在重新渲染数据列表

? ? ? ? 2 点击之后获取本地存储数据

? ? ? ? 3 修改对应数据属性 done 为当前复选框的checked 状态

? ? ? ? 4 之后保存数据到本地存储

? ? ? ? 5 重新渲染加载数据列表

? ? ? ? 6 load 加载函数里面新增一个条件如果当前数据done 为true 就是已经完成的就把列表渲染加载到ul里面?

? ? ? ? 7 如果当前数据的done 为 fasle 则是代办事项就把列表渲染加载到 ol 里面

案例：toDoList 统计正在进行个数和已经完成个数? ? ? ? ?

? ? ? ? 1 在我们load() 函数里面操作

? ? ? ? 2 声明2 个变量 todoCount 代办个数 doneCount 已完成个数

? ? ? ? 3 当进行吧遍历本地存储数据的时候，如果数据 done 为 false 则 todoCount++ 否则 doneCount++

? ? ? ? 4 最后修改响应的元素 text()

$(function() {

? ? // alert(11);

? ? // 1. 按下回车把完整数据存储到本地存储里面

? ? // 存储的数据格式 ?var todolist = [{title: "xxx", done: false}]

? ? load();

? ? $("#title").on("keydown", function(event) {

? ? ? ? if (event.keyCode === 13) {

? ? ? ? ? ? if ($(this).val() === "") {

? ? ? ? ? ? ? ? alert("请输入您要的操作");

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? // 先读取本地存储原来的数据

? ? ? ? ? ? ? ? var local = getDate();

? ? ? ? ? ? ? ? // console.log(local);

? ? ? ? ? ? ? ? // 把local数组进行更新数据把最新的数据追加给local数组

? ? ? ? ? ? ? ? local.push({ title: $(this).val(), done: false });

? ? ? ? ? ? ? ? // 把这个数组local 存储给本地存储

? ? ? ? ? ? ? ? saveDate(local);

? ? ? ? ? ? ? ? // 2. toDoList 本地存储数据渲染加载到页面

? ? ? ? ? ? ? ? load();

? ? ? ? ? ? ? ? $(this).val("");

? ? ? ? ? ? }

? ? ? ? }

? ? });

? ? // 3. toDoList 删除操作

? ? $("ol, ul").on("click", "a", function() {

? ? ? ? // alert(11);

? ? ? ? // 先获取本地存储

? ? ? ? var data = getDate();

? ? ? ? console.log(data);

? ? ? ? // 修改数据

? ? ? ? var index = $(this).attr("id");

? ? ? ? console.log(index);

? ? ? ? data.splice(index, 1);

? ? ? ? // 保存到本地存储

? ? ? ? saveDate(data);

? ? ? ? // 重新渲染页面

? ? ? ? load();

? ? });

? ? // 4. toDoList 正在进行和已完成选项操作

? ? $("ol, ul").on("click", "input", function() {

? ? ? ? // alert(11);

? ? ? ? // 先获取本地存储的数据

? ? ? ? var data = getDate();

? ? ? ? // 修改数据

? ? ? ? var index = $(this).siblings("a").attr("id");

? ? ? ? console.log(index);

? ? ? ? // data[?].done = ?

? ? ? ? data[index].done = $(this).prop("checked");

? ? ? ? console.log(data);

? ? ? ? // 保存到本地存储

? ? ? ? saveDate(data);

? ? ? ? // 重新渲染页面

? ? ? ? load();

? ? });

? ? // 读取本地存储的数据

? ? function getDate() {

? ? ? ? var data = localStorage.getItem("todolist");

? ? ? ? if (data !== null) {

? ? ? ? ? ? // 本地存储里面的数据是字符串格式的但是我们需要的是对象格式的

? ? ? ? ? ? return JSON.parse(data);

? ? ? ? } else {

? ? ? ? ? ? return [];

? ? ? ? }

? ? }

? ? // 保存本地存储数据

? ? function saveDate(data) {

? ? ? ? localStorage.setItem("todolist", JSON.stringify(data));

? ? }

? ? // 渲染加载数据

? ? function load() {

? ? ? ? // 读取本地存储的数据

? ? ? ? var data = getDate();

? ? ? ? console.log(data);

? ? ? ? // 遍历之前先要清空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);

? ? }

})

JavaScript知识库最新文章

ES6的相关知识点