MUHAMMAD AL-XORAZMIY NOMIDAGI
TOSHKENT AXBOROT TEXNOLOGIYALARI UNIVERSITETI
URGANCH FILIALI
KOMPYUTER INJINERINGI FAKULTETI
961-20 GURUH TALABASI
Otaxonov Islombekning
WEB DASTURLASH FANIDAN
Mavzu:
Jqueryda funksiyalarni qo’llash
Bajardi:
Kompyuter injineringi fakulteti
961-20 guruh talabasi: I.Otaxonov
Qabul qildi:
Web dasturlash fani o‘qituvchisi:
REJA:
1.HTML bilan ishlashning asosiy usullari
2.Elementlar uchun usullar
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>');
}