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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduzione JQuery

Similar to Introduzione JQuery (20)

More from orestJump

More from orestJump (8)

Recently uploaded

Recently uploaded (20)

Introduzione JQuery