Category: jQuery

jQuery Effects – Sliding

jQuery Sliding Methods

With jQuery you can create a sliding effect on elements.

jQuery has the following slide methods:

  • slideDown()
  • slideUp()
  • slideToggle()

Continue reading jQuery Effects – Sliding

jQuery Effects – Fading

jQuery Fading Methods

With jQuery you can fade an element in and out of visibility.

jQuery has the following fade methods:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

Continue reading jQuery Effects – Fading

jQuery Effects – Hide and Show

jQuery hide() and show()

With jQuery, you can hide and show HTML elements with the hide() and show() methods:

Example

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

Syntax:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: “slow”, “fast”, or milliseconds. Continue reading jQuery Effects – Hide and Show

jQuery Event Methods

jQuery is tailor-made to respond to events in an HTML page.

What are Events?

All the different visitors’ actions that a web page can respond to are called events.

An event represents the precise moment when something happens.

Examples:

  • moving a mouse over an element
  • selecting a radio button
  • clicking on an element

The term “fires/fired” is often used with events. Example: “The keypress event is fired, the moment you press a key”. Continue reading jQuery Event Methods

jQuery Selectors

jQuery selectors are one of the most important parts of the jQuery library.

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to “find” (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It’s based on the existing CSS Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

Continue reading jQuery Selectors

jQuery Syntax

With jQuery you select (query) HTML elements and perform “actions” on them.

jQuery Syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

  • A $ sign to define/access jQuery
  • A (selector) to “query (or find)” HTML elements
  • A jQuery action() to be performed on the element(s)

Examples :

$(this).hide() – hides the current element.

$("p").hide() – hides all <p> elements.

$(".test").hide() – hides all elements with class=”test”.

$("#test").hide() – hides the element with id=”test”. Continue reading jQuery Syntax

jQuery Get Started

Adding jQuery to Your Web Pages

There are several ways to start using jQuery on your web site. You can:

  • Download the jQuery library from jQuery.com
  • Include jQuery from a CDN, like Google

Continue reading jQuery Get Started