Should I use jQuery 2019

Javascript with jQuery

Include jQuery

jQuery is easy to learn and standards compliant. If you use HTML and CSS in accordance with web standards, you can access frequently used functions from effects such as hide and show to JSON and AJAX with just a few instructions.

Before the browsers supported ECMAScript 5 on a broad basis, jQuery had already filled many gaps in Javascript: each, extend, grep, merge, map and trim, hasClass. However, Javascript and CSS have caught up with giant strides in recent years and have overtaken jQuery in many places. If you start a new project and don't have to use the great-great-old browser, it is better to do without jQuery for the sake of loading times and performance.

However, WordPress plugins, above all WooCommerce, are still relentlessly relying on jQuery. Until WooCommerce throws jQuery off as ballast with a major overhaul, it is worth looking at jQuery in such an environment.

jQuery operates on CSS and the Document Object Model and quickly opens up to anyone who is already familiar with the basics of CSS and DOM. jQuery is loaded from https://jquery.com and integrated into the HTML document using a script tag.

<script src="jquery-3.4.1.min.js"></script> <script src="myscript.js"></script>

You just have to make sure that jQuery is included as the first script file.

With around 80 KB (in the minified version!), jQuery is no easy fare for the loading time of the page. The alternative to using it on your own web space is a CDN, a content delivery network.

With Google Hosted Libraries:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="myscript.js"></script>

or from the jQuery CDN

jQuery Javascript Library

The highlight of jQuery was the ingeniously easy access to the elements of the document. Long before pure Javascript could reliably rely on querySelector and querySelectorAll, the $ function had been borrowing from CSS selectors for many years to filter elements.

$ ('img') .addClass () $ ('#myid') .hasClass () $ ('.myclass') .attr (' name ') $ (': odd ') .attr (' name ',' value ') $ (': not div a ') .remove () $ (': only-child ') .unwrap ()

jQuery Selectors

  • With the event control of jQuery, the annoying wait for the loading of the complete document with all its style sheets, images and other elements is no longer necessary in many scripts. The DOM is available as soon as the respective element is loaded.
  • As the icing on the cake, there are fine fading effects à la Flash and subtle animation with one line of Javascript.
<script> $('.searchicon').click ( function () { $('.searchicons').animate({top: "+=50"},500, function() { $('.searchfield').slideDown( "slow"); }); }); </script>

In the end, jQuery is cross-browser and frees you from staring at the behavior of the various ancient browsers in the various versions.

jQuery $ () / jquery ()

The heart of jQuery is the jQuery function or abbreviated. Each $ () function collects one or more nodes of the DOM tree. In the simplest form, only an expression is passed - usually a CSS selector - that finds all suitable elements in the document.

With jQuery, the code becomes shorter and easier to read:

Fade In
$ (elem) .fadeIn ();
addClass
$ (elem) .addClass (className);
each
$ (selector) .each (function (i, el) {});
jQuery events
let hiddenBox = $ ("# banner-message"); $ ("# button-container button") .on ("click", function (event) {hiddenBox.show ();});
Ajax
$ ajax ({url: '/ my / url', success: function (resp) {…}, error: function () {…}});

Query and change CSS with jQuery

In addition to the normal CSS selectors, combinations such as descendant selectors, child selectors and adjacent selectors and various filters help when selecting the elements. For a few painful gaps in CSS there are extensions such as: visible,: odd or: even.

The function returns a jQuery object with all elements that match this CSS selector. A jQuery object is similar to an array with additional jQuery functions.

For example, CSS styles can be assigned, changed or removed from the elements found.

$ ('# content'). width (300);
Sets the width of the div element with id = "content" to 300px
$ ('h2'). css ('color', 'blue');
Sets the color of all h2 elements to blue
$ ('div.post'). css ({max-width: 40em, border: 1px dotted gray});
Sets the maximum width of post class div elements to 40em and draws a dotted frame around each post class div element.

Equivalent to assigning properties with jQuery, the properties of the elements can be read out.

let width = $ ('div'). width ();
The width of the first div on the page
let src = $ ('img.simage'). attr ('src');
The src attribute of the first img element with class = "simage"

Create HTML elements with jQuery

In order to generate HTML elements, a character string with the HTML markup is transferred.

$ ('

Hello everyone!

') .appendTo ('body');

appends the div element as the first element to the body element. Since the content of the newly created element is through innerhtml is realized, this method is flexible, but also restrictive: Javascript cannot reach the inside of the div element, because innerHTML does not create any DOM elements.

input elements must not be created in this way without the type attribute. And this doesn't work in IE either.

// Does NOT work in IE: $ (""). Attr ("type", "checkbox"); // Does work in IE: $ ("");

Navigation through the DOM tree

API functions such as add (), next (), prev () and siblings () are available for navigating through the DOM tree and manipulating the elements.

Complex projects - e.g. working with a PHP backend - are supported by Ajax scripts.

jQuery forms

Query the current value of a series of radio buttons

apple pear berry ... let theChoice = $ ('input: radio [name = foo]: checked'). val ();

avoid conflicts

If other libraries are used in addition to jQuery, conflicts can arise because other libraries also use the $ symbol as a variable. Simply define a new variable for jQuery:

let $ j = jQuery.noConflict ();

Instead of $ ('div.simage') the jQuery call is now called

$ j ("div.image")

Error loading: jquery.min.map

In content management systems that rely on jQuery in the backend, error messages can occur:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery.min.map, line 0)

The jQuery Source Map relates the minified version of jQuery to the non-minified version to make debugging easier. jquery-x-x-x.min.js comes in one line, so error messages (which in many browsers indicate the line number, but not the column and the object) are hardly helpful.

jQuery or Vanilla Javascript?

With new Javascript functions from EcmaScript 5 and CSS3, native Javascript has gained a lot of space: querySelector, querySelectorAll, classList and getElementsByClassName make Javascript as short and efficient as jQuery. CSS3 complements Javascript with soft animations through transition, transform and keyframe animations

You might not need jQuery

Do you really need jQuery?

10 tips for writing JavaScript without jQuery

Content management systems from WordPress to Drupal7 (Drupal8 no longer automatic) have jQuery already built in. The CSS frameworks such as Bootstrap and Foundation are based on jQuery. Given the small discrepancies between browsers, jQuery is the safe option.

Nevertheless, it is worth taking a look over the garden fence, because jQuery is not always an efficient and elegant solution. With elaborate animations, jQuery quickly kneels and fidgets and stutters.

External sources