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.
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.
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
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
