SlideShare a Scribd company logo
Pallab Dutta
       Twitter:@pallabdutta2007
pallabdutta2007@rediffmail.com
Discussion on problems of Web developing

Traditional way of solving problems

JQuery advantages over JavaScript

Introduction to JQuery, Basic syntaxes

Use of JQuery to eradicate web developers problems

Future & Beyond
   Web is stateless.
   We use ViewState, Session, Cookie etc to
    make it look like stateful
   Need AJAX based technique to call server
    from browser
   Lot of javascript and server calls make it hard
    to maintain
   Performance impact of Viewstate
   Dependency of large numbers of 3rd party
    libraries
   Code is predefined
   Easy DOM manipulation
   Smaller construct. JQuery is designed to make
    small JavaScript code.
   Large support of plugins.
   Minified version already available.
   Testing is not necessary (as it is already tested)
   Cross browser support.
   Free and Open Source.
   Adoption of JQuery by Microsoft.
JQuery is the most outstanding cross-
 browser JavaScript library compiled for
the ease of client-side scripting of html.
  To make it short, it’s a “ready to use”
 JavaScript library that has many visual
   functions such as popular ease-in,
  ease-out effects. Because jQuery has
  tons of impressive effects, it is often
  used by web designers to make their
designs much lovable and more elegant.
   jQuery Selectors
   jQuery Event Functions
   jQuery Effects
   jQuery Callback Functions
   Changing HTML Content
   jQuery CSS Manipulation
   jQuery AJAX
   jQuery Syntax Examples
   jQuery Selectors
    ◦ $("*") //All elements.
    ◦ $(this)//Current HTML element
    ◦ $("p")//All <p> elements
    ◦ $("p.intro")//All <p> elements with class="intro"
    ◦ $("p#intro")//All <p> elements with id="intro"
    ◦ $("p#intro:first")//The first <p> element with id="intro"
    ◦ $(".intro")//All elements with class="intro"
    ◦ $("#intro")//The first element with id="intro"
    ◦ $("ul li:first")//The first <li> element of each <ul>
    ◦ $("[href$='.jpg']")//All elements with an href attribute that ends with ".jpg"
    ◦ $("div#intro .head")//All elements with class="head" inside a <div> element
      with id="intro"
   jQuery Event Functions
    ◦ $(document).ready(function)//Binds a function to the ready
      event of a document (when the document is finished loading)
    ◦ $(selector).click(function)//Triggers, or binds a function to the
      click event of selected elements
    ◦ $(selector).dblclick(function)//Triggers, or binds a function to
      the double click event of selected elements
    ◦ $(selector).focus(function)//Triggers, or binds a function to the
      focus event of selected elements
    ◦ $(selector).mouseover(function)//Triggers, or binds a function
      to the mouseover event of selected elements
   jQuery Effects
    ◦ $(selector).hide()//Hide selected elements
    ◦ $(selector).show()//Show selected elements
    ◦ $(selector).toggle()//Toggle (between hide and show) selected
      elements
    ◦ $(selector).slideDown()//Slide-down (show) selected elements
    ◦ $(selector).slideUp()//Slide-up (hide) selected elements
    ◦ $(selector).slideToggle()//Toggle slide-up and slide-down of selected
      elements
    ◦ $(selector).fadeIn()//Fade in selected elements
    ◦ $(selector).fadeOut()//Fade out selected elements
    ◦ $(selector).fadeTo()//Fade out selected elements to a given opacity
    ◦ $(selector).animate()//Run a custom animation on selected elements
   jQuery Callback Functions
    ◦ $(selector).hide(speed,callback)
   Changing HTML Content
    ◦ $(selector).html(content)//Changes the (inner) HTML of selected elements
    ◦ $(selector).append(content)//Appends content to the (inner) HTML of selected elements
    ◦ $(selector).prepend(content)//"prepends" content to the inside of matching HTML
      elements.
    ◦ $(selector).after(content)//Adds HTML after selected elements
    ◦ $(selector).before(content)//inserI HTML content before all matching elements.
   jQuery CSS Manipulation
    ◦   $(selector).css(name)//Get the style property value of the first matched element
    ◦   $(selector).css(name,value)//Set the value of one style property for matched elements
    ◦   $(selector).css({properties})//Set multiple style properties for matched elements
    ◦   $(selector).height(value)//Set the height of matched elements
    ◦   $(selector).width(value)//Set the width of matched elements
    ◦   $(selector). addClass()//Adds one or more classes to selected elements
    ◦   $(selector). hasClass()//Checks if any of the selected elements have a specified class
    ◦   $(selector). removeClass()//Removes one or more classes from selected elements
    ◦   $(selector). toggleClass()//Toggles between adding/removing one or more classes from selected elements
   jQuery AJAX
    ◦   $(selector).load(url,data,callback)//Load remote data into selected elements
    ◦   $.ajax(options)//Load remote data into an XMLHttpRequest object
   Web development is easy now.
   Well documented already.
   Maintainable code as syntax is known to most
    of the developers.
   Pluggable
   Web technology is moving towards HTML 5
   Rapid technology update with Rich UI.
   HTML 5 will be standardized in 2014.
   Large Number of Browsers supports it.
   JQuery already moving towards this.

   WE ALL ON THE RIGHT SHIP
