Diferència entre revisions de la pàgina «JavaScript: JQuery»

De Wikimir
Dreceres ràpides: navegació, cerca
(→‎Vegeu també)
(→‎Exemples de selectors)
Línia 195: Línia 195:
 
| '''$('div:animated');''' || Selecciona tots els divs actualment animats
 
| '''$('div:animated');''' || Selecciona tots els divs actualment animats
 
|-
 
|-
−
| '''$("li:not(.Class):last");''' || Selecciona l'últim "li" sense classe
+
| '''$("li:not('[class]'):last");''' || Selecciona l'últim "li" sense classe
 
|-
 
|-
−
| '''$("li").not(".Class").last();''' || Equivalent a l'anterior
+
| '''$("li").not("[class]").last();''' || Equivalent a l'anterior
 
|}
 
|}
 
</center>
 
</center>

Revisió del 20:47, 30 gen 2019

En aquest article de JavaScript s'aborda la llibreria JQuery.


Què és jQuery?

jQuery és una biblioteca o framework de JavaScript que permet:

  • simplificar la manera d'interactuar amb els documents HTML
  • manipular l'arbre DOM
  • gestionar esdeveniments
  • desenvolupar animacions
  • i afegir interacció amb la tecnologia AJAX en pàgines web.

jQuery ofereix una sèrie de funcionalitats basades en JavaScript que d'una altra manera requerien molt més codi, és a dir, amb les funcions d'aquesta biblioteca s'aconsegueixen bons resultats en menys temps i espai. O com diu a la pròpia web "write less, do more".

Descarreguem de https://jquery.com/


Estructura inicial

Aquesta és la plantilla habitual per treballar amb jQuery: 

<html>
 <head>
  <title>Pàgina amb Jquery</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
     $(document).ready( function() {
        ((((((codi))))))))
     });
  </script>
 </head>
 <body>
     contingut del document
 </body>
</html>

Cal adequar la ruta i nom de la llibreria jQuery al cas particular.

Per a que jQuery funcioni correctament cal que el document estigui completament carregat. "$document.ready(...)" crida a la funció indicada quan això passa.

Forma d'ús

Exemple: 

 <html>
    <head>
        <title>Pàgina amb Jquery</title>
        <script type="text/javascript" src="jquery.js"></script>
          // O bé jquery.js pot ser l'adreça directa a jquery.com
          // http://code.jquery.com/jquery-2.1.4.min.js
          // https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
          // http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js
    </head>
    <body>
       contingut del document
    </body>
 </html>

A l'exemple es mostren diverses solucions:

  • descarregar la llibreria (document .js) i afegir-la en local;
  • fer referència a la llibreria remotament (aconsellat en producció)
  • fer ús d'un CDN

Note.png Evidentment, els números de versió variaran amb el temps.

Aquí teniu l'enllaç a les llibreries que proporciona Google per enllaçar: https://developers.google.com/speed/libraries/


Exemples

Un exemple de com carregar un esdeveniment sobre un botó amb un ID: 

<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(inicializar);

	function inicializar(){
		$("#boton").click(botonPulsado);
	}

	function botonPulsado(){
		alert("Boton pulsado");
	}
</script>
<input type="button" id="boton"/>

I un exemple equivalent (no calen tantes funcions): 

<script>
	$(function (){
		$("#boton").click(function(){
			alert("Boton pulsado");
		});
	});
</script>
<input type="button" id="boton"/>

Mètode .ready()

jQuery té accés i pot manipular el nostre document. Per tant és molt important que abans de fer res el document estigui completament carregat. L'equivalent al onLoad() de JavaScript: 

   <script src="jquery.min.js"></script>
   <script>
	$(document).ready(function(){
    	   ........
     	});
   </script>

Per simplicitat, aquesta fòrmula es redueix i és equivalent a: 

   <script src="jquery.min.js"></script>
   <script>
	$(function(){
    	   ........
     	});
   </script>


