>

Selectoare și filtre jQuery. Probleme cu caracterele speciale de completare automată JQuery (norvegiană) Selectoare ierarhice în jQuery

Selectorii jQuery sunt utilizați pentru a selecta elementul dorit de pe pagină.

Comenzi jQuery

Codul jQuery, ca și codul JavaScript, constă din comenzi secvențiale. Comenzile sunt blocul de bază al jQuery.

Sintaxa standard a comenzii jQuery:

$(selector).method();

  • Semnul $ indică faptul că caracterele care îl urmează sunt cod jQuery;
  • Selectorul vă permite să selectați un element de pe pagină;
  • Metoda specifică acțiunea care trebuie efectuată asupra elementului selectat. Metodele din jQuery sunt împărțite în următoarele grupuri:
    • Metode de manipulare a DOM;
    • Metode de decorare a elementelor;
    • Metode de creare a cererilor AJAX;
    • Metode de creare a efectelor;
    • Metode pentru legarea handlerelor de evenimente.
    • simbolul $

    jQuery poate fi combinat cu JavaScript obișnuit.

    Dacă linia începe cu $, este jQuery, dacă nu există $ la începutul liniei, este Șir JavaScript cod.

    Funcția start() ( //Ascunde paragraful cu id="hid" folosind jQuery $("p#hid").hide(); //Modifică conținutul paragrafului cu id="change" document.getElementById(" change") .innerHTML="Acest conținut a fost modificat folosind JavaScript.";

    Unele biblioteci JavaScript folosesc, de asemenea, $ pentru a indica codul lor. Pentru a evita conflictele de nume între ele, jQuery oferă comanda noConflict(). Folosind comanda noConflict() puteți înlocui semnul $ cu oricare altul.

    Sintaxă:

    Var custom_name=jQuery.noConflict();


    //Schimbă simbolul $ standard în nsign var nsign=jQuery.noConflict(); //Schimbați culoarea paragrafului folosind nsign în loc de $ nsign(document).ready(function())( nsign("p").css("culoare","verde"); ));

    Vizualizare rapidă

    selectoare jQuery

    Folosind selectoare, puteți selecta elemente dintr-o pagină pentru a le aplica acțiuni specifice.

    Mai jos este un tabel cu diverse exemple de utilizare a selectoarelor pentru a selecta elementele dorite:

    Exemplu de rezultat
    $("p") Toate p elementele care se află pe pagină vor fi selectate.
    $(".par") Toate elementele de pe pagină cu class="par" vor fi selectate.
    $("#par") Primul element de pe pagină cu id="par" va fi selectat.
    Vă permite să selectați elementul HTML curent. Faceți clic pe $(this) din stânga pentru a vedea un exemplu de utilizare a acestui selector în editorul online.
    $("p.par") Toate p elementele din pagina cu class="par" vor fi selectate.
    $("p#par") Toate p elementele din pagină cu id="par" vor fi selectate.
    $(".par,.header,#heat") Toate elementele de pe pagină cu valorile atributelor class="par", class="header" și id="heat" vor fi selectate.
    $("") Toate elementele de pe pagină care au un atribut src vor fi selectate.
    $("") Toate elementele cu valori ale atributului src="value" vor fi selectate.
    $("") Vor fi selectate toate elementele cu valori ale atributului src care se termină în .gif.
    $("div#wrap .par1") Toate elementele cu class=par1 care sunt în interiorul elementelor div cu id=wrap vor fi selectate.
    $(":input") Toate elementele de intrare de pe pagină vor fi selectate.
    $(":type") Toate elementele de intrare cu . De exemplu:button va selecta toate elementele, :text va selecta toate elementele etc.

    $(document).ready(function())( //Setați dimensiunea fontului pentru toate paragrafele la 20 de pixeli $("p").css("fontSize","20px"); //Schimbați culoarea fontului element cu id= la verde el2 $("#el2").css("culoare","verde" //Schimbați culoarea fontului elementului cu class=el3 $(".el3").css("); culoare","roșu") ; //Faceți fontul elementelor cu id=el2 și class=el3 bold $("#el2,.el3").css("fontWeight","bold"); albastru textul butonului $(":input").css("culoare","albastru"); //Setați dimensiunea fontului tuturor elementelor cu atributul href egal cu 20 pixeli $("").css("fontSize","20px"); //Schimbați culoarea link-ului la www..site/"]").css("culoare","verde"); ));

    Vizualizare rapidă

    Puteți găsi o listă completă de selectoare jQuery în pagina noastră.

    Prevenirea executării premature a codului

    Poate vă amintiți din tutorialul JavaScript că executarea codului înainte ca documentul să se încarce complet duce adesea la erori.

    Cert este că scriptul poate accesa conținut care nu a fost încă încărcat, iar acest lucru duce întotdeauna la erori sau rezultate neașteptate.

    Pentru a evita acest lucru, deseori punem codul într-o funcție care a început să se execute doar după ce documentul s-a încărcat complet.

    Prevenirea executării premature a codului în JavaScript:

    function start() (Cod care va fi executat dupa ce documentul este incarcat complet)

    În jQuery, puteți scăpa de execuția prematură a codului în următoarele moduri:

    Prevenirea executării premature a codului în jQuery:

    //Prima metodă: $(document).ready(function())( Cod care va fi executat după ce documentul este încărcat complet )); //A doua metodă: $().ready(function())( Cod care va fi executat după ce documentul este încărcat complet )); //A treia metodă: $(function())( Cod care va fi executat după ce documentul este încărcat complet ));

    Există o altă metodă alternativă care, de asemenea, ajută la evitarea execuției premature a codului JavaScript și jQuery și, de asemenea, vă permite să accelerați încărcarea paginii ( mulțumesc utilizatorului Ghringo Americano pentru că mi-a reamintit despre asta).

    Este necesar să plasați codul chiar la sfârșitul corpului documentului (adică înainte) în în acest caz, Interpretul JavaScript încorporat în browser va începe să analizeze codul numai după ce documentul este încărcat. În metoda anterioară, scripturile sunt încărcate simultan cu încărcarea documentului, iar acest cod este executat după încărcarea documentului.

    Conținutul corpului documentului

    Conținutul corpului documentului Cod care va fi executat după încărcarea completă a documentului

    Lanțuri de comenzi în jQuery

    Pentru a reduce dimensiunea codului, puteți înlănțui comenzi jQuery.

    Comenzile din lanț vor fi executate alternativ de la stânga la dreapta.

    //Cod fără abreviere $("p").css("culoare","verde"); $("p").css("dimensiunea fontului","30px"); //Cod scurt $("p").css("culoare","verde").css("dimensiunea fontului","30px");

    Fă-o singur

    Sarcina 1 Schimbați culoarea și dimensiunea fontului elementelor enumerate mai jos pentru a evidenția literele cuvântului cod.

    Schimbați culoarea și dimensiunea fontului:

    • Element cu id=lunca;
    • Un element cu clasa=curcubeu;
    • Un element cu id=futur situat în interiorul unui element cu id=fut; (acest element trebuie evidențiat într-o altă culoare decât roșu);
    • Un element care are un atribut set;
    • Un element cu atributul last=code.

    Vă rugăm să rețineți: pentru a schimba culoarea textului unui element, utilizați metoda: css("color","new_text_color"), pentru a schimba dimensiunea fontului utilizați metoda: css("font-size","font_size_px").

    În JavaScript, simbolul dolarului se găsește de obicei în declarațiile de variabile și apelurile de funcții. Lasă-mă să te conving că nu este nimic misterios ascuns aici, pentru că este doar un nume de variabilă (identificator). Nu este nimic ciudat în asta. De exemplu, cadrul JavaScript nebun de popular despre care am scris înainte (Ce este jQuery?) folosește semnul dolar pentru a accesa obiectul principal jQuery.

    Multe limbi compilate și interpretate tratează variabilele ca identificatori. Fiecare limbă are propria sa sintaxă, fie că este C, C++, PHP, Java sau JavaScript. Iar sintaxa fiecărei limbi este supusă unui anumit set de reguli. De exemplu, în JavaScript, regulile pentru declararea variabilelor sunt că fiecare identificator trebuie să înceapă cu o literă alfabet latin, semnul dolarului ($) sau liniuța de subliniere (_) și nu pot începe cu numere (de la 0 la 9) sau cu alte caractere, cum ar fi semnele de punctuație. Ambele caractere menționate ($ și _) sunt non-standard și pot apărea în restul identificatorului. Deci, de exemplu, un nume de variabilă specificat cu cinci semne de dolar la rând: $$$$$ (sau orice număr de liniuțe de subliniere) este perfect acceptabil deoarece respectă regulile sintaxei JavaScript. Aceasta este o cerință simplă a limbajului JavaScript cu care programatorii trebuie să se împace. Crede-mă, există motive foarte bune pentru asta.

    În unele coduri exista un obiect cu funcție globală al cărui nume era un simplu semn $. Acest stil de cod (absența cuvântului cheie var) este considerat nedorit de către programatorii cu experiență, încercăm să nu folosim variabile globale în JavaScript, decât dacă, desigur, încercăm să trișăm. Oricum, ideea este că această funcție poate fi numită aproape orice: a, z sau chiar _.

    // Exemplu de identificatori corecti var A = function() ( alert("funcția A a fost numită"); ) var $ = function() ( alert("funcția $ a fost numită"); ) var _ = function() ( alertă ("funcția _ a fost numită");

    Mai mult, în versiunile JavaScript 1.5 și ulterioare, pe lângă semnul dolar și liniuța de subliniere, puteți utiliza caractere ISO 8859-1 și Unicode în identificatori, cum ar fi Ø. S-ar putea să fii surprins, dar chiar și secvențe Unicode precum uXXXX sunt permise, unde XXXX este un număr, de exemplu 0024. Caracterul Unicode u0024 este echivalent cu - ghici ce? ... Semnul dolarului. Și puteți apela chiar și funcția specificată de id u0024 folosind semnul dolarului ca referință! Desigur, nu ar trebui să-l folosești peste tot doar pentru că este posibil. Cred că aceasta nu este o practică dezirabilă, mulți programatori pot fi mai puțin cunoscători decât tine și, din cauza unor astfel de „smecherii”, codul le va părea confuz și imposibil de citit.

    După cum probabil știți, JavaScript este un limbaj de programare orientat pe obiecte. Există mai multe moduri diferite de a atribui o valoare unui identificator. De exemplu, când folosim cuvântul cheie var, JavaScript creează o variabilă în domeniul curent (sau local). Dacă omitem cuvântul cheie var, variabila va fi în continuare creată, dar în domeniul global al programului, ceea ce înseamnă că va fi vizibilă în întregul fișier .js. Din nou, vreau să vă reamintesc: evitați variabilele globale. Îmi dau seama că acest articol este despre semnele dolarului, dar dacă nu este deja evident pentru tine, variabilele globale intră în joc atunci când te confrunți cu proiecte de anvergură în care diverse componente au fost scrise de altcineva sau dezvoltate de o echipă de programatori. Deci, dacă cineva vă spune că este în regulă să utilizați variabile globale fără cuvântul cheie var, nu le crede - vă înșală.

    Și încă un lucru. Deoarece variabilele din JavaScript sunt obiecte, vă puteți referi la funcții cu variabilele dvs. Puteți chiar să atribuiți o „funcție de membru” unei funcții deja existente. Dar încercarea de a atribui o funcție unui obiect care nu există încă este sortită eșecului în JavaScript. Dacă chiar vrei să înțelegi bine, acordă o atenție deosebită codului de mai jos.

    Acum, folosind ceea ce ați învățat și fără a rula acest cod în browser, puteți spune dacă va funcționa?

    Prin convenție, semnul dolar ($), liniuțele de subliniere (_) și chiar unele caractere ASCII pot fi folosite oriunde într-un identificator în JavaScript. Documentația Ecma Script (7.6 Identificatori, ECMA-262, Ed. a 3-a) spune: „Simbolul dolarului este destinat utilizării numai în codul generat automat”. Aceasta înseamnă că nu ar trebui să folosim semnul dolar ($) în identificatori decât dacă scriem un cadru. Iată o listă de caractere permise care pot fi folosite în identificatori:

    IdentifierName::
    IdentifierStart
    IdentifierName IdentifierPart
    IdentifierStart::
    UnicodeLetter
    $
    _
    UnicodeEscapeSequence
    IdentifierPart::
    IdentifierStart
    UnicodeCombiningMark
    UnicodeDigit
    UnicodeConnector Punctuație
    UnicodeEscapeSequence

    Scopul acestui articol este să arate că simbolul dolarului este doar un identificator (implementat de cadrul popular Prototype și apoi preluat de dezvoltatorii jQuery) și nimic mai mult. De ce îl folosesc programatorii? Ei bine, acesta este un nume foarte convenabil pentru o funcție care are un scop clar în codul cadru. Din acest motiv, obiectul jQuery principal definit ca semn dolar este sinonim cu obiectul jQuery. În codul normal, folosim un obiect jQuery în loc de $. Dacă sunteți bine versat în jQuery și acordați o atenție deosebită documentației, folosirea sinonimului $ în locul unui obiect jQuery nu este recomandabilă, deși din anumite motive este foarte popular în rândul programatorilor care îl consideră îngrijit.

    Să rezumam

    Diferența în utilizarea simbolului dolarului este semantică. Acesta este numele de identificare. Din punct de vedere psihologic, arată confortabil și elegant. Din punct de vedere tehnic, este doar o funcție sau o referință simbolică la o variabilă, nu există nicio diferență în utilizarea $ sau _ sau orice alt simbol.

    Caracterul $, așa cum este menționat în specificația Ecmascript, este permis pentru utilizare în identificatori. Dacă identificatorul constă dintr-un singur simbol $, cu siguranță arată ciudat, dar o astfel de diferență este vizibilă doar pentru oameni. Din câte știu, compilatorului nu i-ar păsa dacă variabila constă din orice alt caracter, cum ar fi a sau b.

    Pe de altă parte, specificația Ecmascript afirmă că simbolul $ ar trebui folosit în codul intern, cum ar fi codul jQuery, pur și simplu pentru comoditate. Aceasta înseamnă că nu ar trebui să-l utilizați în codul dvs. doar pentru că arată cool, dar atunci când dezvoltați un cadru, puteți beneficia de el, deoarece obiectul global al cadrului va arăta unic și va ieși în evidență față de restul codului.

    JavaScript și jQuery

    Ce este jQuery

    jQuery este o bibliotecă de diverse servicii software utile pentru manipularea elementelor de markup HTML ale unei pagini încărcate. A fost scris în . Frumusețea sa nu este doar că are capacități destul de serioase, ci și că interfața sa software este incredibil de simplă.

    Înainte de a trece la descrierea jQuery, permiteți-mi să vă reamintesc încă o dată ce este. model obiect document sau DOM (Modul obiect document l). DOM este o structură ierarhică a obiectelor din RAM, corespunzătoare structurii unei pagini de Internet încărcate. DOM-ul este generat de browser și oferă o interfață de programare pentru lucrul cu elemente de marcare, de exemplu, folosind același JavaScript. Folosind instrumentele DOM, puteți căuta, adăuga și elimina elemente de document, edita atributele acestora, schimba stilurile etc. Cu alte cuvinte, folosind DOM și JavaScript, sunt create pagini de Internet dinamice, care sunt și numite Pagini DHTML(Pagini HTML dinamice). Să revenim la biblioteca jQuery. Folosind API-ul jQuery, puteți selecta cu ușurință elementele DOM de care aveți nevoie și puteți efectua orice acțiuni asupra acestora din lista de mai jos:

    • Schimbare;
    • Editați compoziția atributului;
    • Şterge;
    • Adăugați descendenți;
    • Mutați sau înfășurați cu un alt element;
    • Efectuează copierea;
    • Bind handler de evenimente;
    • Personalizați efectul vizual sau animația;
    Desigur, toate acestea pot fi făcute folosind DOM și JavaScript, dar de ce, dacă există un set de instrumente gata făcut și gratuit. Nu uitați de compatibilitatea între browsere. Dacă aveți nevoie ca pagina dvs. să funcționeze la fel în toate browserele populare, atunci trebuie să depuneți mult efort în acest sens, deoarece există destul de multe lista mare ceva pe care diferite browsere implementează diferit. Dacă lucrați prin interfața jQuery, atunci puteți uita de această problemă. Desigur, programele sunt scrise de oameni și pot exista erori în jQuery, dar în acest caz puteți conta că problema va fi remediată în viitorul apropiat. Dacă sunteți familiarizat cu , aveți o idee despre ce este JavaScript, atunci este timpul să stăpâniți jQuery. Odată cu apariția acestei biblioteci minunate, capacitățile profesioniștilor și ale designerilor web începători s-au echilibrat oarecum, ceea ce îi poate întrista pe primul, dar îl inspiră pe cel din urmă. Poate exagerez oarecum, dar faptul că acum toți cei care nu au experiență deosebită în complexitatea programării JavaScript au un arsenal destul de serios pentru a crea pagini DHTML impresionante, rapide și de încredere este un merit incontestabil al jQuery.

    conexiune jQuery Mai întâi trebuie să descărcați biblioteca. Puteți face acest lucru pe site-ul jQuery autori: http://jquery.com

    Asta e, poți începe să lucrezi cu el. Dacă nu doriți să descărcați, puteți furniza un link direct către cea mai recentă versiune a bibliotecii situate pe serverul dezvoltatorului: Conectarea la cea mai recentă versiune, pe de o parte, este bună, deoarece remediază în mod constant unele erori și optimizează funcționarea funcțiilor sale individuale, dar, pe de altă parte, , pot exista modificări în noua versiune la care nu te așteptai și care vor duce la schimbări în modul în care funcționează proiectul tău.

    Interfață sau sintaxă de programare jQuery

    Am spus deja că sintaxa interogării jQuery este destul de simplă. Și anume solicitări, deoarece programarea în JavaScript folosind jQuery poate fi clasificată ca programare declarativă, care diferă de programarea procedurală clasică prin faptul că descrii „ce trebuie făcut” mai degrabă decât „cum se face”. Numele bibliotecii reflectă esența acesteia - un limbaj de interogare în contextul JavaScript. Toate cererile jQuery încep cu un apel la funcția $, al cărei argument este cererea în sine. Deci, sintaxa generală a interogării jQuery arată cam așa:

    $(cerere)[{.filtra(criteriu)}].acţiune(argumente){ .acţiune(argumente)} Cerere este un selector sau o listă de selectoare separate prin virgulă. Sintaxa cererii este aceeași cu sintaxa selectoarelor de stil CSS. Deci, o interogare jQuery ar putea începe ceva de genul acesta:
    $(„div”) - selectați toate elementele div;
    $(„div, p”) – selectați toate elementele divși elemente p;
    $(“.class_name”) – selectează toate elementele clasei nume_clasă;
    $(„#element_id”) – selectarea unui element cu un identificator element_id;
    $(*) – selectarea tuturor elementelor;
    $(„.class_name span”) – selectează toate elementele span din toate elementele clasei nume_clasă;
    $(„#element_id > div”) – selectați toate elementele div, care sunt descendenți direcți (copii) ai elementului cu identificator element_id.
    $(„#element_id .class_name + div”) – selectează toate elementele care urmează imediat elementele clasei nume_clasăîn cadrul unui element element_id.
    $(„#ul_id > li:first”) – selectând primul element li listă ul_id. De asemenea, puteți selecta ultimul element sau toate elementele pare par sau impare. Există și alte opțiuni.
    $(„a”) – selectează toate legăturile cu valoarea atributului href incepand cu „http://ru.wikipedia.org”. Fără simbolul „^”, obținem o condiție pentru o potrivire completă a valorilor dacă în loc de simbolul „^” punem simbolul „$”, obținem o restricție de potrivire de la sfârșit, iar simbolul * înseamnă că; valoarea atributului trebuie să conţină pur şi simplu fragmentul specificat.

    Filtra– o modalitate de a filtra un set de elemente selectate folosind criterii suplimentare. Criteriile sunt aceleași cu cele ale selectoarelor. Există două operații opuse una față de cealaltă: filtrare și nu. Dacă utilizați operația filtru (criteriu), atunci vor rămâne selectate doar acele elemente care satisfac criteriul-argument, iar dacă nu, atunci vor rămâne doar cei care nu satisfac. De obicei, este logic să folosiți operația nu, din moment ce criteriul de funcționare filtra de obicei ușor de combinat cu un selector de funcții de bază $() . Iată câteva exemple de utilizare a acestor operații:
    $(“div”).not(“.class_name”) – excludeți totul div clasă nume_clasă;
    $(„td, th, div”).filter(„.class_name”) – selectați elemente td, th, div clasă nume_clasă.

    Există și operațiunea slice(from, to) , care vă permite să selectați o secvență de elemente cu indici din intervalul [ din - la].

    Acţiune- aceasta este, de fapt, acțiunea în sine - o operațiune pe un set de elemente selectate. Fiecare operație returnează un anumit rezultat: fie același set, dacă operația nu implică crearea de elemente noi sau ștergerea elementelor selectate, fie un set deja editat, fie un set de elemente nou create. Datorită acestui lucru, puteți specifica mai multe operații simultan, separate prin puncte. Exemplul de mai jos va selecta toate elementele span, nu are legătură cu clasa nume_clasăși le copiază în elementul cu id ţintă:
    $("span").not(".class_name").clone().appendTo("#target");

    Rezultatul fiecărei operații este matrice de elemente HTMLElement. Mărimea unui tablou poate fi găsită folosind proprietatea length sau funcția size(). Argumentele operației pot fi nu numai parametri șir, ci și rezultatele altor interogări. Iată un exemplu despre cum rezultatul unei interogări poate fi plasat în interiorul unui element, care, la rândul său, este rezultatul unei alte interogări:
    $("span").not(".class_name").clone().appendTo($("span.class_name"))

    Puteți utiliza nu întregul rezultat al interogării ca argument, ci un element separat al acestuia:
    $("span.class_name").append($("span").not(".class_name"));

    Astfel, argumentul operației poate fi fie un selector ca șir, fie rezultatul unei alte interogări sau orice instanță HTMLElement.

    operațiuni jQuery

    Mai jos sunt tabele pivot cu operațiuni jQuery, ale acestora scurtă descriereși link-uri către exemple care demonstrează aplicarea lor în practică.

    Proprietăți

    Obțineți sau setați valorile diferitelor proprietăți ale elementelor selectate. Dacă trebuie să definiți o nouă valoare a proprietății, ar trebui să o transmiteți ca argument, de exemplu, $(“#element”).text(text_value) sau $(#element”).html(html_value) :

    Nume Descriere Exemplu
    text()Text.-
    offset()Offset (stânga, sus)., funcție de mișcare a mingii minge.mutare(): $("#ball").offset((left:$("#ball").offset().left + this.dx, top:$("#ball").offset().top + this. dy)); Această funcție este apelată la un temporizator la fiecare 10 milisecunde.
    latime(), inaltime()Latime si inaltime.-
    html()markup html în interiorul elementelor selectate.

    În lecțiile anterioare am discutat această întrebare concepte generale jQuery și cum să-l conectați.
    Acest articol se va concentra pe utilizarea selectoarelor în jQuery (CSS și XPath), care vă permit să selectați ușor și precis unul sau mai multe elemente DOM. Fiecare selector va avea un cod și un exemplu de aplicare a acestuia. Utilizarea selectoarelor jQuery nu provoacă probleme la lucrul în browsere mai vechi, cum ar fi IE 6, deoarece conține mecanisme de lucru CSS 1-3.

    Structura codului jQuery Semnul dolar $ - indică utilizarea jQuery, selector - element DOM cu care lucrăm și o funcție specială jQuery cu parametrii ei (de exemplu, animație, implementare, mișcare etc.).

    Exemplu de cod jQuery

    $(selector).funcție(parametri);

    Selectori în jQuery În această lecție ne vom opri în detaliu asupra problemei selectoarelor. Ce este asta?

    Selector(din engleza select - alege) - acestea sunt elementele DOM-ului (model obiect document, de exemplu, tag-uri sau blocuri special marcate) carora le adresam cererea. Acest concept există în JavaScript, CSS și alte limbi în care trebuie să selectați un anumit element și să lucrați cu proprietățile acestuia.

    Identificatori (id).

    Dacă doriți să lucrați cu un anumit element și doar o dată(în teorie, deoarece în practică unele browsere nu vor disprețui reutilizarea identificatorului), atunci îi atribuim un id unic.

    cod HTML

    #id- selectează singurul element cu identificatorul transmis (id). În acest caz special

    Cod jQuery


    $("#special").css("chenar", "1px negru solid");

    Pe viitor voi scrie fără etichete, sper să fie clar că JavaScript ar trebui să fie inclus în ele. În exemplu, selectăm elementul cu id special, în acest caz este un div. În ea folosim funcția css și creăm o chenar (border) neagră continuă (solidă) de 1 pixel.

    Clasele.

    .clasă- selectați toate elementele cu clasa specificată. Așa e, pot fi mai multe dintre ele. Principalul lucru este că numele clasei este același.

    cod HTML

    Primul bloc
    Al doilea bloc
    După cum puteți vedea, există două elemente (div) și au aceleași clase.

    Cod jQuery

    $(".spec_class").css("chenar", "1px roșu continuu");
    Pentru toate elementele unde valoarea clasei spec_class sunt create și aceleași chenare ca în exemplul anterior, dar roșii.

    Elemente.

    Sunt selectate toate elementele de un anumit tip. Este fie corp, sau toate div-urile, sau toată masași așa mai departe.

    Cod jQuery

    $("div").css("chenar", "1px verde continuu");
    U toate div-urile Va apărea un cadru verde.

    * (toate elementele) - selectați absolut toate elementele. Chiar capŞi corp.

    Cod jQuery

    $("*").css("chenar", "1px albastru solid");
    Toate elementele din documentul dvs. vor avea un chenar albastru.

    $("*", document.body).css("border", "2px solid black");
    Selectați toate elementele din corp și dați-le un chenar negru de 2 pixeli.

    După tip: selector1, selector2, ..., selectorN - listăm toate elementele. Mai jos este un exemplu interesant de utilizare împreună a selectoarelor.

    Cod jQuery

    $("div, span, p.spec_class").css("border", "1px solid red");
    Selectează toate elementele div, span și p care au specificat spec_class. Toți selectoarele sunt pur și simplu specificate, separate prin virgule.

    Selectori ierarhici în descendentul jQueryancestor

    Se selectează elementul principal (elementul părinte) și elementele incluse în acesta (descendenții). Să ne uităm la exemplul de mai jos al părintelui formăși descendenți selecta.

    Cod jQuery

    $("selectare formular").css("chenar", "1px negru punctat");
    Toate elementele selectate și formați descendenți vor avea un chenar punctat negru.

    părinte-copil

    Acum să selectăm toți copiii elementului părinte.

    Cod jQuery

    $("#id > *").css("chenar", "1px dublu negru");
    În primul rând, selectăm toți moștenitorii elementului cu id, apoi creați o chenar negru dublu cu acesta.

    anterior și următor (anterior și următor)

    Indicăm elementele care urmează (următorul) după elementul desemnat anterior (prev).

    Cod jQuery

    $("etichetă + intrare").css("culoare", "albastru").val("Terminat!");
    Selectați elementele de intrare după etichetă. Le setăm proprietățile CSS - culoarea este sub formă de negru, iar valoarea (.val) este setată Gata!

    prev ~ fraţi

    Acum lucrăm cu elemente surori. Găsiți toate surorile care urmează elementului anterior (anterior).

    Cod jQuery

    $("#prev ~ div").css("chenar", "3px groove blue");
    Căutăm toate elementele div care sunt frați unul cu celălalt și urmăm imediat elementul cu ID #prev. Vă rugăm să rețineți că exemplul nu va selecta elemente span, deoarece selecția este doar pentru elemente div.

    Filtre de bază: în primul rând

    Va fi selectat primul element cu selectorul specificat.

    Cod jQuery

    $("tr:first").css("font-style", "bold");
    În primul rând (tr) din tabel, textul va fi evidențiat cu caractere aldine.

    Acum vom selecta ultimul element cu selectorul specificat.

    Cod jQuery

    $("tr:last").css((culoarea fundalului: "galben", greutatea fontului: "mai îndrăzneață"));
    Găsiți ultima linie (tr) din tabel și pictați fundalul în galben și setați, de asemenea, fontul aldine (mai îndrăzneț).

    :nu(selector)

    Folosirea negației filtrează elementele. Selectați toate intrările care nu au o casetă de selectare, precum și intervalele care le urmează

    Cod jQuery

    $("input:not(:verificat) + span").css("culoare-fond", "galben");
    Sensul casetelor de selectare nu se schimbă.

    Atenţie! Interesant exemplu, pe care fiecare a doua persoană îl folosește în practica sa. Cum să alegi elementele pare sau impare? Apoi, trebuie să faceți lizibile liniile din text sau chiar codul. Valoarea de pornire 0.

    Cod jQuery

    $("tr:even").css("culoarea de fundal", "#с1с1с1");
    Selectați rânduri pare din tabel. Prima, a treia, etc. linii vor fi evidențiate. Atenţie! Numărarea se face pe bază de indici, iar în ei primul rând are valoarea 0. În continuare, sunt selectate rânduri cu indici 0, 2, 4 etc.).

    Acum selectăm elementele ciudate. Valoarea indicelui se calculează pornind de la 0. Valorile 1,3,5,7 etc. vor fi selectate corespunzător. Aceasta corespunde liniilor 2,4,6 etc., deoarece sunt numărate după fapt, din prima.

    Cod jQuery

    $("tr:odd").css("culoarea fundalului", "#с1с1с1");
    Fundalul liniilor impare este colorat în gri.

    :eq(index)

    Selectați un index de element specific. În exemplu, vom colora doar un rând al tabelului.

    Cod jQuery

    $("td:eq(2)").css("culoare", "albastru");
    Selectăm elementul 2 după index Permiteți-mi să vă reamintesc că aceasta va fi a treia linie, deoarece va fi al treilea indice (0,1,2).

    :gt(index)

    Acum selectăm valori de index care sunt mai mari decât cele specificate în selector.

    Cod jQuery

    $("td:gt(4)").css("decorarea textului", "line-through");
    Selectăm rânduri din tabel al căror indice de element este mai mare de 4, adică indicele lor este 5,6 etc. Aceasta corespunde cu 6, 7, etc. elemente care apar, în cazul nostru rânduri de tabel.

    :lt(index)

    Acum selectăm valori ale indexului care sunt mai mici decât cele specificate în selector.

    Cod jQuery

    $("td:lt(3)").css("culoare", "roșu");
    Toate elementele td cu indice m sunt selectate De exemplu, căutăm toate elementele TD cu un indice mai mic de 3. Deoarece numărarea, vă reamintesc încă o dată, este de la zero, acestea sunt rânduri de tabel (td) 1,2. ,3.

    Vor fi selectate toate elementele care sunt titluri (h1,h2,h3 etc.).

    Cod jQuery

    $(":header").css(( fundal:"#c1c1c1", culoare:"#0085cc" ));
    Pentru toate titlurile (elementele h) vom seta fontul la albastru și fundalul la gri deschis.

    :animat

    Toate elementele care sunt animate în prezent vor fi selectate.

    cod HTML

    Faceți primul div roșu
    Cod jQuery

    $("#run").click(function())(
    $("div:animat").toggleClass("colorat");
    });
    funcția animateIt() (
    $("#mover").slideToggle("lent", animateIt);
    }
    animateIt();
    Aici exemplul este puțin mai complicat. După ce facem clic pe buton, schimbăm culoarea elementului animat (div). Nu există modificări la elementele neanimate.

    Să ne uităm la un exemplu simplu despre cum funcționează selectoarele în jQuery. Fișierul este complet gata de utilizare, trebuie doar să copiați întregul cod în fișierul html creat. Biblioteca din exemplu este conectată de la serverul Google, așa că pentru ca fișierul să funcționeze corect, veți avea nevoie de o conexiune la Internet. Sub cod există o versiune demo pentru vizionare.



    jQuery

    #polosa1( poziție: relativă; fundal: alb; lățime: 200px; înălțime: 50px; chenar-sus: solid 1px #000; )
    #polosa2( poziție: relativă; fundal: albastru; lățime: 200px; înălțime: 50px; )
    #polosa3(poziție: relativă; fundal: roșu; lățime: 200px; înălțime: 50px; chenar-jos: solid 1px #000; )


    funcția addFlag1())(
    $("div:eq(0)").css("fond", "alb");
    $("div:eq(1)").css("fond", "verde");
    $("div:eq(2)").css("fondul", "roșu");
    }
    funcția addFlag2())(
    $("#polosa1, #polosa3").css("fondul", "roșu");
    $("#polosa2").css("fond", "alb");
    }
    funcția addFlag3())(
    $("div").css("fondul", "roșu");
    }

    Un exemplu de funcționare a selectoarelor jQuery



    Steagul Bulgariei
    Steagul Austriei
    Steagul URSS



    Demonstrație Descărcați surse
    Vă mulțumim pentru atenție! Mult succes in demersurile tale!

    JQuery HTML este o bibliotecă concepută pentru a „scrie mai puțin și face mai mult”. Nu este un limbaj de programare, ci un instrument folosit pentru a face sarcinile JavaScript comune mai ușor de implementat.

    JQuery are avantajul suplimentar de a fi compatibil între browsere. Poți fi sigur că codul tău va fi interpretat în orice browser modern.

    Comparând scrierea unui program simplu „Hello, World!

    " folosind JavaScript și jQuery, puteți vedea diferența dintre ele.

    JavaScript

    document.getElementById("demo").innerHTML = "Bună ziua, lume!";

    JQuery

    Acest exemplu scurt ilustrează modul în care folosind jQuery puteți obține același rezultat ca JavaScript standard, dar mai concis.

    Goluri

    Acest tutorial nu presupune cunoștințe de bază despre jQuery, dar acoperă următoarele subiecte:

    • Cum se instalează jQuery într-un proiect web;
    • Definiți concepte importante de dezvoltare web, cum ar fi API, DOM și CDN;
    • Selectoare, evenimente și efecte jQuery obișnuite;
    • Exemple pentru a testa conceptele învățate în acest articol.
    Configurare jQuery

    JQuery este fișierul JavaScript la care vă veți conecta în documentul dvs. Cum se conectează JQuery la HTML:

    • Descărcați o copie locală;
    • Adăugați un link către un fișier printr-o rețea de livrare de conținut (CDN).

    Nota. O rețea de livrare de conținut (CDN) este un sistem de mai multe servere care servesc utilizatorului conținut web pe baza acestora localizare geografică. Când conectați la un fișier jQuery printr-un CDN, acesta va fi oferit utilizatorului mai rapid și mai eficient decât dacă ar fi găzduit pe propriul dvs. server.

    În exemplele noastre vom folosi linkul jQuery prin CDN. Ultima versiune jQuery poate fi găsit pe Google. Dacă doriți să descărcați biblioteca, puteți obține o copie a jQuery de pe site-ul oficial.

    Să creăm un mic proiect web. Acesta va consta dintr-un fișier style.css, scripts.js și un fișier principal index.html.


    Setați marcajul HTML de bază și salvați-l în index.html .

    Index.html

    jQuery Demo

    Index.html

    jQuery Demo

    Scriptul JavaScript (scripts.js) trebuie să fie inclus în documentul de sub biblioteca jQuery, altfel nu va funcționa.

    Nota. Dacă ați descărcat o copie locală a jQuery, salvați-o în folderul js/ și conectați-o prin linkul js/jquery.min.js.

    Biblioteca jQuery adăugată la HTML și avem acces complet la API-ul jQuery.

    Folosind jQuery

    jQuery este folosit pentru a se conecta la elemente HTML din browser prin intermediul DOM.

    Document Object Model (DOM) este metoda prin care JavaScript (și jQuery) interacționează cu HTML în browser. Pentru a vedea ce este DOM, în browser, faceți clic dreapta pe pagina web curentă și selectați „Vizualizare cod”. Aceasta va deschide panoul „Instrumente pentru dezvoltatori”. Codul HTML pe care îl vedeți în el este DOM.

    Fiecare element HTML este considerat un nod DOM - un obiect care poate fi accesat de JavaScript. Aceste obiecte au o structură arborescentă, cu elementul cel mai apropiat de rădăcină și fiecare element o ramură a arborelui. JavaScript poate adăuga, elimina și modifica oricare dintre aceste elemente.

    Dacă dați din nou clic dreapta și selectați „Vizualizare sursă”, veți vedea HTML brut. La început s-ar putea să fii confuz cu privire la codul sursă DOM și HTML, dar sunt lucruri diferite. Codul sursă al paginii se potrivește exact cu ceea ce este scris în fișierul HTML. Este static și neschimbător și nu este afectat de JavaScript. La rândul său, DOM-ul este dinamic și se poate schimba.

    Stratul exterior DOM, care cuprinde întregul nod, este obiectul documentului. Pentru a utiliza jQuery pe o pagină, trebuie să vă asigurați că documentul este „gata”.

    Creați un fișier scripts.js în folderul js/ și adăugați următorul cod la acesta:

    js/scripts.js

    Tot codul jQuery inserat în HTML va fi împachetat în codul de mai sus. Va funcționa numai odată ce DOM-ul este gata pentru executarea codului JavaScript. Chiar dacă în unele cazuri JavaScript nu se va încărca până când elementele nu sunt randate, includerea acestui bloc este considerată cea mai bună practică.

    Pentru a rula scriptul „Hello, World!” și afișam text în browser folosind jQuery, mai întâi creăm un element de paragraf gol cu ​​demo-ul de identificare aplicat acestuia.

    Index.html

    ... ...

    JQuery este apelat și este indicat printr-un semn dolar ($). Accesăm DOM cu jQuery folosind sintaxa CSS și aplicăm acțiunea cu metoda:

    $("selector").method();

    Deoarece un identificator în CSS este reprezentat de simbolul (#), accesăm identificatorul demo folosind selectorul #demo. html() este o metodă care modifică marcajul HTML în interiorul unui element.

    Acum vom plasa programul „Hello, World!

    js/scripts.js

    " în wrapper-ul jQuery ready(). Adăugați această linie la funcția dvs. existentă în fișierul scripts.js:

    $(document).ready(function() ( $("#demo").html("Bună ziua, lume!"); ));

    După salvarea modificărilor, puteți deschide fișierul index.html în browser. Dacă totul funcționează corect, veți vedea inscripția „Hello, World!

    »

    Faceți clic dreapta pe „Hello, World!”

    " și selectați " Vizualizare cod ". Acum se afișează DOM

    Selectorii sunt modul în care spunem jQuery HTML cu ce elemente dorim să lucrăm. Puteți vizualiza o listă completă a selectorilor jQuery în documentația oficială.

    Pentru a accesa un selector, utilizați simbolul $ urmat de paranteze ().

    $(„selector”)

    Sunt preferate șirurile ghilimele duble (conform manualului jQuery). Deși se folosesc adesea șiruri cu ghilimele simple.

    Mai jos este scurtă prezentare generală selectoare utilizate frecvent.

    • $("*") - wildcard: selectează fiecare element din pagină;
    • $(this) - current : selectează elementul curent în care este manipulat în acest momentîn interiorul unei funcții;
    • $("p") - tag: selectează toate instanțele etichetei

      ;

    • $(".example") - class: selectează toate elementele cărora li se aplică clasa exemplu;
    • $("#example") - identificator: selectează o instanță cu un exemplu de identificator unic;
    • $("") - atribut: selectează toate elementele al căror atribut de tip este setat la text;
    • $("p:first-of-type") - pseudo-element: selectează primul element

      .

    Când conectați JQuery la HTML, veți avea de-a face cu clase și ID-uri. Clasele sunt folosite atunci când trebuie să selectați mai multe elemente, iar identificatorii atunci când trebuie să selectați doar unul.

    Evenimente jQuery

    În exemplul „Hello, World!

    „Codul a rulat când pagina a fost încărcată și documentul era gata, așa că nu a necesitat nicio intervenție a utilizatorului. În acest caz, am putea scrie textul direct în HTML, fără jQuery. Dar va trebui să folosim jQuery dacă dorim ca textul să apară pe pagină după un clic de mouse.

    Reveniți la fișierul index.html și adăugați un element la acesta. Vom folosi acest buton pentru a urmări evenimentul clic.

    index.html

    ...Clic pe mine

    js/scripts.js

    Folosim metoda click() pentru a apela o funcție care conține codul „Hello, World! "

    $(document).ready(function() ( $("#trigger").click(); ));

    ID-ul elementului este trigger, îl selectăm folosind $("#trigger"). Adăugând click() ascultăm evenimentul clic. Apoi apelăm o funcție care conține codul nostru în cadrul metodei click().

    function() ( $("#demo").html("Bună ziua, lume!"); ) Aici cod complet

    js/scripts.js

    Element HTML jQuery.

    $(document).ready(function() ( $("#trigger").click(function() ( $("#demo").html("Salut, lume!"); )); ));

    Un eveniment este orice interacțiune a utilizatorului cu browserul folosind mouse-ul sau tastatura. Exemplul pe care tocmai l-am creat folosește un eveniment de clic. Consultați documentația oficială jQuery pentru o listă completă a metodelor de evenimente jQuery. Mai jos este o listă de evenimente frecvent utilizate.

    • click() - click: apare cu un singur clic de mouse;
    • hover() - hover: apare atunci când cursorul mouse-ului trece peste un element;
    • submit() - submit: apare atunci când sunt transmise datele formularului;
    • scroll() - defilare: apare la derularea unei pagini sau a unui element;
    • keydown() - apăsare tasta: apare atunci când apăsați o tastă de pe tastatură.

    Pentru a anima sau a ascunde elemente pe măsură ce utilizatorul derulează pagina, utilizați metoda scroll().

    Pentru a ieși dintr-un meniu folosind tasta ESC, utilizați metoda keydown(). Pentru a crea un meniu derulant sau pentru a adăuga HTML la un div folosind JQuery, se folosește metoda click().

    Efecte jQuery

    Efectele jQuery vă permit să adăugați animație și să manipulați elemente pe o pagină.