How to increase Performance of Web Application using JQuery
We appreciate your support

More Related Content

What's hot (20)

PDF
Introduction to jQuery
Zeeshan Khan
 
PPT
JQuery introduction
NexThoughts Technologies
 
PDF
Prototype & jQuery
Remy Sharp
 
PPT
jQuery 1.7 Events
dmethvin
 
ODP
Introduction to jQuery
manugoel2003
 
PDF
Introduction to jQuery
Seble Nigussie
 
PPTX
Jquery
Pankaj Srivastava
 
PPTX
jQuery
Vishwa Mohan
 
PDF
jQuery Essentials
Bedis ElAchèche
 
PPTX
Unobtrusive javascript with jQuery
Angel Ruiz
 
PPTX
JQuery
DevTalk
 
PPT
Kick start with j query
Md. Ziaul Haq
 
PDF
Write Less Do More
Remy Sharp
 
PPTX
JQuery
Jacob Nelson
 
PDF
jQuery Features to Avoid
dmethvin
 
PPTX
Jquery-overview
Isfand yar Khan
 
PPTX
Jquery introduction
musrath mohammad
 
PDF
jQuery Essentials
Marc Grabanski
 
Introduction to jQuery
Zeeshan Khan
 
JQuery introduction
NexThoughts Technologies
 
Prototype & jQuery
Remy Sharp
 
jQuery 1.7 Events
dmethvin
 
Introduction to jQuery
manugoel2003
 
Introduction to jQuery
Seble Nigussie
 
jQuery
Vishwa Mohan
 
jQuery Essentials
Bedis ElAchèche
 
Unobtrusive javascript with jQuery
Angel Ruiz
 
JQuery
DevTalk
 
Kick start with j query
Md. Ziaul Haq
 
Write Less Do More
Remy Sharp
 
JQuery
Jacob Nelson
 
jQuery Features to Avoid
dmethvin
 
Jquery-overview
Isfand yar Khan
 
Jquery introduction
musrath mohammad
 
jQuery Essentials
Marc Grabanski
 

Viewers also liked (6)

PDF
Financial management
Priyamvada Saraswat
 
PPTX
Ppt制作心得体会
clhyt1990
 
PPT
程乐华1
clhyt1990
 
PPT
博客的使用1
clhyt1990
 
PPTX
Perkataan kvkvkv
Fadzil Donovan
 
PDF
我可能不會愛你
asdf0147y
 
Financial management
Priyamvada Saraswat
 
Ppt制作心得体会
clhyt1990
 
程乐华1
clhyt1990
 
博客的使用1
clhyt1990
 
Perkataan kvkvkv
Fadzil Donovan
 
我可能不會愛你
asdf0147y
 
Ad

Similar to How to increase Performance of Web Application using JQuery (20)

