jQuery

Topics related to jQuery:

Getting started with jQuery

jQuery is a JavaScript library which simplifies DOM operations, event handling, AJAX, and animations. It also takes care of many browser compatibility issues in underlying DOM and javascript engines.

Each version of jQuery can be downloaded from https://code.jquery.com/jquery/ in both compressed (minified) and uncompressed formats.

Ajax

AJAX stands for Asynchronous JavaScript and XML. AJAX allows a webpage to perform an asynchronous HTTP (AJAX) request to the server and receive a response, without needing to reload the entire page.

Selectors

When writing selectors for class or id or attribute which contains some special characters like

! " # $ % & ' ( ) * + , . / : ; < = > ? @ [ \ ] ^ { | } ~

the characters need to be escaped using two backslashes \\ .

eg.

<span id="temp.foobar"><span>

the selectors will be framed like,

$('#temp\\.foobar')

document-ready event

DOM Manipulation

DOM Traversing

Element Visibility

Events

jQuery internally handles events via the addEventListener function. This means it is perfectly legal to have more than one function bound to the same event for the same DOM element.

Plugins

Prepend

Append

.append() & .after() can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, ). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
jQuery doesn't officially support SVG. Using jQuery methods on SVG
documents, unless explicitly documented for that method, might cause unexpected behaviors. Examples of methods that support SVG as of
jQuery 3.0 are addClass and removeClass.

Getting and setting width and height of an element

CSS Manipulation

Rendered values

If a responsive unit is used (like "auto", "%", "vw" etc.), .css() will return the actual rendered value in px

.myElement{ width: 20%; }

var width = $(".myElement").css("width"); // "123px"

Formatting properties and values

Properties can be defined using standard CSS formatting as String or using camelCase

"margin-bottom"
marginBottom

Values should be expressed in String. Numeric values are treated as px units internally by jQuery

.css(fontSize: "1em")
.css(fontSize: "16px")
.css(fontSize: 16)      // px will be used

As of jQuery 3 avoid using .show() and .hide()

According to this jQuery Blog post, due to overhead and performance issues, you should no longer be using .show() or .hide().

If you have elements in a stylesheet that are set to display: none, the .show() method will no longer override that. So the most important rule for moving to jQuery 3.0 is this: Don’t use a stylesheet to set the default of display: none and then try to use .show() – or any method that shows elements, such as .slideDown() and .fadeIn() – to make it visible. If you need an element to be hidden by default, the best way is to add a class name like “hidden” to the element and define that class to be display: none in a stylesheet. Then you can add or remove that class using jQuery’s .addClass() and .removeClass() methods to control visibility. Alternately, you can have a .ready() handler call .hide() on the elements before they are displayed on the page. Or, if you really must retain the stylesheet default, you can use .css("display", "block") (or the appropriate display value) to override the stylesheet.

Attributes

The jQuery function .attr(), gets the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

It is worth noting that when getting the value of an attribute, it only gets it from the first element that matches the selector (i.e. $("input").attr("type"); would only get the type of the first input, if there are more than one)