Javascript din’ obektli modeli tu’sinigi
Klient tarepindegi betti jaratiwdi basqariwda hujjettin’ obektli mexanizminan paydalanilg’an. Bulnda har bir HTML-konteyner-bul obekt esaplanadi ha’m to’medegishe u’shlikti payda etedi:
qasiyetler
usillar
jag’daylar
Obektkli model betler ha’m brauzerler ortasindagi baylanis sipatinda ko’riniwi mumkin. Obektli model – bul HTML kod arqali berilgen elementlerdi obekt, usil, qasiyet ha’m jagdaylar korinisinde tanis ha’m olar menen islew demektir. Ol jardeminde biz brauzerge ha’m paydalaniwshiga mura’jet qiliwimiz, xabarlar jiberiwimiz mumkin. Brauzer bizdin’ bul bulyriqlarimizdi orinlaydi ha’m ekranda betdin’ kerekli bolekelrin o’zgerttiredi.
JQuerydin’ tiykarg’I tu’sinigi ha’m qabilyeti
jQuery - bir Javascript - biblioteka Javascript, HTML ha’m CSS o’z-ara ajratilgan. jQuery ne isley aladi 1. Har qanday elementti DOM (hujjet ob'ekt model) kiritin' ha'm tek dawalaw emes balkim olardi manipulyatsiya qiliw. 2. Waqiyalar menen islew. 3. Basqa ko'rgezbeli ta'sir amelge asiriw an'sat. 4. AJAX benen islew (betti qayta juklemesten server menen baylanis qiliw imkanin beretug'in texnologiyasi juda paydali). 5. Javascript paydalaniwshi interfeysi elementleri jaratiw ushin Plug-ins u'lken tsifrasi bar. Ol qanday isleydi Birinshiden islep shig'ariwshilardin' saytinda biblioteka o'zi juklep oni sheshedi ha'm bizdin' HTML-betlerde. Endi jQuery HTML-betine baylanisiw kerek boladi. Ol jerde HTML teg sirtqi jaziw fayllar baylanisiw ushin juwapker bolg'an <script>, HTML. HTML-bet, bul yorlig'i qo'shish (birdey bet script.js waziypalari ayna menen baylanisli) <HTML> <head> <title>jQuery</title> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script > jQuery: </script> </head> <style> CSS: </style>
<body> </body> </HTML> * Fayl atina itibar berin'. Bul biblioteka jquery-1.2.6.js paydalanadi, biraq siz taza versiyasin juklep aliwin'iz mumkin, biraq uskeneler, sizde parq qiliwi mumkin. * Kelin', bul narse qanday amelge asiriliwin ko'rip shig'aylik. HTML-bette, biz u'sh quti (div-ti), ha'm ush knopkalar boliwi kerek: <HTML> <head> <title>jQuery</title> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script > jQuery: </script> </head> <style> CSS: </style> <body> <h2> jQuery de effektler</h2> <div id="kv1" >1</div> <div id="kv2" >2</div> <div id="kv3" >3</div> <button onclick="addEffect1()">Show() Ko'rinisi</button> <button onclick="addEffect2()">SlideDown()Ko`rinisi </button> <button onclick="addEffect3()">Animate() Ko`rinisi </button> </body> </HTML> Ko'z sizilg'an ha’m CSS benen bir to'rtmuyeshlerdi ko'rinbes qilin'.
Kod CSS: #kv1, #kv2, #kv3{ width:80px; height:100px; float:left; background:red; margin:5px; color:white; display:none; } Siz knopkani basqanin'izda bette script de jaziw kodi waziypalari haqqinda qiziqarli bo'lek: function addEffect1(){ $("#kv1:hidden").show(); } function addEffect2(){ $("#kv2:hidden").slideDown("slow"); } function addEffect3(){ $("#kv3:hidden").show().animate( { fontSize:"36px" } , 3000 ); }
Bul waziypalar ne qiladi? Funktsiya addEffect1 () ko'riwshi $ (dollar belgisi) ha’m bul jQuery ekenligin tusinedi ha’m keyin ol (" #kv1:hidden ") hidden (ko'rinbes) jasirin mu'lkke iye ha’m id = "kv1" element tabiw kerek, dep tusinedi. Keyin .show()-ko'riw bul element payda qiliw ushin isletiledi. Funktsiya addEffect2 () ko’riwshi $ (dollar belgisi) ha’m bul jQuery ekenligin tusinedi ha’m keyin ol (" #kv2:hidden ") hidden (ko'rinbes) jasirin mulkke iye ha’m id = "kv2" element tabiw kerak, deb tu’sinedi. Keyin .slideDown-ko'redi ("slow") ("a'ste") top-to'men (slideDown) ko'rsetiledi bul elementti a'ste payda qiliw ushin isletiledi. Funktsiya addEffect3 () ko’riwshi $ (dollar belgisi) ha’m bul jQuery ekenligin tu’sinedi ha’m keyin ol (" #kv3:hidden ") hidden (ko’rinbes) jasirin mulkke iye ha’m id = "kv3" element tabiw kerak, deb tu’sinedi. Keyin .animate( {fontSize:"36px"} , 3000 shrift ko'lemi 36 piksel (Shrift: "36px") ge 3 sekund (3000) ushin ) animatsiya ko'riwde isletiledi. Misaldi
Index.HTML sipatinda saqlap alip isletiwin'iz mumkin:
<HTML> <head> <title>jQuery</title> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script > function addEffect1(){ $("#kv1:hidden").show(); } function addEffect2(){ $("#kv2:hidden").slideDown("slow"); } function addEffect3(){ $("#kv3:hidden").show().animate( { fontSize:"36px" } , 3000 ); } </script> </head> <style> #kv1, #kv2, #kv3{ width:80px; height:100px; float:left; background:red; margin:5px; color:white; display:none; } </style>
<body> <h2> jQuery de effektler</h2> <div id="kv1" >1</div> <div id="kv2" >2</div> <div id="kv3" >3</div> <button onclick="addEffect1()">Show() Ko`rinisi</button> <button onclick="addEffect2()">SlideDown()Ko`rinisi </button> <button onclick="addEffect3()">Animate() Ko`rinisi </button>
</body> </HTML>