Top Banner
by: Jeremiah G. Gatong
35
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: jQuery

by: Jeremiah G. Gatong

Page 2: jQuery

Things to know first…

Page 3: jQuery

The JavaScript Ninja!

• John Resig - is a JavaScript Tool Developer for the Mozilla Corporation and the creator and lead developer of the jQuery.

Page 4: jQuery

What is jQuery?

• Is a single JavaScript file.• Is a cross-browser JavaScript library (e.g. Dojo, YUI, Prototype, Mochikit,

Scriptaculous) designed to simplify the client-side scripting of HTML.• It was released in January 2006 at BarCamp NYC by John Resig.• An open source functional scripting tool.• Syntax is designed to make it easier to navigate a document, select

DOM elements, create animations, handle events, and develop Ajax applications.

• Provides capabilities for developers to create plugins on top of the JavaScript library.

Page 5: jQuery

Why use jQuery?• Free! (MIT License & GNU GPL v2)• Cross browser (IE 6+, Firefox 2+, Safari 3+, Opera 9+ & Chrome 1+)• Lightweight (14KB)• Extensible• Fully documented (http://docs.jquery.com/Main_Page)• Templating engine• Unit test (QUnit)• Documentation Generator (JsDoc-Toolkit)• Browser extensions (jsshell, FireQuery, etc…)• Great community• Tons of plugins (DataGrid, Sortable table, etc...)

Page 6: jQuery

Who use jQuery?

Page 7: jQuery

Where can I get jQuery?• jQuery official website http://jquery.com/• Microsoft adopted it within Visual Studio 2010 for use

within Microsoft's ASP.NET AJAX framework and ASP.NET MVC Framework

• Public Servers

http://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0

http://code.google.com/apis/libraries/devguide.html#jquery

Page 8: jQuery

How can I use jQuery?

• Pick compression level

• Include the library<script type=“text/javascript" src="jquery.min.js"></script>• Start coding<script type=“text/javascript" >

// Put your logic here…</script>

Page 9: jQuery

The jQuery object

• Commonly named:

• Also named:

Page 10: jQuery

jQuery API

jQuery Selector• $(*)• $(element)• $(id)• $(class)• $(object) $ $.jQuery Command [factory or utility]• .doSomething(parameter, …, options, callback);

Interchangeable

Page 11: jQuery

jQuery UI• Provides abstractions for low-level

interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that can be used to build interactive web applications.

Samples• Resizable• Tabs• Accordion• Progress Bar• Calendar• etc…

Page 12: jQuery

The focus of jQuery

Page 13: jQuery

Find some elements…

• Full CSS selector 1-3 support• Basic XPath• Better CSS selector support than most browsers

Page 14: jQuery

$(“div”)

<div id=”body”><h2>Some Header</h2><div class=”contents”><p>...</p><p>...</p></div></div>

Page 15: jQuery

$(“#body”)

<div id=”body”><h2>Some Header</h2><div class=”contents”><p>...</p><p>...</p></div></div>

Page 16: jQuery

$(“div#body”)

<div id=”body”><h2>Some Header</h2><div class=”contents”><p>...</p><p>...</p></div></div>

Page 17: jQuery

$(“div.contents p”)

<div id=”body”><h2>Some Header</h2><div class=”contents”><p>...</p><p>...</p></div></div>

Page 18: jQuery

$(“div > div”)

<div id=”body”><h2>Some Header</h2><div class=”contents”><p>...</p><p>...</p></div></div>

Page 19: jQuery

$(“div:has(div)”)

<div id=”body”><h2>Some Header</h2><div class=”contents”><p>...</p><p>...</p></div></div>

Page 20: jQuery

Do something with them• DOM Manipulation (append, prepend, remove)• Events (click, hover, toggle)• Effects (hide, show, slideDown, fadeOut)• AJAX (load, get, post)

Page 21: jQuery

DOM Manipulation$(“a[target]”)

.append(“ (Opens in New Window)”);

$(“#body”).css({border: “1px solid green”,height: “40px”

});

Page 22: jQuery

Events$(“form”).submit(function(){

if ( $(“input#name”).val() == “” )$(“span.help”).show();

});

$(“a#open”).click(function(){$(“#menu”).show();return false;

});

Page 23: jQuery

Animations• $(“#menu”).slideDown(“slow”);

• Individual properties$(“div”).animate({

fontWeight: “2em”,width: “+=20%”,color: “green” // via plugin

});

• Callbacks$(“div”).hide(500, function(){

// $(this) is an individual <div> element$(this).show(500);

});

Page 24: jQuery

Ajax$(“#body”).load(“sample.html div > h1”);

• Before<div id=”body”></div>

• After<div id=”body”>

<h1>Hello, world!</h1></div>

$.getJSON(“test.json”, function(js){for ( var name in js )$(“ul”).append(“<li>” + name + “</li>”);

});

Page 25: jQuery

Chaining• You can have multiple actions against a single set of elements

$(“div”).hide();

$(“div”).hide().css(“color”,”blue”);

$(“div”).hide().css(“color”,”blue”).slideDown();

Page 26: jQuery

jQuery Plugins• jQuery Sliders Slider Gallery (http://jqueryfordesigners.com/demo/slider-gallery.html)

• jQuery Navigation Menu Icon Dock (http://icon.cat/software/iconDock/0.8b/dock.html)

• Navigation Tree View (http://jquery.bassistance.de/treeview/demo/ )

• Many-many more…

Page 27: jQuery

jQuery Authoring• Extend the jQuery system

• Add on extra methods$(“div”).hideRemove();

• Trivial to implementjQuery.fn.hideRemove = function(speed){

return this.hide(speed, function(){jQuery(this).remove();

});};

Page 28: jQuery

jQuery on PageMethods• C#

• jQuery

Page 29: jQuery

jQuery and JSON• JSON (JavaScript Object Notation) - is a

lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

• Sample:{ "firstName": "John", "lastName": "Smith",

"age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021" }, "phoneNumber": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646 555-4567" } ] }

Page 30: jQuery

jQuery’s LINQ• LINQ style functionality for

JavaScript. Allows you to work with sets of data using query style syntax to select, order and sort records.

• Sample:var results = jLinq.from(records) .ignoreCase() .startsWith("name", "m") .or("j") .is("admin") .orderBy("age") .select();}}

Page 31: jQuery

jQuery on SVG• Scalable Vector Graphics (SVG) - is a

family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).

• Sample:<svg width="100%" height="100%" version="1.1“ xmlns="http://www.w3.org/2000/svg">

<rect width="300" height="100“ style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>

Page 32: jQuery

jQuery Effects IDE

• Glimmer allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios. Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS.

Page 33: jQuery

QUnit• Qunit - is a powerful, easy-to-use, JavaScript test suite. It's used by

the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code (and even capable of testing JavaScript code on the server-side).

• Sample:test("a basic test example", function () {

ok(true, "this test is fine"); var value = "hello";

equals("hello", value, "We expect value to be hello");});

Page 35: jQuery

Questions