Category Archives: jQuery

jQuery Syntax

With jQuery statement we usually select (query) HTML elements and perform certain actions on them. jQuery statements are very quick and efficient for selecting and performing actions on any HTML element.

Syntax:-

JQuery statement typically begins with a dollar sign ($) and ends with a semicolon (;). Above is the general syntax of a jQuery statement, here –
$ :- A dollar sign ($) is just an alias to define/access jQuery.
(selector) :- A (selector) to select or access HTML elements from DOM.
action() :- It represents an action to be performed on the selected element(s).

It applies border to the current element.

It applies border to all <p> elements.

It applies border to all elements with class=”example”.

It applies border to the element with id=”example”.

jQuery Getting Started

There are following ways you can include jQuery on your web page:

  • Download a copy of jQuery library and include it in your web page.
  • Include jQuery library directly from any of freely available CDN.

Downloading jQuery

To start using jQuery you need to download a copy of jQuery library and include it in your web document. There are mainly two versions of jQuery library available for downloading:

  • Compressed version – The compressed version of jQuery library is best suited for live website because it is minified which makes it load faster.
  • Uncompressed version – The uncompressed version is best suited for development as it is uncompressed readable code file which simplify development and debugging.

Both of the jQuery versions can be downloaded from here:

https://jquery.com/download/

jQuery is basically a simple JavaScript file. Once you’ve downloaded the jQuery file you can include in your web page simply using a HTML <script> tag.

Notice: The <script> tag should be inside the <head> section

Including jQuery from CDN

If you don’t want to download and host it on your server, you can include it using a freely available CDN (Content Delivery Network) links. Including jQuery from CDNs results in performance benefit by reducing the loading time. Below is list of some of freely available jQuery CDN links:

jQuery Google CDN:-

jQuery StackPath CDN:-

Example:-

 

jQuery Introduction

What is jQuery?

jQuery is a fast, lightweight, and feature-rich JavaScript library which make it much easier to use JavaScript on your website. jQuery is a one of the widely used javascript library that is based on the principle of “write less, do more”. Tasks that require multiple lines of JavaScript code can be accomplish with a single line of code using jQuery.

jQuery is a complete javascript toolkit designed to simplify a lot of the complicated things from JavaScript. jQuery makes things like DOM traversal and manipulation, effects, animation, event handling, and AJAX calls very simple that works seamlessly across all the major browsers like Chrome, Firefox, Safari, Internet Explorer, etc.

jQuery Features

  • DOM manipulation − The jQuery made it easy to select DOM elements, negotiate them and modifying their content by using cross-browser open source selector engine called Sizzle.
  • Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
  • AJAX Support − The jQuery helps you a lot to develop a responsive and featurerich site using AJAX technology.
  • Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.
  • Lightweight − The jQuery is very lightweight library – about 19KB in size (Minified and gzipped).
  • Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
  • Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.
  • DOM Selection: jQuery provides Selectors to retrieve DOM element based on different criteria like tag name, id, css class name, attribute name, value, nth child in hierarchy etc.
  • DOM Manipulation: You can manipulate DOM elements using various built-in jQuery functions. For example, adding or removing elements, modifying html content, css class etc.
  • Special Effects: You can apply special effects to DOM elements like show or hide elements, fade-in or fade-out of visibility, sliding effect, animation etc.
  • Events: jQuery library includes functions which are equivalent to DOM events like click, dblclick, mouseenter, mouseleave, blur, keyup, keydown etc. These functions automatically handle cross-browser issues.
  • Ajax: jQuery also includes easy to use AJAX functions to load data from servers without reloading whole page.
  • Cross-browser support: jQuery library automatically handles cross-browser issues, so the user does not have to worry about it. jQuery supports IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+.

Things You Can Do with jQuery

Why use jQuery?

cross-browser i

jQuery Advantages