Learning jQuery

Raise your hand if …• … you write cascading style sheets (css)• … you write ASP.net software?• … you write javascript?• … you write jQuery?• … you enjoy writing javascript?

What’s the problem with JavaScript?

JavaScript was a initially introduced in Netscape 2.0B3

in Dec 1995,

a.k.a. Mocha, LiveScript, Jscript, however, it’s official name is

ECMAScript

JavaScript is a weakly typed, classless, prototype based OO language It is a browser DOM.

The world’s most misunderstood

programming language.

(Douglas Crockford)

Browser DOM really sucks, and this is where jQuery comes to

rescue.

This session is about improving your Quality

of Life !

Introduction to jQuery

Just a few of jQuery's Benefits

• Less Line of Code.• Improves developer efficiency• Excellent documentation(Open Source)• Excellent presentation view• DOM navigation (css-like syntax)• Builder model (chain method calls)• Extensible and there are tons of libraries• Handles most browser differences

Scott Guthrie’s BlogScott Guthrie is a Corporate Vice President in the Microsoft Developer Division. He runs the development teams that build

products/technologies. CLR and the core .NET Base Class Libraries ASP.NET  SilverlightWPFIIS 7.0 Visual Studio Tools for ASP.NET, WPF, Silverlight and MobilejQuery and Microsoft (Google ScottGu jQuery)

jQuery and MicrosoftScott Guthrie announced “… that Microsoft will be shipping jQuery with Visual Studio going forward.  We will distribute the jQuery JavaScript library as-is, and will not be forking or changing the source from the main jQuery branch.  The files will continue to use and ship under the existing jQuery MIT license.

We will also distribute intellisense-annotated versions that provide great Visual Studio intellisense and help-integration at design-time”

What is jQuery?

jQuery is a lightweight, open-source JavaScript library that simplifies interaction between HTML and JavaScript and CSS

It was and still being developed

by John Resig from Mozilla and was first

announced in January 2006

jQuery Core Concepts

DOM Scripting

DOM

custom.js

Behavior Content

index.html

Presentation

style.css

DOM Scripting

DOM Scripting

•By Tag Name (getElementByTagName(“p”))

•By Class Name (getElementByclass(“p”))

•By ID Name (getElementByID(“p”))

Unobtrusive

jquery.js

custom.js

Behavior Content

index.html

Presentation

style.css

What we Need– jQuery Libraries– First Introduce 2006– 1.0,1.1,1.2,1.3,1.4,1.5,1.6,1.7,

1.8.0,1.9.0.1.9.1,2.0.0 (http://jquery.com/)– Types:– Jquery.1.7. js(Size 271kb and response time 6ms)– Jquery.1.7.min.js (Size 90.4kb and response

time 2ms)

What we Need– jQuery Libraries– Types Of jQuery:– jQuery Programming (jquery.js)– jQuery UI (jquery-ui.js) if use ui css then

(jquery-ui.css)– jQuery Mobile (jquery.mobile-1.3.1.js)

Dev Tools

Dev Tools• up to five browsers to test against

– Firefox (2.0+)– Chrome (8+)– Internet Explorer (6+)– Safari(3+)– Opera (10.8+)

• developer tools can make your life much easier

$

$( )

$('div')

$('#id')

Manipulate existing DOM elements

$(window).width()

The Magic $() function

