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

$(document).ready(function(){
     alert('Document Loaded');
     $('#mycontent').html('Hello World');
});

jQuery Selector

Selecting Nodes(Tag) by TagName

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

Selecting Nodes by ID

$('#myID')

Selecting Elements by Class Name

$('.myClass')
$('h1.myClass')

- Selecting By Attribute Value

$(div[title="Test"]);
$(input[type="text"])

- Selecting Input Nodes

$(:input)
$(:input[type="text"])

- Using Contains in Selector

$('div:contains')

- Selecting Even or Odd Rows

$('tr:odd')
$('tr:even')

- Selecting First Child

$('div > span:first-child')
$('div > span:last-child')

Example

$('#mydiv').css('background-color','Green');

$('div').each(function() {
alert($(this).html());
}

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

jQuery each Function

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

});

Accessing / Modifying Attributes

Accessing Attributes

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

Modiying Multiple Attributes

$('img').attr({
     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

$("div").css({
  'color':'red',
  'font-size':'20pt'
});

Modifying Classes

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

Example

<div id="home"></div>
<input id="txt_name" onkeyup="dynatext()" type="text" />

dynatext = function()
        var text = $('#txt_name').val();
        $('#home').append('<p>' + text + '</p>');
}

$(document).ready(function(){
    $('#home').html("I am ready");
    $('#home').append('<h2>End</h2>');
    $('#home').prepend('<h2>Title</h2>');

});

###Handling Events

jQuery simplifies hanlding cross-browser event attachments.

.click(handler(eventObject));

jQuery performs following event handling

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

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

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

$('#id').change(function() {
alert($(this).val());
});

$('#myid').mouseup(function(e) {
alert(e.pageX);
alert(e.pageY);
});

###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');
}

});

$('#mydiv').off('mouseenter');

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) {
alert($(this).text());
});

Versus
$('#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)

Example

$(document).ready(function(){
$('#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

$.get(_URL,callback_);

Making POST Requests

$.post(_URL,data,callback_);