[油猴脚本开发指南]特别篇Jquery引用

李恒道 · 发表于 2021-2-10 17:17:09

关于特别篇

本文由UP思噗提供，对其进行简单排版

在此感谢

jquery基础介绍

jQuery是一个快速、简洁的，优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。对于现在的主流浏览器基本支持。

jquery安装

官网下载，直接下载压缩源码。
https://jquery.com/ 官方网址，访问较慢

图片.png

使用内容分发网络
CDN 地址：
https://www.jq22.com/cdn/

图片.png

学习资料

官网文档
https://api.jquery.com/ 访问较慢，内容为英文

图片.png

2 国内翻译
https://www.jquery123.com/
中文文档，方便搜索。

图片.png

Jquery油猴脚本的导入

想要使用在油猴中使用Jquery脚本，需要先导入Jquery脚本.
1：自己引入Jquery 库，注入script元素
2: 使用油猴脚本的@require 注入脚本

小提醒

在油猴用户脚本中引入jQuery库，最好运行在沙盒环境下，简单地加一条元数据@grant unsafeWindow即可；如果运行在@grant none情形下，在脚本的顶部一定要添加一条this.$ = this.jQuery = jQuery.noConflict(true);以防止与原页面jQuery库冲突，导致原页面功能异常。

来自https://blog.csdn.net/nalan_yc/article/details/84769012

Jquery的简易使用

元素选取

在进行网页的操作中，最重要的一步就是定位要操作的元素，如果使用js自带的元素选择器，进行定位会比较麻烦，而使用Jquery 会比较简单。
Jquery是使用CSS选择器进行定位的，使用标准的CSS选择器即可进行元素的选取和定位。
例如：

> p = $(“p”); 选取所有的 p 元素。

发送Ajax请求

使用js 的原生Ajax 请求比较麻烦，同时不同的浏览器内核的Ajax的接口样式和使用方式也不尽相同，使用Jquery能使用统一的方式在所有平台上便捷的使用Ajax请求。
例如：

图片.png

简化属性操作

使用Jquery可以方便的操作DOM 元素的各种属性，

简化CSS 操作

使用Jquery可以简化对DOM元素的CSS属性的动态设置。可以进行简单的动画操作.
$().css({css属性});

简化各种事件的处理

使用Jquery可以注册和拦截所有元素的事件,并对之进行处理拦截,包括windows窗体对象.
注册新的处理事件和监听事件变得很容易.

简化对字段值的获取

使用Jquery可以轻松的获得DOM元素的属性值,设置并获得其值.
$.attr()

简化对DOM对象的插入删除操作

这个也可以叫做简化对HTML文档的结构进行动态的改变,添加子元素或者删除子元素.

myaijarvis · 发表于 2022-3-8 21:42:19

在沙盒环境下引入jquery
最新版edge浏览器：
Tampermonkey: couldn't load @require from URL https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

然后使用了$符号的都报错谷歌浏览器上正常，也不知道为什么

李恒道 · 发表于 2022-3-8 21:54:42

myaijarvis 发表于 2022-3-8 21:42
在沙盒环境下引入jquery
最新版edge浏览器：
Tampermonkey: couldn't load @require from URL https:/ ...

哥哥开一个帖子，论坛发一下你代码看看
这样我也不知道原因

myaijarvis · 发表于 2022-3-8 22:15:41

李恒道发表于 2022-3-8 21:54
哥哥开一个帖子，论坛发一下你代码看看
这样我也不知道原因

https://bbs.tampermonkey.net.cn/thread-1855-1-1.html 发了一个帖子

myaijarvis · 发表于 2022-3-8 22:18:31

李恒道发表于 2022-3-8 21:54
哥哥开一个帖子，论坛发一下你代码看看
这样我也不知道原因

你好，我刚刚看了一下，帖子的图片被吞了，你加下我联系方式吧 qq 。180.7479.190
或者我加你也可以的

Jawon_JW · 发表于 2022-5-6 15:36:15

哥哥我有个小疑问，
“在脚本的顶部一定要添加一条this.$ = this.jQuery = jQuery.noConflict(true);以防止与原页面jQuery库冲突”
这句话说的是在require jQuery库之后再加吧，那会不会在执行这句代码还没执行完时，页面中的js代码已经使用了我引入的jQuery，导致冲突；还是说油猴在插入代码的过程中页面不会加载其他代码，不存在这个问题呢？

李恒道 · 发表于 2022-5-6 16:26:53

jawon 发表于 2022-5-6 15:36
哥哥我有个小疑问，
“在脚本的顶部一定要添加一条this.$ = this.jQuery = jQuery.noConflict(true);以防止 ...

// ==UserScript==
// @name       New Userscript
// @namespace http://tampermonkey.net/
// @version    0.1
// @description  try to take over the world!
// @author    You
// @match       https://bbs.tampermonkey.net.cn/forum.php
// @icon       https://www.google.com/s2/favico ... tampermonkey.net.cn
// @grant       none
// @run-at    document-start
// ==/UserScript==

alert("8888")
在任何一个页面跑一下，不点击alert就不会继续执行页面操作的
tm脚本本质上就是回调一个function函数而已
一般来说只要执行到，就不会同步执行其他代码
还有一个就是
我更推荐在网页存在jq的时候直接引用页面jq
不存在的时候再引入自身jq
这样就可以100%避免类似问题
只是我个人比较学院派参考资料想写的完善一点罢了
实际不需要这么复杂

Jawon_JW · 发表于 2022-5-6 18:54:35

李恒道发表于 2022-5-6 16:26
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/

明白啦，谢谢哥哥

qq2573835 · 发表于 2023-5-15 12:37:23

我觉得有目录的jQuery文档更好看。 https://www.w3school.com.cn/jquery/index.asp
还可以在页面试一下效果。

李恒道 · 发表于 2023-5-15 15:32:22

qq2573835 发表于 2023-5-15 12:37
我觉得有目录的jQuery文档更好看。 https://www.w3school.com.cn/jquery/index.asp
还可以在页面试一下效果 ...

这个页面也挺不错的！