Mavzu: jqueriy ga kirish va undan foydalanish usullari

Mavzu: JQueriy ga kirish va undan foydalanish usullari
Biz JavaScript va JQuery-ni bir necha yildan beri bilamiz. JavaScript jQuery'dan oldin ixtiro qilingan. Ikkalasi ham kuchli va veb-ishlab chiqishda qo'llaniladi va bir xil maqsadda, ya'ni veb-sahifani interaktiv va dinamik qilish uchun ishlatiladi. Boshqacha qilib aytganda, ular veb-sahifalarga hayot olib keladi. Odamlar, agar ular bir xil maqsadda ishlatilsa, nega bu ikkita alohida tushunchalar deb hayron bo'lishi mumkin? Ushbu JavaScript va jQuery maqolasida biz quyidagi ketma-ketlikda qaysi biri ikkinchisidan yaxshiroq ekanligini bilib olamiz:

• 
  JavaScript: Veb-ishlab chiqishda kuchli til
  
• 
  JQuery: JavaScript-dan ishlab chiqilgan kutubxona
  
• 
  JQuery nima uchun yaratilgan va JQuery ning maxsus imkoniyatlari qanday
  
• 
  Misollar bilan JavaScript va JQuery o'rtasidagi farq
  
• 
  HTML hujjatimizga JavaScript va JQuery qo'shish
  
• 
  DOM o'tish va manipulyatsiya
  
• 
  Voqealarni boshqarish
  
• 
  Ajax qo'ng'iroqlari
  
• 
  Animatsiya
  

JavaScript: Veb-ishlab chiqishda kuchli til

JavaScript - bu veb-sahifalarimizga interaktivlikni qo'shish uchun ishlatiladigan skript tili. Bu HTML va CSS bilan bir qatorda veb-sahifalarni yaratish uchun ishlatiladigan uchta asosiy texnologiyalardan biridir. HTML va CSS veb-sahifaning tuzilishini va veb-sahifalarning ko'rinishini/uslubini belgilaydigan bo'lsa-da, JavaScript veb-sahifaga interaktivlik qo'shish orqali dinamik qilish uchun ishlatiladi, ya'ni JavaScript-da biz sichqonchani bosish, sichqonchani ustiga bosing va boshqa kodlarni qo'shishimiz mumkin. veb-sahifadagi voqealar va boshqalar.

JavaScript barcha veb-brauzerlar tomonidan qo'llab-quvvatlanadi va veb-brauzerlar JavaScript kodini aniqlash va u bilan ishlash uchun o'rnatilgan JavaScript dvigateliga ega. Shunday qilib, JavaScript asosan mijoz tomonidagi tildir. Bu prototipga asoslangan ob'ektga yo'naltirilgan til kabi protsessual til sifatida ishlatilishi mumkin bo'lgan tillardan biridir. Birlamchi JavaScript-dan foydalanganda biz protsessual til bilan ishlaymiz, ilg'or JavaScript esa ob'ektga yo'naltirilgan tushunchalardan foydalanadi.
Keling, JavaScript va jQuery bilan ishlashni davom ettiramiz va JavaScript-dan ishlab chiqilgan kutubxonani tushunamiz.
jQuery: JavaScript-dan ishlab chiqilgan kutubxona
Yillar davomida JavaScript veb-ishlab chiqish uchun kuchli tilga aylandi. JavaScript-ning ustiga qurilgan ko'plab kutubxonalar va ramkalar mavjud. Ushbu kutubxonalar va ramkalar JavaScript imkoniyatlarini kengaytirish, u bilan ko'p narsalarni qilish va shuningdek, ishlab chiquvchining ishini osonlashtirish uchun ishlab chiqilgan. Qo'shimcha ma'lumot olish uchun bugun ushbu veb-dasturchi kursini tekshiring .

jQuery JavaScript-ning shunday kutubxonalaridan biri bo'lib, undan yaratilgan. Bu Jon Resign tomonidan ixtiro qilingan eng mashhur JavaScript kutubxonasi va 2006 yil yanvar oyida BarCamp NYC da chiqarilgan. jQuery bepul, ochiq kodli kutubxona, MIT litsenziyasi ostida litsenziyalangan. Bu o'zaro brauzer muvofiqligining kuchli xususiyatiga ega. U JavaScript bilan duch kelishimiz mumkin bo'lgan brauzerlar o'rtasidagi muammolarni osongina hal qila oladi. Shunday qilib, ko'plab ishlab chiquvchilar brauzerlar o'rtasidagi muvofiqlik muammolarini oldini olish uchun jQuery-dan foydalanadilar. Endi keling, JavaScript va jQuery blogiga o'tamiz va jQuery nima uchun yaratilganligini bilib olaylik.
jQuery nima uchun yaratilgan va jQuery ning maxsus imkoniyatlari qanday?
JavaScript-da biz asosiy operatsiyalar uchun juda ko'p kod yozishimiz kerak, jQuery bilan bir xil amallarni bitta kod qatori bilan bajarish mumkin. Shuning uchun ishlab chiquvchilar uchun JavaScript-dan ko'ra jQuery bilan ishlash osonroq.

