linkedin facebook linkedin facebook nod32

jQuery da html bilan ishlash usullari

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2015-05-26

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>');
}

Siz jQuery bilan juda ko'p narsalarni qilishingiz mumkin. Siz allaqachon bilaman, ilmiy metodlarni qo'llash, o'z ustida biror narsa qilishga harakat qiling.

817 marta o`qildi.

Foydalanuvchi ismi: Azam
Qo`shilgan sana: 2016-07-25

<script>article()script>

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
счетчик посещений