[Javascript] 用原生JS实现jQuery的功能

Tairraos · 发表于 2020-1-2 20:44

本帖最后由 Tairraos 于 2020-10-25 15:51 编辑

帖子很长，收藏下来必然某天用得到。
喜欢请点击下方免费评分，谢谢
======================
还有几帖你一定会喜欢的：
Python资源大全：https://www.52pojie.cn/thread-1081229-1-1.html
Python tkinter UI指南 https://www.52pojie.cn/thread-1290751-1-1.html
原生 Javascript 实现 jQuery 的功能： https://www.52pojie.cn/thread-1084552-1-1.html
Chrome调试器Console的进阶用法 https://www.52pojie.cn/thread-1156239-1-1.html
Javascript 极限省字节（看懂混淆后的代码） https://www.52pojie.cn/thread-1056860-1-1.html
写JS必备，ESLINT配置说明 https://www.52pojie.cn/thread-1290700-1-1.html
======================

说明

IE9为2011年发布，以下注明IE8, 9的仅表示IE的兼容程度
以下代码 Chrome/FF/Safari/Edge 2010年后的各版本都能使用

AJAX

替代框架: reqwest then-request superagent

JSON

JQUERY

$.getJSON('/my/url', function(data) {

});

IE9+

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

Post

JQUERY

$.ajax({
  type: 'POST',
  url: '/my/url',
  data: data
});

IE8+

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

Request

JQUERY

$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {

  },
  error: function() {

  }
});

IE9+

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

EFFECTS

替代框架: animate.css move.js

Fade In

JQUERY

$(el).fadeIn();

IE9+

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

fadeIn(el);

Hide

JQUERY

$(el).hide();

IE8+

el.style.display = 'none';

Show

JQUERY

$(el).show();

IE8+

el.style.display = '';

ELEMENTS

替代框架: bonzo $dom

Add Class

JQUERY

$(el).addClass(className);

IE8+

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

After

JQUERY

$(el).after(htmlString);

IE8+

el.insertAdjacentHTML('afterend', htmlString);

Append

JQUERY

$(parent).append(el);

IE8+

parent.appendChild(el);

Before

JQUERY

$(el).before(htmlString);

IE8+

el.insertAdjacentHTML('beforebegin', htmlString);

Children

JQUERY

$(el).children();

IE9+

el.children

Clone

JQUERY

$(el).clone();

IE8+

el.cloneNode(true);

Contains

JQUERY

$.contains(el, child);

IE8+

el !== child && el.contains(child);

Contains Selector

JQUERY

$(el).find(selector).length;

IE8+

el.querySelector(selector) !== null

Each

JQUERY

$(selector).each(function(i, el){

});

IE9+

var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){

});

Empty

JQUERY

$(el).empty();

IE9+

el.innerHTML = '';

Filter

JQUERY

$(selector).filter(filterFn);

IE9+

Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);

Find Children

JQUERY

$(el).find(selector);

IE8+

el.querySelectorAll(selector);

Find Elements

替代框架: qwery sizzle

JQUERY