Un exemple: 

 <script type="text/javascript" src="jquery.js"></script>
 <script>
	$(inicialitzar);

	function inicialitzar(){
		alert("hola");
	}
 </script>

$(document) espera a que el codi de la pàgina estigui carregat. Si cal esperar a que, a més, es carreguin les imatges de la pàgina, farem ús de $(window) en lloc de $(document).

Note.png Recorda la notació function(){...}. Si volem posar el nom d'una funció definida en un altre lloc també podem.

Selecció i acció

jQuery es basa en dos parts:

  • Selecció: Indiquem sobre quins elements volem actuar. Ex: tot els enllaços d'un document.
  • Acció: Actuem sobre l'element seleccionat: modifiquem propietats, contingut, css, etc.

Sintaxi: 

$(selector).accio();


Exemples: 

$('a').hide();       // amaga tots els enllaços
$('.test').show();   // mostra tots els elements que tenen la classe "test"
$('a.blau').show();  // mostra tots els enllaços que pertanyen a la classe "blau"
$('#id1').show();    // mostra tots els elements que tenen el id "test"
$(this).hide();      // amaga l'element actual. (si respon a un esdeveniment per exemple, serà aquest)

Més informació bàsica sobre selectors: 

http://www.w3schools.com/jquery/jquery_selectors.asp

Referència de selectors: 

http://www.w3schools.com/jquery/jquery_ref_selectors.asp


Exemples de selectors

Mètodes
$('a') Selecciona tots els enllaços de la pàgina
$('#primer') Selecciona l’element amb id "primer"
$('h1.titular') Selecciona tots els h1 amb class="titular"
$('a, #primero, h1.titular') Selecciona tots els casis anteriors
$('input[name=first_name]') Selecciona per l’atribut i un valor. Pot ser molt lent!! No és recomanable emprar-ho
$('a.external:first'); Selecciona el primer element <a> amb la classe 'external'
$('tr:odd'); Selecciona tots els <tr> senars d’una taula (el comptador comença per zero)
$('#myForm :input'); Selecciona tots els elements del tipus input dins del formulari #myForm
$('div:visible'); Selecciona tots els divs visibles
$('div:gt(2)'); Selecciona tots els divs excepte els tres primers
$('div:eq(2)'); Selecciona el tercer element div. Recorda que comença per zero
$('div:animated'); Selecciona tots els divs actualment animats
$("li:not('[class]'):last"); Selecciona l'últim "li" sense classe
$("li").not("[class]").last(); Equivalent a l'anterior

Totes aquestes formes retornen un objecte. Per exemple, si volem comprovar si hi ha més de cinc enllaços en un document podem fer el següent: 

if ($('a').length > 5)
   alert ("Oeeee"”)

o simplement, per comprovar si hi ha algun enllaç: 

if  ($('a').length)
   alert (“Oeeee”)

Desar seleccions en una variable

var $divs = $(‘div’)

Aquesta forma permet desar una selecció en una variable, permetent el seu ús posteriorment.

Observeu que fiquem el símbol $ a la variable $divs. NO és obligatori, però és una especie de convenció orientada a facilitar el reconeixement de les variables que desen objectes jQuery.


Refinament i filtratge de seleccions

Mètodes
$('div.foo').has('p'); L’element div.foo conté elements

$('h1').not('.bar'); L’element h1 no posseeix la classe 'bar'
$('ul li').filter('.current'); Un ítem d’una llista desordenada que posseeix la classe 'current'
$('ul li').first(); El primer ítem d’una llista desordenada
$('ul li').eq(5); El sisè ítem d’una llista desordenada


Mètodes de recorregut pel DOM