var x,y;if (self.innerHeight) { // all except Explorer x = self.innerWidth; y = self.innerHeight;}else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode x = document.documentElement.clientWidth; y = document.documentElement.clientHeight;}else if (document.body) { // other Explorers x = document.body.clientWidth; y = document.body.clientHeight;}

DOM Scripting

var x = $(window).width();var y = $(window).height();

jQuery

Selects document elements(more in a moment…)

$(“div”).hide();

$(“div”, $(“p”)).hide();

The Magic $() function

$(document).ready(function(){…});

Fired when the document is ready for programming.

Better use the full syntax:

$(function(){…});

The Magic $() function

jQuery(“div”);

The full name of $() function is

$(“div”).hide()

$(“:button”).click()

jQuery’s programming philosophy is:

GET >> ACT

$(document).ready(function(){function(“#btn”).click});

Almost every function returns jQuery, which provides a fluent

programming interface and chainability:

Get > Act

Chainability

The $() function

Three Major Concepts of jQuery

jQuery Selectors

$(“*”) // find everything

All Selector

Selectors return a pseudo-array of jQuery elements

$(“div”)

// <div>Hello jQuery</div>

Basic Selectors

$(“#usr”)

// <span id=“usr”>John</span>

$(“.menu”)

// <ul class=“menu”>Home</ul>

By Tag:

By ID:

By Class:

$(“div.main”) // tag and class

$(“table#data”) // tag and id

More Precise Selectors

// find by id + by class

$(“#content, .menu”)

// multiple combination

$(“h1, h2, h3, div.content”)

Combination of Selectors

$(“table td”) // descendants

$(“tr > td”) // children

$(“tr:even”) // even

$(“tr:odd”) // odd

Hierarchy Selectors

$(“tr:first”) // first element

$(“tr:last”) // last element

$(“tr:lt(2)”) // index less than

$(“tr:gt(2)”) // index gr. than

$(“tr:eq(2)”) // index equals

Selection Index Filters

$(“div: disabled”) // if disable

$(“div:enable”) // if enable

Disability Filters

$(“div:visible”) // if visible

$(“div:hidden”) // if not

Visibility Filters

$(“input:checkbox”) // checkboxes

$(“input:radio”) //radio buttons

$(“:button”) // buttons

$(“:text”) // text inputs

Forms Selectors

$(“input:checked”) // checked

$(“input:selected”) // selected

$(“input:enabled”) // enabled

$(“input:disabled”) // disabled

Forms Filters

SELECTORS DEMO

HTML Manipulation

$(“p”).html(“<div>Hello $!</div>”);

Getting and Setting Inner Content

// select > append to the end$(“h1”).append(“<li>Hello $!</li>”);

// select > append to the beginning$(“ul”).prepend(“<li>Hello $!</li>”);

Inserting new Elements

// get style$(“div”).css(“background-color”);

CSS Manipulations

// set style $(“div”).css(“float”, “left”);

// set multiple style properties$(“div”).css({“color”:”blue”,

“padding”: “1em” “margin-right”: “0”, marginLeft: “10px”});

// from the document$(“div”).offset().top;

// from the parent element$(“div”).position().left;

// scrolling position$(window).scrollTop();

Positioning

Events

$(document).ready(function(){//…

});

When the DOM is ready…

• Fires when the document is ready for programming.

• Uses advanced listeners for detecting.• window.onload() is a fallback.

EVENTS DEMO

Effects

// just show$(“div”).show();

// reveal slowly, slow=600ms$(“div”).show(“slow”);

// hide fast, fast=200ms$(“div”).hide(“fast”);

// hide or show in 100ms $(“div”).toggle(100);

Showing or Hiding Element

$(“div”).slideUp();

$(“div”).slideDown(“fast”);

$(“div”).slideToggle(1000);

Sliding Elements

$(“div”).fadeIn(“fast”);

$(“div”).fadeOut(“normal”);

// fade to a custom opacity$(“div”).fadeTo (“fast”, 0.5);

Fading Elements

Fading === changing opacity

// .animate(options, duration)$(“div”).animate({

width: “90%”,opacity: 0.5,borderWidth: “5px”

}, 1000);

Custom Animation

AJAX with jQuery

$.get("demo_test.asp",function(data,status){alert("Data: " + data + "\nStatus: " + status);});

$.post(“test.aspx”, {id:1},function(data)

{alert(data);});

Sending GET/POST requests

AJAX DEMO

References:

•http://jquery.com/

•http://jqueryui.com/

•http://jquerymobile.com/

•http://programmers.stackexchange.com/questions/166273/advantages-of-using-pure-javascript-over-jquery

•http://www.slideshare.net/simon/jquery-in-15-minutes

•Internet