linkedin facebook linkedin facebook nod32

jQuery shakllarni tanlash

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2015-04-19

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.

714 marta o`qildi.

Foydalanuvchi ismi: 203 Abdullayev Farrux
Qo`shilgan sana: 2015-04-20

yaxshi

Foydalanuvchi ismi: Jahangir Baltabaev
Qo`shilgan sana: 2016-01-20

jQuery haqida malumotlar yaxshiyam bor ekan.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений