jQuery – Notiuni de baza

efecte jQuery, invata Javascript, invata jQuery, javascript, jQuery

Sa vedem cateva chestiuni simple referitoare la jQuery.

Prima data vom vedea cum se face selectia unui element.

$('element').actiune();

Element poate fi un id (#element), o clasa (.element) sau chiar o componenta a DOM-ului. Puteti inlocui $ cu jQuery iar rezultatul va fi acelasi. Se foloseste si aceasta notatie pentru a evita diferite conflicte ce pot aparea intre script-uri.

Acum, dupa ce am selectat elementul de care suntem interesati, sa vedem ce ii putem face. Sa consideram ca am facut selectia pentru:

<p id="test"></p>

Sa adaugam putin continut in cadrul acestui paragraf.

$(‘#test’).html(‘Vom adauga acest text in paragraf.’);

Dupa cum observati, folosind functia .html() putem adauga orice tip de text, chiar si sectiuni de cod HTML.

Acum sa stergem acel text.

$('#test').html('');
$('#test').empty();

Ambele structuri vor elimina tot continutul din paragraf.

Sa vedem cum putem pastra continutul initial al paragrafului, putand astfel sa revenim oricand la el fara prea mare bataie de cap. Pentru aceasta ne vom folosi de .data:

$('#test').data('initial', $('#test').text());

Astfel vom stoca valoarea de baza a paragrafului in variabila initial. Puteti testa daca totul a decurs ok folosind un alert.

alert($('#test').data('initial'));

Sa vedem si o aplicatie practica a celor de mai sus. Sa consideram structura HTML urmatoare:

<p id="test">Acesta este textul initial.</p>
<input type="button" id="reset" value="Reseteaza" />
<input type="button" id="modifica" value="Modifica text" />

Iar codul jQuery:

<script type="text/javascript">
jQuery(document).ready(function () {
	$('#test').data('initial', $('#test').text());
	$('#modifica').click(function () {
		var text = prompt("Adauga noul text", "Adauga aici noul text pentru afisare");
		$('#test').html(text);
	});
	$('#reset').click(function () {
		$('#test').html($('#test').data('initial'));
	});
});
</script>

Rezultatul va fi urmatorul:

Acesta este textul initial.

Sper ca ati gasit folositor acest articol.

Ti-a placut articolul jQuery – Notiuni de baza?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

• Animatii jQuery pentru text
• jQuery tooltip cu imagini
• Sistem multi-language folosind jQuery
• Casute animate folosind jQuery
• Bifeaza toate checkbox-urile folosind jQuery