Mètodes
$('h1').next('p'); Seleccionar l’inmediat i pròxim <p> respecte a H1
$('div:visible').parent(); Seleccionar l’element contenidor a un div visible
$('input[name=first_name]').closest('form'); Seleccionar l’element <form> més proper a un input
$('#myList').children(); Seleccionar tots els elements fills de #myList
$('li.selected').siblings(); Seleccionar tots els items germans de l’element

    • Selecció d’elements d’un formulari

    Pseudo-selectors que ajuden a tobar elements dintre de formularis:

    Mètodes
     :button Selecciona elements <button> i amb l’atribut type='button'
     :checkbox Selecciona elements <input> amb l’atribut type='checkbox'
     :checked Selecciona elements <input> del tipus checkbox seleccionats
     :disabled Selecciona elements del formulari que están deshabitats
     :enabled Selecciona elements del formulari que estan habilitats
     :file Selecciona elements <input> amb l’atribut type='file'
     :image Selecciona elements <input> amb l'atribut type='image'
     :input Selecciona elements <input>, <textarea> i <select>
     :password Selecciona elements <input> amb l'atribut type='password'
     :radio Selecciona elements <input> amb l'atribut type='radio'
     :reset Selecciona elements <input> amb l'atribut type='reset'
     :selected Selecciona elements <options> que estan seleccionats
     :submit Selecciona elements <input> amb l'atribut type='submit'
     :text Selecciona elements <input> amb l'atribut type='text'

    Utilització: 

    $('#myForm :input'); // obté tots els elements input dintre del formulari #myFrom


    Treballar amb seleccions

    Un cop feta la selecció d’un conjunt d’elements es poden emprar conjuntament amb un grup de mètodes anomenats obtenidors o establidors.

    Els establidors ens permeten modificar els objectes seleccionats. Els obtenidors, obtenir "informació" sobre ells. 

    $('h1').html('hello world');  // tots els H1 contindran els text "hello world"
$('h1').html();  // obté l’html del primer H1

    Esdeveniments

    Un altra possibilitat és afegir esdeveniments de forma molt fàcil, fora de l'HTML: 

    $("p").click(function(){
  $(this).hide();
});

