JQuery Lecția 5

În primul rând, să ne uităm la metodele de bază de lucru cu html. și apoi metodele de manipulare a acestor elemente. Deci, principalele metode:
  • html (val) - adaugă codul html la elementele selectate.
    exemplu:






Această instrucțiune va adăuga tuturor divs cu clasa sp, span-s cu textul "Hello".

  • text () / val () - returnează conținutul textului elementului / valorii elementului.
    exemplu:

    Această instrucțiune va returna textul din paragraf.

  • text (val) / val (val) - setează textul elementului / valorii elementului.
    exemplu:

    Această instrucțiune din paragraf va scrie cuvântul "Hello!".

    • De exemplu, asigurați-vă că când faceți clic pe butonul "Repetare", textul din primul paragraf este duplicat în al doilea paragraf.

    Textul primului paragraf!

    Textul primului paragraf!

    Funcția va arăta astfel:

    Ie Mai întâi, în variabila tp1, vom scrie conținutul textului din primul paragraf (primul rând), apoi îl vom transmite paragrafului al doilea (al doilea rând).

    Acum, să examinăm metodele care permit manipularea elementelor inserate.
    • append (content) - adaugă conținut la toate elementele selectate DUPĂ conținutul existent.
      exemplu:

    Această instrucțiune va adăuga textul "Bună ziua" la sfârșitul paragrafului cu caractere aldine.

  • appendTo (content) - operație inversă, adaugă toate elementele selectate la conținut.
    exemplu:

    Această instrucțiune va adăuga un paragraf la sfârșitul elementului cu identificatorul "principal".

    Cu alte cuvinte:
    $ (A) .append (B) - adaugă B la sfârșitul lui A.
    $ (A) .appendTo (B) - adaugă A la sfârșitul lui B.

  • prepend (conținut) - adaugă conținut la toate elementele selectate ÎNAINTE de conținutul existent.
    exemplu:

    Această instrucțiune introduce textul "Bună ziua" cu caractere aldine la începutul paragrafului.

  • prependTo (conținut) - operație inversă, adaugă toate elementele selectate conținutului.
    exemplu:

    Această instrucțiune introduce un paragraf la începutul elementului cu identificatorul "principal".

    Cu alte cuvinte:
    $ (A) .prepend (B) - adaugă B la începutul lui A.
    $ (A) .prependTo (B) - adaugă A la partea B.

  • după (conținut) - adaugă conținut DUPĂ toate elementele selectate (notați după element și nu la sfârșitul elementului, ca în cazul anexei.
    exemplu:

    Această instrucțiune introduce după paragraf textul "Hello" cu caractere aldine.

  • befor (conținut) - adaugă conținut la toate elementele selectate (notați elementul UP, nu începutul elementului, ca în cazul prepend.
    exemplu:

    Această instrucțiune introduce textul "Salut" înainte de paragraful cu caractere aldine.

  • insertAfter (conținut) - introduce toate elementele selectate după conținutul.
    exemplu:

    Această instrucțiune introduce un paragraf după elementul cu identificatorul "principal".

    Cu alte cuvinte:
    $ (A). După (B) - inserțiile B după A.
    $ (A) .insertAfter (B) - inserați A după B.

  • insertBefore (conținut) - introduce toate elementele selectate înainte de conținut.
    exemplu:

    Această instrucțiune introduce un paragraf înaintea elementului cu identificatorul "principal".

    Cu alte cuvinte:
    $ (A). Înainte (B) - introduceți B înainte de A.
    $ (A) .insertBefore (B) - introduceți A înainte de B.







    • Să luăm în considerare un exemplu. Să facem ca atunci când faceți clic pe butonul "Adăugați", pătratele galbene apar în dreptunghiul roșu (un clic - un pătrat).

    Codul paginii html constă dintr-un buton div și un singur buton:

    Pe pagina style.css definim întotdeauna stilurile:

    Ei bine, codul funcției în sine este foarte scurt:

    funcția addYellowSquare ()<$("#red_sk").prepend("

    Este atât de simplu. Dar vom continua să analizăm metodele în sine:
    • wrap (html) împachetează fiecare element din elementul de înfășurare.
      exemplu:

    Această instrucțiune va împacheta fiecare paragraf span-ohm.

  • wrapAll (html) - împachetează toate elementele într-un singur element de înfășurare.
    exemplu:

    Această instrucțiune va împacheta toate paragrafele cu un singur span-ohm.

    Această instrucțiune va evidenția conținutul fiecărui paragraf în caractere cursive.

  • replaceWith (conținut) - înlocuiește unele elemente cu altele.
    exemplu:

    Această instrucțiune va înlocui toate divs-urile.

  • replaceAll (selector) - funcționare inversă, adică toți selectorii vor fi modificați în elemente.
    exemplu:

    Această instrucțiune va înlocui toată durata div-s.

  • empty () - elimină din element toate nodurile descendente, inclusiv textul.
    exemplu:

    Această instrucțiune va elimina întregul conținut al intervalului.

  • remove () - șterge elementele ele însele.
    exemplu:

    Această instrucțiune va elimina toată deschiderea.

  • clone () elemente clone.
    exemplu:

    Această instrucțiune va lua elementele evidențiate cu caractere aldine și le va adăuga la div.

    • În ultimul exemplu, am atins un alt aspect al jQuery, și anume sprijinul acestei biblioteci de lanț de apeluri. Ie Puteți apela mai multe metode pe o singură linie, separându-le cu o perioadă. Este convenabil? Depinde de tine. Dacă acest lucru nu vă deranjează, utilizați-l pentru sănătate. În viitor, vom folosi adesea acest tip de înregistrare.

    În cele din urmă, să facem un alt exemplu. Să avem o listă și dorim să permitem utilizatorilor să adauge elemente la ea:

    Orașele noastre:
    • Arkhangelsk
    • Moscova
    • Irkutsk
    Completați lista: jQuery html
  • Orașele noastre:
    • Arkhangelsk
    • Moscova
    • Irkutsk
    Completați lista:

    Este atât de ușor să faci multe lucruri cu jQuery. Știți deja destul, încercați să faceți ceva însuți utilizând metodele studiate. De exemplu, încercați să desenați o tablă de șah (8 x 8 celule, pentru cei care nu-și amintesc) și data viitoare vom vedea cum se poate face.

    Dacă acest site a fost util pentru dvs., puteți contribui la dezvoltarea acestuia punând unul dintre aceste link-uri pe site-ul dvs.







    Articole similare

    Pagina anterioară

    Pagina următoare

    Trimiteți-le prietenilor: