naresh information technologies9 jquery technicality • lightweight – 14kb (minified and gzipped)...

39
Naresh Information Technologies

Upload: others

Post on 26-Jan-2021

2 views

Category:

Documents


0 download

TRANSCRIPT

  • Naresh Information

    Technologies

  • jQuery

    • Nagaraju Bende • MCPD.NET Sr Consultant,Trainer

    • http://nbende.wordpress.com

    http://nbende.wordpress.com/

  • JavaScript is a weakly typed, classless,

    prototype based OO language, that

    can also be used outside the

    browser. It is not a browser DOM.

    About JAvascript …

  • The world’s most misunderstood

    programming language.

    Most People Say

  • With AJAX … • Javascript has become essential to current

    web page development, but …

    • Javascript is not a good language design

    • Javascript has become bloated

    – DOM navigation

    – Browser differences

    • Writing Javascript code is tedious, time-

    consuming, and error-prone

  • jQuery is a lightweight, open-source

    JavaScript library that simplifies

    interaction between HTML and

    JavaScript

    jQuery …

  • It was and still being

    developed

    by John Resig from

    Mozilla and was

    first announced in

    January 2006

  • with jQuery

    • jQuery makes writing Javascript much

    easier

    – DOM navigation (css-like syntax)

    – Apply methods to sets of DOM elements

    – Builder model (chain method calls)

    – Extensible and there are tons of libraries

    – Handles most browser differences so you don’t

    have to

    • Server provides data

    • jQuery on client provides presentation

  • 9

    jQuery Technicality

    • Lightweight – 14kb (Minified and Gzipped)

    • Cross-browser support (IE 6.0+, FF 1.5+,

    Safari 2.0+, Opera 9.0+)

    • CSS-like syntax – easy for developers/non-

    developers to understand

    • Active developer community

    • Extensible - plugins

  • 10

    Example – Ajax the old way function GetXmlHttpObject(handler) {

    var objXmlHttp = null; //Holds the local xmlHTTP object instance

    //Depending on the browser, try to create the xmlHttp object

    if (is_ie){

    var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP';

    try{

    objXmlHttp = new ActiveXObject(strObjName);

    objXmlHttp.onreadystatechange = handler;

    }

    catch(e){

    //Object creation errored

    alert('Verify that activescripting and activeX controls are enabled');

    return;

    }

    }

    else{

    // Mozilla | Netscape | Safari

    objXmlHttp = new XMLHttpRequest();

    objXmlHttp.onload = handler;

    objXmlHttp.onerror = handler;

    }

    //Return the instantiated object

    return objXmlHttp;

    }

  • 11

    Example – Ajax with jQuery

    $.get("update_actions.aspx", {st: "yes", f: $(this).attr("ID")} );

  • $(“#firstName”).text(“Joe Black”);

    $(“button”).click(function() {alert “Clicked”;});

    $(“.content”).hide();

    $(“#main”).load(“content.htm”);

    $(“”).html(“Loading…”).appendTo(“#content”);

    A Quality code by Query:

    Very compact and fluent programming model

  • Download the latest version from

    http://jquery.com

    http://jquery.com/

  • To enable itellisense in VS 2008 SP1

    install the –vsdoc hotfix:

    VS90SP1-KB958502-x86.exe

    http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736

  • Copy the

    jquery.js

    and the

    jquery-vsdoc.js

    into your application

    folder

  • jQuery Core Concepts

  • Create HTML elements on the fly

    var el = $(“”)

    $() function runs the total show

  • Manipulate existing DOM elements

    $(window).width()

    $() function

  • Selects document elements

    (more in a moment…)

    $(“div”).hide();

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

    $() function

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

    Fired when the document is ready for

    programming.

    Better use the full syntax:

    $(function(){…});

    $() function

  • No need to reference the –vsdoc.js

    Reference it in your markup

  • … or just drag it into the file

    ///

    Reference it in your JS files:

  • You can also reference it from Google

  • $(“div”).hide()

    $(“”).appendTo(“body”)

    $(“:button”).click()

    jQuery’s programming philosophy is:

    GET >> ACT

  • $(“*”) // find everything

    All Selector

    Selectors return a pseudo-array of jQuery

    elements

  • $(“div”)

    // Hello jQuery

    Basic Selectors

    Yes, jQuery implements CSS Selectors!

    $(“#usr”)

    // John

    $(“.menu”)

    // Home

    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

    $(“label + input”) // next

    $(“#content ~ div”) // siblings

    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

  • Effects using jQuery

  • // 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

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

    alert(“The DIV is hidden”);

    });

    $(“div”).show(“fast”, function() {

    $(this).html(“Hello jQuery”);

    }); // this is a current DOM element

    Detecting animation completion

    Every effect function has a (speed, callback)

    overload

  • // .animate(options, duration)

    $(“div”).animate({

    width: “90%”,

    opacity: 0.5,

    borderWidth: “5px”

    }, 1000);

    Custom Animation

  • EFFECTS DEMO

  • $(“div”).load(“content.htm”);

    // passing parameters

    $(“#content”).load(“getcontent.aspx”,

    {“id”:”33”,

    “type”:”main”});

    Loading content

  • 39

    Useful jQuery links

    • www.jquery.com – jQuery homepage

    • www.learningjquery.com – jQuery tutorial

    blog

    • www.visualjquery.com – jQuery

    documentation

    • http://ui.jquery.com – jQuery user interface

    • http://bassistance.de/jquery-plugins/ -

    homepage of the author of several useful

    jQuery plugins.

    http://www.jquery.com/http://www.learningjquery.com/http://www.visualjquery.com/http://ui.jquery.com/http://bassistance.de/jquery-plugins/http://bassistance.de/jquery-plugins/http://bassistance.de/jquery-plugins/