上一主题 下一主题
返回列表 发新帖

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

[复制链接]

82

主题

556

帖子

771

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
771
发表于 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文档的结构进行动态的改变,添加子元素或者删除子元素.

回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表