$('.my 
# awesome selector');

IE8+

document.querySelectorAll('.my 
# awesome selector');

Get Attributes

JQUERY

$(el).attr('tabindex');

IE8+

el.getAttribute('tabindex');

Get Html

JQUERY

$(el).html();

IE8+

el.innerHTML

Get Outer Html

JQUERY

$('<div>').append($(el).clone()).html();

IE8+

el.outerHTML

Get Style

JQUERY

$(el).css(ruleName);

IE9+

getComputedStyle(el)[ruleName];

Get Text

JQUERY

$(el).text();

IE9+

el.textContent

Has Class

JQUERY

$(el).hasClass(className);

IE8+

if (el.classList)
  el.classList.contains(className);
else
  new RegExp('(^| )' + className + '(|$)', 'gi').test(el.className);

Matches

JQUERY

$(el).is($(otherEl));

IE8+

el === otherEl

Matches Selector

JQUERY

$(el).is('.my-class');

IE9+

var matches = function(el, selector) {
  return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
};

matches(el, '.my-class');

Offset

JQUERY

$(el).offset();

IE8+

var rect = el.getBoundingClientRect();

{
  top: rect.top + document.body.scrollTop,
  left: rect.left + document.body.scrollLeft
}

Offset Parent

JQUERY

$(el).offsetParent();

IE8+

el.offsetParent || el

Outer Height

JQUERY

$(el).outerHeight();

IE8+

el.offsetHeight

Outer Height With Margin

JQUERY

$(el).outerHeight(true);

IE9+

function outerHeight(el) {
  var height = el.offsetHeight;
  var style = getComputedStyle(el);

  height += parseInt(style.marginTop) + parseInt(style.marginBottom);
  return height;
}

outerHeight(el);

Outer Width

JQUERY

$(el).outerWidth();

IE8+

el.offsetWidth

Outer Width With Margin

JQUERY

$(el).outerWidth(true);

IE9+

function outerWidth(el) {
  var width = el.offsetWidth;
  var style = getComputedStyle(el);

  width += parseInt(style.marginLeft) + parseInt(style.marginRight);
  return width;
}

outerWidth(el);

Parent

JQUERY

$(el).parent();

IE8+

el.parentNode

Position

JQUERY

$(el).position();

IE8+

{left: el.offsetLeft, top: el.offsetTop}

Position Relative To Viewport

JQUERY

var offset = el.offset();

{
  top: offset.top - document.body.scrollTop,
  left: offset.left - document.body.scrollLeft
}

IE8+

el.getBoundingClientRect()

Prepend

JQUERY

$(parent).prepend(el);

IE8+

parent.insertBefore(el, parent.firstChild);

Remove

JQUERY

$(el).remove();

IE8+

el.parentNode.removeChild(el);

Remove Class

JQUERY

$(el).removeClass(className);

IE8+

if (el.classList)
  el.classList.remove(className);
else
  el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');

Replace From Html

JQUERY

$(el).replaceWith(string);

IE8+

el.outerHTML = string;

Set Attributes

JQUERY

$(el).attr('tabindex', 3);

IE8+

el.setAttribute('tabindex', 3);

Set Html

JQUERY

$(el).html(string);

IE8+

el.innerHTML = string;

Set Style

JQUERY

$(el).css('border-width', '20px');

IE8+

// Use a class if possible
el.style.borderWidth = '20px';

Set Text

JQUERY

$(el).text(string);

IE9+

el.textContent = string;

Siblings

JQUERY

$(el).siblings();

IE9+

Array.prototype.filter.call(el.parentNode.children, function(child){
  return child !== el;
});

Toggle Class

JQUERY

$(el).toggleClass(className);

IE9+

if (el.classList) {
  el.classList.toggle(className);
} else {
  var classes = el.className.split(' ');
  var existingIndex = classes.indexOf(className);

  if (existingIndex >= 0)
    classes.splice(existingIndex, 1);
  else
    classes.push(className);

  el.className = classes.join(' ');
}

EVENTS

Off

JQUERY

$(el).off(eventName, eventHandler);

IE9+

el.removeEventListener(eventName, eventHandler);

On

JQUERY

$(el).on(eventName, eventHandler);

IE9+

el.addEventListener(eventName, eventHandler);

Ready

JQUERY

$(document).ready(function(){

});

IE9+

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

Trigger Custom

替代框架: EventEmitter Vine microevent

JQUERY

$(el).trigger('my-event', {some: 'data'});

IE9+

if (window.CustomEvent) {
  var event = new CustomEvent('my-event', {detail: {some: 'data'}});
} else {
  var event = document.createEvent('CustomEvent');
  event.initCustomEvent('my-event', true, true, {some: 'data'});
}

el.dispatchEvent(event);

Trigger Native

JQUERY

$(el).trigger('change');

IE9+

// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);

UTILS

Bind

JQUERY

$.proxy(fn, context);

IE9+

fn.bind(context);

Array Each

JQUERY

$.each(array, function(i, item){

});

IE9+

array.forEach(function(item, i){

});

Deep Extend

JQUERY

$.extend(true, {}, objA, objB);

IE8+

var deepExtend = function(out) {
  out = out || {};

  for (var i = 1; i < arguments.length; i++) {
    var obj = arguments[i];

    if (!obj)
      continue;

    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (typeof obj[key] === 'object')
          out[key] = deepExtend(out[key], obj[key]);
        else
          out[key] = obj[key];
      }
    }
  }

  return out;
};

deepExtend({}, objA, objB);

Extend

替代框架: lo-dash underscore ECMA6

JQUERY

$.extend({}, objA, objB);

IE8+

var extend = function(out) {
  out = out || {};

  for (var i = 1; i < arguments.length; i++) {
    if (!arguments[i])
      continue;

    for (var key in arguments[i]) {
      if (arguments[i].hasOwnProperty(key))
        out[key] = arguments[i][key];
    }
  }

  return out;
};

extend({}, objA, objB);

Index Of

JQUERY

$.inArray(item, array);

IE9+

array.indexOf(item);

Is Array

JQUERY

$.isArray(arr);

IE9+

Array.isArray(arr);

Map

JQUERY

$.map(array, function(value, index){

});

IE9+

array.map(function(value, index){

});

Now

JQUERY

$.now();

IE9+

Date.now();

Parse Html

JQUERY

$.parseHTML(htmlString);

IE9+

var parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

parseHTML(htmlString);

Parse Json

JQUERY

$.parseJSON(string);

IE8+

JSON.parse(string);

Trim

JQUERY

$.trim(string);

IE9+

string.trim();

Type

JQUERY

$.type(obj);

IE8+

Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();

喜欢请点击下方免费评分，谢谢
======================
还有几帖你一定会喜欢的：
Python资源大全：https://www.52pojie.cn/thread-1081229-1-1.html
Python tkinter UI指南 https://www.52pojie.cn/thread-1290751-1-1.html
原生 Javascript 实现 jQuery 的功能： https://www.52pojie.cn/thread-1084552-1-1.html
Chrome调试器Console的进阶用法 https://www.52pojie.cn/thread-1156239-1-1.html
Javascript 极限省字节（看懂混淆后的代码） https://www.52pojie.cn/thread-1056860-1-1.html
写JS必备，ESLINT配置说明 https://www.52pojie.cn/thread-1290700-1-1.html
======================

sunil · 发表于 2020-1-2 23:55

说服我为什么不用jQuery？
这比jQuery要好？

Tairraos · 发表于 2020-1-8 16:27

changjiang 发表于 2020-1-7 13:26
想问下，js如何像jquery那样根据文本选择元素呢？比如jquery写的是$("*:contains(is)")，那么对应的js代码 ...

jquery依赖了一个名叫sizzle的包（同一开发者）, 选择器是sizzle 实现的。

看sizzle源代码就行
https://github.com/jquery/sizzle/blob/master/src/sizzle.js

contains是硬实现的，不是原生js方法的简单封装。但是jquery和sizzle的大部分工具和方法都是用浏览器原生方法实现的。

被封号的萌新 · 发表于 2020-1-2 22:52

刚接触js，才学到千峰的JavaScript教程。请问楼主有好的教程么，一直用易语言写post脚本太麻烦了。就差js来写油猴代码了。

a13381041 · 发表于 2020-1-3 10:29

很六啊，很有参考意义，收藏了

Tairraos · 发表于 2020-1-6 08:37

被封号的萌新发表于 2020-1-2 22:52
刚接触js，才学到千峰的JavaScript教程。请问楼主有好的教程么，一直用易语言写post脚本太麻烦了。就差js来 ...

你有其它语言基础，看<<JS精粹>>，基本就是讲JS和其它语言不一样的那些地方。
再找一个喜欢用的JS工具框（比如jquery, lodash, dash, zepto)架来读一下源代码，把读代码时心中产生的问题都解决了，就能确保高水平习得了

Tairraos · 发表于 2020-1-6 08:44

sunil 发表于 2020-1-2 23:55
说服我为什么不用jQuery？
这比jQuery要好？

1 上文不是说要让你放弃jQuery，而是让你有点备胎技能

2 如果你永远只是自己给自己写代码，或者你的开发不在乎交付时的尺寸，不在乎那可以一直使用你喜欢的工具没问题。

被封号的萌新 · 发表于 2020-1-6 11:53

Tairraos 发表于 2020-1-6 08:37
你有其它语言基础，看，基本就是讲JS和其它语言不一样的那些地方。
再找一个喜欢用的JS工具框（比如jque ...

谢谢老师。好的

Tairraos · 发表于 2020-1-6 23:54

被封号的萌新发表于 2020-1-6 11:53
谢谢老师。好的

天~ 不要叫我老师。我还没达到能教学的程度。就是随意说一下自己的意见，共同进步吧。

changjiang · 发表于 2020-1-7 13:26

想问下，js如何像jquery那样根据文本选择元素呢？比如jquery写的是$("*:contains(is)")，那么对应的js代码是什么？

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] [Javascript] 用原生JS实现jQuery的功能

说明

AJAX

替代框架: reqwest then-request superagent

JSON

JQUERY

IE9+

Post

JQUERY

IE8+

Request

JQUERY

IE9+

EFFECTS

替代框架: animate.css move.js

Fade In

JQUERY

IE9+

Hide

JQUERY

IE8+

Show

JQUERY

IE8+

ELEMENTS

替代框架: bonzo $dom

Add Class

JQUERY

IE8+

After

JQUERY

IE8+

Append

JQUERY

IE8+

Before

JQUERY

IE8+

Children

JQUERY

IE9+

Clone

JQUERY

IE8+

Contains

JQUERY

IE8+

Contains Selector

JQUERY

IE8+

Each

JQUERY

IE9+

Empty

JQUERY

IE9+

Filter

JQUERY

IE9+

Find Children

JQUERY

IE8+

Find Elements

替代框架: qwery sizzle

JQUERY

IE8+

Get Attributes

JQUERY

IE8+

Get Html

JQUERY

IE8+

Get Outer Html

JQUERY

IE8+

Get Style

JQUERY

IE9+

Get Text

JQUERY