Crear unha aplicación baseada en Ajax faise moi sinxelo e rápido con jQuery.
jQuery foi creado orixinalmente por John Resig a principios de 2006. O proxecto jQuery é mantido e mantido actualmente por un grupo distribuído de desenvolvedores como un proxecto de código aberto.
Podes aforrar moito tempo e esforzo con jQuery. Engade este sitio aos teus favoritos e continúa lendo
Hai moitas máis cousas que podes facer con jQuery.
A lista non remata aí, hai moitas outras cousas interesantes que podes facer con jQuery.
Hai varias vantaxes polas que se debe optar por usar jQuery:
Para comezar, primeiro descarguemos unha copia de jQuery e despois incluímolo no noso proxecto. Dúas versións de jQuery están dispoñibles para descargar: con présa e non comprimido .
O ficheiro sen comprimir é máis axeitado para o desenvolvemento ou a depuración; mentres que o ficheiro minificado e comprimido recoméndase para a produción porque aforra ancho de banda e mellora o rendemento debido ao menor tamaño do ficheiro.
Podemos descargar jQuery desde aquí: https://jquery.com/download/
Unha vez que descargues o ficheiro jQuery podes ver que ten unha extensión js, é dicir, é un ficheiro JavaScript. De feito, JQuery non é máis que unha biblioteca JavaScript, polo que pode incluír o ficheiro jQuery no documento HTML co elemento do mesmo xeito que inclúe ficheiros JavaScript habituais.
<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>Lembra sempre incluír o ficheiro jQuery antes dos scripts personalizados; se non, as API de jQuery non estarán dispoñibles cando o teu código jQuery intente acceder a elas.
Como podes ter notado, omitimos o atributo no exemplo anterior type="text/javascript" dentro da etiqueta . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiterminado en HTML5 e en todos os navegadores modernos.
Como alternativa, pode incorporar jQuery no seu documento a través de ligazóns CDN (Content Delivery Network) dispoñibles de balde, se prefire evitar descargar o ficheiro.
Os CDN poden ofrecer unha vantaxe de rendemento ao reducir o tempo de carga, porque aloxan jQuery en varios servidores de todo o mundo e, cando un usuario solicita o ficheiro, servirase desde o servidor máis próximo.
Isto tamén ten a vantaxe de que se o visitante da túa páxina web xa descargou unha copia de jQuery desde o mesmo CDN mentres visita outros sitios, non terá que descargalo de novo xa que xa está na caché do seu navegador.
Neste caso terás que escribir:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Ademais do CDN proporcionado polo proxecto jquery, pode incluír jQuery mediante Google e Microsoft cdn.
Despois de ver os obxectivos da biblioteca jQuery e como incluíla no teu documento, agora é o momento de poñer jQuery en práctica.
Agora imos facer unha operación jQuery sinxela cambiando a cor do texto da cabeceira da cor previadeficor negra a verde acabada.
<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>No código realizamos unha simple operación jQuery cambiando a cor da cabeceira, é dicir, o elemento usando o selector do elemento jQuery e o método css() cando o documento está listo, coñecido como evento de preparación do documento.
Unha declaración jQuery normalmente comeza cun signo de dólar ( $) e remata cun punto e coma ( ;).
En jQuery, o signo de dólar ( $) é só un alias para jQuery. Considere o seguinte código de exemplo que demostra a instrución jQuery máis sinxela.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>O exemplo simplemente mostra unha mensaxe de aviso "Hello I'm a JQuery sign” ao usuario. Vexamos algunhas características:
<script>: jQuery é só unha biblioteca JavaScript, o código jQuery pódese colocar dentro do elemento <script>, ou pode poñelo nun ficheiro JavaScript externo;$(document).ready(handler); coñécese como un evento listo. Onde está handler é unha función que se pasa ao método que se vai executar, en canto o documento está listo, é dicir, cando a xerarquía DOM está completamente construída.O método jQuery ready() adoita utilizarse cunha función anónima. Polo tanto, o exemplo anterior tamén se pode escribir en notación taquigráfica como esta:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Dentro dunha función pode escribir instrucións jQuery para realizar calquera acción seguindo a sintaxe básica, como:
$(selector).action();Onde está, $(selector) basicamente selecciona os elementos HTML da árbore DOM para que poida ser manipulado e action() aplicar algunhas accións sobre os elementos seleccionados, como cambiar o valor da propiedade CSS ou establecer o contido do elemento, etc.
Agora vexamos outro exemplo que establece o texto do parágrafo:
<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>O exemplo de jQuery refírese ao selector p, e isto selecciona todos os parágrafos, despois o método text() establece o contido do texto do parágrafo con "Hello World!".
O texto do parágrafo do exemplo anterior substitúese automaticamente cando o documento está listo. Pero imos ver como facelo no caso de querer realizar unha acción antes de executar o código jQuery, para substituír o texto do parágrafo.
Consideremos un último exemplo:
<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>Neste exemplo, o texto do parágrafo substitúese só cando se produce un evento de clic no botón "Replace Text", o que simplemente significa cando un usuario fai clic neste botón.
Podes usar o selector de ID para seleccionar un único elemento co ID único na páxina.
Por exemplo, o seguinte código jQuery seleccionará e resaltará un elemento co atributo ID id="markid", cando o documento estea listo.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>O selector de clases pódese usar para seleccionar elementos cunha clase específica.
Por exemplo, o seguinte código jQuery seleccionará e destacará elementos co atributo class class="markclass", cando o documento estea listo.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>O selector de elementos pódese usar para seleccionar elementos polo nome do elemento.
Por exemplo, o seguinte código jQuery seleccionará e resaltará todo o parágrafo, é dicir, os elementos "<p>" do documento cando estea listo.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Podes usar o selector de atributos para seleccionar un elemento baseado nun dos seus atributos HTML, como un atributo de ligazón targetou o atributo dunha entrada type, etc.
Por exemplo, o seguinte código jQuery seleccionará e resaltará todas as entradas de texto, como elementos "<input>" con type="text", cando o documento estea listo.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Tamén podes combinar selectores CSS para facer a túa selección aínda máis precisa.
Por exemplo, pode combinar o selector de clases cun selector de elementos para buscar elementos nun documento que teñan un determinado tipo e clase.
<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>Ademais dos seleccionadores definiti, jQuery ofrece o seu propio selector personalizado para mellorar aínda máis as capacidades de seleccionar elementos nunha páxina.
<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>Os eventos adoitan desencadearse pola interacción do usuario coa páxina web, como cando se fai clic nunha ligazón ou nun botón, cando se introduce texto nunha caixa de entrada ou nunha área de texto, se fai unha selección nunha caixa de selección, se preme unha tecla do teclado, se move o punteiro do rato. , etc. Nalgúns casos, o propio navegador pode desencadear eventos, como eventos de carga e descarga de páxinas.
jQuery mellora os mecanismos básicos de xestión de eventos ao ofrecer métodos de eventos para a maioría dos eventos do navegador nativo, algúns destes métodos son ready(), click(), keypress(), focus(), blur(), change(), etc.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>En xeral, os eventos pódense clasificar en catro grupos principais:
Un evento do rato desenvólvese cando o usuario fai clic nun elemento, move o punteiro do rato, etc.
Aquí tes algúns métodos jQuery de uso común para xestionar eventos do rato.
click()O método click() anexa unha función de controlador de eventos aos elementos seleccionados para o evento "click“. A función vinculada execútase cando o usuario fai clic nese elemento. O seguinte exemplo ocultará os elementos <p> nunha páxina cando se fai clic.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()O método dblclick() anexa unha función de controlador de eventos aos elementos seleccionados para o evento "dblclick“. A función vinculada execútase cando o usuario fai dobre clic nese elemento. O seguinte exemplo ocultará os elementos <p> cando fai dobre clic neles.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()O método hover() anexa unha ou dúas funcións de controlador de eventos aos elementos seleccionados que se executan cando o punteiro do rato se move dentro e fóra dos elementos. A primeira función execútase cando o usuario coloca o punteiro do rato sobre un elemento, mentres que a segunda función execútase cando o usuario elimina o punteiro do rato dese elemento.
O seguinte exemplo destacará os elementos <p> cando coloque o cursor sobre el, o resaltado eliminarase cando elimine o cursor.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()O método mouseenter() anexa unha función de controlador de eventos aos elementos seleccionados que se executa cando o rato entra nun elemento. O seguinte exemplo engadirá o resaltado de clase ao elemento <p> cando colocas o cursor sobre el.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()O método mouseleave() anexa unha función de controlador de eventos aos elementos seleccionados que se executa cando o rato deixa un elemento. O seguinte exemplo eliminará o resaltado da clase do elemento <p> cando elimina o cursor dela.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Un evento de teclado prodúcese cando o usuario preme ou solta unha tecla do teclado. Vexamos algúns métodos jQuery de uso común para xestionar eventos de teclado.
keypress()O método keypress() anexa unha función de manexo de eventos aos elementos seleccionados (normalmente controis de formulario) que se executa cando o navegador recibe entradas de teclado do usuario. O seguinte exemplo mostrará unha mensaxe cando se desencadee o evento keypress e cantas veces se activa ao premer a tecla do teclado.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>O evento de pulsación de teclas é semellante ao evento de teclas, excepto que as teclas modificadoras e non imprimibles, como Maiúsculas, Esc, Retroceso ou Eliminar, teclas de frecha, etc. desencadean eventos de pulsación de teclas pero non eventos de pulsación de teclas.
keydown()O método keydown() anexa unha función de manexo de eventos aos elementos seleccionados (normalmente controis de formulario) que se executa cando o usuario preme por primeira vez unha tecla do teclado. O seguinte exemplo mostrará unha mensaxe cando se desencadee o evento keydown e cantas veces se activa ao premer a tecla do teclado.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()O método keyup() anexa unha función de manexo de eventos aos elementos seleccionados (normalmente controis de formulario) que se executa cando o usuario solta unha tecla do teclado. O seguinte exemplo mostrará unha mensaxe cando se desencadee o evento keyup e cantas veces se activa ao premer e soltar unha tecla do teclado.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Un evento de formulario desenvólvese cando un control de formulario recibe ou perde o foco, ou cando o usuario cambia un valor de control de formulario, como escribir texto nunha entrada de texto, seleccionar unha opción nunha caixa de selección, etc. Aquí tes algúns métodos jQuery de uso común para xestionar eventos de formulario.
change()O método change() anexa unha función de controlador de eventos aos elementos <input> e execútase cando o seu valor cambia. O seguinte exemplo mostrará unha mensaxe de aviso ao seleccionar unha opción no cadro de selección despregable.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Para caixas de clic, caixas de verificación e botóns de opción, o evento desenvólvese inmediatamente cando o usuario fai unha selección do rato, pero para a entrada de texto e a área de texto, o evento desenvólvese despois de que o elemento perde o foco.
focus()O método focus() anexa unha función de controlador de eventos aos elementos seleccionados (normalmente controis e enlaces de formularios) que se executa cando se enfoca. O seguinte exemplo mostrará unha mensaxe cando a entrada de texto reciba o foco.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()O método blur() anexar unha función de controlador de eventos para formar elementos como <input>, <textarea>, <select> que se executa cando perde o foco. O seguinte exemplo mostrará unha mensaxe cando a entrada de texto perda o foco.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()O método submit() anexa unha función de controlador de eventos aos elementos <form> que se executa cando o usuario intenta enviar un formulario. O seguinte exemplo mostrará unha mensaxe baseada no valor introducido ao tentar enviar o formulario.
<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>Os eventos tamén se disparan nunha situación na que a páxina DOM (Document Object Model) está lista ou cando o usuario cambia o tamaño ou despraza a xanela do navegador, etc. Aquí tes algúns métodos jQuery de uso común para xestionar este tipo de eventos.
ready()O método ready() especifica unha función para executar cando o DOM estea completamente cargado.
O seguinte exemplo substituirá o texto do parágrafo en canto a xerarquía DOM estea completamente construída e lista para ser manipulada.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()O método resize() anexa unha función de controlador de eventos ao elemento da xanela que se executa cando cambia o tamaño da xanela do navegador.
O seguinte exemplo mostrará o ancho e o alto actuais da xanela do navegador cando intentes redimensionala arrastrando as súas esquinas.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()O método scroll() anexa unha función de controlador de eventos á xanela ou ao iframe e elementos desprazables que se executan cando cambia a posición de desprazamento do elemento.
O seguinte exemplo mostrará unha mensaxe ao desprazarse pola xanela do navegador.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
O sector naval é unha verdadeira potencia económica mundial, que navega cara a un mercado de 150 millóns...
O pasado luns, o Financial Times anunciou un acordo con OpenAI. FT licencia o seu xornalismo de clase mundial...
Millóns de persoas pagan por servizos de streaming, pagando taxas de subscrición mensuais. É unha opinión común que vostede...
Coveware by Veeam continuará ofrecendo servizos de resposta a incidentes de extorsión cibernética. Coveware ofrecerá capacidades forenses e de remediación...