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

      第三章 jQuery选择器

      3.1 jQuery选择器是什么

      选择器是jQuery的根基,在jQuery中,对事件的处理、遍历DOM和Ajax操作都要依赖选择器。

      3.1.1 CSS选择器

      CSS(Cascading Style Sheets,层叠样式表)是一项出色的技术。利用CSS选择器能轻松的对某个元素添加样式而不用改动HTML结构,只需要添加不同的CSS规则,就可以得到各种不同样式的网页。常见的CSS选择器分类有:标签选择器、ID选择器、类选择器、群组选择器、后代选择器、通配选择器等。关于CSS选择器在这里不在赘述,大家可以在网上自行查找学习。

      3.1.2 jQuery选择器

      jQuery中的选择器完全继承了CSS的风格。利用jQuery选择器,可以非常便捷和快速的找出特定的DOM元素,然后为其添加相应的行为。jQuery的行为规则都必须在获取到元素后才能生效。例如:

      // ==UserScript==
      // @name         Tampermonkey jQuery click
      // @namespace    https://kurt.wang/
      // @version      0.1
      // @description  click test!
      // @author       kurt
      // @require https://code.jquery.com/jquery-3.3.1.min.js
      // @match        https://52youhou.com/*
      // @grant        none
      // ==/UserScript==
      
      (function() {
          'use strict';
      $("img").click(function(){
      alert("你点击了img标签!");
      });
      })();

      在你点击任意图标的时候,浏览器会弹出提示窗口。

      对比两种选择器写法:

      CSS选择器

      img{
      ...
      }

      jQuery选择器

      $("img")
      ...

      由代码可以看出jQuery选择器的写法与CSS选择的写法十分相似,大家可以参考CSS选择器编写代码。

      下一节:

      3.2jQuery选择器

      辽宁省·葫芦岛市
    • 5
    • 1
    • 1
    • 431
    • 0
      Hneny初级会员
      转发了
    • 单栏布局 侧栏位置: