JQuery da formalardi tan'law
O'rnatilg'an bo'liwi mu'mkinligin ko'rip shig'ayiq: #ID - transfer identifikator (id) menen bir elementin tan'laydi.
Misal:
$("#lok").CSS("border", "1px solid red");
Bul operator id="lok"ha’m bul jag’dayda, og’an 1 pikselga bir ramka ken'ligi CSS-usilin kiritiw qizil qatti ID menen elementin tan'laydi. (CSS-ko'rinislerin sazlaw ushin qanday tuwrisinda ayriqsha aytip o'tiledi).
.class – CSS da hamme elementler tan'lanadi.
Misal:
$(".lok").CSS("border", "1px solid red"); Bul operator bul halda, class="lok"CSS-tu'rde, olardi qo'siw menen 1 pikselge bir ramka ken'ligi, qizil qatti barshe elementlarin tan'laydi.
elements - ati menen tan'lang'an barshe elementledni tan'laydi.
Misal:
$("div").CSS("border", "1px solid red"); Bul operator barshe div-dag'i ramka ishinde tan'laydi.
* - Bas ha’m dene, sol sepebten, barshe elementlarnin, tan'laydi.
$("*").CSS("border", "1px solid red"); Bul operator barshe elementlarine ramkani qosadi. $("*", document.body).CSS("border", "1px solid red"); Bul operator body denesinin' barshe elementlarine ramkani qosadi.
selector1, ..., selectorN - Searchte tayinlang'an barshe elementlerdi tan'laydi.
Misal:
$("div, span, p.lok").CSS("border", "1px solid red"); Bul operator ba’rshe div, span-an ushin ramka qosimshalar ha’m bir klass lok iye paragraflar. Sonday qilip, qa'legen har qanday ramkani tan'lawin'iz mumkin. HTML kod arqali apiwayi bet <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</h2> <div id="st1" ><p>Birinshi abzactin' teksti</p></div> <div id="st2" ><p class="withBorder">Ekinshi abzactin' teksti</p></div> <div id="st3" ><p>U'shinshi abzactin' teksti</p></div> <div style="clear: both"></div> <button onclick="addStyle1()">Birinshi div qizil qilin' </button><br><br> <button onclick="addStyle2()">O'rta paragraf ko'k ramka </button><br><br> <button onclick="addStyle3()">Birinshi ha’m ushinchi div-ti qali'n shrift payda qilin' </button> </body> </HTML>
Sirtqi ko'rinisi bir usillar (style.CSS) aniqlaw:
#st1, #st2, #st3{ float:left; background:yellow; margin:5px; paddin’:5px; } Bettegi script.js ha’m zipalardi jaziw:
function addStyle1(){ $("#st1").CSS("background", "red"); } function addStyle2(){ $("p.withBorder").CSS("border", "1px solid blue"); } function addStyle3(){ $("#st1, #st3").CSS("fontWeight", "bold"); } CSS – uskenelerden qanday o'rnatilg'an ha’m bul jerde sizde aniqlaw qanday. Keyin hareket.
Ierarxik tan'lawshi
Ierarxik- daraxtsiman o`siw shaxasin uqsas elementler awladlari (parent) ha’m awladlari (child) bo'liwi mumkin ob'ektlar ierarxiyasin ko'rip shig'ildi. Misal ushin, ba’rshe elementleri a'wladin payda qiliw ha’m ko'rinisi, o'z nawbetinde, olardin' a’wladi esaplanadi. Kelin', bul tan'lawshi jQuery paydalaniw mumkin ekenin ko'rip shig'ayiq: parent child - belgili bir element a’wladi ba’rshe elementlarin tan'laydi.
Misal:
$("form input").CSS("border", "1px solid red"); Usi element ko'rinisinde a’wladin ramka qasinda kiritiwdi esaplap shig'adi.
parent> child -element ba’rshe tuwridan-tuwri a’wladin tan'laydi.
Misal - bizde bul strukturanin' bir HTML-bet bar dep esaplayiq: <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 bloklar tan'law</h2> <div id="main"> <p></p> <div></div> <span></span> </div> <div id="content"> <p></p> <div></div> <span></span> </div> </body> </HTML> Keyin to'mendegi bayanat: $("#content > *").CSS("border", "1px solid red"); Ha'mme elementler ushin shegaralarin qosiwin'iz (div, span ha’m abzac) id = " content " benen div, biraq id = " main " menen div sol at elementlerdi ta'sir qilmaydi.
prev + next - element next (aldin’'i) ushin prev (keyin’i) to'mendegi ba’rshe elementlerin tanlaydi.
$("label + input").CSS("border", "1px solid red"); Bul qollanba teg (label) amelin ramkani kiritiwdi tek esaplap shig'adi. Forma bloklari : Input - kiritiw ba’rshe elementlerin tan'laydi. : Tekst - ba’rshe elementler usili turinin' teksti tan'lanadi. : Parol - paroldi ba’rshe kiriw elementlerin tan'laydi. : Radio – radio turin ba’rshe kiriw elementlerin tan'laydi. : checkbox - kestedegi ba’rshe kiriw elementlerin tan'lan'. : Submit - kiriw elementleri tan'laydi. : Reset - ba’rshe kiriw elementlerin tan'laydi. : Button - knopka ba’rshe kiriw elementlerin tan'laydi. : Image - suwret tu'ri ba’rshe kiriw elementlerin tan'laydi. : file – tu'ri faylg'a ba’rshe kiriw elementlerin tan'laydi. : hidden - jasirin turdegi ba’rshe kiriw elementlerin tan'laydi.