How to increase Performance of Web Application using JQuery

  • 1,720 views
Uploaded on

Pallab Dutta presented a wonderful session on how to increase productivity of web application using JQuery. He showed us demos regarding basic syntax of JQuery. …

Pallab Dutta presented a wonderful session on how to increase productivity of web application using JQuery. He showed us demos regarding basic syntax of JQuery.

Follow us
www.kolkatageeks.com

to get more.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,720
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
94
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Pallab Dutta Twitter:@pallabdutta2007pallabdutta2007@rediffmail.com
  • 2. Discussion on problems of Web developingTraditional way of solving problemsJQuery advantages over JavaScriptIntroduction to JQuery, Basic syntaxesUse of JQuery to eradicate web developers problemsFuture & 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 forthe 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 theirdesigns 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
  • 16. We appreciate your support