$("#p1").mouseenter(function(){
  alert("Estàs a sobre de p1!!!");
});

    D'aquesta manera el codi HTML queda separat completament del codi JavaScript i és més fàcil el seu manteniment.

    Esdeveniments:

    • Mouse:
      • click → click simple
      • dblclick → doble click
      • mouseenter → Quan el ratolí es posa a sobre
      • mouseleave → Quan el ratolí abandona l'àrea de l'element
      • hover → combinació de mouseenter i mouseleave. Veure exemple.
    • Teclat:
      • keypress → pulsació de tecla
      • keydown → tecla avall
      • keyup → tecla amunt
    • Formularis:
      • submit → s'envia el formulari
      • change → canvia algun element del formulari
      • focus → element rep el cursor/focus
      • blur → perd el cursor/focus
    • Document finestra:
      • load → Ha carregat el document extern. Veure exemple
      • resize → Canvi de mida
      • scroll → S'ha fet scroll
      • unload → s'ha descarregat el document-


    Exemple:

    Li afegim l'esveniment click als elements p mostrant un alert(): 

    $('p').on('click', function() {
   alert('click');
});


    La llista completa d'esdeveniments suportats és a http://api.jquery.com/category/events



    Formes d'assignació d'esdeveniments

    • Vincular esdeveniments mitjançant un mètode reduït:
    $('p').click( function ( ) {
   console.log("S'ha fet click al paràgraf");
} );


    • Vincular esdeveniments mitjançant el mètode on(), que permet vincular la mateixa funció de controlador a diferents esdeveniments:
    $('#t1').on(
   'click blur', function(eventObject){
       console.log(eventObject.type);
       }
);

    Note.png L'assignació reduïda està desaconsellada ja que, en el futur, només es suportarà el mètode on().

    El mètode on()

    Ens permet assignar un o molts esdeveniments a un o més elements: 

    $("p").on({
   mouseenter: function(){
       $(this).css("background-color", "lightgray");
   }, 
   mouseleave: function(){
       $(this).css("background-color", "lightblue");
   }, 
   click: function(){
       $(this).css("background-color", "yellow");
   } 
});

    El mètode off()

    També existeix el mètode off(...) per anul·lar esdeveniments prèviament assignats amb el mètode on(). Veiem-ho.


    Vinculem: 

    ('p').on('click' , function( ) {
    console.log("S'ha clicat per primera vegada");
   $(this).click(function(){console.log("S'ha tornat a clickar");});
});

    Desvinculem: 

    $('p').off('click');


    El mètode off() sobre un controlador particular

    Podem desvincular un esdeveniment per a un element particular: 

    var foo = function ( ) {
   console.log ( ' foo ' );
};
var bar = function ( ) {
   console.log ( ' bar ' );
};
$('p').on('click', foo).on('click',bar);
$('p').off('click',bar); // el controlador que crida a la funció foo continua executant-se quan es produeix un esdeveniment click sobre els paràgrafs

    El mètode one()

    Si volem vincular esdeveniments per a una sola vegada: 

    $('p').one('click' , function( ) {
   console.log("S'ha clickat per primera vegada");
});
$(this).click(function(){console.log("S'ha tornat a clickar");});

    El mètode unbind()

    De vegades la funció click() es crida dues vegades en lloc d'una. Això sol passar quan es genera la pàgina dinàmicament i l'esdeveniment clic s'afegeix diverses vegades. 

    $(".button").click(function(){
   alert('Has fet clic');
});

    Per prevenir-ho podem cridar abans al mètode unbind() que neteja la pila d'esdeveniments: 

    $(".button").unbind('click').click(function(){
   alert('Has fet clic');
});

    Altres mètodes

    El mètode html()

    Té dos funcionaments diferents.

    • Sense arguments: retorna l'innerHTML de l'element seleccionat. Exemple:
    $("#nom").html();
    • Amb argument, modifica l'innerHTML de l'element seleccionat. Exemple:
    $("#nom").html("Nou HTML afegit!");

    El mètode append()

    Afegeix el paràmetre a l'innerHTML de l'element seleccionat, per tant el modifica. Exemple: 

    $("#nom").append("Això no estava abans!");

    El mètode val()

    Té dos funcionaments diferents.

    • Sense arguments: retorna la propietat value de l'element seleccionat. Exemple:
    $("#nom").val();
    • Amb argument, modifica la propietat value de l'element seleccionat. Exemple:
    $("#nom").val("23");

    Els mètodes attr() i removeattr()

    Per saber el valor d'un atribut: 

    $("#elemento").attr("href");

    Per afegir un atribut: 

    $("#elemento").attr("href","http://intranet.iesjoaquimmir.cat/wiki");

    Per esborrar-lo: 

    $("#elemento").removeAttr("href");



    El mètode focus()

    Executa una funció quan l'element rep el focus: 

    $("#element").focus(fn);

    El mètode blur()

    Executa una funció quan l'element perd el focus: 

    $("#element").blur(fn);

    Mètodes utilitaris

    El mètode trim()

    Elimina espais en blanc: 

    $.trim('    molts    espais   en blanc  '); // torna 'molts 	espais en blanc'

    El mètode each()

    Interactua amb arrays i objectes: 

    $('li').each(function(idx, el) {
   parcial='Element: ' + idx + ', conté el següent HTML: ' + $(el).html();
   total += parcial;  // total contindrà tots els texts dels li
});

    El mètode inArray()

    Torna l’índex del valor d’un array o -1 si no el troba: 

    var myArray = [ 1, 2, 3, 5 ];
if ($.inArray(4, myArray) !== -1) {
   console.log('valor trobat'); 
}


    Comprovació de tipus

    Comprovar el tipus d’un determinat valor: 

    var myValue = [1, 2, 3];
    • Utilizant l’operador typeof de JavaScript per a comprovar tipus primitius:
    typeof myValue == 'string'; // fals (false)
