Introduce jQuery

By Bank2u

jQuery

• Cross-browser javascript library• Free & Opensource• First released Jan 06 @Barcamp by John Resig• Last stable version 1.4.2

Why jQuery ?• Cross-browser compatibility• Fast & Small • Plug-in• Learning curve & Documentation• Intellisense in VS2008-2010• Microsoft [Ajax Lib & MVC]

Why jQuery ?

Who’s using jQuery

• Microsoft• Google• Mozilla• digg• Wordpress & Drupal• HP - IBM - Intel.• Ruby on Rails

Getting Start

• Download jQuery at jquery.com– <script type="text/javascript" src="/js/jQuery. js"></script>

• Microsoft CDN or Google CDN– <script src="http://ajax.microsoft.com/ajax/jquery/jquery-

1.4.2.js" type="text/javascript"></script>– <script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

Hello world jQuery

• Document ready

$(document).ready(function () { alert("Hello world jQuery");});

// Short cut$(function () { alert("Hello world jQuery");});

jQuery Philosophy

Find someone

from HTML(selector)

Do something

to it(method)

Find some element

Selector

• CSS Style– $(“#myID”) // by id– $(“.myClass”) // by class name– $(“myTag”) // by tag (element name)– $(“#id, .class, tag”) // multiple

Selector [Hierarchy]• $("form input") // descendant• $("#main > *") // child• $("#prev ~ div") // sibling

Selector [Hierarchy]• $("form input") // descendant

<form> <div> Form is surrounded by the green outline</div> <label> Child:</label> <input name="name" /> <fieldset> <label> Grandchild:</label> <input name="newsletter" /> </fieldset></form>

Selector [Attribute]

• $("div[id]"). //has• $("input[name='bank']“) //not has• $("input[name^='news']") //equal• $("input[name$='letter']") //begin with• $("input[name$='letter']") //end with• $("input[name*='man']") //contain• $("input[id][name$='man']")

Selector [Form]

• $("div :text")• $("form :radio")• $("#dvMainForm :checkbox")• $(":button")• $("input:disabled")• $("input:checked")

Do something with them

Attribute• $("em").attr("title")• $("label").html()• $("p:first").text()• $("input").val()

• $("em").attr("title", "zupzip")• $("label").html("zupzip")• $("p:first").text("zupzip")• $("input").val("zupzip")

Get

Set

Event• Bind– $(“input”).bind(“blur”, fn);

• Trigger– $(“input”).trigger(“focus”);

• Event Helper– $(“input”).click(function() { alert(‘click’); });– S(“input”).click();

• Live– $(“input”).live(“click”, fn);

Traversing• find $("p").find("span").css('color','red'); • children $

("div").children(".selected").css("color); • parent $("tr").parent().get(0).tagName;• next $("button[disabled]").next().text("this

button is disabled"); • prev $("p").prev(".selected").css("background",

"yellow");• sibling $(".hilite").siblings() .css("color", "red")

Manipulation

• append $("p").append("<strong>Hello</strong>");

• appendTo $("span").appendTo("#foo");• prepend &prependTo• after $("p").after("<b>Hello</b>"); • before $("p").before("<b>Hello</b>");

Effect

• show / hide• toggle• slide• fade• Custom animation