1 / 15

Philly.NET Hands-On jQuery + Plug-ins

Philly.NET Hands-On jQuery + Plug-ins. Bill Wolff, Rob Keiser. Pre-requisites: HTML – CSS – JavaScript Lightweight JS library that reduces coding time Wraps common tasks into single line or method Framework for custom and downloaded plug-ins

kamala
Download Presentation

Philly.NET Hands-On jQuery + Plug-ins

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Philly.NET Hands-OnjQuery + Plug-ins Bill Wolff, Rob Keiser

  2. Pre-requisites: HTML – CSS – JavaScript • Lightweight JS library that reduces coding time • Wraps common tasks into single line or method • Framework for custom and downloaded plug-ins • Used by most major web players like Microsoft, Google • Used in 55% of 10,000 top web sites • Cross browser compliance including IE6 • Free, open source MIT license • Developed by John Resig in 2006 • Current release is 1.9.1 Why jQuery?

  3. Versions • Production is minified and compressed • Development is readable and much larger • Example • <head> • <script src="jquery-1.9.1.min.js"></script> • </head> • Content Delivery Network (CDN) • <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> • <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"> • Visual Studio MVC • Included in the default solution • Scripts folder with reference in bundle package jQuerydownloads

  4. $(selector).action() • $ indicates jQuery entry point • (selector) to query HTML elements using CSS syntax • action() is a method built into jQuery or provided by a plug-in • Use document ready event to make sure DOM is fully loaded • $(document).ready(function(){ • // jQuery methods go here... • }); • Shorthand and more popular approach • $(function(){ • // jQuery methods go here... • }); jQuerysyntax

  5. Use $() to select and manipulate HTML elements • $(“p”) – select all paragraph tags • $(”#bill”) – pound selects all tags with id of bill • $(“.bigbutton”) – period selects all tags by class name • $("ulli:first") – first li inside a ul • $("tr:even") – select even rows in a table • $("[href]") – all elements with an href attribute jQueryselectors

  6. Events fire based on user or system input • click() - user clicks on the HTML element • dblclick() - user double-clicks on the HTML element • mouseenter() - mouse pointer enters the HTML element • mouseleave() - mouse pointer leaves the HTML element • mousedown() - mouse pointer leaves the HTML element • mouseup() - mouse pointer leaves the HTML element • hover() – combines mouseenter and mouseleave • focus() - form field gets focus • blur() - form field loses focus • Example • $("p").click(function(){ // action goes here!!}); jQueryevents

  7. Hide and show HTML elements • $("#hide").click(function(){ $("p").hide();});$("#show").click(function(){ $("p").show();}); • Toggle combines hide and show • $("button").click(function(){ $("p").toggle();}); jQueryhide/show

  8. Fade an element in and out of visibility with optional speed • $("button").click(function(){ $("#box").fadeIn();}); • $("button").click(function(){$("# box ").fadeOut(“slow”);}); • Combining fade in and out • $("button").click(function(){ $("#box").fadeToggle(2000);}); • Fading to a given opacity value between 0 and 1 • $("button").click(function(){ $("# box ").fadeTo("slow",0.35);}); jQueryfading

  9. Use to slide down an element • $("#button").click(function(){  $("#panel").slideDown();}); • Use to slide up an element • $("# button ").click(function(){ $("#panel").slideUp(“slow”);}); • Combine slide up and down • $("# button ").click(function(){ $("#panel").slideToggle(2000);}); jQuerysliding

  10. Create custom animations with CSS properties and optional speed • $("button").click(function(){ $(“box").animate({top:'250px'});});  • $("button").click(function(){ $(“box").animate({left:‘+=250px'});});  • Queued animations • $("button").click(function(){vardiv=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");});  jQueryanimate

  11. Run multiple jQuery methods on the same selector per statement • $("#box").css("color",“blue").fadeIn(1000).fadeOut(1000); • Cleaner syntax using multiple lines • $("#box").css("color",“blue") .fadeIn(1000) .fadeOut(1000); jQuerychaining

  12. DOM manipulation • text() - sets or returns the text content of selected elements • html() - sets or returns the content of selected elements and markup • $("#box").html("<b>Hello world!</b>"); • val() - sets or returns the value of form fields • attr() - sets or returns the value of attributes • Creating and removing elements • append() - inserts content at the end of the selected elements • $(“ul").append("<li>Appended item</li>"); • prepend() - inserts content at the beginning of the selected elements • after() - inserts content after the selected elements • before() - inserts content before the selected elements • remove() - removes the selected element and its children • empty() - removes the child elements from the selected element jQueryHTML

  13. CSS manipulation • addClass() - adds one or more classes to the selected elements • $("div").addClass("important"); • removeClass() - removes one or more classes • toggleClass() - toggles between adding/removing classes • css() - sets or returns the style attribute • $(“button").css("background-color"); • $("button").css("background-color", "red"); • $("button").css({"background-color":“red","font-size":"150%"}); jQueryCSS

  14. There are built-in methods for element dimensions • width() • height() • innerWidth() • innerHeight() • outerWidth() • outerHeight() • Example • $("#box").width(400).height(300); jQuerydimensions

  15. Asynchronous JavaScript and XML loads data in the background • text, HTML, XML, or JSON using HTTP GET or POST • $(selector).load(URL,data,callback); jQueryAJAX

More Related