Post on 12-Apr-2017
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’ });});
$("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");});
$("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");
});});
$("button").click(function(){ $("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 $("button").click(function(){
$("#w3s").attr("href", "http://www.w3schools.com/jquery");});
$("button").click(function(){ $("#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
Dimensions
$("button").click(function(){ var txt = ""; txt += "Width: " + $("#div1").width() + "</br>"; txt += "Height: " + $("#div1").height(); $("#div1").html(txt);});
$("button").click(function(){ 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);});
$("button").click(function(){ $("#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 References Guide
http://www.w3schools.com