Downloaded 322 times
![jQuery By : Amit Kumar Singh Email : [email_address]](https://image.slidesharecdn.com/jquery-introduction-119390245248966-1/85/JQuery-Introduction-1-320.jpg)
![jQuery By : Amit Kumar Singh Email : [email_address]](https://image.slidesharecdn.com/jquery-introduction-119390245248966-1/75/JQuery-Introduction-1-2048.jpg)
![Effects show( ) eg $("p").show() show( speed, [callback] ) eg $("p").show("slow"); $("p").show("fast",function(){ alert("Animation Done."); }); hide( ) hide( speed, callback ) toggle( ) fadeIn( speed, callback ) ,fadeOut(speed, callback ) fadeTo( speed, opacity, callback ) eg $("p").fadeTo("slow", 0.66);](https://image.slidesharecdn.com/jquery-introduction-119390245248966-1/85/JQuery-Introduction-10-320.jpg)
![Utilities jQuery.trim( str ) jQuery.browser eg $.browser.msie ; if ($.browser.safari) { alert("this is safari!"); } Available flags are: safari opera msie mozilla jQuery.each( object, callback ) $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });](https://image.slidesharecdn.com/jquery-introduction-119390245248966-1/85/JQuery-Introduction-11-320.jpg)
Uploaded byAmit Kumar Singh
JQuery: Introduction
jQuery is a JavaScript library that simplifies HTML document traversal and manipulation, event handling, animation, and Ajax. It works across browsers and has many plugins. Other options include Prototype and Scriptaculous but jQuery is small, fast, and fully featured.
More Related Content
JQuery: Introduction
- 1. jQuery By : Amit Kumar Singh Email : [email_address]
- 2. What is jQuery? New type of JavaScript library. jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages . jQuery is designed to change the way that you write JavaScript .
- 3. Why jQuery?Everything works in IE6+, firefox, safari 2+, and opera 9+ CSS 3 compliant Small size(14kb, compressed) 100s of plugins Fully documented Great community Use with other libraries .noConflict();
- 4. Other OptionsScript.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly Prototype Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around Google Web Toolkit (GWT) is an open source Java software development framework that makes writing AJAX applications Yahoo! User Interface Library The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources .
- 5. quick demo: EASE of jQuery http://docs.jquery.com/Tutorials:How_to_Get_Anything_You_Want#Demo
- 6. DOM/Traversing / SelectorsSupported jQuery selectors are a combination of CSS 1-3, XPath, plus some custom code to glue it together. Eg E#myid Not supported jQuery only supports selectors that actually select DOM elements - everything else is ignored. Eg E:link
- 7. Attributes Access aproperty of matched element Eg $(‘img’).attr(‘src’) attr() addClass() html() text() val()
- 8. Manipulation after( content ) eg $("p").after("<b>Hello</b>"); append( content ) eg $("p").append("<b>Hello</b>"); before( content ) eg $("p").before("<b>Hello</b>"); clone( ) eg $("b").clone().prependTo("p"); empty( ) eg $("p").empty(); remove( expr ) eg $("p").remove(); $("p").remove(".hello");
- 9. CSS css( name ) eg $("p").css("color"); css( properties ) eg $("p").css({ color: "red", background: "blue" }); css( name, value ) eg $("p").css("color","red"); height( ) eg $("p").height(); $("p").height(20); width( ) eg $("p").width(); $("p").width(20);
- 10. Effects show( ) eg $("p").show() show( speed, [callback] ) eg $("p").show("slow"); $("p").show("fast",function(){ alert("Animation Done."); }); hide( ) hide( speed, callback ) toggle( ) fadeIn( speed, callback ) ,fadeOut(speed, callback ) fadeTo( speed, opacity, callback ) eg $("p").fadeTo("slow", 0.66);
- 11. Utilities jQuery.trim( str )jQuery.browser eg $.browser.msie ; if ($.browser.safari) { alert("this is safari!"); } Available flags are: safari opera msie mozilla jQuery.each( object, callback ) $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
- 12. AJAX load(String,Object,Function) eg $("#feeds").load("feeds.html"); get(String,Map,Function) eg $.get('manageftp.php',{mode:'mailS',result:‘some result'}); post(String,Map,Function) eg $.post('manageftp.php',{mode:'ftp',ftp_server:'ftp.puneitlabs.com', function(data){ alert('Data Loaded: ' + data); });
- 13. More info http://jquery.com http://docs.jquery.com/ http://jquery.com/discuss/ http://visualjquery.com/ http://ui.jquery.com/
- 14. Thank You Comments/Questions are welcome