PDF
Unit 1 - What is jQuery_Why jQuery_Syntax_Selectors.pdf
RAVALCHIRAG1
 
PPTX
presentation_jquery_ppt.pptx
azz71
 
PPTX
Introduction to Jquery
Ahmed Elharouny
 
PPTX
Web Development Course - JQuery by RSOLUTIONS
RSolutions
 
PPTX
Unit-III_JQuery.pptx engineering subject for third year students
MARasheed3
 
PPTX
Web technologies-course 11.pptx
Stefan Oprea
 
PPTX
jQuery basics for Beginners
Pooja Saxena
 
PPT
J query
Manav Prasad
 
PDF
Introduction to jQuery
Nivedhitha Venugopal
 
PPTX
Jquery Complete Presentation along with Javascript Basics
EPAM Systems
 
PDF
Introduzione JQuery
orestJump
 
PPTX
jQuery besic
Syeful Islam
 
PPT
J query b_dotnet_ug_meet_12_may_2012
ghnash
 
PPT
Jquery PPT_Finalfgfgdfgdr5tryeujkhdwappt
shubhangimalas1
 
PPT
J query presentation
sawarkar17
 
PPT
J query presentation
akanksha17
 
PPTX
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
David Giard
 
PPTX
Getting Started with jQuery
Laila Buncab
 
ODP
Jquery- One slide completing all JQuery
Knoldus Inc.
 
PPTX
J query
Ramakrishna kapa
 
Unit 1 - What is jQuery_Why jQuery_Syntax_Selectors.pdf
RAVALCHIRAG1
 
presentation_jquery_ppt.pptx
azz71
 
Introduction to Jquery
Ahmed Elharouny
 
Web Development Course - JQuery by RSOLUTIONS
RSolutions
 
Unit-III_JQuery.pptx engineering subject for third year students
MARasheed3
 
Web technologies-course 11.pptx
Stefan Oprea
 
jQuery basics for Beginners
Pooja Saxena
 
J query
Manav Prasad
 
Introduction to jQuery
Nivedhitha Venugopal
 
Jquery Complete Presentation along with Javascript Basics
EPAM Systems
 
Introduzione JQuery
orestJump
 
jQuery besic
Syeful Islam
 
J query b_dotnet_ug_meet_12_may_2012
ghnash
 
Jquery PPT_Finalfgfgdfgdr5tryeujkhdwappt
shubhangimalas1
 
J query presentation
sawarkar17
 
J query presentation
akanksha17
 
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
David Giard
 
Getting Started with jQuery
Laila Buncab
 
Jquery- One slide completing all JQuery
Knoldus Inc.
 
Ad

Recently uploaded (20)

PDF
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PPTX
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
PDF
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PPTX
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
PDF
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PPT
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
PDF
Staying Human in a Machine- Accelerated World
Catalin Jora
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PDF
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
PDF
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
DOCX
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
PDF
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
Staying Human in a Machine- Accelerated World
Catalin Jora
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
Mastering Financial Management in Direct Selling
Epixel MLM Software
 

