jQuery Slides

download jQuery Slides

of 84

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]