Cautare in site

Articol

Curs jQuery – Lectia 3 – Instructiunea document ready si specificarea selectorilor

Curs jQuery – Lectia 3 – Instructiunea document ready si specificarea selectorilor

Dupa ce in lectia trecuta am vazut care este semantica instructiunilor jQuery si care este alias-ul folosit, in aceasta lectie vom vedea care este scopul utilizarii instructiunii document ready si cum putem specifica selectorii din pagina.

Instructiunea document ready

Inainte ca documentul HTML sa poata fi manipulat de catre JavaScript trebuie sa verificam starea incarcarii acestuia in browser. Acesta este motivul pentru care vedem foarte des instructiunea:

$( document ).ready()

Includerea acestei directive inseamna ca functiile jQuery specificate vor fi executate numai dupa ce elementele din DOM au fost incarcate. Cu ajutorul acestui event incoroporat jQuery este capabil de a detecta starea de incarcare a paginii.

In schimb instructiunea „window load function” va executa instructiunile ce urmeaza numai dupa ce intreaga pagina (imaginile, iframe-urile) nu doar DOM-ul au fost incarcate in browser:

$( window ).load(function() { ... })

Expertii in jQuery utilizeaza o formula scurta a instructiunii „document ready”.

In acest caz in locul expresiei lungi:

$( document ).ready(function() {
console.log( "ready!" );
});

vom regasi o formulare compacta de acest tip:

$(function() {
console.log( "ready!" );
});

 

Specificarea selectorilor

In documentul nostru cu ajutorul jQuery putem manipula elementele rechemandu-le printre altele si dupa tag, dupa id sau dupa clasa CSS pe care am desemnat-o.

Pentru a selecta de exemplu toate tagurile table din document vom avea urmatoarea formulare:

$('table')

La fel putem proceda pentru selectarea oricarui alt tag din document – pentru selectarea tuturor paragrafelor:

$('p')

Pentru selectarea tuturor tag-urilor div:

$('div')

Pentru selectarea tag-ului h1:

$('h1')

Mergand mai jos in ramificatia DOM-ului pentru a selecta de exemplu toate randurile din tabel, deci toate tag-urile tr vom folosi aceasta formulare:

$('tr')

– daca vrem sa selectam toate randurile dintr-un tabel caruia i-am desemnat id-ul “tabel-1” vom putea personaliza formularea noastra in acest mod:

$('#tabel-1 tr')

– daca “.tabel-1” este in schimb o regula pentru clasa atunci formularea pentru a selecta toate randurile din tabelele asupra carora avem aplicata aceasta clasa vom avea urmatoarea formulare:

$('.tabel-1 tr')

(NB: dupa cum am vazut in cursul HTML / CSS Dreamweaver Creative Cloud pentru definirea unei reguli CSS pentru id vom folosi semnul (#) $(‘#tabel-1’); pentru a rechema o regula aplicata clasei CSS vom folosi punctul (.) inaintea numelui clasei $(‘.tabel-1’); iar pentru a rechema un tag, dupa cum am vazut in exemplul de mai sus $(‘tr’) il vom cita direct fara a antepune alte semne de puctuatie).

Restrangerea ulterioara a selectiei

Mai sus mai vazut cum putem indica selectorii generali. Particularizam si mai mult selectia presupunand ca vrem sa selectam elementele span din interiorul tag-urilor paragraf care se gasesc in interiorul tagurilor div ce au aplicata clasa .firstclass. Astfel vom avea urmatoarea formulare:

$('div.firstclass p span')

Selectori multipli

Este de multe ori necesara aplicarea aceleasi actiuni jQuery asupra mai multor elemente deodata. In acest caz vom separa selectorii cu o virgula. In formularea de mai jos selectam toate tag-urile h1, p si input:

$('h1,p,input')

Toate noutatile despre selectorii in jQuery le putem gasi aici.


CUPRINS MINI-CURS JQUERY

  1. Introducere la jQuery, download / CDN si plasare in documentul HTML
  2. Alias-ul, semantica instructiunilor si inserarea lor in documentul HTML
  3. Instructiunea Document Ready in jQuery si specificarea selectorilor
  4. Selectorii :even si :odd si functia .css
  5. Proprietati multiple cu functia .css utilizand un obiect “literal”
  6. Manipularea vizibilitatii cu .addClass si .removeClass
  7. Evenimentele in jQuery, instructiunile .show / .hide sau .toogle
  8. Cuvantul cheie “this” si schimbarea textului pentru declansatorul functiei .toogle in jQuery
  9. Selectorul :hidden – aplicarea functiei .toogle asupra unui element initial ascuns
  10. Adaugarea si plasarea elementelor in DOM cu ajutorul functiilor .insertAfter si .insertBefore
  11. Adaugarea elementelor child in DOM cu ajutorul functiilor .prependTo si .appendTo


Nu sunt comentarii

Adauga Comentariu

Adresa ta de e-mail nu va fi publicata.