jQuery
jQuery — JavaScript ბიბლიოთეკაა, რომელიც ფოკუსირდება JavaScript-ის და HTML-ის ურთიერდამოკიდებულებაზე. jQuery ბიბლიოთეკა აადვილებს ნებისმიერ DOM-ის ელემენტთან დაშვებას, მიმართვას DOM ელემენტის ატრიბუტებთან და შინაარსთან, მათით მანიპულირებას. აგრეთვე jQuery ბიბლიოთეკა წარმოადგენს მოსახერხებელ API-ის Ajax-თან სამუშაოდ.
შექმნის ისტორია
რედაქტირებაჯონ რეზიგმა პროგრამირების შესწავლის დასაწყისში, ერთ-ერთი პირველი, რაც მან ნახა, ეს იყო HTML-ი. რეზიგი აპროგრამებდა QBasic-ზე, როდესაც ნაცნობმა აჩვენა HTML-ის საწყისიები და თუ როგორ უნდა შეექმნა საიტი (Angelfire-ის დახმარებით). საშობაოდ მას მამამ აჩუქა ორი HTML-ის წიგნი. სწორედ მაშინ იწყებდა იგი პროგრამირებას Visual Basic-ზე, ხოლო HTML-მა და ვებ-დიზაინმა ძალიან დააინტერესა.
მისწრაფება JavaScript სკრიპტისკენ გაჩნდა გაცილებით გვიან, დაახლოებით 2004 წელს. მაშინ რეზიგი ადგილობრივ ფირმა Brand Logic-ში მუშაობდა ნახევარ შეტატზე და სწავლობდა კოპიუტერული მეცნიერებათა ხარისხის მისაღებად. ის მუშაობდა საიტის დიზაინზე, რომელშიც იქმნებოდა მომხმარებელთა სქროლინგი. სხვა შემსრულებელთა კოდით იმედგაცრუებულმა და გაღიზიანებულმა ჯონმა გადაწყვიტა სერიოზულად შეესწავლა JavaScript-ი. შესწავლამ მას მისცა საშუალება დასკვნის, რომ JavaScript-ი არის უბრალო, მაგრამ დახვეწილი ენა, რომელიც საოცრად ძლიერი ინსტრუმენტია მრავვალი ამოცანის გადასაწყვეტად. შემდგმომი, jQuery ბიბლიოთეკის დამთავრებამდე, ორიოდ წლის განმავლობაში, ჯ. რეზიგმა რამდენიმე JavaScript პროგრამა შექმნა. საზოგედოებას jQuery ბიბლიოთეკა წარედგინა 2006 წელს ნიუ-იორკში, კოპიუტერულ კონფერენციაზე „BarCamp“.
jQuery ბიბლიოთეკის შექმნის ძირითად მიზანში რეზიგი ხედავდა კოდის მრავალჯერადი ნაწყვეტების კოდირებას, რომლებიც გააიოლებდნენ და გამოიყენებდნენ მათ ისე, რომ აღარ წამოჭრილიყო კროსპლათფორმული მოხმარების პრობლემები. 2006 წლის დასაწყისში რეზიგმა დაამთავრა მუშაობა jQuery ბიბლიოთეკაზე და გაუშვა იგი Internet Explorer-ში — ყველაფერი ამუშავდა. ეს იყო წარამტება!
შესაძლებლობები
რედაქტირებაფილოსოფია
რედაქტირებაისევე როგორც CSS განაცალკევებს ვიზუალიზაციას, ასევე JQuery განაცალკევებს ქცევებს HTML-ის სტრუქტურიდან. მაგალითად, ღილაკზე დაჭერის მოვლენის დამუშავების ნაცლად, მართვაე გადაეცემა JQuery-ის, რომელიც აკეთებს ღილაკის იდენთიფიკაციას, შემდეგ კი დაამშავებს მას როგორც დაკლიკებას. ქცევის ასეთი გამოცალკევებას აგრეთვე მოიხსენიებენ არამომაბეზრებელი JavaScript-ის პრინციპად.
jQuery ბილიოთეკას გააჩნია ფუნქციონალი მაქსიმალურად ფართო ამოცანათა წირისათვის სასარგებლოდ. თუმცა მუშა ჯგუფის ამოცანას არ წარმოადგენდა jQuery ფუნქციების იმდაგვარი შეთავსება , რომ ისინი გამოდგომოდა ყვლგან, რადგან ეს მოიტანდა კოდის გაზრდას, რომლის დიდი ნაწილი მაინც არ იქნებოდა გამოყენებული. ამის გამო რელიზებული იქნა ბიბლიოთეკის კომპაქტური უნივერსალური ბირთვის და პლაგინებსის არქიტექტურა ეს საშუალებას იძლევა რესურსისათვის შეიკრიბოს ზუსტად ის JavaScript-ფუნქციონალი, რომელიც მისთვის არის საჭირო.
გამოყენება
რედაქტირებაjQuery, წესისამებრ, ერთვის ვებ გვერთდს, როგორც ერთი გარე JavaScript-ფაილი:
<head>
<script type="text/javascript" src="გზა/ფაილამდე/jQuery.js"></script>
</head>
jQuery-ის მთელი მუშაობა მიდის $
ფუნქციის დახმარებით. თუ საიტზე კიდევ გამოიყენება სხვა JavaScript ბილიოთეკები, რომლებიც სავარაუდოდ $
-ს იყენებენ თავიანთი საჭიროებისათვის, შესაძლებელია გამოყენებული იქნას მისი სინონიმი — jQuery
. მეორე მეთოდი ითვლება უფრო სწორად, იმისათვის კი, რომ კოდი არ გამოჩნდეს ძალიან მოუქნელი, შეიძლება ჩაიწეროს შემდეგნაირად:
jQuery(
function($) {
// აქ უკვე სკრიპტის კოდი, სადაც $-ში იქნება jQuery
}
)
jQuery-სთან მუშაობა შეიძლება გაიყოს 2 ტიპად:
- jQuery-ობიექტის მიღება
$()
ფუნქციის დახმარებით. მაგალითად, მასში CSS-სელექტორის გადაცემით, შესაძლებელია კრიტერიუმში შემავალი ყველა HTML ელემენტის jQuery-ობიექტის მიღება და შემდეგში მათზე მოქმედებები jQuery-ობიექტის სხვადასხვა მეთოთების დახმარებით. $
ობიექტის გლობალური მეთოდების გამოძახება, მაგალითად, მასივზე მოსახერხებელი იტერატორებისა.
ერდროულად რამოდენიმუ DOM კვანძით მანიპულირების ტიპური მაგალითია $
ფუნქციის გამოძახება CSS-ის სელექტორის სტრიქონით, რომელიც აბრუნებს jQuery ობიექტს HTML-გვერდის ელემენტების გარკვეული რიცხვით. ეს ელამენტები შემდეგში მუშავდება jQuery-ის მეთოდებით. მაგალითად,
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
პოულობს ყველა <div> ელემენტს test კლასით, აგრეთვე ყველა <p> ელემენტს quote კლასით, შემდეგ ყველა მათგანს დაუმატებს blue კლასს და ვიზუალურად ნელა დაუშვებს ქვემოთ.
მეთოდები, რომლებიც იწყება $.
, მოსახერხებელია გლობალური ობიექტების დასამუშავებლად, მაგალითად:
$.each(
[1,2,3], function() {
document.write(this + 1);
}
);
გვერდზე დაამატებს 234
-ს.
$.ajax
და შესაბამისი ფუნქციები საშუალებას იძლება AJAX მეთოდების გამოყენებისა, მაგალითად:
$.ajax(
{
type: "POST",
url: "some.php",
data: {name: 'John', location: 'Boston'},
success: function(msg){
alert( "Data Saved: " + msg );
}
}
);
ამ მაგალითში მიმართვა ხდება some.php
სკრიპტზე name=John&location=Boston
პარამეტრებით და მიღებული შედეგი გამოტანება alert()
ფუნქციის დახმარებით.
მაგალითი, სადაც jQuery-ს მეშვეობით ელემენტს ემატება click-ის დამუშავება:
jQuery(
function($) {
$("a").click(
function() {
alert("Hello world!");
}
);
}
);
ამ შემთხვევაში <A> ელემენტზე დაჭერისას გამოიძახება alert("Hello world!")
ფუნქცია.