Introduzione JQuery

jQuery
Introduction to using jQuery
ugo.rinaldi@gmail.com

jQuery
• jQuery is a lightweight, "write less, do more", JavaScript
library.
• The purpose of jQuery is to make it much easier to use
JavaScript on your website.
• jQuery takes a lot of common tasks that require many
lines of JavaScript code to accomplish, and wraps them
into methods that you can call with a single line of code.
• jQuery also simplifies a lot of the complicated things
from JavaScript, like AJAX calls and DOM manipulation.

Features
The jQuery library contains the following features:
 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities
 jQuery will run exactly the same in all major browsers,
including Internet Explorer 6!

There are several ways to start using jQuery on your web
site. You can:
 Download the jQuery library from jQuery.com
 Include jQuery from a CDN, like Google
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.
min.js"> </script>
</head>
Adding jQuery

 The jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).
 Basic syntax is: $(selector).action()
 A $ sign to define/access jQuery
 A (selector) to "query (or find)" HTML elements
 A jQuery action() to be performed on the element(s)
 Examples:
 $(this).hide() - hides the current element.
 $("p").hide() - hides all <p> elements.
 $(".test").hide() - hides all elements with class="test".
 $("#test").hide() - hides the element with id="test".
jQuery Syntax

 $("*") Selects all elements
 $(this) Selects the current HTML element
 $("p.intro") Selects all <p> elements with class="intro"
 $("p:first") Selects the first <p> element
 $("ul li:first") Selects the first <li> element of the first <ul>
 $("ul li:first-child") Selects the first <li> element of every <ul>
 $("[href]") Selects all elements with an href attribute
 $("a[target='_blank']") Selects all <a> elements with a target attribute value equal to
"_blank"
 $("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal
to "_blank"
 $(":button") Selects all <button> elements and <input> elements of type="button"
 $("tr:even") Selects all even <tr> elements
 $("tr:odd") Selects all odd <tr> elements
jQuery selectors like CSS syntax

 All the different visitor's actions that a web page can
respond to, are called events.
 An event represents the precise moment when
something happens.
Examples:
 moving a mouse over an element
 selecting a radio button
 clicking on an element
Events

• $(document).ready(function(){
// Insert one of the following event functions
});
• $("p").click(function(){ …});
• $("p").dblclick(function(){ …});
• $("p").mouseenter(function(){ //when mouse pointer enters});
• $("p").mouseleave(function(){//when mouse pointer leaves});
• $("p").mousedown(function(){//when click + over});
• $("p").mouseup(function(){//when release + over});
●
$("#p1").hover(
function(){ alert("You entered p1!");},
function(){ alert("Bye! You now leave p1!"); }
);
Examples

 $("p").on({
focus: function(){
$(this).css("background-color", "lightgray");
},
blur: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
Attach event handlers to elements

Effects hide, show, fade
 $("#hide").click(function(){
$("p").hide(); // $("p").hide(1000);
});
 $("p").show();
 $("p").toggle();
 $(“p”).fadeIn(”slow”,callback function);
 $(“p”).fadeOut(”fast”,callback function);
 $(“p”).fadeToggle(1500,callback function);
 $(“p”).fadeTo(”fast”,0.5,callback function);

 With jQuery you can create a sliding effect on elements.
 jQuery has the following slide methods:
 slideDown()
 slideUp()
 slideToggle()
 Syntax:
 $(selector).method(speed,callback);
jQuery Sliding Methods

 $("button").click(function(){
$("div").animate({ left: '250px‘, opacity: '0.5‘, height: '150px‘, width: ‘+=5px’ });
});
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");
});
 $("div").animate({
height: 'toggle’ });
 $("#stop").click(function(){
$("#panel").stop(); // interrompe un’animazione
});
Animation

 A callback function is executed after the current effect is 100%
finished.
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
$("p").hide(1000);
alert("The paragraph is now hidden");
});
Callback function

 $("#p1").css("color",
"red").slideUp(2000).slideDown(2000);
 Si può scrivere anche
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
Method chaining

Simple, but useful, jQuery methods for DOM
manipulation/examine are:
 text() - Sets or returns the text content of
selected elements
 html() - Sets or returns the content of selected
elements (including HTML markup)
 val() - Sets or returns the value of form fields
 attr() – Gets attribute value
DOM manipulation

 // per leggere
 $("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
 // per scrivere; unico metodo che richiede 2 parametri
$("#w3s").attr("href", "http://www.w3schools.com/jquery");
});
$("#w3s").attr({
"href" : "http://www.w3schools.com/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});
Esempi

 $("p").css("background-color");
 $("p").css("background-color", "yellow");
 $("p").css({"background-color": "yellow", "font-
size": "200%"});
css() Method

var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
$("#div1").width(500).height(500);
});// per settare insieme widht & height
…

 AJAX = Asynchronous JavaScript and XML.
 In short: AJAX is about loading data in the
background and display it on the webpage,
without reloading the whole page.
Ajax

load()
 Syntax:
$(selector).load(URL,data,callback(response,status,xhr));
 $(“#btn1”).click(function(){$
("#div1").load("demo.txt"});
 Esempio

AJAX get() and post() Methods
 The jQuery get() and post() methods are used to request data from the server with an HTTP request.
 Syntax:
$.get(URL,callback(data, status));
$.post(URL,data,callback);
Esempi:
$("#btn1").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "nStatus: " + status);
});
});
$("button").click(function(){
$.post("demo_test_post.asp",
{ name: "Donald Duck",
city: "Duckburg" },
function(data, status){
alert("Data: " + data + "nStatus: " + status); });
});

Esempi e sitografia
Qui puoi trovare esempi utili
Qui puoi trovare l'intero tutorial ed una Refer
ences Guide
http://www.w3schools.com

Introduzione JQuery

More Related Content

What's hot

Similar to Introduzione JQuery

More from orestJump

Recently uploaded

Introduzione JQuery