JQuery da CSS bilan ishlash usullari

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2015-05-06

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.

3551 marta o`qildi.

shoydullo adminstrator