• 注册
    • 查看作者
    • 利用jQuery写Tampermonkey脚本第一章

      第一章 jQuery简介

      随着Tampermonkey的兴起,让更多的人认识到了前端的重要性,JavaScript又走进了许多人的视野。在众多JavaScript库中,我唯独青睐jQuery。

      1.1 JavaScript和JavaScript库

      JavaScript是Netscape公司开发的一种脚本语言(scripting language)。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系,使网页包含更多活跃的元素和更加精彩的内容。JavaScript自身存在3个弊端,即复杂的文档对象模型(DOM),不一致的浏览器实现和缺乏边界的开发、调试工具。

      为了简化JavaScular的开发,一些JavaScript库诞生了,JavaScript库封装了很多预定义的对象和实用函数,能帮助使用者轻松建立有高难度交互的Web 2.0特性的富客户端页面,并且兼容了各大浏览器。

      Jquery是继Prototype之后有一个优秀的JavaScript库,是一个由John Resig创建于2006年1月的开源项目。jQuery凭借简介的语法和跨平台的兼容性,极大的简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。jQuery强的的理念是写得少,做的多(write less,do more)。jQuery独特的选择器、链式操作、时间处理机制和封装完善的Ajax都是其他JavaScript库望尘莫及的。

      1.2 如何引用

       在Tampermonkey中引用jQuery非常方便,你可以通过 CDN(内容分发网络) 引用它。

      // @require https://code.jquery.com/jquery-3.3.1.min.js

      Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

      如果你的脚本用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你脚本用户是国外的可以使用谷歌和微软。

      • Staticfile CDN:https://cdn.staticfile.org/jquery/x.x.x/jquery.min.js 

      • 百度 CDN:https://apps.bdimg.com/libs/jquery/x.x.x/jquery.min.js 

      • 又拍云 CDN:https://upcdn.b0.upaiyun.com/libs/jquery/jquery-x.x.x.min.js 

      • 新浪 CDN:https://lib.sinaapp.com/js/jquery/x.x.x/jquery-x.x.x.min.js 

      • Google CDN:https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js 

      • Microsoft CDN:https://ajax.aspnetcdn.com/ajax/jquery/jquery-x.x.x.min.js

      注:X.X.X换成你需要的版本。

      1.3你的第一个jQuery脚本

      在编写脚本前,首先明确一点,在jQuery库中,$就是jQuery的一个简写形式,例如$("#no")和jQuery("#no")是等价的,$.ajax和jQuery.ajax是等价的。

      下面编写一个jQuery程序脚本。

      // ==UserScript==
      // @name         Tampermonkey Hello jQuery
      // @namespace    https://kurt.wang/
      // @version      0.1
      // @description  try to take over the world!
      // @author       kurt
      // @require https://code.jquery.com/jquery-3.3.1.min.js
      // @match        https://52youhou.com/*
      // @grant        none
      // ==/UserScript==
      
      (function() {
          'use strict';
      $(document).ready(function(){
      alert("Hello jQuery");
      });
         
      })();

      当你访问吾爱油猴的网站中任何一个页面的时候,会弹出如下的窗口。

      怎么样,你学会了吗?是不是很简单?如果你对脚本头一头雾水,可以参考我的另一篇文章,它对这些脚本头进行了一些解释,当然,这是官方解释的翻译版本。鉴于本人英文水平基本为0,所以大多数还是有一些误差,欢迎指正。

      下周预告“DOM对象与jQuery对象简介”,欢迎关注。

      辽宁省·葫芦岛市
    • 15
    • 10
    • 0
    • 710
    • 0
      squirrel初级会员
      学习一下,感谢分享
    • 0
      小蘑菇辛勤初级会员
      这个好!膜拜大佬,期待更多的好文章
    • 0
      平凡人a初级会员
      牛逼
    • 0
      油猴爱吾高级会员社区元老
      [s-6666]
    • 0
      现代方斑马初级会员
      就喜欢看这样的原创作品
    • 0
      痴情与大炮初级会员
      正在学习怎么编写脚本呢
    • 0
      月饼孤独初级会员
      技术贴,学习了
    • 0
      老黑高级会员VIP1首席运营官
      打赏了52金币。
    • 0
      吾爱油猴中级会员VIP3超级管理员
      打赏了74金币。
    • 0
      听话用雪碧初级会员
      学习了,感谢分享
    • 单栏布局 侧栏位置: