jQuery + Plug-ins
Download
Report
Transcript 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
Why jQuery?
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
Versions
Production is minified and compressed
Development is readable and much larger
Example
jQuery
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>
Content Delivery Network (CDN)
downloads
<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
$(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
jQuery
Use document ready event to make sure DOM is fully loaded
$(document).ready(function(){
// jQuery methods go here...
syntax
});
Shorthand and more popular approach
$(function(){
// jQuery methods go here...
});
Use $() to select and manipulate HTML elements
jQuery
selectors
$(“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
Events fire based on user or system input
jQuery
events
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!!
});
Hide and show HTML elements
jQuery
hide/show
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Toggle combines hide and show
$("button").click(function(){
$("p").toggle();
});
Fade an element in and out of visibility with optional speed
jQuery
$("button").click(function(){
$("#box").fadeIn();
});
$("button").click(function(){
$("# box ").fadeOut(“slow”);
});
Combining fade in and out
fading
$("button").click(function(){
$("#box").fadeToggle(2000);
});
Fading to a given opacity value between 0 and 1
$("button").click(function(){
$("# box ").fadeTo("slow",0.35);
});
Use to slide down an element
$("#button").click(function(){
$("#panel").slideDown();
});
jQuery
sliding
Use to slide up an element
$("# button ").click(function(){
$("#panel").slideUp(“slow”);
});
Combine slide up and down
$("# button ").click(function(){
$("#panel").slideToggle(2000);
});
Create custom animations with CSS properties and optional speed
jQuery
animate
$("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
Run multiple jQuery methods on the same selector per statement
$("#box").css("color",“blue").fadeIn(1000).fadeOut(1000);
Cleaner syntax using multiple lines
chaining
$("#box").css("color",“blue")
.fadeIn(1000)
.fadeOut(1000);
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>");
jQuery
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
HTML
$(“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
CSS manipulation
addClass() - adds one or more classes to the selected elements
jQuery
CSS
$("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%"});
There are built-in methods for element dimensions
jQuery
dimensions
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
Example
$("#box").width(400).height(300);
jQuery
Asynchronous JavaScript and XML loads data in the background
text, HTML, XML, or JSON using HTTP GET or POST
AJAX
$(selector).load(URL,data,callback);