JQuery

Basics

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".

JQuery Selectors

$("a").click(function() {
     alert("Hello world!");
   });
  • $("a") is a jQuery selector, in this case, it selects all a elements.
  • $ is an alias for the jQuery "class", therefore $() constructs a new jQuery object.
  • click() function is a method of the jQuery object. It binds a click event to all selected elements and executes the provided function when the event occurs.

If you want to select just one element use its id inside single or double quotes with #:

//With id:  
    $('#theId') 

//With class:  
    $('.theCssClass')

<input type="button" id ="x" value="Test" />
<input type="button" value="Disable" onclick="$('#x').attr('disabled','disabled')"/>

//with xpath
$("div > ul a").addClass("blue");

The Document Ready Event

$(document).ready(function(){
   // jQuery methods go here...
});

OR

$(function(){
   // jQuery methods go here...
});

This is to prevent any jQuery code from running before the document is finished loading (is ready).

It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

Some actions will fail if methods are run before the document is fully loaded.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License