jQuery Slides
-
Upload
vijayendra-deshpande -
Category
Documents
-
view
218 -
download
0
Transcript of jQuery Slides
-
8/3/2019 jQuery Slides
1/84
Whats the problem with
JavaScript?
-
8/3/2019 jQuery Slides
2/84
JavaScript?
JavaScript is a C-family, extremely
powerful language (not a script),
totally unrelated to Java
-
8/3/2019 jQuery Slides
3/84
The worlds most misunderstood
programming language.
(Douglas Crockford)
-
8/3/2019 jQuery Slides
4/84
Introduction to jQuery
-
8/3/2019 jQuery Slides
5/84
$(#firstName).text(Joe Black);
$(button).click(function() {alert(Clicked);});
$(.content).hide();
$(#main).load(content.htm);
$().html(Loading).appendTo(#content);
A Quality of Life by jQuery:
Very compact and fluent programming model
-
8/3/2019 jQuery Slides
6/84
What is jQuery?
-
8/3/2019 jQuery Slides
7/84
jQuery is a lightweight, open-source
JavaScript library that simplifies
interaction between HTML and
JavaScript
-
8/3/2019 jQuery Slides
8/84
It was and still being
developed
by John Resig from
Mozilla and was first
announced in January
2006
-
8/3/2019 jQuery Slides
9/84
It has a great community, great
documentation, tons ofplugins,
and it was recently adopted by
Microsoft
-
8/3/2019 jQuery Slides
10/84
The current version is 1.4.2
(as of April 2010)
http://blogs.microsoft.co.il/blogs/noam/jQuery8x6_7484FDCD.png -
8/3/2019 jQuery Slides
11/84
Getting Started
-
8/3/2019 jQuery Slides
12/84
Download the latest version from
http://jquery.com
http://jquery.com/http://jquery.com/ -
8/3/2019 jQuery Slides
13/84
Reference it in your markup
-
8/3/2019 jQuery Slides
14/84
///
Reference it in your JS files:
-
8/3/2019 jQuery Slides
15/84
You can also reference it from Google
-
8/3/2019 jQuery Slides
16/84
jQuery Core Concepts
-
8/3/2019 jQuery Slides
17/84
Create HTML elements on the fly
var el = $()
The Magic $() function
-
8/3/2019 jQuery Slides
18/84
Manipulate existing DOM elements
$(window).width()
The Magic $() function
-
8/3/2019 jQuery Slides
19/84
Selects document elements
(more in a moment)
$(div).hide();
$(div, $(p)).hide();
The Magic $() function
-
8/3/2019 jQuery Slides
20/84
$(document).ready(function(){});
Fired when the document is ready forprogramming.
Better use the full syntax:
$(function(){});
The Magic $() function
-
8/3/2019 jQuery Slides
21/84
It may be used in case of conflict with otherframeworks.
jQuery(div);
The full name of$() function is
-
8/3/2019 jQuery Slides
22/84
jQuery uses closures for isolation
(function(){
var
jQuery=window.jQuery=window.$=function(){
//
};
})();
The library is designed to be isolated
-
8/3/2019 jQuery Slides
23/84
var foo = jQuery.noConflict();
// now foo() is the jQuery main function
foo(div).hide();
Avoid $() conflict with other
frameworks
// remove the conflicting $ and jQuery
var foo = jQuery.noConflict(true);
-
8/3/2019 jQuery Slides
24/84
$(div).hide()
$().appendTo(body)
$(:button).click()
jQuerys programming philosophy is:
GET >> ACT
-
8/3/2019 jQuery Slides
25/84
$(div).show()
.addClass(main)
.html(Hello jQuery);
Almost every function returns jQuery,
which provides a fluent programminginterface and chainability:
-
8/3/2019 jQuery Slides
26/84
Get > Act
Chainability
The $() function
Three Major Concepts of jQuery
-
8/3/2019 jQuery Slides
27/84
jQuery Selectors
-
8/3/2019 jQuery Slides
28/84
$(*) // find everything
All Selector
Selectors return a pseudo-array of jQuery
elements
-
8/3/2019 jQuery Slides
29/84
$(div)
// Hello jQuery
Basic Selectors
Yes, jQuery implements CSS Selectors!
$(#usr)
// John
$(.menu)
// Home
By Tag:
By ID:
By Class:
-
8/3/2019 jQuery Slides
30/84
$(div.main) // tag and class
$(table#data) // tag and id
More Precise Selectors
-
8/3/2019 jQuery Slides
31/84
// find by id + by class
$(#content,.menu)
// multiple combination
$(h1, h2, h3, div.content)
Combination of Selectors
-
8/3/2019 jQuery Slides
32/84
$(table td) // descendants
$(tr > td) // children
$(label + input) // next
$(#content ~ div) // siblings
Hierarchy Selectors
-
8/3/2019 jQuery Slides
33/84
$(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
-
8/3/2019 jQuery Slides
34/84
$(div:visible)// if visible
$(div:hidden) // if not
$(div:contains(text))// cont.string
$(div:empty) // empty elements
$(div:parent) // all parents
Visibility &Content Filters
-
8/3/2019 jQuery Slides
35/84
$(div[id]) // has attribute
$(div[dir=rtl]) // equals to
$(div[id^=main]) // starts with
$(div[id$=name]) // ends with
$(a[href*=msdn]) // contains
Attribute Filters
-
8/3/2019 jQuery Slides
36/84
$(input:checkbox) // checkboxes
$(input:radio) // radio buttons
$(:button) // buttons
$(:text) // text inputs
Forms Selectors
-
8/3/2019 jQuery Slides
37/84
$(input:checked) // checked
$(input:selected) // selected
$(input:enabled) // enabled
$(input:disabled) // disabled
Forms Filters
-
8/3/2019 jQuery Slides
38/84
$(select[name=ddl] option:selected).val()
Find Dropdown Selected Item
Pune
Dublin
Shanghai
-
8/3/2019 jQuery Slides
39/84
-
8/3/2019 jQuery Slides
40/84
Document Traversal
-
8/3/2019 jQuery Slides
41/84
$(div).length
Returns number of selected elements.
It is the best way to check selector.
A Selector returns a pseudo array of
jQuery objects
-
8/3/2019 jQuery Slides
42/84
$(div).get(2) or$(div)[2]
Returns a 2ndDOM element of the
selection
Getting a specific DOM element
-
8/3/2019 jQuery Slides
43/84
$(div).eq(2)
Returns a 2ndjQuery element of the
selection
Getting a specific jQuery element
-
8/3/2019 jQuery Slides
44/84
var sum = 0;
$(div.number).each(
function(){
sum += (+this.innerHTML);
});
this is a current DOM element
each(fn) traverses every selected
element calling fn()
-
8/3/2019 jQuery Slides
45/84
$(table tr).each(
function(i){
if (i% 2)$(this).addClass(odd);
});
$(this) convert DOM to jQuery
i - index of the current element
each(fn) also passes an indexer
-
8/3/2019 jQuery Slides
46/84
.next(expr) // next sibling
.prev(expr) // previous sibling
.siblings(expr) // siblings
.children(expr) // children
.parent(expr) // parent
Traversing HTML
-
8/3/2019 jQuery Slides
47/84
$(table td).each(function() {
if ($(this).is(:first-child)) {
$(this).addClass(firstCol);
}
});
Check for expression
-
8/3/2019 jQuery Slides
48/84
// select paragraph and then find
// elements with class header inside
$(p).find(.header).css("border","3px solid red");
// equivalent to:
$(.header, $(p)).css("border","3px solid red");
Find in selected
-
8/3/2019 jQuery Slides
49/84
$()// li
.find(span)// span
.html(About Us)// span.andSelf()// span, li
.addClass(menu)// span,li
.end()// span
.end()// li
.appendTo(ul.main-menu);
Advanced Chaining
-
8/3/2019 jQuery Slides
50/84
$(div)
.slice(2, 5)
.not(.green)
.addClass(middle);
Get Part of Selected Result
-
8/3/2019 jQuery Slides
51/84
HTML Manipulation
-
8/3/2019 jQuery Slides
52/84
$(p).html(Hello $!);
// escape the content of div.b
$(div.a).text($(div.b).html());
Getting and Setting Inner Content
-
8/3/2019 jQuery Slides
53/84
// get the value of the checked checkbox
$(input:checkbox:checked).val();
Getting and Setting Values
// set the value of the textbox
$(:text[name=txt]).val(Hello);
// select or check lists or checkboxes
$(#lst).val([NY,IL,NS]);
-
8/3/2019 jQuery Slides
54/84
Handling CSS Classes
// add and remove class
$(p).removeClass(blue).addClass(red);
// add if absent, remove otherwise
$(div).toggleClass(main);
// test for class existance
if ($(div).hasClass(main)) { // }
-
8/3/2019 jQuery Slides
55/84
// select > append to the end
$(h1).append(Hello $!);
// select > append to the beginning
$(ul).prepend(Hello $!);
Inserting new Elements
// create > append/prepend to selector
$().html(9).appendTo(ul);
$().html(1).prependTo(ul);
-
8/3/2019 jQuery Slides
56/84
// select > replace
$(h1).replaceWith(Hello);
Replacing Elements
// create > replace selection
$(Hello).replaceAll(h1);
-
8/3/2019 jQuery Slides
57/84
$(h3).each(function(){
$(this).replaceWith(
+ $(this).html() + );
});
Replacing Elements while keeping
the content
$("p").wrap("");
$("p").wrapAll("");
-
8/3/2019 jQuery Slides
58/84
// remove all children
$(#mainContent).empty();
Deleting Elements
// remove selection
$(span.names).remove();
// change position
$(p).remove(:not(.red))
.appendTo(#main);
-
8/3/2019 jQuery Slides
59/84
$(a).attr(href,home.htm);
//
Handling attributes
// set the img src and alt
$("img").attr({ src: "images/Spring.jpg",
alt: "spring" });
// remove attribute - href
$("a").removeAttr("href");
-
8/3/2019 jQuery Slides
60/84
$(img).attr({
src : /images/smile.jpg,
alt : Smile,width : 10,
height : 10
});
Setting multiple attributes
-
8/3/2019 jQuery Slides
61/84
// 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});
-
8/3/2019 jQuery Slides
62/84
// get window heightvar winHeight = $(window).height();
// set element height
$(#main).height(winHeight);//.width() element
//.innerWidth() .width() + padding
//.outerWidth() .innerWidth() + border//.outerWidth(true) including margin
Dimensions
The default unit is Pixel (px)
-
8/3/2019 jQuery Slides
63/84
// from the document
$(div).offset().top;
// from the parent element$(div).position().left;
// scrolling position
$(window).scrollTop();
Positioning
-
8/3/2019 jQuery Slides
64/84
Events
-
8/3/2019 jQuery Slides
65/84
$(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.
-
8/3/2019 jQuery Slides
66/84
// execute always$(div).bind(click, fn);
// execute only once
$(div).one(click, fn);
Attach Event
Possible event values:
blur, focus, load, resize, scroll, unload, beforeunload, click,
dblclick, mousedown, mouseup, mousemove, mouseover,
mouseout, mouseenter, mouseleave, change, select, submit,
keydown, keypress, keyup, error
(or any custom event)
-
8/3/2019 jQuery Slides
67/84
jQuery.Event object
http://api.jquery.com/category/events/
http://api.jquery.com/category/events/http://api.jquery.com/category/events/ -
8/3/2019 jQuery Slides
68/84
$(div).unbind(click, fn);
Detaching Events
(Unique ID added to every attached function)
-
8/3/2019 jQuery Slides
69/84
$(div).trigger(click);
Events Triggering
Triggers browsers event action as well.
Can trigger custom events.
Triggered events bubble up.
-
8/3/2019 jQuery Slides
70/84
// attach / trigger
elem.blur(fn) / elem.blur()
elem.focus(fn) / elem.focus()
elem.click(fn) / elem.click()
elem.change(fn) / elem.change()
Events Helpers
And many others
-
8/3/2019 jQuery Slides
71/84
// use different triggering function
$(div).triggerHandler(click);
Preventing Browser Default Action
// prevent default action in handler
function clickHandler(e) {
e.preventDefault();
}
// or just return false
function clickHandler(e) {return false;}
-
8/3/2019 jQuery Slides
72/84
// stop bubbling, keep other handler
function clickHandler(e) {
e.stopPropagation();
}
Preventing Bubbling
// stop bubbling and other handlers
function clickHandler(e) {
e.stopImmediatePropagation();
}
// or just return false
function clickHandler(e) {return false;}
-
8/3/2019 jQuery Slides
73/84
Effects
-
8/3/2019 jQuery Slides
74/84
AJAX with jQuery
-
8/3/2019 jQuery Slides
75/84
$(div).load(content.htm);
// passing parameters$(#content).load(getcontent.aspx,
{id:33,
type:main});
Loading content
-
8/3/2019 jQuery Slides
76/84
$.get(test.aspx, {id:1},
function(data){alert(data);});
$.post(test.aspx, {id:1},
function(data){alert(data);});
Sending GET/POST requests
-
8/3/2019 jQuery Slides
77/84
$.getJSON(users.aspx, {id:1},
function(users)
{alert(users[0].name);
});
Retrieving JSON Data
-
8/3/2019 jQuery Slides
78/84
-
8/3/2019 jQuery Slides
79/84
http://jqueryui.com/
http://jqueryui.com/http://jqueryui.com/ -
8/3/2019 jQuery Slides
80/84
jQuery web-site: http://jquery.com
jQuery API: http://api.jquery.com
Many many blogs
jQuery in Action book:
Where to go next
More Things To Explore
http://jquery.com/http://api.jquery.com/http://api.jquery.com/http://jquery.com/ -
8/3/2019 jQuery Slides
81/84
Validation
JQGrid
struts2-jquery-plugin home
Struts2 jQuery Plugin Showcase
jQuery Tools Essential Controls List
More Things To Explore
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/http://code.google.com/p/struts2-jquery-pluginhttp://www.trirand.com/blog/http://code.google.com/p/struts2-jquery-pluginhttp://code.google.com/p/struts2-jquery/http://www.weinfreund.de/struts2-jquery-showcase/index.actionhttp://flowplayer.org/tools/download.htmlhttp://wiki.jqueryui.com/Essential-Controls-Listhttp://wiki.jqueryui.com/Essential-Controls-Listhttp://flowplayer.org/tools/download.htmlhttp://www.weinfreund.de/struts2-jquery-showcase/index.actionhttp://www.weinfreund.de/struts2-jquery-showcase/index.actionhttp://www.weinfreund.de/struts2-jquery-showcase/index.actionhttp://code.google.com/p/struts2-jquery/http://code.google.com/p/struts2-jquery/http://code.google.com/p/struts2-jquery/http://code.google.com/p/struts2-jquery/http://code.google.com/p/struts2-jquery/http://code.google.com/p/struts2-jquery/http://code.google.com/p/struts2-jquery-pluginhttp://www.trirand.com/blog/http://code.google.com/p/struts2-jquery-pluginhttp://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ -
8/3/2019 jQuery Slides
82/84
Flow of control with Struts2 & JTF Integration
-
8/3/2019 jQuery Slides
83/84
JTF And Struts2 JQGrid In Conjuction
-
8/3/2019 jQuery Slides
84/84
email: [email protected]
Contact me
Thank YOU!
mailto:[email protected]:[email protected]