View
213
Download
0
Category
Preview:
Citation preview
Philly.NET Hands-On
jQuery + Plug-insBill Wolff, Rob Keiser
Why jQuery?
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
jQuery
downloads
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
jQuery
syntax
$(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... });
jQuery
selectors
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 $("ul li:first") – first li inside a ul $("tr:even") – select even rows in a table $("[href]") – all elements with an href attribute
jQuery
events
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!!});
jQuery
hide/show
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();});
jQuery
fading
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);});
jQuery
sliding
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);});
jQuery
animate
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(){
var div=$("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");});
jQuery
chaining
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);
jQuery
HTML
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
jQuery
CSS
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%"});
jQuery
dimensions
There are built-in methods for element dimensions width() height() innerWidth() innerHeight() outerWidth() outerHeight()
Example $("#box").width(400).height(300);
jQuery
AJAX
Asynchronous JavaScript and XML loads data in the background
text, HTML, XML, or JSON using HTTP GET or POST
$(selector).load(URL,data,callback);
Recommended