JQuery Formalari
<HTML> <head> <title>jQuery</title> <link rel="stylesheet" type="text/CSS" href="style.CSS"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <h2> jQuery Formda shakllar ushin</h2> <form> <label>E-mail:</label><br> <input type="text" name="mail"><br> <label>Password:</label><br> <input type="password" name="pas"><br> <input type="button" id="b1" value="Kiritiw forma ushin tuwridan tuwri ren" onclick="addColor1();"> <input type="button" id="b2" value=" Knopka forma ushin tuwridan tuwri ren' " onclick="addColor2();"> </form> </body> </HTML> Tiykarg’i funksiya function addColor1(){ $(":text, :password").CSS("background", "red"); } function addColor2(){ $(":button").CSS("background", "blue"); } Ma'selen, tek bir knopkanin ren'in o'zgertiw ushin, id ushin oni muomalada bo'ladi: function addColor2(){ $("#b1").CSS("background", "blue"); } Ja'ni forma elementleri menen u'lken hareket qiliwg'a jardem beradi.
JQuery da html menen islew usillari
HTML menen islewdin' tiykarg’i usillari ha’m bul elementler ushin usillarin ko'rip shig'amiz. Sonday qilip tiykarg’i usillar:
HTML(val)-HTML-kod elementin qosadi.
Misal:
$("div.sp").HTML("<span>Salem</span>");
Tekst "Salem" so`zdi span menen div-sp hamme bo`limge qosadi.
text() / val() -element qosindisi element tekst mazmunin qosadi.
Misal:
$("p").text();
Usi ba'nttin' abzac tekst elementin qosadi.
Text (val) / val(val) -tovar / qiymati element ushin tekstti tuwrilawdi belgilew.
Misal:
$ ("P") Tekst ("Salem!");
Usi ko'rsetpeler "Salem" so'zin abzactan jaziw ushin qosadi.
HTML-kod:
<HTML> <head> <title>jQuery da HTML</title> <link rel="stylesheet" type="text/CSS" href="style.CSS"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <p id="p1">Tekst birinshi abzac!</p> <p id="p2"></p> <input type="button" value="Qaytariw!" onclick="addHTML();"> </body> </HTML>
Funksiya to'mendegi ko`riniste
function addHTML(){ var tp1=$("#p1").text(); $("#p2").text(tp1); }
Birinshi o'zgermeytug'in tP1 birinshi xat basinda (birinshi qatar) teksti mazmuni jaziw ha’m keyin ekinshi xat basinda (ekinshi siziq) shig'ariw.
Endi element jaylastirilg'an manipulyatsiya usillari menen tanisip shig'ayq.
append(content) -bar mazmuni son' ba’rshe tanlang'an ob'ektler ishinde so`zdi qosadi.
Misal:
$ ("P") append ("<b> Salem </ b>");
Usi ko’rsetpeler qalin turli teksti "Salem" so`zin aqirinda ko'riniske qosadi.
appendTo(content)-jumisti ba’rshe content tanlang'an ob'ektler qosiladi.
Misal:
$("p").appendTo("#main");
Bul qo'llanba id "main" elementi aqirina shekem qosadi.
Basqa so'zler menen aytg'anda:
$ (A) .append (B) - B menen baslanip A shekem qosiw $ (A) .appendTo (B) -A menen baslanip B shekem qosiw
prepend(content)- bar bolg'an quramda ba’rshe tanlang'an ob'ektler ishine so'zdi qosadi.
Misal:
$("p").prepend("<b>Salem</b>");
Usi ko’rsetpeler qalin turi abzac basina tekst basina"Salem" kiritiledi.
prependTo(content)- teris jumisin content ba’rshe tanlangan ob'ektlerine qosiladi.
Misal:
$("p").prependTo("#main");
Bul qo'llanba id "main" element penen joqari bir xat basina shig'adi.
$(A).prepend(B)- B dan baslanip A shekem qosadi.
$(A).prependTo(B) -A dan baslanip B shekem qosadi.
after(content)-Append menen bolg'ani siyaqli element aqiri tanlang'an elementlerdi (Esletpe ba’rshe content bo`limine izbe-iz keyin) qosiladi.
Misal:
$("p").after("<b>Salem</b>");
Usi ko'rsetpe "Salem" qalin' turin abzas teksti aqirina shekem kiritiledi(Salem so`zin qaytalap abzac basinan shig'aradi).
befor(content) - ba’rshe tanlangan elementler content bolimine qosadi.
Misal:
$("p").befor("<b>Salem</b>");
Usi ko’rsetpeler qalin' tu'ri abzacdan "Salem" teksti aldin kiritiledi.
insertAfter(content) –content a aqiri ba’rshe tan'lang'an ob'ektlerdi qosadi.
Misal:
$("p").insertAfter("#main");
Bul qo'llanba id "main" menen element aqirinsha shekem xat basinan shig'adi.
Basqa so'zler menen aytqanda:
$(A).after(B) -B dan qosip A da tamamlanadi.
$(A).insertAfter(B) -A dan qosip B da tamamlanadi.
insertBefore(content) –content ushin aldin ba’rshe tan'lang'an ob'ektler izbe-iz qosadi.
Misal:
$("p").insertBefore("#main")
Usi qo'llanba id "main" element penen aldin birinshi xat basin shig'aradi.
Basqa so'zler menen aytqanda:
$(A).before(B) -B dan qosip A da tamamlanadi.
$(A).insertBefore(B)-A dan qosip B da tamamlanadi.
Bir misaldi ko'rip shig'ayiq. Eger qizil to'rtmuyeshlik ishinde "Qosiw" knopkasin basin' sari kvadratshalar payda bo'lsa, (- bir quti bir marte basiwda qaytalanadi) oni jaratamis.
HTML kod:
<HTML> <head> <title>jQuery HTML</title> <link rel="stylesheet" type="text/CSS" href="style.CSS"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="red_sk"></div> <input type="button" value="Qosiw!" onclick="addYellowSquare();"> </body> </HTML>
style.CSS to’mendegishe berilgen
#red_sk{ width:700px; height:100px; background:red; } yellow_square{ float:left; width:80px; height:80px; background:yellow; margin:5px; }
script.js funktsiya ozi juda qisqa kod ha’m ol to'mendegishe berilgen
function addYellowSquare(){ $("#red_sk").prepend("<div class='yellow_square'></div>"); }
Bul hammesi sonday apiwayi. Biraq usillardi qosiw ko'rib shig'iw dawam etedi:
wrap(HTML) -har bir HTML element ushin element qosadi.
Misal:
$("p").wrap("<span></span>");
Bul qo'llanba span-nin' har bir elementi ushin xat basinan qosadi.
wrapAll(HTML)- qag'azda bir element qasinan basqa elementlerdi qosadi.
Misal:
$ ("P") WrapAll ("<span></ span>");
Usi qo'llanba spam-nin' ba’rshe elementin xat bosinan qosadi.
wrapInner(HTML)-har bir elementtin' ishki mazmunin o'siw tartibinde shig'adi.
Misal:
$("p").wrapInner("<em></em>");
Usi qollanba tekst mazmuni kursiv har bir qatarinda beredi.
replaceWith(content)-content de ayrim basqa elementlerin qosadi.
Misal:
$("span").replaceWith("<div></div>");
Usi ko’rsetpeler ha’mme span ha’m div-ga almashtiradi.
replaceAll(selector)- orinlang'an jumisti ba’rshe selector-elementlarine qosadi.
Misal:
$("span").replaceAll("<div></div>");
Usi ko’rsetpeler ha’mme span ha’m div-ga almastiradi.
empty() -tekst usi ba’rshe knopkalari element alib taslanadi.
Misal:
$("span").empty();
Usi ko’rsetpeler span-nin' ba’rshe elementlarin alip taslap saqlaydi.
remove()-elementler alip taslaydi.
Misal:
$("span").remove();
Usi ko’rsetpeler ha’mme span-bo`limin o'shiredi.
clone()-klon elementleri.
Misal:
$("b").clone().append("div");
Bul qo'llanba qalin' elementlerdi div-ge qosadi.
Misalda jQuery ja'ne bir ta’repi ustinde qo'l tiygizbey yag'niy bul biblioteka shinjirlarin qo'llab-quwatlaw. En' son'i, basqa bir misaldi alip qarayiq. Biz ayrim bir dizim bar ha’m biz paydalaniwshilar og’an ob'ektler kiritiw ushin ruxsat beriw kerek deylik:
HTML kod to'mende berilgen
<HTML> <head> <title>jQuery da HTML</title> <link rel="stylesheet" type="text/CSS" href="style.CSS"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> Sizdin' jasaw manzilin'iz: <ul id="jq"> <li>Shimbay</li> <li>Xalqabad</li> <li>Taxtako'pir</li> </ul> Qosimsha kiritiw bo`limi: <input type="text" id="user_text" size="20" maxlength="50"> <input type="button" value="Qosiw" onclick="addSpisok();"> </body> </HTML>
script.js funksiyasinig kodi
function addSpisok(){ var jq=$('#user_text').val(); $('#jq').append('<li>'+jq+'</li>'); }