Web Design Ieftin

Schimbare DIV si Imagine cu JQuery

» Scris in categoria: JQuery, JavaScript — @ 6:30

JQuery este o biblioteca, o platforma de dezvoltare javascript  care imbunatateste procese precum transferarea arborelui DOM in HTML si care iti usureaza foarte mult munca, reducand lucrul cu acel cod Javascript pur.

Avantajele JQuery sunt foarte multe, printre ele fiind si dimensiunea redusa a codului (scriptul JQuery fiind foarte mic) cat si compatibilitatea cu aproape toate browserele.

Voi posta de acum inainte mai multe articole despre JQuery, dar trebuie sa incepem cumva si am ales un script prin care puteti schimba continului unui DIV (fara a reincarca pagina), un text, cat si atributele unei imagini (src, sau orice alt atribut).

Pentru inceput avem nevoie de biblioteca propriu-zisa. Aceasta se poate lua de aici  http://code.jquery.com/jquery-1.4.4.min.js sau se poate “adauga” in site folosind Google (avantajul este ca se va incarca mult mai repede, google avand garantat o viteza mai buna de download ca dvs si cate un server cam pentru fiecare locatie a utilizatorului):

https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

Varianta recomandata de a folosi JQuery prin google este urmatoarea:

<script type="text/javascript"
        src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
   google.load("jquery", "1.4.4");
</script>

Exista mai multe metode, si diferite functii care pot fi adaugate, insa vom vorbi alta data despre asta, ca prea lungesc articolul.

Un prim script, dupa cum spuneam este urmatorul:

Cod Jquery:

<script type="text/javascript">
	$(function(){
		$("#schimba").click(function(){	

			var newSrc = $("#poza1").attr("src").replace("test", "poza");
			$("#poza1").attr("src", newSrc);	

			var divUnu = $("#unu").html().replace("<b>Text</b> div numarul 1", "<b>Text Schimbat</b> din div nr 1");
			$("#unu").html(oneDiv);

                        var textVechi = "blog valmindesign!";
                        var textNou = oldText.replace("blog", "cu articole si tutoriale");
                        $("#doi").text(textNou);

		});
                        $("#refresh").click(function(){
	   	        location.reload();
		});     

	});
</script>

Iar codul HTML va fi urmatorul:

    <img id="poza1" src="test.jpg" alt="imagine" />

    <div id="unu">
    <b>Text</b> div numarul 1
    </div>

    <div id="doi">
    div numarul 2
    </div>

    <button id="schimba"> Schimba </button>
    <button id="refresh"> Refresh </button>

Rezultatele acestui script jQuery vor fi urmatoarele:

1. Sursa imaginii cu ID poza1 va fi schimbata din test.jpg in poza.jpg. Deasemenea tot in acest mod se poate modifica orice alt atribut acceptat de img (din cate am observat eu mai putin daca aveti la vreo poza atr onLoad. In loc de id=”poza1″ poate fi si class=”poza1″ si atunci in scriptul de mai sus inlocuiti “#poza1″ cu “.poza1″.

2. <b>Text</b> div numarul 1 (din div-ul cu id=”unu”) va fi schimbat in Text Schimbat</b> din div nr 1.

3. Textul din div-ul doi se va schimba din “div numarul 2″ in blog valmindesign!, iar cuvant blog inlocuit cu “cu articole si tutoriale”.

Sper ca ati inteles ce am spus, codul jquery este usor de interpretat.

Aici veti gasi un exemplu: Exemplu Shimbare Div si Imagine

Comentarii (0)