View
2.053
Download
3
Category
Tags:
Preview:
DESCRIPTION
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.
Citation preview
How to increase performance of Web Apps Using JQuery
Pallab DuttaTwitter:@pallabdutta2007
pallabdutta2007@rediffmail.com
Todays Agend
Discussion on problems of Web developing
Traditional way of solving problems
JQuery advantages over JavaScript
Introduction to JQuery, Basic syntaxesUse of JQuery to eradicate web developers problemsFuture & 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
Problems
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.
Advantages of JQuery over normal javascript
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.
What is jQuery?
jQuery Syntax Examples 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 Syntax Examples
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 Syntax Examples
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 Syntax Examples
jQuery Callback Functions◦ $(selector).hide(speed,callback)
jQuery Syntax Examples
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 Syntax Examples
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 Syntax Examples
jQuery AJAX◦ $(selector).load(url,data,callback)//Load remote data into selected elements◦ $.ajax(options)//Load remote data into an XMLHttpRequest object
jQuery Syntax Examples
Web development is easy now. Well documented already. Maintainable code as syntax is known to
most of the developers. Pluggable
Use of JQuery to eradicate web developers problems
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
Future and Beyond
Questions (if any)
Thank YouWe appreciate your support
Recommended