Introduction to jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers.

Select elements using CSS-style selectors:

$("#id")


$(".class")


$("tag")

Handle user interactions:

$("button").click(function(){
  alert("Button clicked!");
});

Change content and structure:

$("#myDiv").text("New text");


$("#myDiv").html("Bold");

Change styles dynamically:

$("#myDiv").css("color", "red");

Send asynchronous HTTP requests:

$.ajax({
  url: "test.php",
  type: "GET",
  success: function(result){
    $("#div1").html(result);
  }
});

Animate elements:

$("#myDiv").fadeIn();


$("#myDiv").slideUp();

Useful utility methods:

$.each([1,2,3], function(index, value){
  console.log(index, value);
});