Crear una aplicació basada en Ajax es fa molt senzill i ràpid amb jQuery.
jQuery va ser creat originalment per John Resig a principis de 2006. Actualment, el projecte jQuery és mantingut i mantingut per un grup distribuït de desenvolupadors com a projecte de codi obert.
Podeu estalviar molt de temps i esforç amb jQuery. Així que afegeix aquest lloc als teus favorits i segueix llegint
Hi ha moltes més coses que podeu fer amb jQuery.
La llista no acaba aquí, hi ha moltes altres coses interessants que podeu fer amb jQuery.
Hi ha diversos avantatges pels quals s'ha d'optar per utilitzar jQuery:
Per començar, primer descarreguem una còpia de jQuery i després incloem-la al nostre projecte. Es poden descarregar dues versions de jQuery: tenir pressa e no comprimit .
El fitxer sense comprimir és més adequat per al desenvolupament o la depuració; mentre que, el fitxer comprimit i comprimit es recomana per a la producció perquè estalvia amplada de banda i millora el rendiment a causa de la mida del fitxer més petita.
Podem descarregar jQuery des d'aquí: https://jquery.com/download/
Un cop descarregueu el fitxer jQuery podeu veure que té una extensió js, és a dir, és un fitxer JavaScript. De fet, JQuery no és més que una biblioteca de JavaScript, de manera que podeu incloure el fitxer jQuery al document HTML amb l'element de la mateixa manera que incloeu fitxers JavaScript habituals.
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Recordeu incloure sempre el fitxer jQuery abans dels scripts personalitzats; en cas contrari, les API de jQuery no estaran disponibles quan el vostre codi jQuery intenti accedir-hi.
Com haureu notat, hem omès l'atribut de l'exemple anterior type="text/javascript" dins de l'etiqueta . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiacabat en HTML5 i en tots els navegadors moderns.
Com a alternativa, podeu inserir jQuery al vostre document mitjançant enllaços CDN (Content Delivery Network) disponibles gratuïtament, si preferiu evitar descarregar el fitxer.
Els CDN poden oferir un avantatge de rendiment reduint el temps de càrrega, ja que allotgen jQuery en diversos servidors d'arreu del món i, quan un usuari sol·liciti el fitxer, es servirà des del servidor més proper.
Això també té l'avantatge que si el visitant de la vostra pàgina web ja ha baixat una còpia de jQuery del mateix CDN mentre visita altres llocs, no l'haurà de tornar a descarregar, ja que ja es troba a la memòria cau del seu navegador.
En aquest cas hauràs d'escriure:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>A més del CDN proporcionat pel projecte jquery, podeu incloure jQuery via google e Microsoft cdn.
Després d'haver vist els objectius de la biblioteca jQuery i com incloure-la al vostre document, ara és el moment de posar jQuery en pràctica.
Ara fem una operació jQuery senzilla canviant el color del text de la capçalera del color anteriordeficolor negre a verd acabat.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Al codi vam realitzar una operació jQuery senzilla canviant el color de la capçalera, és a dir, l'element utilitzant el selector de l'element jQuery i el mètode css() quan el document està llest, conegut com a esdeveniment document ready.
Una declaració jQuery normalment comença amb un signe de dòlar ( $) i acaba amb punt i coma ( ;).
A jQuery, el signe del dòlar ( $) és només un àlies per a jQuery. Considereu el codi d'exemple següent que mostra la instrucció jQuery més senzilla.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>L'exemple només mostra un missatge d'advertència "Hello I'm a JQuery sign” a l'usuari. Vegem algunes característiques:
<script>: jQuery és només una biblioteca de JavaScript, el codi jQuery es pot col·locar dins de l'element <script>, o podeu posar-lo en un fitxer JavaScript extern;$(document).ready(handler); es coneix com un esdeveniment preparat. On és handler és una funció que es passa al mètode a executar, tan bon punt el document està llest, és a dir, quan la jerarquia DOM s'ha construït completament.El mètode jQuery ready() normalment s'utilitza amb una funció anònima. Per tant, l'exemple anterior també es pot escriure en notació taquigràfica com aquesta:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Dins d'una funció, podeu escriure sentències jQuery per realitzar qualsevol acció seguint la sintaxi bàsica, com ara:
$(selector).action();On és, $(selector) bàsicament selecciona els elements HTML de l'arbre DOM perquè pugui ser manipulat i action() aplicar algunes accions sobre els elements seleccionats, com ara canviar el valor de la propietat CSS, o establir el contingut de l'element, etc.
Ara mirem un altre exemple que estableix el text del paràgraf:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>L'exemple de jQuery fa referència al selector p, i això selecciona tots els paràgrafs i després el mètode text() establiu el contingut del text del paràgraf amb “Hello World!".
El text del paràgraf de l'exemple anterior es substitueix automàticament quan el document està preparat. Però anem a veure com fer-ho en cas de voler realitzar una acció abans d'executar el codi jQuery, per substituir el text del paràgraf.
Considerem un últim exemple:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>En aquest exemple, el text del paràgraf es substitueix només quan es produeix un esdeveniment de clic al botó "Replace Text", que simplement vol dir quan un usuari fa clic en aquest botó.
Podeu utilitzar el selector d'identificació per seleccionar un únic element amb l'identificador únic a la pàgina.
Per exemple, el codi jQuery següent seleccionarà i ressaltarà un element amb l'atribut ID id="markid", quan el document estigui llest.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>El selector de classes es pot utilitzar per seleccionar elements amb una classe específica.
Per exemple, el codi jQuery següent seleccionarà i ressaltarà elements amb l'atribut class class="markclass", quan el document estigui llest.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>El selector d'elements es pot utilitzar per seleccionar elements pel nom de l'element.
Per exemple, el següent codi jQuery seleccionarà i ressaltarà tot el paràgraf, és a dir, els elements "<p>" del document quan estigui llest.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Podeu utilitzar el selector d'atributs per seleccionar un element en funció d'un dels seus atributs HTML, com ara un atribut d'enllaç targeto l'atribut d'una entrada type, etc.
Per exemple, el codi jQuery següent seleccionarà i ressaltarà totes les entrades de text, com ara elements "<input>" amb type="text", quan el document estigui llest.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>També podeu combinar selectors CSS per fer que la vostra selecció sigui encara més precisa.
Per exemple, podeu combinar el selector de classes amb un selector d'elements per trobar elements en un document que tinguin un determinat tipus i classe.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>A més dels selectors definiti, jQuery proporciona el seu propi selector personalitzat per millorar encara més les capacitats de seleccionar elements en una pàgina.
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>Sovint, els esdeveniments es desencadenen per la interacció de l'usuari amb la pàgina web, com ara quan es fa clic en un enllaç o un botó, quan s'introdueix text en un quadre d'entrada o àrea de text, es fa una selecció en un quadre de selecció, es prem una tecla del teclat, es mou el punter del ratolí. , etc. En alguns casos, el propi navegador pot activar esdeveniments, com ara esdeveniments de càrrega i descàrrega de pàgines.
jQuery millora els mecanismes bàsics de gestió d'esdeveniments oferint mètodes d'esdeveniments per a la majoria d'esdeveniments del navegador nadiu, alguns d'aquests mètodes són ready(), click(), keypress(), focus(), blur(), change(), etc.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>En general, els esdeveniments es poden classificar en quatre grups principals:
Un esdeveniment del ratolí s'activa quan l'usuari fa clic en un element, mou el punter del ratolí, etc.
Aquests són alguns dels mètodes jQuery d'ús habitual per gestionar esdeveniments del ratolí.
click()El mètode click() adjunta una funció de gestor d'esdeveniments als elements seleccionats per a l'esdeveniment "click“. La funció enllaçada s'executa quan l'usuari fa clic en aquest element. L'exemple següent amagarà els elements <p> en una pàgina quan es fa clic.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()El mètode dblclick() adjunta una funció de gestor d'esdeveniments als elements seleccionats per a l'esdeveniment "dblclick“. La funció enllaçada s'executa quan l'usuari fa doble clic en aquest element. L'exemple següent amagarà els elements <p> en fer-hi doble clic.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()El mètode hover() adjunteu una o dues funcions de gestor d'esdeveniments als elements seleccionats que s'executen quan el punter del ratolí entra i surt dels elements. La primera funció s'executa quan l'usuari posa el punter del ratolí sobre un element, mentre que la segona funció s'executa quan l'usuari elimina el punter del ratolí d'aquest element.
L'exemple següent destacarà els elements <p> quan hi col·loqueu el cursor, el ressaltat s'eliminarà quan traieu el cursor.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()El mètode mouseenter() adjuntar una funció de controlador d'esdeveniments als elements seleccionats que s'executa quan el ratolí entra en un element. L'exemple següent afegirà el ressaltat de classe a l'element <p> quan col·loqueu el cursor a sobre.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()El mètode mouseleave() adjunteu una funció de gestor d'esdeveniments als elements seleccionats que s'executa quan el ratolí abandona un element. L'exemple següent eliminarà el ressaltat de classe de l'element <p> quan traieu el cursor d'ell.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Un esdeveniment de teclat es produeix quan l'usuari prem o deixa anar una tecla del teclat. Vegem alguns mètodes jQuery d'ús habitual per gestionar esdeveniments del teclat.
keypress()El mètode keypress() enllaça una funció de gestió d'esdeveniments als elements seleccionats (normalment controls de formulari) que s'executa quan el navegador rep l'entrada del teclat de l'usuari. L'exemple següent mostrarà un missatge quan s'activa l'esdeveniment keypress i quantes vegades s'activa quan premeu la tecla del teclat.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>L'esdeveniment de prémer la tecla és semblant a l'esdeveniment de baixada de tecla, excepte que les tecles modificadores i no imprimibles com ara Maj, Esc, Retrocés o Suprimir, tecles de fletxa, etc. desencadenen esdeveniments de teclat, però no esdeveniments de teclat.
keydown()El mètode keydown() enllaça una funció de gestió d'esdeveniments als elements seleccionats (normalment controls de formulari) que s'executa quan l'usuari prem per primera vegada una tecla del teclat. L'exemple següent mostrarà un missatge quan s'activa l'esdeveniment keydown i quantes vegades s'activa quan premeu la tecla del teclat.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()El mètode keyup() adjuntar una funció de gestió d'esdeveniments als elements seleccionats (normalment controls de formulari) que s'executa quan l'usuari deixa anar una tecla del teclat. L'exemple següent mostrarà un missatge quan s'activa l'esdeveniment keyup i quantes vegades s'activa quan premeu i deixeu anar una tecla del vostre teclat.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Un esdeveniment de formulari s'activa quan un control de formulari rep o perd el focus, o quan l'usuari canvia un valor de control de formulari, com ara escriure text en una entrada de text, seleccionar una opció en un quadre de selecció, etc. Aquests són alguns mètodes jQuery utilitzats habitualment per gestionar esdeveniments de formulari.
change()El mètode change() adjuntar una funció de controlador d'esdeveniments als elements <input> i s'executa quan canvia el seu valor. L'exemple següent mostrarà un missatge d'advertència en seleccionar una opció al quadre de selecció desplegable.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Per a les caselles de clic, les caselles de verificació i els botons d'opció, l'esdeveniment s'activa immediatament quan l'usuari fa una selecció del ratolí, però per a l'entrada de text i l'àrea de text, l'esdeveniment s'activa després que l'element perdi el focus.
focus()El mètode focus() enllaça una funció de controlador d'esdeveniments als elements seleccionats (normalment controls i enllaços de formularis) que s'executa quan es concentra. L'exemple següent mostrarà un missatge quan l'entrada de text rebi el focus.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()El mètode blur() adjuntar una funció de controlador d'esdeveniments per formar elements com ara <input>, <textarea>, <select> que s'executa quan perd el focus. L'exemple següent mostrarà un missatge quan l'entrada de text perdi el focus.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()El mètode submit() adjuntar una funció de controlador d'esdeveniments als elements <form> que s'executa quan l'usuari intenta enviar un formulari. L'exemple següent mostrarà un missatge basat en el valor introduït en intentar enviar el formulari.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>Els esdeveniments també es desencadenen en una situació en què la pàgina DOM (Document Object Model) està preparada o quan l'usuari canvia la mida o desplaça la finestra del navegador, etc. Aquests són alguns dels mètodes jQuery d'ús habitual per gestionar aquest tipus d'esdeveniments.
ready()El mètode ready() especifica una funció per executar quan el DOM estigui completament carregat.
L'exemple següent substituirà el text del paràgraf tan bon punt la jerarquia DOM estigui completament construïda i estigui llesta per ser manipulada.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()El mètode resize() adjunteu una funció de gestor d'esdeveniments a l'element finestra que s'executa quan canvia la mida de la finestra del navegador.
L'exemple següent mostrarà l'amplada i l'alçada actuals de la finestra del navegador quan intenteu canviar-ne la mida arrossegant-ne les cantonades.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()El mètode scroll() adjunteu una funció de gestor d'esdeveniments a la finestra o al fitxer iframe i elements desplaçables que s'executen sempre que canvia la posició de desplaçament de l'element.
L'exemple següent mostrarà un missatge quan us desplaceu per la finestra del navegador.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
La CMA del Regne Unit ha emès una advertència sobre el comportament de Big Tech al mercat de la intel·ligència artificial. Allà…
El Decret "Case Green", formulat per la Unió Europea per millorar l'eficiència energètica dels edificis, ha conclòs el seu procés legislatiu amb...
Presentació de l'informe anual de Casaleggio Associati sobre comerç electrònic a Itàlia. Informe titulat “AI-Commerce: les fronteres del comerç electrònic amb intel·ligència artificial”.…
Fruit de la innovació tecnològica constant i del compromís amb el medi ambient i el benestar de les persones. Bandalux presenta Airpure®, una tenda de campanya...