jQuery学习笔记3
jQuery 事件注册
jQuery 事件处理
<div></div><ul><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li></ul><ol></ol><script>$(function () {// 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", "blue");// },// });$("div").on("mouseenter mouseleave", function () {$(this).toggleClass("current");});// (2)on可以实现事件委托(委派)$("ul li").click();$("ul").on("click", "li", function () {alert(11);});//click 是绑定在ul身上的,但是触发的对象是ul里面的小li// (3)on可以给动态创建的元素绑定事件// $("ol li").click(function () {// alert(11);// });$("ol").on("click", "li", function () {alert(11);});var li = $("<li>我是后来创建的</li>");$("ol").append(li);});</script>
$(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.点击的删除按钮,可以删除当前的微博留言// $("ul a").click(function () {// // 此时的click不能给动态创建的a添加事件// alert(11);// });// on可以给动态创建的元素绑定事件$("ul").on("click", "a", function () {$(this).parent().slideUp(function () {$(this).remove();});});});
$(function () {$("div").on({click: function () {console.log("我点击了");},mouseover: function () {console.log("我鼠标经过了");},});$("ul").on("click", "li", function () {alert(22);});// 1.事件解绑off// $("div").off(); // 这个是解除了div上的所有事件$("div").off("click"); // 这个是解除了div身上的点击事件// 2.one() 但是它只能触发事件一次$("p").one("click", function () {alert(11);});});
$(function () {$("div").on("click", function () {alert(11);});// 自动触发事件// 1.元素.事件()// $("div").click(); //会触发元素的默认行为// 2.元素.trigger("事件") 会触发元素的默认行为// $("input").trigger("focus");// 3.元素.triggerHandler("事件") 就是不会触发元素的默认行为$("div").triggerHandler("click");$("input").on("focus", function () {$(this).val("你好吗");});// $("input").triggerHandler("focus");});
jQuery 事件对象
$(function () {$(document).on("click", function () {console.log("点击了document");});$("div").on("click", function () {console.log(event);console.log("点击了div");event.stopPropagation();});});
jQuery 对象拷贝
注意浅拷贝与深拷贝的特点
$(function () {//var targetObj = {};var obj = {id: 1,name: "andy",};// $.extend(target, obj)$.extend(targetObj, obj);console.log(targetObj);var targetObj = {id: 0,msg: {sex: "男",},};var obj = {id: 1,name: "andy",msg: {age: 18,},};// $.extend(target, obj)// 1.浅拷贝就是把原来对象里面的复杂数据类型地址拷贝给目标对象// $.extend(targetObj, obj);// console.log(targetObj); // 会覆盖targetObj里面原来的数据// targetObj.msg.age = 20;// console.log(obj);// 1.深拷贝就是把里面的数据完全复制一份给目标对象,如果里面有不冲突的属性,会合并到一起$.extend(true, targetObj, obj);// console.log(targetObj); // 会覆盖targetObj里面原来的数据targetObj.msg.age = 20;console.log(targetObj);console.log(obj);});
jQuery 多库共存
$(function () {function $(ele) {return document.querySelector(ele);}console.log($("div"));// 1.如果$符号冲突 我们就使用jQueryjQuery.each();// 2.让jquery释放对$控制权 让自己决定var suibian = jQuery.noConflict();console.log(suibian("span"));suibian.each();});
jQuery 插件
注意头部底部不用复制,头部是seo标识,底部是广告之类的
案例:toDoList
本地存储:
var todolist = [{title: "我今天吃八个馒头",done: false,},{title: "我今天学习jq",done: false,},];localStorage.setItem("todo", todolist);// 1.本地存储里面只能存储字符串的数据格式,把我们的数组对象转换成字符串格式 JSON.stringify()localStorage.setItem("todo", JSON.stringify(todolist));var data = localStorage.getItem("todo");console.log(typeof data);console.log(data[0].title);// 2.获取本地存储的数据,我们需要把里面的字符串数据转换为对象格式 JSON.parse()data = JSON.parse(data);console.log(data);
索引号,如果是亲兄弟,就会编排,如果不是亲兄弟,就不会编排,点击任何一个ul当中的a标签都是索引0
<div><a href="#">1</a><a href="#">2</a><a href="#">3</a></div><ul><li><a href="#">a</a></li><li><a href="#">b</a></li><li><a href="#">c</a></li></ul><script>$("div a").click(function() {console.log($(this).index());})$("ul a").click(function() {console.log($(this).index());})</script>
$(function () {// alert(11);// 1.按下回车 把完整数据 存储到本地存储里面// 2.存储的数据格式 var todolist = [{title: 'xxx', done: false}]load();$("#title").on("keydown", function (event) {// console.log(event);if (event.keyCode === 13) {if ($(this).val() === "") {alert("请输入你的操作");} else {// 先读取本地存储原来的数据var local = getData();console.log(local);// 把local数组进行更新数据,把最新的数据追加给local数组local.push({ title: $(this).val(), done: false });// 把这个数组local 存储给本地存储saveData(local);// 2. toDoList 本地存储数据渲染加载到页面load();$(this).val("");}}});// 3.toDoList删除操作$("ol").on("click", "a", function () {// alert(11);// 先获取本地存储var data = getData();console.log(data);// 修改数据var index = $(this).attr("id");console.log(index);data.splice(index, 1);// 保存到本地存储saveData(data);// 重新渲染页面load();});// 4.toDoList 正在进行和已经完成选项操作$("ol,ul").on("click", "input", function () {// alert(11)// 先获取本地存储的数据var data = getData();// 修改数据var index = $(this).siblings("a").attr("id");console.log(index);// data[?].done = ?data[index].done = $(this).prop("checked");console.log(data);// 保存到本地存储saveData(data);// 重新渲染页面load();});// 读取本地存储的数据function getData() {var data = localStorage.getItem("todolist");if (data !== null) {// 本地存储里面的数据是字符串格式的,但是我们需要的是对象格式的return JSON.parse(data);} else {return [];}}// 保存本地存储数据function saveData(data) {localStorage.setItem("todolist", JSON.stringify(data));}// 渲染加载数据function load() {// 读取本地存储的数据var data = getData();console.log(data);// 遍历之前先要清空ol里面的元素内容,不然每次按钮按下keydown的时候,就会往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 hred='javascript:;' id=" +i +"></a></li>");doneCount++;} else {$("ol").prepend("<li><input type='checkbox'/><p>" +n.title +"</p><a hred='javascript:;' id=" +i +"></a></li>");todoCount++;}});console.log(todocount, donecount);$("#todocount").text(todoCount);$("#donecount").text(doneCount);}
});
相关文章:

jQuery学习笔记3
jQuery 事件注册 jQuery 事件处理 <div></div><ul><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li></ul><o…...

SpringMVC(六)拦截器
目录 1.什么是拦截器 2.拦截器和过滤器有哪些区别 3.拦截器方法 4.单个拦截器的执行流程 5.使用拦截器实现用户登录权限验证(实例) 1.先在html目录下写一个login.html文件 2.在controller包下写一个LoginController文件 3.加拦截器 1.创建一个conf…...

单区域OSPF配置实验
1、绘制拓扑图 2、配置ip地址 R0 Router(config)#interface FastEthernet0/0 Router(config-if)#ip address 192.168.1.1 255.255.255.0 Router(config-if)#no shutdown Router(config-if)#exit Router(config)#interface FastEthernet0/1 Router(config-if)#ip address 192.16…...
Linux上vi(vim)编辑器使用教程
vi(vim)是上Linux非常常用的编辑器,很多Linux发行版都默认安装了vi(vim)。vi(vim)命令繁多但是如果使用灵活之后将会大大提高效率。vi是“visual interface”的缩写,vim是vi IMproved(增强版的vi)。在一般的系统管理维护中vi就够用,如果想使用…...
虚拟机图像界面打不开了
今天打开虚拟机的时候图形界面打不开,进入到tty1中,而且还没有网,找了好几个办法都不行最后找到这个博主发的,解决了 修复 https://www.cnblogs.com/shuimuqingyang/p/15070690.html...
《经典力学》笔记
文章目录 直线运动弹簧和简谐运动动能,势能,机械能动量动量守恒机械能守恒弹性碰撞和非弹性碰撞冲量 圆周运动匀速圆周运动转动惯量平行轴定理 角动量角动量守恒 英语 直线运动 弹簧和简谐运动 F s → − k x 1 → \overrightarrow{F_s}-k \overrighta…...

【论文+源码】基于Spring和Spring MVC的汉服文化宣传网站
为了实现一个基于Spring和Spring MVC的汉服文化宣传网站,我们需要创建一个简单的Web应用程序来展示汉服文化和相关信息。这个系统将包括以下几个部分: 数据库表设计:定义文章、用户和评论的相关表。实体类:表示数据库中的数据。DAO层接口及MyBatis映射文件:用于与数据库交…...

计算机的错误计算(一百九十九)
摘要 用大模型判断下面四个函数 有何关系?并计算它们在 x0.00024时的值,结果保留10位有效数字。两个大模型均认为它们是等价的。实际上,还有点瑕疵。关于计算函数值,大模型一只是纸上谈兵,没计算;大模型二…...
【AI日记】25.01.02 kaggle 比赛 3-1
【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】 工作 参加:kaggle 比赛 Forecasting Sticker Sales时间:4 小时 读书 书名:秦制两千年时间:5 小时阅读原因:之前看过 《商君书》,对秦制…...

el-pagination 为什么只能展示 10 条数据(element-ui@2.15.13)
好的,我来帮你分析前端为什么只能展示 10 条数据,以及如何解决这个问题。 问题分析: pageSize 的值: 你的 el-pagination 组件中,pageSize 的值被设置为 10:<el-pagination:current-page"current…...

Ps:将数据组作为文件导出
Ps菜单:文件/导出/数据组作为文件 Export/Data Sets as Files “将数据组作为文件导出” Export Data Sets as Files命令是 Photoshop 数据驱动设计功能的一部分,用于结合可变数据和模板,生成多个文件。 1、自动化批量生成 适用于名片、证书、…...
nohup.out日志
1、nohup.out生成 在你执行 nohup java -jar ruoyi-admin.jar & 时,程序原本要输出到控制台的所有内容,包括日志框架输出到控制台的部分,都会被写入 nohup.out 。nohup 命令运行程序时,默认情况下,nohup 会把程序的…...
01 背包
文章目录 前言代码思路 前言 总是感觉有点没有完全懂,但是说起来的时候好像又懂一点点,就是我现在的状态。 代码 二维的直接的版本 #include<iostream> #include<algorithm>using namespace std;const int N 1010; int f[N][N]; int v[…...

QT-------------多线程
实现思路 QThread 类简介: QThread 是 Qt 中用于多线程编程的基础类。可以通过继承 QThread 并重写 run() 方法来创建自定义的线程逻辑。新线程的执行从 run() 开始,调用 start() 方法启动线程。 掷骰子的多线程应用程序: 创建一个 DiceThre…...

【JVM】深入了解Java虚拟机-------内存划分、类加载机制、垃圾回收机制
目录 什么是JVM? 内存划分: 1.堆 (共享) 2.栈 (私有) 3.元数据区(共享) 4.程序计数器(私有) 示例: JVM 类加载 一.类加载过程 1.加载 2.验证 3.…...

k8s部署juicefs
操作系统k8smysqlminiojuicefs内核centos8.21.19.18.0.39RELEASE.2023-12-20T01-00-02Zv0.19.04.18.0-193.el8.x86_64 本文k8s较老采用老版本的juicefs,中间件也都是部署在k8s上。测试是否能成功创建动态pvc挂在到测试pod当中并查看到数据信息。一些偏理论知识就不多…...

【ArcGIS微课1000例】0136:制作千层饼(DEM、影像、等高线、山体阴影图层)
文章目录 一、效果展示二、数据准备三、制作过程1. 打开软件2. 制作DEM图层3. 制作影像层4. 制作TIN层5. 制作等高线层四、注意事项一、效果展示 二、数据准备 订阅专栏后,从专栏配套案例数据包中的0136.rar中获取。 1. dem 2. 影像 3. 等高线 4. tin 三、制作过程 1. 打开软…...

Ajax数据爬取
有时我们用requests 抓取页面得到的结果,可能和在浏览器中看到的不一样:在浏览器中可以看到正常显示的页面数据,而使用requests 得到的结果中并没有这些数据。这是因为 requests 获取的都是原始 HTML 文档,而浏览器中的页面是JavaScript 处理…...
快速上手大模型的对话生成
本项目使用0.5B小模型,结构和大模型别无二致,以方便在如CPU设备上快速学习和上手大模型的对话上传 #mermaid-svg-Z86hUiQZ0hg9BVji {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Z86hUiQZ0h…...

DateTimeExtensions:一个轻量C#的开源DateTime扩展方法库
推荐一个专门为System.DateTime编写的扩展方法库。 01 项目简介 该项目主要是为System.DateTime和System.DateTimeOffset的编写的扩展方法,包括自然日期差值的文本表示(精确和人性化四舍五入)、多个时区的节假日和工作日计算。 核心扩展方…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...

20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...