Sreejithsreejithp@sesametechnologies.net

Experience working with Javascript Good Understanding of HTML Experience working with css

Pre- Reqs

Getting start with Jquery Why use jQuery & How referencing Jquery Using CDN with a Fallback Using the jQuery Selectors Intracting with the DOM Handling Events Working with Ajax Features

Agenda

What is Jquery?◦ Javascript Library(single file)◦ Cross-browser support◦ Select HTML element◦ Handle events◦ Animate HTML element◦ Make Ajax Call◦ 1000’s of plugins available

Getting Start with jQuery

How do you locate element with specific class??

How do you apply styles to multiple elments?

How do you handle events in cross-browser manner?

How many hours have you spend dealing with cross-browser issue??

Why use JQuery

Go to jquery.com Choose ur compression level Download

Referencing a Jquery script

Content Delivery Network(CDNs) Provide Several benfits:◦ Catching of Scripts◦ Support for http and https◦ Regional server – decreased latency◦ Allows for more concurrent call(parallelism)

Content Delivery Network(CDN)

CDN Providers : Google,Microsoft,jQuery and others provide CDNs that host script such as jQuery:

<script src=“//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>

OR<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

You can get google CND fromhttps://developers.google.com/speed/libraries/devguide

Using a content Delivery Network(CDN)

No protocol define

If there was a problem with the CDN u can load the script locally

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script> window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')

</script>

What if CDN is Down

Use $(document).ready() to detect when a page has loaded and is ready to use

Call once DOM hierarchy is loaded (but before all image have loaded)

<script type=“text/javascript”>$(document).ready(function(){ //Performaction here})</script>

Using the jQuery Ready Funciton

CSS Selectors

element {} #id {}class {}selector1, selector2 {}

ancestor descendant {}

parent > child {}

:nth-child() {}

CSS Selectors vs jQuery Selctors

jQuery Selectors

$('element')

$('#id')

$('.class')

$('selector1, selector2')

$('ancestor descendant')

$('parent > child')

$(':nth-child(n)')

What is Selectors◦ Selectors allow page element to be selected◦ Single or multiple element are supported◦ A selector identifis an HTML element/tag that u

will manipulate with JQuery code<div id=“EmpDiv” class=“higlight”> < span

class=“Text”>John < /span></div>

$(‘div’).text(‘ABC’) or jQuery(‘div’).text(“ABC”)$(‘.Text’).text(‘xz’) or jQuery(‘.Text’).text(‘xz’)

Using jQuery Selectors

Iterating Through Nodes Modifying DOM Object Properties Modifying Attributes Adding and Removing Nodes Modifying Styles Modifying Class

Intracting with the DOM

each(function(inedex,element){}) is used to iterating through jQuery Object:

$('span').each(function(index){alert((index+1)+" -- "+$(this).text());}); Iterating through each div element and

returns its index number and text $('span').each(function(index,elem){alert((index+1)+" -- "+$(elem).text());});

Iterating Through Nodes

The this.propertyName statement can be used modify an object’s property directly

$(this).each(function(){this.title=“Some title”

});Or Get Attribute Var x=$(“.DivClass”).attr(‘title’)Set Attribute$(“.DivClass”).attr(‘title’,’Some tilte’)

Modifying Object Properties

To modify multiple attributes, pass JSON object containing name/value pair

$(‘img’).attr({style:”border:2px solid black”,title:”My Image Title”});Json object passed and used to change title

and border

Modifying Multiple Attributes

Four key method handle inserting nodes into elements;◦ .append()◦ .appendTo()◦ .prepend()◦ .prependTo()

To remove node from element use .remove()◦ $(element).remove()

Adding and Removing Nodes

The following HTML and .wrap() function: <div class=“state”>Kerala</div> $(‘.state’).wrap(‘<div class=“India”/>’);

Result:<div class=“India”>

<div class=“state”>Kerala</div></div>

Wrapping Element

The .css() function can be used to modifying an Object’s style:

$(“div”).css(“color”,”red”) Multiple style can be modified by passing a

JSON object:

$(“div”).css({‘color’:’red’,’font-size’:’13pt’})

Modifying Style

The four method for working with CSS Class attributes are:◦ .addClass()◦ .hasClass()◦ removeClass();◦ toogleClass();

Modifying CSS Classes

Click() Blur() Focus() Dblclick() Mousedown() Mouseup() Keydown() Keypress() See more att

http://api.jquery.com/category/events

Handling Events

.click(handler(eventObject)) is used to listen for a click event or trigger a click event on an element

$(‘#myID’).click(function(){alert(“The element myID was clicked”)}).Trigger$(‘#myID’).trigger(‘click’) or$(‘#myID’).click()

Handling Click Events

.bind(evnetType,handler(eventObject)) attaches a handler to an event for the selected elements

$(‘#myDiv’).bind(‘click’,function(){◦ //handle click event

}) .click() is same as .bind(‘click’)

Use bind

Bind() allow multiple events to bound to one or more element

Event names to are separated with a space:

$(‘#myDiv’).bind(‘mouseenter mouseleave’,function(){

$(this).toggleClass(‘enterd’); })

Binding Multiple Event

.unbind(event) is used to remove a handler previously bound to an element:

$(‘#test’).click(handler); can be unbound using

$(‘#test’).unbind()

Specific events can also be targeted using unbind()

$(‘#test’).unbind(‘click’)

Using Unbind()

live() and delegate() allow new element added into DOM to automatically be “attached” to an event handler

live() – allows binding of event handler to elements that match a selector, including future element.

delegate() replace for live() in jQuery 1.4 Attaches event handler directly to the selector context.

live() and delegate() function

Loading HTML content form Server $(selector).load(url,data,callback) allow

HTML content to be loaded from a server and added into a DOM object

$(document).ready(function(){ $(‘#hlbbutton’).click(function(){

◦ $(‘#Mydiv’).load(‘helpDtl.html #mainTOc’); }) })

Working with Ajax Features

Promise in Action

Many apps scatter Ajax calls throughout the code

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

$.getJSON("/getData",function(data){

var cust= data[0];$('#ID').text(cust.ID)$('#FirstName').text(cust.FirstName)$('#LastName').text(cust.LastName)

})});

Example

When submitting a form use .serialize()

$('#myform').submit(function(event){event.preventDefault();var formUrl=$(this).attr('action'), formData=$(this).serialize()‘$.ajax({ url: formUrl, data: formData});})

Example

Before jQuery 1.5, these were handled by tree more option()

{success:function(){},error:function(){},complete:function(){}}

$.ajax({ url:'/url/to/serverResource', success: function(response,status,xhr){ //do something after successful request }, error:function(xhr,status,erroThrown){ //handle failed request } complete: function(xhr,status) { //do something whether sucess or error }}

Ajax Resoponses

tHank yOu