• 
  JavaScript jQuery rivojlangan asosiy til bo'lsa-da, jQuery hodisalarni boshqarish, DOM manipulyatsiyasi, Ajax qo'ng'iroqlarini JavaScript-ga qaraganda ancha osonlashtiradi. jQuery shuningdek, bizning veb-sahifamizga JavaScript bilan juda ko'p og'riq va kod satrlarini talab qiladigan animatsion effektlarni qo'shish imkonini beradi.
  
• 
  jQuery veb-sahifada operatsiyani bajarish uchun o'rnatilgan plaginlarga ega. Uni ishlatish uchun plaginni veb-sahifamizga kiritishimiz yoki import qilishimiz kifoya. Shunday qilib, plaginlar bizga animatsiyalar va o'zaro ta'sirlar yoki effektlarning abstraktsiyalarini yaratishga imkon beradi.
  
• 
  Biz jQuery yordamida maxsus plaginni ham yaratishimiz mumkin. Agar biz veb-sahifada ma'lum bir tarzda animatsiya bajarilishini talab qilsak, biz talabga muvofiq plagin ishlab chiqishimiz va uni veb-sahifamizda ishlatishimiz mumkin.
  
• 
  jQuery-da yuqori darajadagi UI vidjet kutubxonasi ham mavjud. Ushbu vidjet kutubxonasida biz veb-sahifamizga import qilishimiz va undan foydalanuvchilarga qulay veb-sahifalar yaratish uchun foydalanishimiz mumkin bo'lgan bir qator plaginlar mavjud.
  

HTML hujjatimizga JavaScript va jQuery qo'shish
JavaScript to'g'ridan-to'g'ri teg ichidagi HTML hujjatiga qo'shiladi yoki tashqi JavaScript fayli src atributidan foydalangan holda HTML hujjatiga qo'shilishi mumkin.
To'g'ridan-to'g'ri skript yorlig'i ichiga yozilgan:

JQuery-dan foydalanish uchun biz faylni uning veb-saytidan yuklab olamiz va yuklab olingan jQuery faylining yo'liga SCRIPT tegining src atributiga murojaat qilamiz yoki uni to'g'ridan-to'g'ri CDN (Kontent yetkazib berish tarmog'i) dan olishimiz mumkin.



CDN dan foydalanish :



DOM o'tish va manipulyatsiya
JavaScript-da: jQuery'da

jQuery deyarli barcha DOM harakatlari uchun oldindan belgilangan hodisalarga ega. Harakat uchun maxsus jQuery hodisasidan foydalanishimiz mumkin.

$(“p”).click (function () {
// click action
});
DOM elementini JavaScript-da document.getElementById() usuli yoki document.querySelector() usuli yordamida tanlashimiz mumkin.
var mydiv = document.querySelector(“#div1”); yoki
document.getElementById(“#div1”);
jQuery'da:
Bu erda biz faqat $ belgisini qavs ichidagi selektor bilan ishlatishimiz kerak.
$(selector)
$(“#div1”) – The selector is an id ‘div1’
$(“.div1”) – The selector is a class ‘div1’
$(“p”) – The selector is the paragraph in the Html page
Yuqoridagi bayonotda $ - jQuery-ga kirish uchun ishlatiladigan belgi, selektor - HTML elementi.
JavaScript-da uslublar qo'shish:
document.getElementById ('myDiv').style.backgroundColor="#FFF"
JQuery-da uslublar qo'shish:
$('#myDiv').css (‘background-color','#FFF');
#myDiv selektori "myDiv" identifikatoriga ishora qiladi.
DOM elementini tanlash va manipulyatsiya qilish jQuery-da JavaScript-ga qaraganda ancha qisqaroq.
Voqealarni boshqarish bilan davom eting.
$(“#button1”).dblclick (function () {
// action for the double click event on the html element with id ‘button1’
}
JQuery "on" usuli DOM elementiga bir yoki bir nechta hodisa qo'shish uchun ishlatiladi.
$(“#button1”).on (“click”, function () {
// action here
});
Biz on usuli bilan bir nechta hodisalar va bir nechta hodisa ishlov beruvchilarini qo'shishimiz mumkin.
$(“button1”).on ({
click: function () {
// action here
},
dblclick: function () {
// action here
}
});
Ikki yoki undan ortiq hodisalar quyidagi kabi bir xil ishlov beruvchiga ega bo'lishi mumkin:
$(“#button1”).on (“click dblclick”, function () {
// action here
});
Shunday qilib, biz kamroq va ixcham kod bilan hodisalarni boshqarish JavaScript-ga qaraganda jQuery-da osonroq ekanligini ko'ramiz.
Ajax Calls bilan davom eting.