O‘ZBEKISTON RESPUBLIKASI AXBOROT TEXNOLOGIYALARI VA
KOMMUNIKATSIYALARINI RIVOJLANTIRISH VAZIRLIGI
MUXAMMAD AL-XORAZMIY NOMIDAGI TOSHKENT AXBOROT TEXNOLOGIYALARI
UNIVERSITETI URGANCH FILIALI
“KOMPYUTER INJINERINGI” FAKULTETI 961-20 GURUH TALABASI MATYOQUBOV
SUHROBNING WEB DASTURLASHGA KIRISH FANIDAN
MUSTAQIL ISHI
Mavzu: JQueryda o’zgaruvchilar bilan ishlash.
TOPSHIRDI:
QABUL QILDI:
Matyoqubov Suhrob
JQueryda o’zgaruvchilar bilan ishlash.
JQuery haqida.
JQueryning maqsadi sizning veb-saytingnizda JavaScript dan foydalanishni
osonlashtirishdir.
JQuery birinchi marta 2006-yil yanvar oyida BarCamp NYC da Jon Resig tomonidan
chop etilgan. U hozir Timmi Vilson tomonidan boshqariladi.
JQueryni web sahifaga qo’shish.
JQuery.com saytidan JQuery kutubxonasini yuklash kerek.
JQuery`ni Google CDN-dan qo’shish kerak.
CDN-dan fayllar juda tezkor
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”>
</script>
</head>
JQuery ([dʒeɪ kwɪəri]) JavaScript va HTML oʻrtasidagi oʻzaro taʼsirga qaratilgan JavaScript
funksiyalari toʻplamidir. JQuery kutubxonasi har qanday DOM elementiga kirishni, DOM
elementlarining atributlari va mazmuniga kirishni va ularni boshqarishni osonlashtiradi. JQuery
kutubxonasi AJAX bilan ishlash uchun qulay API ham taqdim etadi. jQuery xayriya qilingan
ko'ngillilar jamoasi tomonidan ishlab chiqilmoqda[4].
HTML Jon Resig dasturlashni birinchi boshlaganida o'rgangan birinchi narsalardan biri edi.
Resig QBasic-da dasturlash bilan shug'ullanayotgan edi, bir tanishi unga qanday qilib veb-sahifa
yaratishni (Angelfire yordamida), shuningdek, HTML asoslarini ko'rsatib berdi. Otasi unga
Rojdestvo uchun ikkita HTML kitobini sovg'a qildi. U birinchi marta Visual Basic-da
dasturlashni boshlaganida HTML va veb-dizayn unga juda qiziq bo'ldi.
Ammo JavaScript-ga bo'lgan ishtiyoq ancha keyinroq, taxminan 2004 yilda paydo bo'ldi. Resig
o'shanda kompyuter fanlari bo'yicha ilmiy darajaga ega bo'lgan va mahalliy Brand Logic
firmasida yarim kunlik ishlagan. U maxsus aylantirishni yaratadigan veb-saytni loyihalashtirdi.
Jon hafsalasi pir bo'ldi va hafsalasi pir bo'ldi, ayniqsa, u boshqa ishlab chiquvchilarning kodidan
foydalangani uchun, shundan so'ng u JavaScript-ni jiddiy o'rganishga qaror qildi. O'rganib
chiqqanimdan so'ng, men JavaScript oddiy, ammo nafis til bo'lib, ko'plab muammolarni hal
qilish uchun nihoyatda kuchli degan xulosaga keldim. Keyingi bir necha yil ichida Jon jQuery-ni
tugatishdan oldin juda ko'p turli xil JavaScript ilovalarini yaratdi. Resigning jQuery-ni
yaratishdagi asosiy maqsadi JavaScript-ni soddalashtiradigan qayta foydalanish mumkin bo'lgan
kod qismlarini kodlay olish va ularni brauzerlar o'rtasidagi muammolar haqida
tashvishlanmaydigan tarzda ishlatish edi. Kutubxona 2006 yilda Nyu-Yorkda bo'lib o'tgan
"BarCamp" kompyuter konferentsiyasida jamoatchilikka taqdim etilgan.
Imkoniyatlar:
Sizzle[5] kross-brauzerli CSS selektor mexanizmi alohida loyihaga aylantirildi;
DOM daraxtini kesib o'tish, shu jumladan plagin sifatida XPath-ni qo'llab-quvvatlash;
Tadbirlar;
Vizual effektlar;
AJAX qo'shimchalari;
JavaScript plaginlari.
Xuddi CSS renderlashni HTML strukturasidan ajratganidek, jQuery ham xatti-harakatni
HTML strukturasidan ajratadi. Misol uchun, tugmani bosish hodisasi ishlovchisiga
to'g'ridan-to'g'ri ishora qilish o'rniga, boshqaruv tugmalarni aniqlaydigan va keyin uni
bosish hodisasi ishlov beruvchisiga aylantiradigan JQuery-ga o'tkaziladi. Xulq-atvor va
tuzilmaning bunday bo'linishi, shuningdek, ko'zga tashlanmaydigan JavaScript printsipi
deb ataladi.
jQuery kutubxonasi vazifalarning eng keng doirasi uchun foydali bo'lgan funksiyalarni
o'z ichiga oladi. Biroq, kutubxona ishlab chiquvchilarining maqsadi jQuery-da hamma
joyda mos keladigan funktsiyalarni birlashtirish emas edi, chunki bu juda ko'p kodlarga
olib keladi, ularning aksariyati talab qilinmaydi. Shuning uchun kutubxona va
plaginlarning ixcham universal yadrosi arxitekturasi amalga oshirildi [6]. Bu sizga resurs
uchun talab qilinadigan JavaScript funksiyalarini to'plash imkonini beradi.
Foydalanish.
jQuery odatda veb-sahifaga bitta tashqi JavaScript fayli sifatida kiritiladi:
<head>
<!-- 1 метод локально -->
<script src="jquery-3.5.1.min.js">
</script>
<!-- 2 на сервер -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
</head>
html 5
jQuery bilan barcha ishlar $ yordamida amalga oshiriladi. Agar sayt sizning ehtiyojlaringiz
uchun $ ishlatilishi mumkin bo'lgan boshqa JavaScript kutubxonalaridan foydalansa, siz uning
sinonimi - jQuery-dan foydalanishingiz mumkin. Ikkinchi usul to'g'riroq deb hisoblanadi va kod
juda og'ir bo'lib qolmasligi uchun uni quyidagicha yozishingiz mumkin:
jQuery(function($) {
// здесь код скрипта, где в $ будет находиться объект, предоставляющий доступ к
функциям jQuery
})
Bir vaqtning o'zida bir nechta DOM tugunlarini manipulyatsiya qilishning odatiy misoli, bir
nechta HTML sahifa elementlarini o'z ichiga olgan jQuery ob'ektini qaytaradigan CSS selektor
qatori bilan $ funktsiyasini chaqirishdir. Keyinchalik bu elementlar jQuery usullari bilan qayta
ishlanadi. Misol uchun,
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
Sinf testi bilan barcha div elementlarini, shuningdek sinf tirnoqli barcha p elementlarni topadi va
keyin ularning barchasiga sinf ko'k rangini qo'shadi va vizual ravishda pastga siljiydi. Bu yerda
add, addClass va slideDown usullari original ob'ektga havolani qaytaradi $("div.test"), shuning
uchun shunday zanjirlash mumkin.
$. bilan boshlanadigan usullar global ob'ektlar bilan ishlash uchun foydalidir. Misol uchun:
$.each([1,2,3], function() {
document.write(this + 1);
});
234 chi sahifaga qo’shish .
$.ajax va tegishli funksiyalar AJAX usullaridan foydalanish imkonini beradi. Misol uchun:
$.ajax({
type: "POST",
url: "some.php",
data: {name: 'John', location: 'Boston'},
success: function(msg){
alert( "Data Saved: " + msg );
}
});
Bu misolda some.php skripti name=John&location=Boston parametrlari bilan chaqiriladi va
natija alert () yordamida xabarda ko‘rsatiladi.
jQuery yordamida elementga bosish hodisasi ishlovchisini qo'shish misoli:
$("a").click(function() {
alert("Hello world!");
});
Bunday holda, <a> elementi bosilganda, alert("Salom dunyo!") chaqiriladi.
Turli xil ilovalarda bir xil funktsiyalarni amalga oshirish ishlab chiquvchilarni bir xil kodni bir
necha marta qayta yozishga undaydi, faqat ma'lum bir dastur uchun uni biroz o'zgartiradi.
jQuery plaginlari ishlab chiquvchilarga ushbu muammoni unutish imkonini beradi. Ishlab
chiquvchi plaginni bir marta yozishi mumkin, bu sizga ma'lum bir funktsiyani amalga oshirishga
imkon beradi va keyin faqat bitta kod satrini yozish orqali kerakli ilovalarda foydalanishga
imkon beradi. Internetda siz boshqa ishlab chiquvchilar tomonidan yozilgan juda ko'p bepul
jQuery plaginlarini topishingiz va ulardan ilovalaringizni yaratish uchun foydalanishingiz
mumkin.
Plagin yaratish.
Plagin yaratish uchun jQuery.fn obyektiga xususiyat qo'shishingiz kerak, uning nomi plagin
nomi bo'ladi:
Sintaksis:
//Определяем код плагина
(function($){
$.fn.имяПлагина = function() {
// Код плагина
};
})(jQuery);
//Вызываем плагин
$(селектор).имяПлагина();
Esda tutingki, bu yerda oʻram (funksiya($){ }) (jQuery) qoʻllaniladi, shunda plagin kodi ichidagi
$ belgisidan u boshqa JavaScript kutubxonalari bilan zid kelishidan qoʻrqmasdan
foydalanishingiz mumkin.
jQuery da html bilan ishlash usullari.
HTML bilan ishlashning asosiy usullari va bu elementlar uchun usullarini ko'rib chiqamiz.
Shunday qilib asosiy usullari:
html(val)-html-kod elementini qo'shadi.
Misol:
$("div.sp").html("<span>Salom</span>");
Matn "Salom" so`zni span bilan div-sp hamma bo`limiga qo'shadi.
text() / val() -element / qiymati element matn mazmunini qo`shadi.
Misol:
$("p").text();
Ushbu bandning abzas matnni elementini qo`shadi.
text(val) / val(val) -tovar / qiymati element uchun matnni to`g`irlashni belgilash.
Misol:
$ ("P") Matn ("Salom!");
Ushbu ko'rsatmalar "Salom" so'zini abzasdan yozish uchun qo`shadi.
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">Matn birinchi abzas!</p>
<p id="p2"></p>
<input type="button" value="Qaytarish!" onclick="addHtml();">
</body>
</html>
Funksiya quyidagi ko`rinishda
function addHtml(){
var tp1=$("#p1").text();
$("#p2").text(tp1);
}
Birinchi o'zgarmaydigan tP1 birinchi xatboshida (birinchi satr) matni mazmunini yozish va
keyin ikkinchi xatboshida (ikkinchi chiziq) beringlar chiqarish.
Endi element joylashtirilgan manipulyatsiya usullari bilan tanishib chiqaylik.
append(content) -mavjud mazmuni so'ng barcha tanlangan ob'ektlar ichida so`zni qo'shadi.
Misol:
$ ("P") append ("<b> Salom </ b>");
Ushbu ko'rsatmalar qalin turi matni "Salom" so`zini oxirida ilovaga qo`shadi.
appendTo(content)-ishni barcha content tanlangan ob'ektlar qo'shiladi.
Misol:
$("p").appendTo("#main");
Bu qo'llanma id "main" elementi oxirigacha qo'shadi.
Boshqa so'zlar bilan aytganda:
$ (A) .append (B) - B bilan boshlanib A gacha qo'shish
$ (A) .appendTo (B) -A bilan boshlanib B gacha qo'shish
prepend(content)-mavjud tarkibga barcha tanlangan ob'ektlar ichida so`zni qo'shadi.
Misol:
$("p").prepend("<b>Salom</b>");
Ushbu ko'rsatmalar qalin turi abzas boshiga matn boshiga"Salom" kiritiladi.
prependTo(content)-teskari ishni content barcha tanlangan ob'ektlariga qo'shiladi.
Misol:
$("p").prependTo("#main");
Bu qo'llanma id "main" element bilan yuqori bir xat boshiga chiqadi.
$(A).prepend(B)- B dan boshlanib A gacha qo`shadi.
$(A).prependTo(B) -A dan boshlanib B gacha qo`shadi.
after(content)-Append bilan bo'lgani kabi element oxiri so'ng tanlangan elementlarni (Eslatma
barcha content bo`limiga ketma-ket keyin) qo'shiladi.
Misol:
$("p").after("<b>Salom</b>");
Ushbu ko'rsatma "Salom" qalin turini abzas matni so'ngigacha kiritiladi(salom so`zini takrorlab
abzas boshidan chiqaradi).
befor(content)-barcha tanlangan elementlar content bolimiga qo'shadi.
Misol:
$("p").befor("<b>Salom</b>");
Ushbu ko'rsatmalar qalin turi abzastdan "Salom" matni oldin kiritiladi.
insertAfter(content) -content-a so'ng barcha tanlangan ob'ektlarni qo'shadi.
Misol:
$("p").insertAfter("#main");
Bu qo'llanma id "main" bilan element so'ngigacha xat boshidan chiqadi.
Boshqa so'zlar bilan aytganda:
$(A).after(B) -B dan qo`shib A da tugaydi.
$(A).insertAfter(B) -A dan qo`shib B da tugaydi.
insertBefore(content) -content-uchun oldin barcha tanlangan ob'ektlar ketma-ket qo'shadi.
Misol:
$("p").insertBefore("#main")
Ushbu qo'llanma id "main" element bilan oldin birinchi xat boshini chiqaradi.
Boshqa so'zlar bilan aytganda:
$(A).before(B) -B dan qo`shib A da tugaydi.
$(A).insertBefore(B)-A dan qo`shib B da tugaydi.
Bir misolni ko'rib chiqaylik. Agar qizil to'rtburchak ichida "Qo'shish" tugmasini bosing sariq
kvadratchalar paydo bo'lsa, (- bir quti bir marta bosishda takror) uni yarataylik.
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="Qo`shish!" onclick="addYellowSquare();">
</body>
</html>
style.css quyidagicha berilgan
#red_sk{
width:700px;
height:100px;
background:red;
}
.yellow_square{
float:left;
width:80px;
height:80px;
background:yellow;
margin:5px;
}
script.js funktsiya o'zi juda qisqa kod va u quyidagicha berilgan
function addYellowSquare(){
$("#red_sk").prepend("<div class='yellow_square'></div>");
}
Bu hamma shunday oddiy. Lekin uslublarni qo`shish ko'rib chiqish davom etadi:
wrap(html) -har bir html element uchun element qo`shadi.
Misol:
$("p").wrap("<span></span>");
Bu qo'llanma span-ning har bir elementi uchun xat boshidan qo`shadi.
wrapAll(html)-qog'ozda bir element yo`nidan boshqa elementlarni qo`shadi.
Misol:
$ ("P") WrapAll ("<span> </ span>");
Ushbu qo'llanma spam-ning barcha elementini xat boshidan qo`shadi.
wrapInner(html)-har bir elementning ichki mazmunini o'sish tartibida chiqadi.
Misol:
$("p").wrapInner("<em></em>");
Ushbu qo'llanma matn mazmunini kursiv har bir bandda beradi.
replaceWith(content)-content da ba'zi boshqa elementlarni qo`shadi.
Misol:
$("span").replaceWith("<div></div>");
Ushbu ko'rsatmalar butun span va div-ga almashtiradi.
replaceAll(selector)-bojarilgan ishni bBarcha selector-elementlariga qo`shadi.
Misol:
$("span").replaceAll("<div></div>");
Ushbu ko'rsatmalar butun span va div-ga almashtiradi.
empty() -matn shu jumladan barcha tugunlari element olib tashlanadi.
Misol:
$("span").empty();
Ushbu ko'rsatmalar spam-ning barcha elementlarini olib tashlab saqlaydi.
remove()-elementlar olib tashlaydi.
Misol:
$("span").remove();
Ushbu ko'rsatmalar butun span-bo`limini ochiriladi.
clone()-klon elementlari.
Misol:
$("b").clone().append("div");
Bu qo'llanma qalin elementlarni div-ga qo`shadi.
Misolda jQuery yana bir tomoni ustida qo'l tekkizmay ya'ni bu kutubxona tashrif zanjirlarini
qo'llab-quvvatlash.
Nihoyat, boshqa bir misolni olaylik. Biz ba'zi bir ro'yxat bor va biz foydalanuvchilar unga
ob'ektlar kiritish uchun ruxsat berish kerakli deylik:
Html kod quyida berilgan
<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>
Sizning yashash manzilingiz:
<ul id="jq">
<li>Surxandaryo</li>
<li>Qashqadaryo</li>
<li>samarqang</li>
</ul>
Qo`shimcha kiritish bo`limi:
<input type="text" id="user_text" size="20" maxlength="50">
<input type="button" value="Qo`shish" onclick="addSpisok();">
</body>
</html>
script.js funksiyasinig kodi
function addSpisok(){
var jq=$('#user_text').val();
$('#jq').append('<li>'+jq+'</li>');
}
JQuery da CSS bilan ishlash usullari
JQuery usullari uch kategoriyalari bor: bir naqsh taaluqli unsurlar bilan tashkil etiladi;
elementning ikkinchi qaytish qiymati, boshqalar elementlar o'zlari o'zgartirish esa.
CSS-uslublari uchun ishlatiladi usullari qarash.
Uslubning har qanday elementni qo'shish uchun siz quyidagi usuli foydalanish kerak:
.css(name,value)
Misol:
$("div").css("border", "1px solid blue");
Bu qo'llanma div kontenerga 1 px ega ko'k ramka qo`shadi.
CSS: background, border, font-style, colorFon va hokazo: CSS qo'llanilashda parametrning
nomlari ishlatiladi.
Agar buyum bir necha CSS-qoida uchun so'ralgan bo'lsan u quyidagini qo'llash yanada yaxshiroq
bo'ladi:
.css({properties})
Misol:
$("div").css({
border:"1px solid blue",
fontWeight:"bolder",
backgroundColor:"red"
});
Bu qo'llanma div kontenerga ko'k ramka, fon qizil va matn qilingini qo`shadi.
JavaScript da FontWeight, backgroundColor va hokazo: IE oynasida foydalanish font-weight va
background-color ekvivalenti CSS xususiyatlari uchun unutmang.
Uslublari bilan ishlash uchun har qanday boshqa usullar:
.addClass(class)
Misol:
$("p:last").addClass("main");
Ushbu bo'limda P oxirgi element uchun asosiy sinf qo'shiladi.
.removeClass(class)
Misol:
$("p:even").removeClass("main");
Ushbu ko'rsatmalar asosiy sinf main xat o`qishni bartaraf etadi.
.toggleClass(class)
Misol:
$("p").toggleClass("main");
U yo'qolgan bo'lsa, bu qo'llanma mavjud bo'lsa, sinfning barcha asosiy qatlamlariga bartaraf
qiladi.
.offset()
Misol:
var offDiv=$("div").offset();
Bu ko'rsatma div ning elementi chap va yuqori aniqlash uchun imkon beradi. Muayyan mulkni
qiymatini olish uchun, quyidagi xususiyatlarga foydalaning: offset.left-chap va offset.top yuqorida aniqlash uchun.
.height(value)
Misol:
$("div").height();
$("div").height(200);
Bu qo'llanma (birinchi satr chiziq) - element o'rnatish va (ikkinchi satr) balandligi beradi.
.width(value)
Misol:
$("div").width();
$("div").width(200);
Bu qo'llanma (birinchi satr chiziq) - element o'rnatish va (ikkinchi satr) kengligini beradi.
Misol:
var widDiv=$("div").width();
$("div.fir").width(300);
Birinchi satr o'zgaruvchilar widDiv birinchi div ning kengligi yozadi. Ikkinchi ko'rsatma 300
piksel div ning barcha sinf kengligi o'rnatadi.
Bu jQuery usullari juda qiziqarli dastur hisoblanadi: ular (2 dalillarini qabul qilganingizda)
parametr sozlamalari uchun ishlatiladi va bu parametrlar qiymatlari olish uchun (argumentga
o'tigan bo'lsa).
Html kod:
<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 - CSS</h2>
<div id="vkladki">
<div class="vkl" id="vkladka1" onClick="chang('#vkladka1');">Bo`lim 1</div>
<div class="vkl" id="vkladka2" onClick="chang('#vkladka2');">Bo`lim 2</div>
<div class="vkl" id="vkladka3" onClick="chang('#vkladka3');">Bo`lim 3</div>
<div class="vkl" id="vkladka4" onClick="chang('#vkladka4');">Bo`lim 4</div>
</div>
<div style="clear: both"></div>
<div id="content"></div>
<div style="clear: both"></div>
</body>
</html>
Ko'rib turganimizdek shu uslubi barcha teglari belgilangan bo`lim sinflarda bor va tanlanadigan
bo`lim sinflari mavjud.
Tashqi ko'rinish belgilangan sahifa style.css quyida berilgan
.vkl{
float:left;
width:140px;
height:28px;
background:#E5BA83;
color:white;
font-size:20px;
border-right:1px solid white;
padding-left:10px;
}
#content{
width:603px;
height:100px;
background:#CCA675;
}
.selected{
background:#CCA675;
}
Funktsiya Chang () bo'lib qolmoqda:
function chang(s){
$('.selected').removeClass('selected');
$(s).addClass('selected');
}
Shunday qilib bunada qanday vazifani bajaradi? Birinchi tanlangan bir bo`lim sinf bor elementi
izlaydi va bu boshqa bo`limga sinf o`tiladi. So'ngra (ikkinchi chiziq) tanlangan bo`lim sinf
qo'shiladi (bu parametr s sifatida vazifaga o'tib id bo`limi yoqiladi) ob'ektni tanlaydi. Bu
hammasi shunday oddiy bajariladi.
jQuery da filtrlar.
:firs- mos sinchkovlik birinchi elementni tanlaydi.
Misol:
$("tr:first").css("font-style", "italic");
Ushbu kursiv jadvalining birinchi qatoriga yozaman.
:last - mos sinchkovlik oxirgi elementi tanlaydi.
Misol:
$("tr:last").css("font-style", "italic");
Ushbu kursiv jadvalda oxirgi qatoriga yozaman.
:even- hatto noldan elementlarni tanlaydi.
Misol:
$("tr:even").css("font-style", "italic");
Qiya jadvalda barcha hatto satrlarni yozish. Bu qo'llanma (raqamlashda noldan ketadi, chunki
ingl u g'alati chiziqlar ko'rinadi).
: Odd - noldan g'alati tanlaydi elementlari.
Misol:
$("tr:odd").css("font-style", "italic");
Qiya jadvalda barcha g'alati chiziqlar yozish Bu qo'llanma (raqamlash noldan ketadi, chunki ingl
bu hatto satrlarni ko'rinadi).
:eq(index)- uning indeksi bilan bir narsani tanlaydi (nolga asoslangan).
Misol:
$("td:eq(2)").css("font-style", "italic");
Ushbu jadvalda ikkinchi hujayra kursiv matn yozish qiladi (raqamlash noldan ketadi, chunki ingl
u uchinchi hujayrasi ko'rinadi).
: gt (index) - belgilangan buyukroq indeksli elementlarni tanlaydi.
Misol:
$("td:gt(2)").css("font-style", "italic");
Ushbu sekundiga bilan boshlab, stol barcha hujayralaridagi kursiv matn yozish qiladi (raqamlash
noldan ketadi, chunki ingl u uchinchi hujayraning ko'rinadi).
: lt (index) - bu kam indeksli elementlarni tanlaydi.
Misol:
$("td:lt(4)").css("font-style", "italic");
Ushbu jadvalda birinchi besh hujayralari kursiv matn yozish etadi.
Sifatida tegishli bir misolni ko'rib chiqaylik. Siz liniyalar rangini o'zgartirish mumkin, bir jadval,
yarataylik: hatto chiziqlar kulrang va g'alati - ko'k va 5 dan hujayralari shrift rangi sariq bo'ladi.
Men raqamlashi, shunday ko'rinishda g'alati asoslangan nol va hatto liniyalari aksi, va 5 hujayra
ingl bir oltinchi kabi ko'rinadi deb eslang.
Html kodi:
<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 da filter</h2>
<table border="1" width="300">
<tr><td>jQuery</td><td>o`qiladigan satr ko`k </td></tr>
<tr><td>jQuery</td><td> o`qilamaydigan satr sariq </td></tr>
<tr><td>jQuery</td><td> o`qiladigan satr ko`k </td></tr>
<tr><td>jQuery</td><td> o`qilamaydigan satr sariq </td></tr>
<tr><td>jQuery</td><td> o`qiladigan satr ko`k </td></tr>
<tr><td>jQuery</td><td> o`qilamaydigan satr sariq </td></tr>
</table><br>
<input type="button" value="Ranglarni berish" onclick="addColor3();">
</body>
</html>
Funksiya kodi script.js da yoziladi:
function addColor3(){
$("tr:even").css("background-color", "grey");
$("tr:odd").css("background-color", "blue");
$("td:gt(5)").css("color", "yellow");
}
jQuery shakllarni tanlash
O'rnatilgan bo'lishi mumkinligini ko'rib chiqaylik:
#ID - transfer identifikator (id) bilan bir elementini tanlaydi.
Misol:
$("#lok").css("border", "1px solid red");
Bu operator id="lok"va bu holatda, unga 1 pikselga bir ramka kengligi css-uslubi kiritish qizil
qattiq id bilan elementi tanlaydi. (Css-jihozlardan sozlash uchun qanday to'g'risida alohida
muhokama qilinadi).
.class – css da hamma elementlar tanlaydi.
Misol:
$(".lok").css("border", "1px solid red");
Bu operator bu holda, class="lok"css-tarzida, ularni qo'shish bilan 1 pikselga bir ramka kengligi,
qizil qattiq barcha elementlarni tanlaydi.
elements - Nomi bilan tanlangan barcha elementlarni tanlaydi.
Misol:
$("div").css("border", "1px solid red");
Bu operator barcha div-dagi ramka ichida tanlaydi.
* - Bosh va tana, shu jumladan, barcha elementlarni, tanlaydi.
$("*").css("border", "1px solid red");
Bu operator barcha elementlariga ramkani qo'shadi.
$("*", document.body).css("border", "1px solid red");
Bu operator yorlig'I body tanasining barcha elementlariga ramkani qo'shadi.
selector1, ..., selectorN - Searchda tayinlangan barcha elementlarni tanlaydi.
Misol:
$("div, span, p.lok").css("border", "1px solid red");
Bu operator barcha div, span-am uchun ramka qo'shimchalar va bir sinf lok ega paragraflar.
Shunday qilib, istalgan har qanday ramkani tanlashingiz mumkin.
Html kod orqali oddiy sahifa
<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>Текст первого абзаца</p></div>
<div id="st2" ><p class="withBorder">Текст второго абзаца</p></div>
<div id="st3" ><p>Текст третьего абзаца</p></div>
<div style="clear: both"></div>
<button onclick="addStyle1()">Birinchi div qizil qiling
</button><br><br>
<button onclick="addStyle2()">O'rta paragraf ko'k ramka
</button><br><br>
<button onclick="addStyle3()">Birinchi va uchinchi div-ni qalin shrifti hosil qiling</button>
</body>
</html>
Tashqi ko'rinish bir uslublar (style.css) aniqlash:
#st1, #st2, #st3{
float:left;
background:yellow;
margin:5px;
padding:5px;
}
Sahifadagi script.js vazifalarni yozish:
function addStyle1(){
$("#st1").css("background", "red");
}
function addStyle2(){
$("p.withBorder").css("border", "1px solid blue");
}
function addStyle3(){
$("#st1, #st3").css("fontWeight", "bold");
}
Css-jihozlardan qanday o'rnatiladi va bu yerda siz ni aniqlash qanday. Keyin harakat.
Ierarxik tanlovchi
Ierarxik- daraxtsimon o`sish shunga o'xshash elementlar ajdodlari (parent) va avlodlari (child)
bo'lishi mumkin ob'ektlar ierarxiyasini ko'rib chiqildi. Misol uchun, barcha elementlari avlodidir
hosil qilish shakllantirilmoqda va shakli esa, o'z navbatida, ularning avlod hisoblanadi.
Keling, bu tanlovchi jQuery foydalanish mumkin ko'rib chiqaylik:
parent child - ma'lum bir element ajdodimiz avlodlaridir barcha elementlarni tanlaydi.
Misol:
$("form input").css("border", "1px solid red");
Ushbu element shaklida avlodlaridir ramka atrofida kiritishni hisoblab chiqadi.
parent > child -element barcha to'g'ridan-to'g'ri avlodini tanlaydi.
Misol - bizda bu strukturaning bir html-sahifa mavjud deylik:
<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 tanlash</h2>
<div id="main">
<p></p>
<div></div>
<span></span>
</div>
<div id="content">
<p></p>
<div></div>
<span></span>
</div>
</body>
</html>
Keyin quyidagi bayonot:
$("#content > *").css("border", "1px solid red");
Hamma elementlar uchun chegaralarini qo'shishingiz (div, span va abzas) id = " content " bilan
div, lekin id = " main " bilan div Shu nom elementlarni ta'sir qilmaydi.
prev + next - element next (oldingi) uchun prev (keyingi) quyidagi barcha elementlari tanlaydi.
$("label + input").css("border", "1px solid red");
Bu qo'llanma teg (label) amalini ramkani kiritishni faqat hisoblab chiqadi.
Forma bloklari
: Input - kiritish barcha elementlarini tanlaydi.
: Matn - barcha elementlar usuli turi matnni tanlanadi.
: Parol - parolni barcha kirish elementlarni tanlaydi.
: Radio – radio turini barcha kirish elementlarni tanlaydi.
: checkbox - katagdagi barcha kirish elementlarni tanlang.
: Submit - kirish elementlari tanlaydi.
: Reset - barcha kirish elementlarni tanlaydi.
: Button - tugmasini barcha kirish elementlarni tanlang.
: Image - tasvir turi barcha kirish elementlarni tanlang.
: file - turi faylga barcha kirish elementlarni tanlang.
: hidden - yashirin turdagi barcha kirish elementlarni tanlaydi.
JQuery Formadagi shakllar
<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 uchun</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="Kiritish shakil uchun to`g`ridan to`g`ri rang"
onclick="addColor1();">
<input type="button" id="b2" value=" Tugma shakil uchun to`g`ridan to`g`ri rang "
onclick="addColor2();">
</form>
</body>
</html>
Asosiy funksiya
function addColor1(){
$(":text, :password").css("background", "red");
}
function addColor2(){
$(":button").css("background", "blue");
}
Masalan, faqat bitta tugmani rangini o'zgartirish istagan bo'lsa, id uchun uni muomalada bo'ladi:
function addColor2(){
$("#b1").css("background", "blue");
}
Ya'ni forma shakllari shakli elementlari bilan katta harakatni qilishga yordam beradi.