You Don't Need jQuery

时间:2022-01-01 04:17:09

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10+ 以上浏览器。

目录

  1. Translations
  2. Query Selector
  3. CSS & Style
  4. DOM Manipulation
  5. Ajax
  6. Events
  7. Utilities
  8. Alternatives
  9. Browser Support

Translations

Query Selector

常用的 class、id、属性 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是

  • document.querySelector 返回第一个匹配的 Element
  • document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array
  • 如果匹配不到任何 Element,jQuery 返回空数组 [],但 document.querySelector 返回 null,注意空指针异常。当找不到时,也可以使用 || 设置默认的值,如 document.querySelectorAll(selector) || []

注意:document.querySelector 和 document.querySelectorAll 性能很差。如果想提高性能,尽量使用document.getElementByIddocument.getElementsByClassName 或 document.getElementsByTagName

  • 1.0 Query by selector

    // jQuery
    $('selector'); // Native
    document.querySelectorAll('selector');
  • 1.1 Query by class

    // jQuery
    $('.css'); // Native
    document.querySelectorAll('.css'); // or
    document.getElementsByClassName('css');
  • 1.2 Query by id

    // jQuery
    $('#id'); // Native
    document.querySelector('#id'); // or
    document.getElementById('id');
  • 1.3 Query by attribute

    // jQuery
    $('a[target=_blank]'); // Native
    document.querySelectorAll('a[target=_blank]');
  • 1.4 Find sth.

    • Find nodes

      // jQuery
      $el.find('li'); // Native
      el.querySelectorAll('li');
    • Find body

      // jQuery
      $('body'); // Native
      document.body;
    • Find Attribute

      // jQuery
      $el.attr('foo'); // Native
      e.getAttribute('foo');
    • Find data attribute

      // jQuery
      $el.data('foo'); // Native
      // using getAttribute
      el.getAttribute('data-foo');
      // you can also use `dataset` if only need to support IE 11+
      el.dataset['foo'];
  • 1.5 Sibling/Previous/Next Elements

    • Sibling elements

      // jQuery
      $el.siblings(); // Native
      [].filter.call(el.parentNode.children, function(child) {
      return child !== el;
      });
    • Previous elements

      // jQuery
      $el.prev(); // Native
      el.previousElementSibling;
    • Next elements

      // next
      $el.next();
      el.nextElementSibling;
  • 1.6 Closest

    Closest 获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。

    // jQuery
    $el.closest(queryString); // Native
    function closest(el, selector) {
    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector; while (el) {
    if (matchesSelector.call(el, selector)) {
    return el;
    } else {
    el = el.parentElement;
    }
    }
    return null;
    }
  • 1.7 Parents Until

    获取当前每一个匹配元素集的祖先,不包括匹配元素的本身。

    // jQuery
    $el.parentsUntil(selector, filter); // Native
    function parentsUntil(el, selector, filter) {
    const result = [];
    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector; // match start from parent
    el = el.parentElement;
    while (el && !matchesSelector.call(el, selector)) {
    if (!filter) {
    result.push(el);
    } else {
    if (matchesSelector.call(el, filter)) {
    result.push(el);
    }
    }
    el = el.parentElement;
    }
    return result;
    }
  • 1.8 Form

    • Input/Textarea

      // jQuery
      $('#my-input').val(); // Native
      document.querySelector('#my-input').value;
    • Get index of e.currentTarget between .radio

      // jQuery
      $(e.currentTarget).index('.radio'); // Native
      [].indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
  • 1.9 Iframe Contents

    jQuery 对象的 iframe contents() 返回的是 iframe 内的 document

    • Iframe contents

      // jQuery
      $iframe.contents(); // Native
      iframe.contentDocument;
    • Iframe Query

      // jQuery
      $iframe.contents().find('.css'); // Native
      iframe.contentDocument.querySelectorAll('.css');

⬆ 回到顶部

