În această lecție versat 3 metoda jQuery, care sunt proiectate pentru a lucra direct cu conținutul de elemente:
- html () pentru a citi și modifica codul HTML al elementului
- text () pentru a citi și schimba conținutul textului elementului
- val () pentru a citi și modifica valorile câmpurilor de formular
Funcționează cu cod HTML: html ()
Am citit codul HTML al elementului
Pentru a citi codul HTML al elementului, selectați mai întâi elementul ca un obiect jQuery, apoi apelați metoda html () pentru obiect. De exemplu, următorul cod selectează elementul p (paragraf) din pagină, apoi metoda html () este apelată pentru a scoate conținutul HTML al elementului:
Codul afișează o casetă de mesaj care afișează linia codului HTML al elementului:
Înlocuirea conținutului HTML al unui element
Puteți înlocui marcarea HTML cu un șir nou cu cod HTML. În exemplu, paragraful este înlocuit în elementul div cu un antet nou și un paragraf:
Dacă apelați metoda html (newHTML) pentru un set de mai multe elemente selectate, conținutul fiecărui element va fi înlocuit cu șirul newHTML.
Folosind funcția de a înlocui conținutul HTML al unui element
În loc să treci un șir de înlocuire în metoda html (). puteți trece funcția de returnare. Funcția trebuie să accepte două argumente:
Valoarea returnată este utilizată pentru a înlocui codul HTML.
Executarea codului va duce la următoarea concluzie:
- Când conținutul unui element este citit folosind metoda text (). toate etichetele HTML sunt separate de text.
- Când metoda text () este folosită pentru a înlocui conținutul unui element, toate etichetele HTML din șirul de înlocuire sunt decodificate astfel încât să fie afișate pe pagină.
citirea conținutului textului
Codul eșantionului va afișa o casetă de mesaje. tag-uri și vor fi excluse din text:
Înlocuim textul conținutului elementului
Metoda text () funcționează ca metoda html (). când trebuie să înlocuiți conținutul conținutului. Diferența este că orice etichete HTML vor fi decodificate pentru a fi afișate pe pagină, nu pentru a forma elemente.
Un exemplu de script care se bazează pe exemplul de utilizare a metodei html (). pentru a înlocui conținutul unui paragraf cu alt text:
Și asta va fi afișat. tag-uri
.
și va fi pur și simplu afișată ca text, mai degrabă decât formând un titlu, paragraf și link:
Utilizarea funcției de înlocuire a textului
Ca și în metoda html (). puteți utiliza funcția cu metoda text () dacă doriți să înlocuiți conținutul în funcție de poziția sau conținutul acestuia. Mai jos este un exemplu de „antete numerotate“ care utilizează text () metoda în locul metodei html () și este utilizat simbolul „>“ ca separator în loc de un punct:
Rezultatul codului va arăta astfel:
Dacă executați codul de mai sus si uita-te la codul sursă HTML, veți găsi că metoda de text () a decodat simbolul „>“ atât „gt;“.
Lucrul cu valorile câmpurilor formularului: val ()
Acum, ia în considerare metoda val (). Funcționează ca o metodă text (). dar este folosit pentru a citi și modifica valorile câmpurilor de formular, mai degrabă decât conținutul text al elementelor.
Un exemplu care demonstrează valorile de citire și de scriere a câmpurilor de formulare folosind metoda val ().
Codul afișează mai întâi o casetă de mesaj care afișează valorile implicite ale câmpurilor de formular. listă, câmp de introducere a textului și un grup de butoane de selectare:
Apoi codul schimbă produsul selectat în "MegaWidget", numărul este de 4, iar livrarea expresă la "nu".
În exemplul de mai sus, butonul de selecție #expressNo este marcat prin apelarea metodei attr () pentru a seta atributul butonului selectat. deoarece metoda val () nu poate schimba starea butonului de selectare sau a casetei de selectare.
Când utilizați metoda val (), rețineți următoarele:
În această lecție au fost examinate trei metode de jQuery pentru a manipula conținutul elementelor HTML:
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: