文档章节

使用原生的 javascript 来替代 jquery

 蜗牛奔跑
发布于 2015/07/01 22:50
字数 1008
阅读 62
收藏 0

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

ALTERNATIVES:

 

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

ALTERNATIVES:

 

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

ALTERNATIVES:

 

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');

Next

JQUERY

$(el).next();

IE9+

el.nextElementSibling

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 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);

Outer Width

JQUERY

$(el).outerWidth();

IE8+

el.offsetWidth

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);

Prev

JQUERY

$(el).prev();

IE9+

el.previousElementSibling

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

ALTERNATIVES:

 

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

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')           deepExtend(out[key], obj[key]);         else           out[key] = obj[key];       }     }   }   return out; }; deepExtend({}, objA, objB);

Bind

JQUERY

$.proxy(fn, context);

IE9+

fn.bind(context);

Extend

ALTERNATIVES:

 

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 (.+)\]$/


本文转载自:http://youmightnotneedjquery.com/

粉丝 37
博文 615
码字总数 118352
作品 0
海淀
私信 提问
你不需要 jQuery,但你需要一个 DOM 库

写这篇文章的目的,一方面是介绍一下自己编写的模块化 DOM 库 domq.js,另一方面是希望大家对 jQuery 有一个正确的认识,即使 jQuery 已经逐渐退出历史舞台,但是它的 API 将会以另外一种形式...

叙帝利
03/27
0
0
2019 年了,为什么我还在用 jQuery?

译者按: 看来 jQuery 还是有一些用武之地的。 原文: Why I'm Still Using jQuery in 2019 译者: Fundebug 为了保证可读性,本文采用意译而非直译。翻译仅供学习探讨,不代表 Fundebug 观点。...

Fundebug
06/04
37
0
jQuery? 回归JavaScript原生API

如今技术日新月异,各类框架库也是层次不穷。即便当年漫山红遍的JQuery(让开发者,So Perfect!!)如今也有的大势。但JS原生API写法依旧;并且有时候只不过小写一个Demo,或者产品中只有少量...

jeffjade
2015/12/13
0
0
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
2018/09/08
0
0
jQuery零基础入门——(一)初识jQuery

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,主干出处来自廖雪峰老师的技术分享。 大家好,欢迎来到我们新的课程。应部分读者的要求,为满足...

JandenMa
2018/06/29
127
3

没有更多内容

加载失败,请刷新页面

加载更多

x002-语言元素

变量命令规则 硬性规则: 变量名由字母(广义的Unicode字符,不包括特殊字符)、数字和下划线构成,数字不能开头。 大小写敏感(大写的a和小写的A是两个不同的变量)。 不要跟关键字(有特殊...

伟大源于勇敢的开始
今天
4
0
nginx反向代理配置

nginx配置文件位置/usr/local/nginx/conf/nginx.conf 配置文件修改: # cd /usr/local/nginx/conf # vim nginx.conf server {listen 80;server_name localhost;#charset k......

行者终成事
今天
5
0
OSChina 周日乱弹 —— 这是假的,和我之前的不一样

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
17
1
Rust学习笔记一 数据类型

写在前面 我也不是什么特别厉害的大牛,学历也很低,只是对一些新语言比较感兴趣,接触过的语言不算多也不算少,大部分也都浅尝辄止,所以理解上可能会有一些偏差。 自学了Java、Kotlin、Python、...

MusiCodeXY
今天
5
0
Java 脚本引擎入门

Java Script Engine Java 脚本引擎可以将脚本嵌入Java代码中,可以自定义和扩展Java应用程序,自JDK1.6被引入,基于Rhino引擎,JDK1.8后使用Nashorn引擎,支持ECMAScript 5,但后期还可能会换...

阿提说说
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部