CSS & Style

  • 2.1 CSS

    • Get style

      // jQuery
      $el.css("color"); // Native
      // 注意:此处为了解决当 style 值为 auto 时,返回 auto 的问题
      const win = el.ownerDocument.defaultView;
      // null 的意思是不返回伪类元素
      win.getComputedStyle(el, null).color;
    • Set style

      // jQuery
      $el.css({ color: "#ff0011" }); // Native
      el.style.color = '#ff0011';
    • Get/Set Styles

      注意,如果想一次设置多个 style,可以参考 oui-dom-utils 中 setStyles 方法

    • Add class

      // jQuery
      $el.addClass(className); // Native
      el.classList.add(className);
    • Remove class

      // jQuery
      $el.removeClass(className); // Native
      el.classList.remove(className);
    • has class

      // jQuery
      $el.hasClass(className); // Native
      el.classList.contains(className);
    • Toggle class

      // jQuery
      $el.toggleClass(className); // Native
      el.classList.toggle(className);
  • 2.2 Width & Height

    Width 与 Height 获取方法相同,下面以 Height 为例:

    • Window height

      // jQuery
      $(window).height(); // Native
      // 不含 scrollbar,与 jQuery 行为一致
      window.document.documentElement.clientHeight;
      // 含 scrollbar
      window.innerHeight;
    • Document height

      // jQuery
      $(document).height(); // Native
      document.documentElement.scrollHeight;
    • Element height

      // jQuery
      $el.height(); // Native
      // 与 jQuery 一致(一直为 content 区域的高度)
      function getHeight(el) {
      const styles = this.getComputedStyle(el);
      const height = el.offsetHeight;
      const borderTopWidth = parseFloat(styles.borderTopWidth);
      const borderBottomWidth = parseFloat(styles.borderBottomWidth);
      const paddingTop = parseFloat(styles.paddingTop);
      const paddingBottom = parseFloat(styles.paddingBottom);
      return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
      }
      // 精确到整数(border-box 时为 height 值,content-box 时为 height + padding + border 值)
      el.clientHeight;
      // 精确到小数(border-box 时为 height 值,content-box 时为 height + padding + border 值)
      el.getBoundingClientRect().height;
    • Iframe height

      $iframe .contents() 方法返回 iframe 的 contentDocument

      // jQuery
      $('iframe').contents().height(); // Native
      iframe.contentDocument.documentElement.scrollHeight;
  • 2.3 Position & Offset

    • Position

      // jQuery
      $el.position(); // Native
      { left: el.offsetLeft, top: el.offsetTop }
    • Offset

      // jQuery
      $el.offset(); // Native
      function getOffset (el) {
      const box = el.getBoundingClientRect(); return {
      top: box.top + window.pageYOffset - document.documentElement.clientTop,
      left: box.left + window.pageXOffset - document.documentElement.clientLeft
      }
      }
  • 2.4 Scroll Top

    // jQuery
    $(window).scrollTop(); // Native
    (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

⬆ 回到顶部

DOM Manipulation

  • 3.1 Remove

    // jQuery
    $el.remove(); // Native
    el.parentNode.removeChild(el);
  • 3.2 Text

    • Get text

      // jQuery
      $el.text(); // Native
      el.textContent;
    • Set text

      // jQuery
      $el.text(string); // Native
      el.textContent = string;
  • 3.3 HTML

    • Get HTML

      // jQuery
      $el.html(); // Native
      el.innerHTML;
    • Set HTML

      // jQuery
      $el.html(htmlString); // Native
      el.innerHTML = htmlString;
  • 3.4 Append

    Append 插入到子节点的末尾

    // jQuery
    $el.append("<div id='container'>hello</div>"); // Native
    let newEl = document.createElement('div');
    newEl.setAttribute('id', 'container');
    newEl.innerHTML = 'hello';
    el.appendChild(newEl);
  • 3.5 Prepend

    // jQuery
    $el.prepend("<div id='container'>hello</div>"); // Native
    let newEl = document.createElement('div');
    newEl.setAttribute('id', 'container');
    newEl.innerHTML = 'hello';
    el.insertBefore(newEl, el.firstChild);
  • 3.6 insertBefore

    在选中元素前插入新节点

    // jQuery
    $newEl.insertBefore(queryString); // Native
    const target = document.querySelector(queryString);
    target.parentNode.insertBefore(newEl, target);
  • 3.7 insertAfter

    在选中元素后插入新节点

    // jQuery
    $newEl.insertAfter(queryString); // Native
    const target = document.querySelector(queryString);
    target.parentNode.insertBefore(newEl, target.nextSibling);

⬆ 回到顶部

Ajax

用 fetch 和 fetch-jsonp 替代

⬆ 回到顶部

Events

完整地替代命名空间和事件代理,链接到 https://github.com/oneuijs/oui-dom-events

  • 5.1 Bind an event with on

    // jQuery
    $el.on(eventName, eventHandler); // Native
    el.addEventListener(eventName, eventHandler);
  • 5.2 Unbind an event with off

    // jQuery
    $el.off(eventName, eventHandler); // Native
    el.removeEventListener(eventName, eventHandler);
  • 5.3 Trigger

    // jQuery
    $(el).trigger('custom-event', {key1: 'data'}); // Native
    if (window.CustomEvent) {
    const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
    } else {
    const event = document.createEvent('CustomEvent');
    event.initCustomEvent('custom-event', true, true, {key1: 'data'});
    } el.dispatchEvent(event);

⬆ 回到顶部

Utilities

  • 6.1 isArray

    // jQuery
    $.isArray(range); // Native
    Array.isArray(range);
  • 6.2 Trim

    // jQuery
    $.trim(string); // Native
    string.trim();
  • 6.3 Object Assign

    继承,使用 object.assign polyfill https://github.com/ljharb/object.assign

    // jQuery
    $.extend({}, defaultOpts, opts); // Native
    Object.assign({}, defaultOpts, opts);
  • 6.4 Contains

    // jQuery
    $.contains(el, child); // Native
    el !== child && el.contains(child);

You Don't Need jQuery的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  3. Jquery的点击事件,三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  7. 利用snowfall&period;jquery&period;js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签&lt ...

  9. jquery&period;uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  10. 浅谈 jQuery 核心架构设计

    jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...

随机推荐

  1. Js&sol;Jquery获取iframe中的元素

    转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...

  2. 萌新笔记——C&plus;&plus;里创建 Trie字典树(中文词典)(一)(插入、遍历)

    萌新做词典第一篇,做得不好,还请指正,谢谢大佬! 写了一个词典,用到了Trie字典树. 写这个词典的目的,一个是为了压缩一些数据,另一个是为了尝试搜索提示,就像在谷歌搜索的时候,打出某个关键字,会提示 ...

  3. javascript深入理解闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  4. WEB漏洞 XSS(一)

    1.xss的形成原理 xss 中文名是“跨站脚本攻击”,英文名“Cross Site Scripting”.xss也是一种注入攻击,当web应用对用户输入过滤不严格,攻击者写入恶意的脚本代码(HTML ...

  5. uboot 网络驱动模型

    原文:https://blog.csdn.net/zhouxinlin2009/article/details/45390065 UBOOT的PHYCHIP配置 PHYCHIP的配置位于 includ ...

  6. 20155335俞昆《java程序设计》第6周总结

    20155335    <Java程序设计>第6周学习总结 ##  教材学习内容总结 首先,我们需要了解输入和输出的关系,我想,这不同于c语言中的输入和输出,我们首先明白,Java中以串流 ...

  7. MVC渲染文章内容的html标签转义

    文章详情页一般从数据库中取出文章内容,文章内容一般含有 等html标签,MVC中如果直接从模型输出文章内容,会把html标签转义变成<&gt等,这时候是要把转义后的标签变成html标签, ...

  8. Python的urllib和urllib2模块

    Python的urllib和urllib2模块都做与请求URL相关的操作,但他们提供不同的功能.他们两个最显着的差异如下: urllib2可以接受一个Request对象,并以此可以来设置一个URL的h ...

  9. Java Control Statements

    Java Control Statements Java For Loop public class ForExample1 { public static void main(String[] ar ...

  10. &lbrack;BZOJ1444&rsqb;有趣的游戏&lpar;AC自动机&plus;矩阵乘法&rpar;

    n个等长字符串,机器会随机输出一个字符串(每个字母出现的概率为p[i]),问每个字符串第一个出现的概率是多少. 显然建出AC自动机,套路地f[i][j]表示i时刻位于节点j的概率. 构建转移矩阵,当i ...