DEV Community

Cover image for jQuery
Hassan Shan
Hassan Shan

Posted on

jQuery

  The following are considered to be the main concerns of jQuery:
Enter fullscreen mode Exit fullscreen mode

• DOM

• AJAX

• Events

• Effects

The following are the advantages of working with jQuery:

  • jQuery solves the DOM ready versus the window.onload dilemma.

  • jQuery supports a simplified event-handling model.

With regards to the DOM the following are the advantages of working with jQuery:

  • jQuery provides a consistent cross-browser way of working with the DOM

  • jQuery provides a simplified technique for accessing elements in the DOM using CSS Selectors.

With regards to AJAX, the following are the advantages of working with jQuery:

  • jQuery provides several simple methods to exchange data with a web browser using AJAX.

  • jQuery provides easy ways to work with data that is returned via an AJAX call.

With regards to effects, the following are the advantages of working with jQuery:

  • jQuery has built-in effects and animations.

  • jQuery allows plugins to be used for additional effects.

jQuery is based on the JavaScript Library
The following are the versions of jQuery available for downloading

• Production version
• Development version

Production version - this is for your live website because it has been minified and compressed
Development version -this is for testing and development (uncompressed and readable code)

The following are ways to start using jQuery on your web site:

Download the jQuery library from jQuery.com

  • Include jQuery from a CDN (e.g. Microsoft)

The following can be used as a short-cut to refer to jQuery:

$sign

All jQuery methods are inside a document-ready event to prevent any jQuery code from running before the document is finished loading (is ready).

The jQuery team has created the following short method for the document-ready event.

$(function(){

// jQuery methods go here...

});

addClass() - Adds one or more classes to the selected elements

removeClass() - Removes one or more classes from the selected elements

toggleClass() - Toggles between adding/removing classes from the selected elements

css() - Sets or returns the style attribute

The jQuery addClass() method adds class attributes to different elements.

You can select many elements when using the jQuery addClass method.

You can specify multiple classes within the jQuery addClass() method.

$(":header")                      -All header elements

,

..

$(":empty")                       -All elements that are empty

$(":parent")                       -All elements that are a parent of another element

$(":focus")                        -The element that currently has focus

$("p:hidden")                    -All hidden

elements

$("input:not(:empty)")    -All input elements that are not empty

$("tr:even")                       -All even

elements

$(":contains(Hello')")      -All elements which contains the text "Hello"

$(document).ready() Execute a function when the document is fully loaded
click() Attaches an event handler function to an HTML element
mouseenter() Attaches an event handler function to an HTML element
dblclick() Attaches an event handler function to an HTML element
focus() Attaches an event handler function to an HTML form field

The following are the benefits of using unobtrusive JavaScript:

  • Usability Does not draw the attention of the user.
  • Graceful degradation Scripts never generate error messages even when they fail.
  • Accessibility If any script fails, the page still delivers its core functions and information.
  • Separation All JavaScript code is maintained separately.

The following are unobtrusive JavaScript techniques:

  • Separation of behavior from markup
  • Namespace (Global abatement)
  • Degrading gracefully

The acronym JSON stands for JavaScript Object Notation.

The following describes the JSON syntax rules

  • Data is in name/value pairs
  • Data is separated by commas
  • Curly braces hold objects
  • Square brackets hold arrays

It is possible to create arrays in JSON.

For AJAX applications, JSON has replaced XML as it is faster and easier to use than XML.

In JavaScript, a closure is an inner function that has access to the outer (enclosing) function's variables.

In JavaScript the closure has the following scope chains:

  • It has access to its own scope
  • It has access to the outer function's variables
  • It has access to the global variables

Top comments (0)