Is jQuery obsolete?

// In the past, if you didn’t use jQuery, you would need to write like this to listen for 
    events (compatible with IE6)
if (button.addEventListener)
button.addEventListener('click',fn);
else if (button.attachEvent) {
button.attachEvent('onclick', fn);
}else {
button.onclick = fn;
}
// But if you use jQuery, you only need to write this
$(button).on('click', fn)

// If you want to get all the elements corresponding to .nav> .navItem, use jQuery like this
$('.nav> .navItem')
// On IE 6, you have to write this
var navItems = document.getElementsByClassName('navItem')
var result = []
for(var i = 0; i <navItems.length; i++){
if(navItems[i].parentNode.className.match(/\bnav\b/){
result.push(navItems[i])
}
}

var dom = document.getElementById('bobo');
dom.style.color = 'blue';

$('#bobo').css('color', 'blue');

element to the left until the left attribute is equal to 1989 pixels. Using jQuery, we can write:

$("div").animate({left:'1989px'});

4.Encapsulates the easy-to-use Ajax

$.ajax({
    url:"www.xxx.com/bobo",
    success:function(result){
        //dosomething
    }
});

All in all, jQuery is a JavaScript library. There are many functions in this library that can simplify your DOM operations, provide some special effects and so on. It helps us encapsulate all kinds of codes that we can't write, don't want to write, and don't have time to write, and provide it in an extremely user-friendly/understandable API, allowing us to directly implement rich functions through simple calls.

1.1.2 There is now a better solution than jQuery

With the development of the times, after more than ten years have passed, the front-end development has undergone great changes. In view of the aforementioned 4 benefits of jQuery, there are now better alternatives.

With the development of the times, after more than ten years have passed, the front-end development has undergone great changes. In view of the aforementioned 4 benefits of jQuery, there are now better alternatives.

1. For compatibility Now mainstream browsers embrace the W3C standard, so the compatibility between browsers is getting better and better. IE6, a browser with extremely poor compatibility, has become a thing of the past, and even IE8 can be ignored in most production environments, and there are more lightweight libraries such as Babel.js.

2. For DOM manipulation jQuery can quickly select DOM nodes, which is undoubtedly an important reason for jQuery's popularity. But as far as the current situation is concerned, this advantage is no longer there. Why? There are two APIs that have become W3C standards: document.querySelector and document.querySelectorAll. These two APIs can match the expected DOM node by passing in a string in the form of a CSS selector, and implement its execution based on the browser. Better efficiency. The popularity of MVVM-like frameworks such as React/Vue/Angular and its two-way binding feature has made DOM updates processed by the framework itself so that front-end engineers do not need to operate the DOM (instead, let the framework operate Virtual DOM), only need to focus on data and business logic. In addition, mainstream frameworks such as React/Vue/Angular have done a lot of Repaint and Reflow-related optimizations for DOM operations. Combine multiple DOM operation events in the same Event Loop...These optimization measures can perform better, but jQuery has not done these optimizations.

3. Alternatives in the field of animation Now CSS3 animation technology is very mature and can completely replace the animation done by jQuery. css3 can achieve more complex animations than jQuery's animate method, with good compatibility and low-performance consumption. For example, if the background color is excessive, CSS3 can be implemented perfectly, but jQuery is not convenient. Now there are many excellent css3 animation libraries, such as Animate.css and Velocity.js.

4. Ajax also has a better alternative Fetch has perfectly replaced Ajax as the standard for implementing asynchronous tasks. jQuery's ajax operation saves us the problem of compatible browsers and also provides a concise API to call get and post, freeing developers from cumbersome compatibility and using native APIs. But now, this advantage is also very small. Whether it is the native JavaScript Fetch API or the third-party library Axios, they provide us with powerful ajax capabilities, and Axios also has the advantage of interceptors. At this time, in comparison, jQuery's ajax is indeed incomparable. Of course, Fetch needs to have Fetch's Polyfill solution in IE browser: Github/fetch, so you only need to refer to this small JS, you can use the convenient ajax, which is much smaller than jQuery.

1.1.3 The wealth that jQuery leaves us

1. A large number of powerful and easy-to-use plug-ins jQuery has been developed for so many years, and one of its greatest values ​​lies in the various plug-ins accumulated by the community. Whether it is a date picker, a carousel, or even a player, you can find a corresponding plug-in every minute. For example, CSS transitions and transformations for jQuery is an animation plug-in More treasure mines can browse the jQuery plugin website: plugins.jquery.com Although this website no longer accepts new plugins, it can be used as a map to easily find the Github homepage of popular jQuery plugins, and then you will find that many plugins are still very active and updated very frequently.

2. Simple and understandable API design

$.ajax({url:'/api', method:'get'})
$.get('/api').then(fn1,fn2)

axios({ url: '/api', method: 'get'})
axios.get('/api').then(fn1, fn2)

Why is axios, which became popular in 2018, so similar to jQuery.ajax? Because the jQuery API is so easy to use! The new library cannot surpass it at all, and there is no way to design a more concise API.

3. Some clever programming routines Function overloading：

$(fn)
$('div')
$(div)
$($(div))
$('span', '#scope8')

You will find that the parameters of the $ function can be functions, strings, elements, and jQuery objects, and can even accept multiple parameters. How does this overload work? Readers can take a look at the source code to find out.

Publish Subscriber Mode：

const eventHub = $({});
eventHub.on('xxx', function(){ console.log('1111') });
eventHub.trigger('xxx');

Implement plug-in system with prototype inheritance:

$.fn.modal = function(){ ... }
$('#div8').modal();

Event delegation:

$('div').on('click', 'span', function(){...});

Chain call:

$('div').text('hi').addClass('red').animate({left: 100});

Namespaces:

// Your plugin binds many events to a button
$button.on('click.plugin', function(){...})
$button.on('mouseenter.plugin', function(){...})
// Then you want to remove all the above events at a certain moment, it is very troublesome if you don't use jQuery
$button.off('.plugin');

Higher order function:

var fn2 = $.proxy(fn1, asThis, param1)

$.proxy accepts a function and returns a new function.