typeof myValue == 'number'; // fals (false)
typeof myValue == 'undefined'; // fals (false)
typeof myValue == 'boolean'; // fals (false)
    • Utilitzant l’operador d’igualtat estricta per a comprovar valors nuls (null):
    myValue === null; // fals (false)
    • Utilitzant els mètodes jQuery per a comprovar tipus no primitius:
    jQuery.isFunction(myValue); // fals (false)
jQuery.isPlainObject(myValue); // fals (false)
jQuery.isArray(myValue); // cert (true)
jQuery.isNumeric(16); // cert (true). No disponible en versions inferiors a jQuery 1.7
isPlainObject retornarà cert quan li passem un objecte creat amb { } o amb newobject.

    Exemple: 

    jQuery.isPlainObject({ foo : 'bar', baz : 'bim' }) // true
jQuery.isPlainObject( "test" ) // false

    Efectes i animacions

    Hi ha diversos mètodes capaços de crear efectes.

    Per visualitzar els següents mètodes, cal dibuixar en pantalla una capa vermella i dos botons (els botons no han d'estar dins de la capa). 

     <input type="button" id="boton1" value="Ocultar recuadro">
 <input type="button" id="boton2" value="Mostrar recuadro">
 <div id="capaRoja" style="background-color:red;width:300px; height:300px"></div>


    Els mètodes show() i hide()

    Quan faci clic sobre un dels botons, la capa vermella haurà d'ocultar-se. Quan faci clic sobre l'altre, haurà de mostrar-se. 

     <script type="text/javascript" src="jquery.js"></script>
 <script>
 $(document).ready(function(){
	$("#boton1").click(function(){
		 $("#capaRoja").hide("slow");
	});
  	$("#boton2").click(function(){
  		$("#capaRoja").show("fast");
  	});
 });
 </script>

    El mètode show() té un pàrametre requerit i un altre opcional:

    • show(temps) mostra l'objecte amb una animació que dura tants mil·lisegons com li indiquem:
    show ([quantitat de mil·lisegons])
    • show(temps, funció) mostra l'objecte amb una animació que dura tants mil·lisegons com li indiquem i executa al final la funció que li passem com a segon paràmetre:
    show ([quantitat de mil·lisegons], [funció])


    Els mètodes fadeIn() i fadeOut()

    Similars als anteriors: 

    $("#capaRoja").fadeOut("slow");
$("#capaRoja").fadeIn("slow");


    El mètode fadeTo()

    Similar als anteriors, amb un nivell de transparència: 

    $("#descripcion").fadeTo("slow",0.5);
$("#descripcion").fadeTo("slow",1);


    Els mètodes slideDown(), slideUp() i slideToggle()

    Mostra l’element seleccionat amb un moviment de deslliçament vertical: 

    $(‘h1’).slideDown

    Oculta l’element seleccionat amb un moviment de deslliçament vertical: 

    $(‘h1’).slideUp

    Mostra o oculta amb un moviment de deslliçament vertical depenent de si actualment l’element està visible o no: 

    $(‘h1’).slideToggle

    Els mètodes addClass(), removeClass() i hasClass()

    Per associar una classe: 

    $("#elemento").addClass("clase");

    Per desassociar la classe: 

    $("#elemento").removeClass("clase");

    Per saber si un element té una classe donada: 

    if($("#elemento").hasClass("clase")){...}


    Obtenir i establir propietats CSS

    En aquest darrer exemple ho separem en diferents línies: 

    $('h1').css('fontSize'); // retorna una cadena de caràcters com "19px"
$('h1').css('font-size'); // també funciona
$('h1').css('fontSize', '100px'); // estableix una propietat individual CSS
$('h1').css({
    'fontSize' : '100px',
    'color' : 'red'
    }); // estableix múltiples propietats CSS


    Afegir classes d’estils

    Si volem afegir diferents estils ja predefinits en un full d’estil ho podem fer mitjançant classes "pre-creades" (se suposa que la classe .big ja existeix) 

    var $h1 = $('h1');
$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');
if ($h1.hasClass('big')) { ... }

    toggleClass treu o posa en funció de si hi és o no, respectivament.


    width i height

    Establir l’ample de tots els elements H1: 

    $('h1').width('50px');

    Obtenir l’ample del primer element H1: 

    $('h1').width();

    Establir l’alçada de tots els elements H1: 

    $('h1').height('50px');

    Obtenir l’altura del primer element H1: 

    $('h1').height();

    Retornar un objecte contenint informació sobre la posició del primer element relatiu a l’offset (posició) del seu element pare: 

    $('h1').position();


    El mètode animate()

    Crea animacions en funció del paràmetre: 

     $(function(){
	$("#boton1").click(anima);
	$("#boton2").click(anima2);
 });

 function anima(){
	$("#capaRoja").animate({"height":"800px"},500);
 }
 	
 function anima2(){
	$("#capaRoja").animate({"height":"800px","width":"800px"},500);
 }

    Un altre exemple, 

    $(‘div’).animate(
   {
     left : "+=50",
     opacity : 0.25
   },
   300, // duració
   function() {
      console.log('realitzat'); // funció de devolució de la crida
   }
);


    I un altre exemple, 

    $('div').animate(
   {
     opacity: 0.4,
     width: "70%",
     marginLeft: "0.6in",
     fontSize: "3em",
     borderWidth: "10px"
   }, 1000, // duració
   function(){
      //alert ("Se acabó"); // funció de devolució de la crida
   });
});

    En aquest darrer exemple, partint de l’aspecte inicial, i en 1000 mseg. canviem la opacitat a 0'4, augmentem la mida.


    Objecte jQuery.fx.speeds

    Aquest objecte conté les velocitats predeterminadades per a la durada d’un efecte. 

    speeds: {
   slow: 600,
   fast: 200,
   // velocidad predeterminada
   _default: 400
}

    Si volem afegir velocitats predefinides: 

    jQuery.fx.speeds.superRapid = 100;