How to increase Performance of Web Application using JQuery

  • 1. Pallab Dutta Twitter:@pallabdutta2007 [email protected]
  • 2. Discussion on problems of Web developing Traditional way of solving problems JQuery advantages over JavaScript Introduction to JQuery, Basic syntaxes Use of JQuery to eradicate web developers problems Future & Beyond
  • 3. Web is stateless.  We use ViewState, Session, Cookie etc to make it look like stateful  Need AJAX based technique to call server from browser  Lot of javascript and server calls make it hard to maintain  Performance impact of Viewstate  Dependency of large numbers of 3rd party libraries
  • 4. Code is predefined  Easy DOM manipulation  Smaller construct. JQuery is designed to make small JavaScript code.  Large support of plugins.  Minified version already available.  Testing is not necessary (as it is already tested)  Cross browser support.  Free and Open Source.  Adoption of JQuery by Microsoft.
  • 5. JQuery is the most outstanding cross- browser JavaScript library compiled for the ease of client-side scripting of html. To make it short, it’s a “ready to use” JavaScript library that has many visual functions such as popular ease-in, ease-out effects. Because jQuery has tons of impressive effects, it is often used by web designers to make their designs much lovable and more elegant.
  • 6. jQuery Selectors  jQuery Event Functions  jQuery Effects  jQuery Callback Functions  Changing HTML Content  jQuery CSS Manipulation  jQuery AJAX  jQuery Syntax Examples
  • 7. jQuery Selectors ◦ $("*") //All elements. ◦ $(this)//Current HTML element ◦ $("p")//All <p> elements ◦ $("p.intro")//All <p> elements with class="intro" ◦ $("p#intro")//All <p> elements with id="intro" ◦ $("p#intro:first")//The first <p> element with id="intro" ◦ $(".intro")//All elements with class="intro" ◦ $("#intro")//The first element with id="intro" ◦ $("ul li:first")//The first <li> element of each <ul> ◦ $("[href$='.jpg']")//All elements with an href attribute that ends with ".jpg" ◦ $("div#intro .head")//All elements with class="head" inside a <div> element with id="intro"
  • 8. jQuery Event Functions ◦ $(document).ready(function)//Binds a function to the ready event of a document (when the document is finished loading) ◦ $(selector).click(function)//Triggers, or binds a function to the click event of selected elements ◦ $(selector).dblclick(function)//Triggers, or binds a function to the double click event of selected elements ◦ $(selector).focus(function)//Triggers, or binds a function to the focus event of selected elements ◦ $(selector).mouseover(function)//Triggers, or binds a function to the mouseover event of selected elements
  • 9. jQuery Effects ◦ $(selector).hide()//Hide selected elements ◦ $(selector).show()//Show selected elements ◦ $(selector).toggle()//Toggle (between hide and show) selected elements ◦ $(selector).slideDown()//Slide-down (show) selected elements ◦ $(selector).slideUp()//Slide-up (hide) selected elements ◦ $(selector).slideToggle()//Toggle slide-up and slide-down of selected elements ◦ $(selector).fadeIn()//Fade in selected elements ◦ $(selector).fadeOut()//Fade out selected elements ◦ $(selector).fadeTo()//Fade out selected elements to a given opacity ◦ $(selector).animate()//Run a custom animation on selected elements
  • 10. jQuery Callback Functions ◦ $(selector).hide(speed,callback)
  • 11. Changing HTML Content ◦ $(selector).html(content)//Changes the (inner) HTML of selected elements ◦ $(selector).append(content)//Appends content to the (inner) HTML of selected elements ◦ $(selector).prepend(content)//"prepends" content to the inside of matching HTML elements. ◦ $(selector).after(content)//Adds HTML after selected elements ◦ $(selector).before(content)//inserI HTML content before all matching elements.
  • 12. jQuery CSS Manipulation ◦ $(selector).css(name)//Get the style property value of the first matched element ◦ $(selector).css(name,value)//Set the value of one style property for matched elements ◦ $(selector).css({properties})//Set multiple style properties for matched elements ◦ $(selector).height(value)//Set the height of matched elements ◦ $(selector).width(value)//Set the width of matched elements ◦ $(selector). addClass()//Adds one or more classes to selected elements ◦ $(selector). hasClass()//Checks if any of the selected elements have a specified class ◦ $(selector). removeClass()//Removes one or more classes from selected elements ◦ $(selector). toggleClass()//Toggles between adding/removing one or more classes from selected elements
  • 13. jQuery AJAX ◦ $(selector).load(url,data,callback)//Load remote data into selected elements ◦ $.ajax(options)//Load remote data into an XMLHttpRequest object
  • 14. Web development is easy now.  Well documented already.  Maintainable code as syntax is known to most of the developers.  Pluggable
  • 15. Web technology is moving towards HTML 5  Rapid technology update with Rich UI.  HTML 5 will be standardized in 2014.  Large Number of Browsers supports it.  JQuery already moving towards this.  WE ALL ON THE RIGHT SHIP