jQuery - Notes

Using CDN and providing Fallback

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery.js"></script>')</script>

jQuery Hello World

     alert('Document Loaded');
     $('#mycontent').html('Hello World');

jQuery Selector

Selecting Nodes(Tag) by TagName

$('div,span') //Combining Selector
$('table tr') //Traversing Selectors

Selecting Nodes by ID


Selecting Elements by Class Name


- Selecting By Attribute Value


- Selecting Input Nodes


- Using Contains in Selector


- Selecting Even or Odd Rows


- Selecting First Child

$('div &gt; span:first-child')
$('div &gt; span:last-child')



$('div').each(function() {

var input = $(':input[type="text"]');
alert (input.val());

jQuery each Function



Accessing / Modifying Attributes

Accessing Attributes

var value = $('#CustomerDiv').attr('title');
$('img').attr('title','My Image Title');

Modiying Multiple Attributes

     title: 'My Image',
     style: 'border:2px solid black'

Adding and Removing Nodes

  • .append() - Bottom of the Children
  • .prepend() - Top of the Children
  • .remove() - Remove a Node
$('#outputdiv').append('Added Tag');

Wrapping Elements

  • .wrap() - Wraps a selector

Modifying Style


Modifying Classes

  • .addClass()
  • .removeClass()
  • .toggleClass()


<div id="home"></div>
<input id="txt_name" onkeyup="dynatext()" type="text" />
dynatext = function()
        var text = $('#txt_name').val();
        $('#home').append('<p>' + text + '</p>');

    $('#home').html("I am ready");


###Handling Events

jQuery simplifies hanlding cross-browser event attachments.


jQuery performs following event handling

  • click()
  • blur()
  • focus()
  • dbclick()
  • mosuedown()
  • mouseup()
  • mouseover()
  • mouseenter()
  • keydown()

alert('I am Clicked');
$('#anotherid').click(); //Click Another Item

$('#id').change(function() {

$('#myid').mouseup(function(e) {

###Binding to Events

Using on() $('#mydiv').on('click',function() { //Code Block });

Using off() $('#mydiv').off('click');

###Binding Multiple Events

$('mydiv').on('mouseenter mouseleave mouseup', function(e) {
if (e.type == 'mouseup') {
alert('I am over');



live(), delegate() and on() allow new DOM elements to automatically be “aatched” to an event handler

$(#$divs').delegate('div','click', somefunction);

The on() function can be used in place of live() and delegate() [Bubbleup Events]

Add future children element to be wired to event handler

This delegated-events approach attaches an event handler to only one element, tbody and the event only needs to bubble up one level.

$('#MyTable tbody").on("click","tr", function(event) {

$('#Mytable tbody tr").on('click', function(event) {


###Handling Hover / Toggle Events

$(selector).hover(function() {
//Triggers on HoverOn and HoverOut

$(selector).hover(handlerIn, handlerOut);
$(selector).toggle(handlerIn, handlerOut);

#Working with Ajax Features

jQuery AJAX Functions - jQuery allows Ajax requests to be made from a page

  • Allows parts of page to be updated
  • Cross_browser Support
  • Simple API
  • GET and POST supported
  • Load JSON, XML, HTML or even scripts

jQuery Ajax Functions

Loading HTML Content from the Server $(selector).load() - Loads HTML data from the server

Syntax : $(selector).load(url,data,callback)


$('#MyDiv').load('HelpDetails.html #MainTOC');
$.get() and $.post() - Get raw data from the server
$.getJSON(): Get/POST and return JSON
$.ajax(): Provides core functionality

Making GET Requests


Making POST Requests