jQuery.fx.speeds.superLent = 2000;

    I ho farem servir amb: 

    $('h1').fadeIn('superRapid');



    Easing

    Estableix la forna en que es realitza l’efecte, és a dir, si la velocitat és constant: 

    $('div.funtimes').animate(
  {
    left : [ "+=50", "swing" ],
    opacity : [ 0.25, "linear" ]
  },
  300 // durada
  // No hem ficat funció de retorn
  );

    Per a més tipus, cal afegir extensions.


    Control dels efectes

    $(‘h1’).stop -> Atura les animacions que s’estan executant a l’element seleccionat
$(‘h1’).delay -> Espera un temps determinat abans d’executar la propera animació

    Exemple: 

    $('h1').show(300).delay(1000).hide(300); // Mostra, espera 1000 mseg i l’amaga
$('#animate-this').fadeIn().delay(500).fadeOut();

    Si establim jQuery.fx.off a true no existiran transicions per a les animacions i als elements se li establirà l’estat final de l’animació. Útil per a navegadors antics.

    Executar codi quan una animació hagi finalitzat

    Comprovem si la selecció existeix. En cas negatiu no fa l’efecte i crida a la funció directament. Si no féssim aquesta comprovació, cb() mai es cridaria, de no existir cap objecte amb id "#noexistent": 

    var $thing = $('#noexistent');
var cb = function() {
   console.log('realizado');
};
if ($thing.length) {
   $thing.fadeIn(300, cb);
} else {
  cb();
}

    Menús

    Menú que se solapa a dalt

    $(window).scroll(function(){
var scrollTop = $(window).scrollTop();
elementOffset = $('.nav').offset().top;

    Exemple


    Menú que desapareix al baixar

    var mywindow = jQuery(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
  if(mywindow.scrollTop() > mypos){
    jQuery('.site-header').fadeOut();
  }else{
    jQuery('.site-header').fadeIn();
  }
  mypos = mywindow.scrollTop();
});

    Exemple

    Vegeu també

    Obtingut de «http://iesjoaquimmir.xtec.cat/wiki/index.php?title=JavaScript:_JQuery&oldid=7856»