Jquery Darslar | O'zbekcha!

...

1.Kirish

REJA:

HTML bo'yicha boshlang'ich ko'nikmaga ega bo'lish <html> <⁄html>

CSS bo'yicha boshlang'ich ko'nikmaga ega bo'lish <CSS> <⁄html>

Kursdan asosiy maqsadi jQuery kutubxonasini to'liq o'rganib olib, uning yordamida osonlik bilan responsive va zamonaviy web sahifalar yaratishni o'rganish. Albatta kursni oxirida, jQuery yordamida o'zimizning loyihalarda qanday qilib ishlatishni ko'rib chiqamiz

Jqueryni John Regsig 2005 yilda tuzgan bo'lib JavaScriptning eng katta kutubxonasidir.

Jquery bu hozirgi kundagi eng mashxur kutubxona va web sayt yaratuvchilari tomonidan doimiy bajariladigan vazifalar, foydalanuvchi vazifalariga javob berish sahifani boshqarish, serverdan ma'lumot yuklash, turli xil effect va animatsiyalar yaratish, turli xil vazifalarni yaratish uchun javascript funksiyalaridan tashkil topgan kutubxona, Jquery Javascript Dom API ustiga qurilganiga qaramay, ayni vazifalarni kamroq kod yozish orqali foydalanishimizni ta'minlaydi. 2014 yil holatiga top millionta saytlarni 60%i Jqueryda yozilgan.
Misol uchun:

sahifadagi rasmlarni barchasini o'lchamini kichraytirish uchun

javascriptda

var imgs = document.getElementsByClassName("img");

for (var i = 0; i < imgs.length; i++) {

imgs[i].style.width = "50px";

}

Jqueryda esa

$("img").width(50);

Jqueryni sahifaga ulashning ikki xil usulda ulash mumkin
1.Ko'chirib olib: <script src="jquery.min.js"></script>
2.CDN orqali ulash mumkin: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Keling bitta misol ko'raylik sahifangizda 10 ta h1 bor bularning barchasini bir varakayiga o'zgartirishingiz mumkin.

<script>
$("h1").text("Jquery eng zo`ri!")
</script>

jQueryda elementlarni topish cssdagi selectorga o'xshab ketadi.

$("p").text("O'zgartiriladigan text");

$("#header").text("Id elementini topish");

$(".head").text("Class elementini topish");

jQueryda elementlar haqida maʼlumot olish va uni ustida amallar bajarish ham mumkin.

var headtext = $("#display").text();

console.log(headtext);

$("#display").text("ikkinchi " + headtext + " davomi");

jQueryda elementlarni o'zgartirish

$("h1").text("text funksiyasi faqat text ko'rinishida yozilad. <b>text</b>");

$("h1").html("html teglarni tushunadi. <b>text</b>");

$("p").css("color", "red"); //css orqali rang bering. faqat ikki parametr qabul qiladi

$("h1").addClass("yangiclass"); //yangi klass qo'shish, va styleni o'zgartirib, ajratib olish

$("a").attr("href", "link manzili"); // a tegi ham ikki parametr qabul qiladi. attributi esa bitta element

$("img").attr("src", "rasm linki manzili"); // img tegi ham ikki parametr qabul qiladi. attributi esa bitta element

jQueryda elementlarni yaratish

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Bundan oldin HTML va CSS bo'yicha boshlang'ich ko'nikma yaxshi o'rganib olish

Videolarni etibor bilan ko'rib chiqish.

Video davomida yozilayotgan kodlarni o'zingizda ham yozib oling.

Tushunmagan va qiyin tuyilgan mavzular yoki savollarni yozib boring.

Practice, Practice va yana Practice.

1. VS Code IDE (Live Server) (https://code.visualstudio.com/docs/?dv=win)

2. Google Chrome Browser (https://www.google.com/chrome/)