As time goes by, jQuery has been around for more than a decade. Recently, many people have said that jQuery is obsolete, React and Vue are the mainstream, and it’s not interesting to learn jQuery, but is this really the case?

What is a jQuery

JQuery is simply a JavaScript library. JQuery was invented and used to simplify JavaScript programming, because the native DOM is a hassle you can’t stand, so jQuery was invented to simplify it. React and Vue are templates for the same reason.

According to some statistics, over 90% of the websites in the world still use jQuery, which means you can’t maintain these websites without learning jQuery.

How simple is jQuery?

For a simple example, get a div element

JQuery $("div") jQuery $("div")Copy the code

Chaining in jQuery

Actions/methods can be linked together using jQuery. Chained operations allow you to run multiple jQuery methods (on the same element) in a single statement.

Let’s take a simple example

$("#p1").css("color","blue").slideUp(200).slideDown(200);
Copy the code

JQuery add, delete, change, check

  • Access to elements
$(" div ") / / retrieve div elements $(" # XXX "). The find (' red ') / / access to the inside of the # XXX. Red element $(" # XXX "). The parent (s) / / dad get # XXX $(" # XXX "). The children () / / get # XXX $(" # XXX "). The son of siblings ()/brother/get # XXX $(" # XXX "). The index () / / who get ranking (start from 0) $(" # XXX "). The next () / / get brother $(" # XXX "). Prev () // Get brother $(".xxx ").each(fn) // iterate over and perform fn on each elementCopy the code
  • Create the element
$(' < div > < span > 1 < / span > < / div > ') / / create a div. AppendTo (document. Body) / / inserted into the bodyCopy the code
  • Remove elements
$div.remove() // Removes the selected element (and its children) $div.empty() // Removes the children from the selected elementCopy the code
  • Change the element
$div.text(?) // Read or write text content $div.html. $div. Attr ('title',?) $div. CSS ({color:'red'}) $div. AddClass ('blue') $div. On ('click',fn) $div $div. Off ('click',fn)// Remove eventCopy the code