jquery jQuery 基础教程（第4版） 读书笔记 # 《JQuery基础教程 4th》 读书笔记 ## 第一章 用途 1. 消除浏览器差异，提供统一的操作接口，且代码非常简洁 1. 取得文档中的元素 - 在 CSS 选择器的基础上添加了自定义选择器，相对 JS 原生选择器，具有上手快，代码简洁的优点 1. 修改页面的外观 - 屏蔽浏览器差异，页面加载后，仍能修改页面 1. 改变文档的内容 1. 响应用户的交互操作 1. 为页面添加动态效果 - 简单的代码即可为页面添加淡入，擦除等动画效果 1. 无需刷新页面从服务器获取信息（AJAX） 1. 简化常见的JavaScript任务 - $.each(obj, function(key, value) { }) ### 版本差异 1.x版本：兼容ie678，使用最为广泛的，官方只做bug维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 2.x版本：不兼容ie678，很少人使用，官方只做bug维护，功能不再新增。如果不考虑兼容版本低的浏览器可以使用2.x，最终版本：2.2.4 3.x版本：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。截至2018年6月13日，最新版本：3.3.1 CDN - https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js - https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js - https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js ## 第二章 ### $() 工厂函数 Jquery提供了很多功能性方法，如添加 CSS 类等等。这些操作均是针对 jquery 对象的操作，一切操作的基础就是获得 jquery 对象。$() 工厂函数就是用于获取 jquery 对象的关键。通过 CSS 选择器和 jquery 自定义选择器，可以很方便的获得 jquery 对象。 如果其他 JS 库已使用了 $ 作为全局变量，可以使用 jQuery() 代替。 ### 选择符 1. CSS 选择符 - 支持 CSS 1 ~ 3 几乎所有的选择符 2. 属性选择符 - $('img[alt]') 所有拥有 alt 属性的 img 标签 - $('img[title="hello"]') 所有 title 属性等于 hello 的 img 标签 - $('img[title*="hello"]') 所有 title 属性包含 hello 的 img 标签 - $('a[href^="mailto:"]') 所有 href 属性以 mailto: 开头的 a 标签 - $('a[href$=".pdf"]') 所有 href 属性以 .pdf 结尾的 a 标签 3. 自定义选择符：eq、odd、even - $('div:eq(1)') 网页中第二个 div 标签 - $('tr:odd') 筛选出网页中所有的 tr 标签组成数组，数组下表为奇数的 tr 标签 - $('tr:even') 筛选出网页中所有的 tr 标签组成数组，数组下表为偶数的 tr 标签 - $('td:contains(Henry)') 筛选出所有内容包含 Henry 的td标签 | 表单选择符 | 匹 配 | | :--------: | ---- | | :input | 输入字段、文本区、选择列表和按钮元素 | | :button | 按钮元素或type属性值为button的输入元素 | | :enabled | 启用的表单元素 | | :disabled | 禁用的表单元素 | | :checked | 勾选的单选按钮或复选框 | | :selected | 选择的选项元素 | 4. DOM 遍历方法 - filter 筛选匹配项 - next 下一项兄弟元素 - nextAll 后续所有的兄弟元素 - prev 上一项兄弟元素 - prevAll 之前的所有兄弟元素 - children 所有子元素 - siblings 所有兄弟元素（不包含自己） - addBack 追加原来选中的元素 5. 访问 DOM 元素 .get(index) 方法可以获得 jquery 对象中包含的第index+1项元素，也可以通过[index]的数组访问方式达到同样效果。 # 第三章 ## 事件 在页面加载后执行任务 1. $(document).ready(callback) - 在页面DOM准备好后执行回调（一般使用这个） - jquery 绑定方式，多次绑定的函数都会被调用 - 可简写成$(callback) - callback 会被传入一个参数，即 jqeury 本身，你可以通过在回调中使用 $ 避免，命名冲突 2. window.onload = function() {} - 在页面元素完全准备好后，（关联图片等下载完成） - 原生绑定方式，后者会覆盖前者 - 现代浏览器可以通过 addEventListener() 解决上面的问题 常用方法 | 方法 | 描述 | | ------------ | ------------ | | addClass() | 为元素添加 css 类 | | removeClass() | 为元素移除 css 类 | | toggleClass() | 为元素开关类，没有则添加，有则去除 | | on(event name, selector, function) | 在指定元素上委托事件 | | click() | 为指定元素绑定点击事件 | | off() | 为指定元素移除点击事件 | | trigger() | 为指定元素触发指定事件 | 阅读全文 2020-10-26 dogify 0 条评论 7 次浏览
默认分类 manjaro 滚动升级20.0.3后 electron-ssr 无法启动 # 问题描述 今天，我随手滚动升级了一下我的 manjaro，也就是从 20.0.2 升级到了 20.0.3，结果我的 electron-ssr 就无法启动了，运行程序后，它的启动框一闪而过，一如从未来过。 于是，我用命令行运行了下它，结果他打印了如下错误： ``` electron4: error while loading shared libraries: libre2.so.7: cannot open shared object file: No such file or directory ``` 于是我就开始查了，查了一圈，并没有完全一样的错误场景，提出的修复方案感觉与我的问题也不搭嘎。经过了十分钟的挣扎后，我开始了自我救赎之路。 首先，根据报错信息，搜索系统中是否存在 libre.so 之类的文件，为了避免漏查，名字不输全，采用模糊搜索。 ```bash [dogify@dogify-pc ~]$ sudo find / -name libre2* /usr/lib/libre2.so /usr/lib/libre2.so.8.0.0 /usr/lib/libre2.so.8 find: ‘/run/user/1000/doc’: 权限不够 find: ‘/run/user/1000/gvfs’: 权限不够 ``` 根据搜索结果可知，系统中并不存在 `libre2.so.7` 的文件，但存在 `libre2.so`，`libre2.so.8.0.0` 和 `libre2.so.8`。 猜测是因为系统升级时，把这个依赖库给同步升级了，而 electron4 依赖的版本号是7。而运行时找不到版本号为 7 的运行库，导致报错。 ## 解决方案一： 1. 找到 electron-ssr 的执行文件 ``` [dogify@dogify-pc ~]$ whereis electron-ssr electron-ssr: /usr/bin/electron-ssr /usr/share/electron-ssr ``` 1. 查看其使用的 electron 版本 ``` [dogify@dogify-pc ~]$ cat /usr/bin/electron-ssr #!/bin/bash exec electron4 /usr/share/electron-ssr/app.asar "$@" ``` 1. 将 `electron4` 改为 `electron6` 保存（因为我本地没有 5 的环境，所以就提到6） 1. 保存修改，再次运行，软件正常启动。 ## 解决方案二（未验证）： 从网上下载 libre2.so.7 文件。 因为 linux 桌面版本太多，我找了一圈也没有找到为 manjaro 编译的 libre2.so.7 文件，且出于系统库统一版本的角度，我最终放弃了此方法。 ## 后续 在经过方案一的操作后，我的软件启动了，也可以正常的执行代理。但在我需要修改订阅地址时，我发现软件打开是白屏的，无法进行任何操作。 猜测大概是因为 electron-ssr 是基于electron4开发的，相对于现在，版本过于老旧，导致兼容性问题。解决办法估计要去获取其源码，做针对兼容性修改，重新编译发布。但是这超出了我的知识范围，且现阶段无此精力。最后我选择转战了 shadowscoks-qt5。 ## 后续的后续 经过我的查找，我发现了新的支持ssr订阅的linux客户端 -[qv2ray](https://github.com/Qv2ray/Qv2ray "qv2ray")。 v2ray 是一个协议簇，包含了之前很多的协议，比如ss、ssr等。 该软件同时支持 macos、linux和windows，经过简单的适用，完美符合我的需求。安装过程参考其文档介绍，在此记录下，你可以查看以下我的安装流程，也可以查看 [文档](https://qv2ray.net/ "文档")。 manjaro 可以直接通过包管理工具安装，还需要安装其依赖的v2ray-core。其他 linux 发行版可以使用其提供的 AppImage封装包。 安装完成后，还需要下载配套的ssr插件，使软件支持ssr功能。请根据系统版本下载对应的插件文件，linux和macos下载so文件，windows下载dll文件，置于软件的plugins目录下。插件目录可以通过点击软件页面上的插件-打开本地插件目录按钮打开。  插件拷贝进插件目录后，重启软件，正常情况下你会看到如上图提示的插件已加载页面。 然后添加订阅信息，点击分组，打开以下页面。  1. 随便填个分组名 1. 选择订阅设置标签页，勾选此分组是一个订阅 1. 填写你的订阅地址，点击下方的更新订阅 1. 更新完成后就获得了所有节点 1. 关闭对话框，开始使用 正常配置的情况下，你可以在软件主页面左侧看到订阅的分组，双击该分组可以看到所有的订阅节点，右键节点可以连接此节点。  阅读全文 2020-07-18 dogify 2 条评论 688 次浏览
Laravel laravel 定时任务生成root权限日志导致应用崩溃 # 问题 开发一个培训报名系统，需要定时关闭订单，发送上课通知等操作，于是接入了 Laravel 的定时任务。但实际运行时，出现 Laravel 无权限写入日志问题，导致应用异常崩溃的问题。 # 原因 服务器采用的是 linux，Laravel 定时任务是直接以 root 用户的身份执行的，而定时任务执行时创建了新日志文件，新文件的权限是 `-rw-r--r-- 1 root root`，这样的权限配置使得正常运行项目的 www 用户无法写入此日志文件，导致错误。 # 解决方法 经过多方查询，最后采用命令 `sudo crontab -u www -e` 以 www 用户身份配置定时任务解决问题。 阅读全文 2020-05-27 dogify 0 条评论 1147 次浏览
Laravel Laravel 利用 doctrine/annotations 在注解中实现角色权限控制 [TOC] ## 基本术语 项目中基于常见的角色和权限方式实现权限控制，下面介绍一些术语。 - 用户 - 登录使用系统的自然人 - 角色 - 系统中用户的身份，比如管理员，普通用户，不同的角色权限不同，同一用户可以有任意多个角色 - 权限 - 用户行为，具体为做某件事的能力，有权限即能做此事。一个角色可以有任意项权限，拥有多个角色的用户即拥有这些所有权限的并集。 ## 简单用法 本文实现的权限控制只要是针对API进行权限控制，控制力度分3级。具体的实现方法是在控制器的方法注释中添加注解。注解会在 Laravel 的中间件中被读取，然后判断是否有权限。没有权限则会返回统一的报错。 阅读全文 2020-05-09 dogify 0 条评论 109 次浏览
php php获取3天内生日人员 # 需求 项目中遇到需要显示3天内生日的人员的需求，查了一波资料，在此作个记录，方便以后查询。 # BiuBiuBiu 数据库中人员信息字段如下所示 | name | birthday | | ------------ | ------------ | | 张三 | 1991-04-19 | | 李四 | 1992-04-20 | | 王五 | 1993-04-21 | | 赵六 | 1994-04-22 | | 孙七 | 1994-04-23 | 假定今日为2020-04-20，我们期望返回生日在04-20到04-22的人员。月和日的判断比较好处理，但是每个人出生的年是不一样的，无法简单的筛选某3天就返回结果。 好在，mysql 提供了类似php格式化日期格式的函数 [`DATE_FORMAT(date,format)`](https://www.w3school.com.cn/sql/func_date_format.asp "`DATE_FORMAT(date,format)`")，第一个参数是要格式化的列名，第二个参数是格式字符串。 以下 SQL 可以将年份统一为2020，且保留日月信息。 `SELECT name,birthday, DATE_FORMAT(birthday, "2020-%m-%d") as format_birthday FROM users` | name | birthday | format_birthday| | ------------ | ------------ | ------ | | 张三 | 1991-04-19 | 2020-04-19 | | 李四 | 1992-04-20 | 2020-04-20 | | 王五 | 1993-04-21 | 2020-04-21 | | 赵六 | 1994-04-22 | 2020-04-22 | | 孙七 | 1994-04-23 | 2020-04-23 | 剩下的问题就很简单了，只要format_birthday在2020-04-20与2020-04-22之间的人就很简单了。 以下是 Laravel 中通过模型查询的代码： ```php $year = date('Y'); User::whereBetween(DB::raw("date_format(birthday, '{$year}-%m-%d')"), [Carbon::now()->toDateString(), Carbon::parse("+3 days")->toDateString()] )->get(); ``` 阅读全文 2020-04-18 dogify 0 条评论 537 次浏览
