ამოცანა 3 – დავალება / პასუხი – JQUERY

წინა გაკვეთილში, ჩვენ ავირჩიეთ / მივიღეთ / ამოვიღეთ, DOM ხიდან / სტრუქტურიდან სურათი logo.jpg ჩვენი სატესტო ვებ-გვერდის თავიდან (header -დან), და ეს გავაკეთეთ შემდეგნაირად: $(‘img[src*=logo]’).hide();
თქვენი დავალებაა: აირჩიოთ / მიიღოთ / ამოიღოთ იგივე (logo) ელემენტი, ორი სხვადასხვა ხერხის / გზის გამოყენებით გავლილი / ნასწავლი, მასალებიდან / გაკვეთილებიდან გამომდინარე
პასუხი:
ჩავრთოთ ვებ-სერვერი
კოდის რედაქტორ პროგრამაში გავხსნათ, სატესტო ვებ-გვერდის 1800flowers.com, index.html ფაილი:

2015-11-07_05-34-57
ასევე კოდის რედაქტორ პროგრამაში გავხსნათ, სატესტო ვებ-გვერდის 1800flowers.com, js ფოლდერში არსებული ფაილი myjqueryscripts.js:
ამოცანა 2 – დავალება პასუხი – jQuery
ამოცანა 2 – დავალება პასუხი – jQuery
2015-11-07_05-56-16
დავალებიდან გამომდინარე:
თქვენ შეგიძლიათ მოიფიქროთ საკუთარი სხვადასხვა ხერხი, იმისათვის რომ როგორც დავალება გვეუბნება აირჩიოთ / მიიღოთ / ამოიღოთ ვებ-გვერდის DOM ხიდან / სტრუქტურიდან, სურათი logo.jpg, ამავდროულად დამატებით დავწეროთ სკრიპტი / კოდი, რომლის გამოყენებითაც ავირჩევთ / მივიებთ / ამოვიღებთ ჩვენთვის სასურველ ელემენტს / ობიექტს ვებ-გვერდის სტრუქტურიდან:
პირველი ხერხი:
<img src=”images/logo.jpg” width=”900″ height=”108″ alt=”header” title=”ვებ-გვერდის ქუდი” />
alt ატრიბუტის სახელწოდების / დასახელების / მნიშვნელობის მიხედვით, შეგვიძლია ავირჩიოთ / მივიღოთ / ამოვიღოთ ჩვენთვის სასურველი ელემენტი / ობიექტი, ვებ-გვერდის DOM სტრუქტურიდან, ჩვენს შემთხვევაში ეს ობიექტია / ელემენტია: logo.jpg
<img src=”images/logo.jpg” width=”900″ height=”108″ alt=”header” title=”ვებ-გვერდის ქუდი” />
2015-11-07_05-52-31
$(document).ready(function() {
var textH1 = $(‘#main_h1’).text(‘შეცვლილი ტექსტი jQuery -ს დახმარებით’);
var myLogo = $(‘img[src*=logo]’);
myLogo.hide(3000);
myLogo.show(3000);
});
შედეგი:

მეორე ხერხი:
როგორც ხედავთ, სურათი რომლის არჩევა / მიღება / ამოღებაც ჩვენს გვსურს დავალების პირობიდან გამომდინარე, მოქცეულია DIV ბლოკში, რომელსაც გააჩნია იდენტიფიკატორი id=”forheader”:
2015-11-07_05-53-56
გამომდინარე აქედან ჩვენ შეგვიძლია ავირჩიოთ / მივიღოთ / ამოვიღოთ ყველა შვილი სურათი რომელიც მოქცეულია DIV ბლოკში, რომლის იდენტიფიკატორიც როგორც ზევით ავღნიშნეთ არის id=”forheader”
ამისათვის, ჩვენს myjqueryscripts.js ფაილში, უნდა დავწეროთ შემდეგი სკრიპტი / კოდი:
$(document).ready(function() {
var textH1 = $(‘#main_h1’).text(‘შეცვლილი ტექსტი jQuery -ს დახმარებით’);
var myLogo = $(‘#forheader img‘);
myLogo.hide(3000);
myLogo.show(3000);
});
2015-11-07_06-22-08
შედეგი იქნება იგივე, რაც პირველი ხერხის შემთხვევაში ანუ:

Advertisements

ფუნქციები text(), hide() და show() – jQuery

ჩვენ შევისწავლეთ ელემენტების ვებ-გვერდიდან არჩევა / მიღება / ამოღების ფუნქციონალი და ეხლა უკვე დროა შევისწავლოთ გარკვეული / კონკრეტული ქმედებების განხორციელება ვებ-გვერდიდან უკვე არჩეულ / მიღებულ / ამოღებულ ელემენტებზე. ამ გაკვეთილში ჩვენ შევისწავლით პირველ სამ მეთოდს რომელიც მოგვცემს საშუალებას განვახორციელოთ კონკრეტული ტიპის ქმედებები ელემენტებზე რომელიც ჩვენს ვებ-გვერდზე არსებობს.
ამისათვის საჭიროა:
ჩავრთოთ ლოკალური ვებ-სერვერი
განვიხილოთ მეთოდი text() რომელიც გვაძლევს საშუალებას ამოვიღოთ ვებ-გვერდზე არსებულ ნებისმიერ ელემენტში შენახული ტექსტი და შევცვალოთ ის.
ჩვენ javascript კურსის შესწავლის დროს განვიხილეთ თვისება innerText, რომელიც სამწუხაროდ არც თუ ისე სწორად მუშაობდა ყველა ვებ ბრაუზერში, jQuery -ში კი ეს პრობლემა მოგვარებულია.
მაგალითად ამოცანა გვეუბნება რომ, ჩვენი სატესტო ვებ-გვერდიდან გვსურს ამოვიღოთ ტექსტი და შემდეგ შევცვალოთ ის სხვა ტექსტით:
2015-04-13 15_12_18-ყვავილების მაღაზია_ 1800flowers.com
2015-04-13 15_13_41-_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
პირველი საჭიროა რომ ელემენტში მოთავსებული ტექსტი ჯერ ამოვიღოთ და დავბეჭდოთ ის ეკრანზე, ჩვენ ეს უკვე ვიცით როგორც უნდა გავაკეთოთ, რადგან ელემენტს რომელშიც ეს ტექსტია მოთავსებული აქვს იდენთიფიკატორი main_h1:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
მას ამოვიღებთ სწორედაც იდენთიფიკატორის დახმარებით / გამოყენებით:
გავხსნათ სატესტო ვებ-გვერდის ცენტრალურ ფოლდერში არსებულ, js ფოლდერში მოთავსებული: myjqueryscripts.js ფაილი და დავწეროთ მასში შემდეგი jQuery ფუნქცია:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
რომლითავ ვეუბნებით კომპიუტერს რომ, ჩვენ გვსურს ელემენტის არჩევა / მიღება / ამოღება main_h1 იდენთიფიკატორის დახმარებით.
ასევე აქვე აღსანიშნავი და აუცილებელია იცოდეთ შემდეგი ფაქტი, რომ მსგავსი ჩანაწერით ჩვენ შევქმენით jQuery ობიექტი, დაიმახსოვრეთ რომ როცა თქვენ წერთ ფუნქციას რომლის საშუალებითაც იღებთ ელემენტს (-ებს), თქვენ ამ დროს ქმნით jQuery ობიექტს და თქვენთვის ხელმისაწვდომი ხდება ყველა jQuery თვისება ამ ობიექტის მიმართ. jQuery ობიექტს გააჩნია ძალიან ბევრი თვისებები და თანმიმდევრობით ჩვენ შევისწავლით მათ.
ჩვენ შევქმენით როგორც ზევით ავღნიშნეთ jQuery ობიექტი და ეხლა უკვე ჩვენ შეგვიძლია მას მივაკუთვნოთ / მივუწეროთ / გავუთავისოთ / დავუწეროთ რომელიმე ჩვენთვის სასურველი მეთოდი (-ები). პირველი ასეთი მეთოდი არის როგორც ასევე ზევით ავღნიშნეთ არის მეთოდი text(), რომელიც იწერება შემდეგნაირად:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
ეს ჩანაწერი დაგვიბრუნებს ტექტს რომელიც მოთავსებულია main_h1 ელემენტში.
იმისათვის რომ ის დავბეჭდოთ კომპიუტერის ეკრანზე ვებ-ბრაუზერში, ჯერ უნდა მივაკუთვნოთ / შევუთავსოთ / გავუთავისოთ / გავუტოლოთ ის ცვლადს ჩვენთვის სასურველი სახელით (მაგალითის შემთხვევაში შევქმნით js ცვლადს სახელით: textH1) და შემდეგ alert() მეთოდის საშუალებით გამოვიტანოთ ეკრანზე:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
განვაახლოთ ჩვენი სატესტო ვებ-გვერდი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
შედეგი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
იმ შემთხვევაში თუ გვინდა ამ ტექსტის შეცვლა, ალბათ თქვენ უკვე გამოიცანით თუ რა ქმედება უნდა შევასრულოთ, უბრალოდ ფუნქციას უნდა გადავცეთ პარამეტრის სახით ჩვენთვის სასურველი ტექსტი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
შენიშვნა: alert() მეთოდი აღარ გვჭირდება, იმიტომ რომ ჩვენ გვსურს ტექსტის ჩანაცვლება და არა ეკრანზე შეტყობინების სახით დაბეჭდვა.
განვაახლოთ ჩვენი სატესტო ვებ-გვერდი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
შედეგი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
შემდეგი ფუნქცია რომელსაც ჩვენ შევისწავლით არის ფუნქცია hide(), რომლის დახმარებითაც / გამოყენებითაც ჩვენ შეგვიძლია დავმალოთ ჩვენთვის სასურველი ელემენტი ვებ-გვერდიდან. წარმოვიდგინოთ რომ ჩვენი ამოცანაა ვებ-გვერდიდან დავმალოთ ელემენტი რომელიც მოთავსებულია ჩვენი სატესტო ვებ-გვერდის თავში (header) და მისი სახელია logo.jpg:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
პირველ შემთხვევაში საჭიროა რომ ჩვენ ის ავირჩიოთ / მივიღოთ / ამოვიღოთ jQuery ფუნქციის დახმარებით ანუ მივწვდეთ მას, მისი არჩევა / მიღება / ამოღება შესაძლებელია რამოდენიმე მეთოდის საშუალებით / დახმარებით, მოდით ჩვენ ავირჩიოთ ამ მეთოდთაგან ერთერთი და ვიპოვოთ ისეთი სურათი რომელსაც წყაროს (source / src) ატრიბუტში უწერია / წერია / შეიცავს ჩანაწერს logo:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
როგორც ზემოთ ავღნიშნეთ ამ ჩანაწერით ჩვენ შევქმენით jQuery ობიექტი, რომელიც მიუთითებს მისამართს / ბმულს ჩვენთვის სასურველ სურათზე, ეხლა კი ჩვენ შეგვიძლია მასზე განვახორციელოთ ჩვენთვის სასურველი ქმედებები jQuery -ს დახმარებით / გამოყენებით.
იმისათვის რომ დავმალოთ ჩვენთვის სასურველი სურათი logo, საჭიროა ჩვენს მიერ შექმნილ jQuery ობიექტს მივუწეროთ მეთოდი hide():
1
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
განვაახლოთ ჩვენი სატესტო ვებ-გვერდი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
შედეგი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
ასევე აღსანიშნავია ისიც რომ მეთოდს hide() გააჩნია ორი პარამეტრი:
პირველი: გაქრობის სიჩქარე (რომელიც იზომება მილიწამებში) – ამ პარამეტს ამავე გაკვეთილში განვიხილავთ
მეორე: ფუნქცია რომელიც შესრულდება ამ მეთოდის ქმედების დასრულენის შემდეგ (როცა სურათი გაქრება, შემდეგ შესრულდეს რაიმე / რომელიმე ჩვენს მიერ დაწერილი ფუნქცია) – შემდეგ გაკვეთილებში განვიხილავთ.
მივუთითოთ / გადავცეთ პარამეტრის სახით, ჩვენთვის სასურველი გაქრობის სიჩქარის დრო, მაგალითად 3 წამი, ანუ 3000 მილიწამი:
2
განვაახლოთ ჩვენი სატესტო ვებ-გვერდი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
შედეგი:

მეთოდი show() ალბათ უკვე გამოიცანით რომ, პირიქით გამოაჩენს დამალულ სურათს:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
ანუ ამ შემთხვევაში მოხდება, ჯერ სურათის გაქრობა 3 წამის განმავლობაში ხოლო შემდეგ 3 წამის განმავლობაში მისი გამოჩენა:

შენიშვნა: იმ შემთხვევაში თუ თქვენ ერთი და იგივე არჩეულ ელემენტთან (ანუ როგორც ზევით ავღნიშნეთ ჩვენს მიერ შექმნილ jQuery ობიექტთან) მუშაობთ jQuery -ს სხვადასხვა მეთოდების გამოყენებით, სასურველია jQuery ობიექტი შევინახოთ რაიმე ცვლადში, იმიტომ რომ როცა ამას ჩვენ არ ვაკეთებთ, კომპიუტერს ორ ჯერ უწევს DOM ხეზე არსებული ელემენტების მოძებნა და შემდეგ მასზე ჩვენს მიერ მითითებული მეთოდების / მოქმედებების განხორციელება ანუ ჩვენს ჩემთხვევაში:
$(document).ready(function() {
$(“img[src*=logo]”).hide(3000); – მოძებნა, იპოვა, დამალა
$(“img[src*=logo]”).show(3000); – მოძებნა, იპოვა, გამოაჩინა
});
ანუ ვებ-გვერდზე რომ ძალიან ბევრი სურათი გვქონდეს, ეს ფუნქცია მაშინ ყველა სურათს გადაამოწმებს და ბოლოს იპოვის ჩვენთვის სასურველს და შემდეგ განახორციელებს მეთოდს, იმისათვის რომ არ მოხდეს ტყუილად დროის კარგვა, იმ შემთხვევაში თუ ჩვენ ერთი და იგივე ობიექტს ვემუშავებით რამოდენიმე / სხვადასხვა მეთოდებით ამისათვის საჭიროა, ობიექტი მოვათავსოთ რაიმე ჩვენთვის სასურველ ცვლადში, ცვლადის სახელს კი დავუწეროთ ჩვენთვის სასურველი მეთოდები:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
ანუ:
$(document).ready(function() {
var myLogo = $(“img[src*=logo]”); – myLogo ცვლადში შეინახა ნაპოვნი სურათი (ან მხოლოდ ერთხელ მოძებნა, იპოვა და შეინახა myLogo ცვლადში ნაპოვნი სურათი)
myLogo.hide(3000); – დამალა
myLogo.show(3000); – გამოაჩინა
});
შედეგი კი იგივეა / უცვლელია:

DOM ხის ფორმირების / ჩამოყალიბების დასრულება – jQuery

ჩვენ დავასრულეთ ძალიან დიდი და საჭირო თემა, ეს არის ელემენტების არჩევა / მიღება / ამოღება ვებ-გვერდებიდან, ამის შედეგად საჭიროა ვისწავლოთ ქმედებების განხორციელება უკვე არჩეულ / მიღებულ / ამოღებულ ელემენტებზე, მაგრამ სანამ მომდევნო თემაზე გადავიდოდეთ, უნდა განვიხილოთ ერთ-ერთი საინტერესო და საჭირო საკითხი, რომელიც მდგომარეობს შემდეგში:
javascript კურსის შესწავლის დროს, ჩვენ განვიხილეთ რომ, სანამ არ არის ჩამოყალიბებული DOM ხე, ჩვენ ვერ შევძლებს ამ ვებ-გვერდის ელემენტებზე რაიმე ქმედების შესრულებას, სწორედ ამისათვის მივაერთეთ ჩვენი სამუშაო js ფაილი, ჩვენი სატესტო ვებ-გვერდის ბოლოს:
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
მიუხედავად ამისა, jQuery -ს გააჩნია სპეციალური მექანიზმი იმისა რომ,  დაელოდოს ვებ-გვერდის ჩატვირთვას ბოლომდე და შემდეგ ამუშავდეს / ამოქმედდეს ჩვენს მიერ დაწერილი სკრიპტი / კოდი. გამომდინარე აქედან, ჩვენი სამუშაო myjqueryscripts.js ბიბლიოთეკა უნდა ავიტანოთ დოკუმენტის თავში ანუ head კონტეინერში / ბლოკში:
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
ამის შედეგად, კოდის რედაქტორ პროგრამაში გავხსნათ myjqueryscripts.js ფაილი და მასში დავწეროთ სპეციალური კონსტრუქცია, რომლის საშუალებითაც ხდება დალოდება ვებ-გვერდის ჩატვირთვისა და შემდეგ ხდება მის შიგნით დაწერილი ფუნქციონალის / სკრიპტის / კოდის ამოქმედება / ამუშავება:
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
რაც ნიშნავს იმას რომ:
$(document).ready(function() {
});
როცა დოკუმენტი საასრულებს ჩატვირთვას ბოლომდე, მაშინ ამოქმედდეს მასში ჩვენს მიერ დაწერილი ფუნქცია თუ ფუნქციონალი.
); აქ ხდება / არის ready ფუნქციის დასასრული
ასევე არსებობს ამავე ჩანაწერის შემოკლებული მეთოდიც, რომელიც იწერება შემდეგნაირად:
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co~
რომელიც ზუსტად იგივე ფუნქციას ასრულებს, გამოიყენეთ ის მეთოდი რომელიც თქვენთვის მარტივი და მისაღებია, ჩვენ შემდეგ გაკვეთილებში გამოვიყენებთ პირველ მეთოდს, რადგან ის უფრო გასაგებია jQuery -ს კურსის დამწყებთათვის.

არჩეული / მიღებული / ამოღებული ელემენტების ფილტრაცია – jQuery

ჩავრთოთ ლოკალური ვებ-სერვერი
ჩვენ უკვე წინა გაკვეთილებში განვიხილეთ ელემენტების არჩევა / მიღება / ამოღების 10 სხვადასხვა მეთოდი, რომლებიც გვაძლევს საშუალებას ვებ-გვერდიდან ამოვიღოთ ჩვენთვის სასურველი ელემენტები. მაგრამ jQuery ბიბლიოთეკის შემქმნელები ზემოთხსენებულ ფუნციონალზე არ შეჩერდნენ და დაამატეს კიდევ უფრო საინტერესო და მნიშვნელოვანი ფუნქციონალი, ელემენტების არჩება / მიღება / ამოღებისათვის ვებ-გვერდიდან. რომლის დახმარებითაც ჩვენ შეგვიძლია ვებ-გვერდიდან ელემენტების არჩევა / მიღება / ამოღება მნიშვნელოვანად მარტივი გავხადოთ. გამომდინარე აქედან ჩვენ კიდევ შევისწავლით jQuery -ს დამატებით 8 (რვა) შესაძლებლობას, რომლებიც ძირითადად ეხება ვებ-გვერდიდან არჩეული / მიღებული / ამოღებული ელემენტების ფილტრაციას. რომლებიც მუშაობენ შემდეგნაირად:
განვიხილოთ მონაცემების ფილტრაციის პირველი ფუნქცია:
კოდის რედაქტორ პროგრამაში გავხსნათ ჩვენი სატესტო ვებ-გვერდის გამშვები ფაილი index.html:

და მასში ვიპოვოთ შემდეგი ჩანაწერი:
2015-03-23 00_31_38_WLOCALSERVER_jQuery_mylocalwebserver_root_1800flowers.co
გავხსნათ ჩვენი სატესტო ვებ-გვერდი ვებ-ბრაუზერის დახმარებით, ვიპოვოთ და ვიხილოთ ეს ცხრილი ვიზუალურად:
2015-03-23 00_40_10-ყვავილების მაღაზია_ 1800flowers.com
როგორც ვხედავთ ეს არის ცხრილი და შედგება ორი სვეტისა და სამი ხაზისაგან, ესენია:
პირველი სვეტი:
პირველი სვეტის, პირველი ხაზი: პროდუქტის დასახელება
პირველი სვეტის, მეორე ხაზი: სენპოლია
პირველი სვეტის, მესამე ხაზი: ორქიდეა
მეორე სვეტი:
მეორე სვეტის, პირველი ხაზი: პროდუქტის ფასი
მეორე სვეტის, მეორე ხაზი: 50 ლარი
მეორე სვეტის, მესამე ხაზი: 80 ლარი
წარმოვიდგინოთ რომ, ამოცანა გვეუბნება შემდეგს: ცხრილის სათაურის ველის გარდა კიდევ უნდა დავამატოთ 2 ხაზი(ვარდი – 55 ლარი, ია – 15 ლარი), ანუ საერთო ჯამში გვექნება ორი სვეტი და 5 ხაზი.


შენიშვნა: პირველი ხაზი სათაური (-ები) იქნება, სათაურის ხაზი შექმნილია th ტეგის გამოყენებით, ხოლო პახუხები td ტეგის გამოყენებით:
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
გამომდინარე აქედან, თუ მხოლოდ პახუხებს დავითვლით გვექნება სულ 4 (ოთხი) ცალი.


ამოცანიდან გამომდინარე, შედეგის მისაღებად უნდა მოვახდინოთ მონაცემების დამატება ჩვენი სატესტო ვებ-გვერდის გამშვებ index.html ფაილში არსებულ სკრიპტში / კოდში:
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
ვიხილოთ შედეგი, ვებ-ბრაუზერში:
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
როგორც ხედავთ უკვე სათაურის ხაზის გარდა სულ გვაქვს უკვე, 4 პასუხი / ხაზი:
სენპოლია – 50 ლარი
ორქიდეა – 80 ლარი
ვარდი – 55 ლარი (დამატებული)
ია – 15 ლარი (დამატებული)
წარმოიდგინეთ რომ, არის შემთხვევა როცა ჩვენ გვჭირდება, ავირჩიოთ / მივიღოთ / ამოვიღოთ ამ ცხრილში არსებული პახუხებიდან მხოლოდ ლუწი პასუხები, ანუ მეორე და მეოთხე პასუხი:
სკრიპტის / კოდის რედაქტორი:
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
ვებ-ბრაუზერი:
2015-03-23 00_40_10-ყვავილების მაღაზია_ 1800flowers.com
იმ მეთოდების გამოყენებით რომლებიც ჩვენ წინა გაკვეთილებში განვიხილეთ, ჩვენ ამის გაკეთებას ვერ შევძლებთ, ჩვენ ვერ შევძლებთ ყველა ლუწი ელემენტების ამოღებას. მაგალითად ჩვენ რომ გვინდოდეს ყველა ლუწი ხაზის უკანა ფონი გაფერადდეს ნაცრის ფერად. იმიტომ რომ, ცხრილის წაკითხვის გამარტივებისათვის ხშირად ასე აკეთებენ. ლუწ ხაზებს აკეთებენ ნაცრის ფერი უკან ფონით, ხოლო კენტ ხაზებს ტოვებენ თეთრი უკანა ფონით. სწორედ ამისათვის გამოიყენება ფილრი.
როგორ მუშაობს ფილრტი?
პირველი ჩვენ უნდა ავირჩიოთ / მივიღოთ / ამოვიღოთ ცხრილი, რომელიც ჩვენ გვაინტერესებს, ჩვენს შემთხვევაში, უნდა ავირჩიოთ / მივიღოთ / ამოვიღოთ შემდეგი ცხრილი:
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
რომელსაც აქვს / გააჩნია იდენთიფიკატორი:
id=”flower_table”
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
გავხსნათ კოდის რედაქტორ პროგრამაში, ჩვენი სატესტო ვებ-გვერდის მთავარ დირექტორიაში არსებულ js ფოლდერში:
ამოცანა 2 – დავალება  პასუხი – jQuery
არსებული javascript ფაილი, სახელით myjqueryscripts.js :
ამოცანა 2 – დავალება  პასუხი – jQuery
და მასში დავწეროთ შემდეგი სკრიპტის / კოდის პირველი ხაზი:
$(‘#flower_table ‘);
ანუ ჩვენ გვაინტერესებს, ცხრილი რომლის იდენთიფიკატორი არის flower_table, შემდეგ ვწერთ რომ გვაინტერესებს ამ ცხრილში არსებული tr ტეგები, იმიტომ tr ტეგები რომ, ცხრილის პასუხები / ხაზები რომლებიდანაც ჩვენ გვსურს რომ ავირჩიოთ / მივიღოთ / ამოვიღოთ მხოლოდ ლუწი ტეგები, მოთავსებულის სწორედ tr ტეგებს შორის:
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
ანუ $(‘#flower_table tr‘);
და იმისათვის რომ ცხრილი გავფილტროთ, ლუწი პასუხების / ხაზების მიხედვით, ამისათვის უნდა დავწეროთ ორწერტილი (:) და შემდეგ სიტყვა even.


შენიშვნა: even ინგლისური სიტყვაა და ქართულად ლუწს ნიშნავს.


ანუ: $(‘#flower_table tr:even‘);
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co


შენიშვნა: როცა ჩვენ ვწერთ even ანუ ლუწი, სკრიპტი / კოდი დააბრუნებს მასივს javascript ენის ფუნქციონალიდან გამომდინარე ანუ ჩვენ javascript კურსის შესწავლის დროს, ვისწავლეთ რომ კომპიუტერი მასივში არსებული ობიექტების დათვლას იწყებს 0 დან და არა 1 დან.
ანუ ჩვენს შემთხვევაში სატესტო ვებ-გვერდის index.html გამშვებ ფაილში, არსებული ცხრილში, რომლის იდენთიფიკატორია flower_table, რომელშიც მოთავსებულია ოთხი პასუხი / ხაზი, კომპიუტერი პასუხად დაგვიბრუნებს მასივს სადაც ობიექტების დათვლა მოხდება შემდეგნაირად:
0 – სენპოლია – 50 ლარი
1 – ორქიდეა – 80 ლარი
2 – ვარდი – 55 ლარი
3 – ია – 15 ლარი
და როცა ჩვენ ვწერთ რომ გვსურს ლუწი ელემენტების არჩევა / მიღება / ამოღება ცხრილიდან, ზემოთ დაწერილი სკრიპტის ($(‘#flower_table tr:even‘);) / კოდის / პირობის გამოყენებთ ჩვენ მივიღებთ / კომპიუტერი დაგვიბრუნებს პასუხს, სადაც ლუწ ელემენტებად ჩათვლის: სენპოლიასა და ვარდს. ანუ:
0 – ლუწი – სენპოლია – 50 ლარი
1 – კენტი – ორქიდეა – 80 ლარი
2 – ლუწი – ვარდი – 55 ლარი
3 – კენტი – ია – 15 ლარი
ხოლო ვიზუალურად რომ შევხედოთ ვებ-ბრაუზერში მსგავსი გადათვლით:2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co


გამომდინარე აქედან, როცა მსგავსი ამოცანის ამოხსნა გიწევთ და საჭიროა ვებ-ბრაუზერის ვიზუალური მხარიდან გამომდინარე, ავირჩიოთ / მივიღოთ / ამოვიღოთ ლუწი ელემენტები, ამ დროს უნდა დავწეროთ რათქმა უნდა პირიქით, ანუ კომპიუტერს უნდა ვუთხრათ რომ მასივიდან გვსურს კენტი ელემენტების არჩევა / მიღება / ამოღება, ვებ-ბრაუზერში კი ესენი იქნება ლუწი ელემენტები.
დავწეროთ ეს პირობა კოდის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში:
$(‘#flower_table tr:odd‘);
2015-03-23 00_40_10-ყვავილების მაღაზია_ 1800flowers.com


შენიშვნა: odd ინგლისური სიტყვაა და ქართულად კენტს ნიშნავს.


რომ შევაჯამოთ პირველი სახის ფილტრი, ამ ფილტრის საშუალებით ჩვენ ავირჩევთ / მივიღებთ / ამოვიღებთ, მხოლოდ ლუწ ან კენტ ელემენტებს.
მეორე ტიპის ფილტრი ეს არის: not


შენიშვნა: not ინგლისური სიტყვაა და ქართულად უარყოფას ნიშნავს.


არსებობს შემთხვევა როცა, ჩვენ გვსურს სასურველი ტიპის ელემენტების არჩევა / მიღება / ამოღება ვებ-გვერდიდან, რომლების ერთი და იგივე ტიპისაა, მაგრამ მათგან არ გვინდა რომელიმე კონკრეტული ელემენტების არჩევა / მიღება / ამოღება. მაგალითად ვებ-გვერდზე გვაქვს უამრავი ბმული, ამავე დროს ეს ბმულები არის ვებ-გვერდის ნავიგაციის ერთ-ერთი ძირითადი შემადგენელი ნაწილი და ამ ყველა ბმულიდან გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ჩვენთვის სასურველი (და არა ყველა) კონკრეტული ბმულები და შევღებოთ ისინი წითლად. მაგრამ ვებ-გვერდის ნავიგაცია უცვლელი დავტოვოთ. გამომდინარე აქედან ჩვენ შეგვიძლია დავწეროთ პირობა, რომ გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ყველა ბმული, მაგრამ გარდა ბმულებისა რომლებიც მოთავსებულია ვებ-გვერდის ნავიგაციის ბლოკში.
ჩვენი სატესტო ვებ-გვერდის მიხედვით, შევასრულოთ not (უარყოფა) ფილტრის მაგალითი:
ჩვენი სატესტო ვებ-გვერდის გამშვები index.html ფაილს თუ დავათვალიერებთ, ვნახავთ რომ მასში გვაქვს ბევრი სურათი, ისინი სულ 6 ცალია:
1:  <img src=”images/logo.jpg” width=”900″ height=”108″ alt=”header” title=”ვებ-გვერდის ქუდი” />
2:  <img id=”img_1″ src=”images/flower1.jpg” width=”200″ height=”125″ alt=”ყვავილი 1″ />
3:  <img id=”img_2″ src=”images/flower2.jpg” width=”200″ height=”125″ alt=”ყვავილი 2″ />
4:  <img id=”img_3″ src=”images/flower3.jpg” width=”200″ height=”125″ alt=”ყვავილი 3″ />
5:  <img id=”img_4″ src=”images/flower4.jpg” width=”200″ height=”125″ alt=”ყვავილი 4″ />
6:  <img src=”images/footer.jpg” width=”900″ height=”67″ alt=”footer” title=”ბრენდები” />
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co~
წარმოვიდგინოთ რომ, ჩვენ გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ყველა სურათი, გარდა სურათებისა
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
რომლებიც მოთავსებული ბლოკში – div, რომელსაც გააჩნია იდენთიფიკატორი: div_for_img:
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
აი ეს ყვავილების (ყვავილი 1, ყვავილი 2, ყვავილი 3, ყვავილი 4) სურათები ჩვენ არ გვჭირდება.
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
$(‘img:not (#div_for_img img)’);
ანუ:
ჩვენ გვსურს ამოვიღოთ ყველა img სურათი, რომლებიც არსებობს index.html გვერდზე, გარდა :not იმ div -ისა (ბლოკისა) რომლის იდენთიფიკატორიც არის #div_for_img და მასში მოთავსებულია სურათები img.
განვიხილოთ მესამე სახის ფილტრი, ანუ არსებობს შემთხვევა როცა ჩვენ ვებ-გვერდიდან გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ისეთი სახის div ბლოკები, რომლებიც შეიცავენ სურათებს, ან გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ისეთი სახის div ბლოკები რომლებიც შეიცავენ ბმულებს ან რაიმე სხვა სახის ობიექტებს. ანუ არსებობს შემთხვევები როცა გვსურს ავირჩიოთ ობიექტი, რომელით შეიცავს ან მასში მოთავსებულია რაიმე სხვა ტიპის ობიექტი.
განვიხილოთ მაგალითი, წარმოვიდგინოთ რომ ჩვენი სატესტო ვებ-გვერდის სკრიპტში / კოდში არსებული div ბლოკებიდან, რომლების უამრავია, გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ისეთი div – ბლოკები, რომლებიც შეიცავენ fieldset ელემენტებს:
2015-03-23 00_40_10-ყვავილების მაღაზია_ 1800flowers.com
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
$(‘div:has (fieldset)’);
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co


შენიშვნა: has ინგლისური სიტყვაა და ქართულად აქვს / გააჩნია / არსებობს / შეიცავს ნიშნავს.


ანუ: გვსურს ამოვიღოთ ყველა div – ბლოკი, რომლების შეიცავს (რომლებშიც მოთავსებულია) :has, ელემენტებს fieldset.
განვიხილოთ მეოთხე სახის ფილტრი, არსებობს შემთხვევა როცა გვსურს ვებ-გვერდზე არსებული აბზაცებიდან, ავირჩიოთ / მივიღოთ / ამოვიღოთ ისეთი აბზაცი, რომელიც შეიცავს ჩვენთვის სასურველ სიტყვას.
განვიხილოთ ეს შემთხვევა, მაგალითის სახით, წარმოვიდგინოთ რომ ჩვენი სატესტო ვებ-გვერდის გამშვები index.html ფაილიდან, გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ის აბზაცები რომლებიც შეიცავენ სიტყვა – “მშვენიერება” -ს.
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
$(‘p:contains (მშვენიერება)’);
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co


შენიშვნა: contains ინგლისური სიტყვაა და ქართულად პირდაპირი მნიშვნელობით შეიცავს ნიშნავს.


ანუ: ჩვენი სატესტო ვებ-გვერდის გამჩვები / მთავარი index.html ფაილში არსებული p – აბზაცებიდან, გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ყველა ის აბზაცი რომლებიც შეიცავენ :contains სიტყვა – “მშვენიერება” -ს.
განვიხილოთ მეხუთე ფილტრი, არსებობს შემთხვევა როცა გვსურს ვებ-გვერდზე არსებული ბლოკიდან (-ებიდან), რომელიც შეიცავს ერთზე მეტ ელემენტს და ამ ელემენტებს არ გააჩნიათ არც რაიმე სახის იდენთიფიკატორი და არც რაიმე სახის კლასი, ავირჩიოთ / მივიღოთ / ამოვიღოთ ჩვენთვის სასურველი მხოლოდ და მხოლოდ პირველი ელემენტი.
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
$(‘#div_for_img img:first‘);
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co


შენიშვნა: fisrt ინგლისური სიტყვაა და ქართულად პირდაპირი მნიშვნელობით ნიშნავს პირველს.


ანუ: ჩვენი სატესტო ვებ-გვერდის გამჩვები / მთავარი index.html ფაილში არსებული #div_for_img ბლოკში არსებული სურათებიდან – img, ავირჩიოთ / მივიღოთ / ამოვიღოთ :first – პირველი ელემენტი / ობიექტი.
მეექვსე ფილტრი ეს არის, ბოლო ელემენტის ამოსაღებად განკუთვნილი ფილტრი სახელად last


შენიშვნა: last ინგლისური სიტყვაა და ქართულად პირდაპირი მნიშვნელობით ნიშნავს ბოლო -ს.


არსებობს შემთხვევა როცა გვსურს ვებ-გვერდზე არსებული ბლოკიდან (-ებიდან), რომელიც შეიცავს ერთზე მეტ ელემენტს და ამ ელემენტებს არ გააჩნიათ არც რაიმე სახის იდენთიფიკატორი და არც რაიმე სახის კლასი, ავირჩიოთ / მივიღოთ / ამოვიღოთ ჩვენთვის სასურველი მხოლოდ და მხოლოდ ბოლო ელემენტი.
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
$(‘#div_for_img img:last‘);
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co
ანუ: ჩვენი სატესტო ვებ-გვერდის გამჩვები / მთავარი index.html ფაილში არსებული #div_for_img ბლოკში არსებული სურათებიდან – img, ავირჩიოთ / მივიღოთ / ამოვიღოთ :last – ბოლო ელემენტი / ობიექტი.
მეშვიდე სახის / ტიპის ფილტრის დახმარებით / საშუალებით / გამოყენებით ჩვენ შეგვიძლია ვებ-გვერდიდან ავირჩიოთ / მივიღოთ / ამოვიღოთ, დამალული ელემენტები. იმიტომ რომ ხშირად ვებ-გვერდის სკრიპტში / კოდში კონკრეტული ელემენტები / ობიექტები დამალულია მიზანმიმართულად, სწორედ ამისათვის არსებობს ფილტრი დამალული ელემენტების ამოსაღებად.
მაგალითის სახით რომ წარმოვიდგინოთ, როცა ჩვენ გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ვებ-გვერიდან ყველა ის div – ბლოკი, რომლების არის დამალული (display: none;).
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
$(‘div:hidden‘);
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co


შენიშვნა: hidden ინგლისური სიტყვაა და ქართულად ნიშნავს უჩინარს / დამალულს / უხილავს.


ანუ: ავირჩიოთ / მივიღოთ / ამოვიღოთ მხოლოდ დამალული :hidden ობიექტები ვებ-გვერდზე არსებული ყველა div – ბლოკიდან.
მერვე სახის / ტიპის ფილტრის დახმარებით / საშუალებით / გამოყენებით ჩვენ შეგვიძლია ვებ-გვერდიდან ავირჩიოთ / მივიღოთ / ამოვიღოთ, არა დამალული, არამედ პირიქით ხილვადი ელემენტები
მაგალითის სახით რომ წარმოვიდგინოთ, როცა ჩვენ გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ვებ-გვერიდან ყველა ის div – ბლოკი, რომლების არის ხილვადი.
ამისათვის საჭიროა კოდის / სკრიპტის რედაქტორ პროგრამაში, გახსნილ myjqueryscripts.js ფაილში, დავწეროთ შემდეგი პირობა:
$(‘div:visibility‘);
2015-03-23 00_48_23_jQuery_mylocalwebserver_root_1800flowers.co


შენიშვნა: visibility ინგლისური სიტყვაა და ქართულად პირდაპირი მნიშვნელობით ნიშნავს ხილვადს.


ანუ: ავირჩიოთ / მივიღოთ / ამოვიღოთ მხოლოდ ხილვადი :visibility ობიექტები ვებ-გვერდზე არსებული ყველა div – ბლოკიდან.

ამოცანა 2 – დავალება / პასუხი – jQuery

ჩართეთ ვებ-სერვერი
1) თქვენ უნდა აირჩიოთ / მიიღოთ / ამოიღოთ ყველა ბმული, რომლებიც მოთავსებულია ბლოკში id=”my_links” და სადაც href  ატრიბუტის მნიშვნელობა იწყება სიტყვით “documents”.
2) თქვენ უნდა აირჩიოთ / მიიღოთ / ამოიღოთ ყველა ის სურათი, რომლებიც მოთავსებულია ბლოკში id=”forfooter” და სადაც title ატრიბუტის მნიშვნელობა შეიცავს სიტყვას “ბრენდები”.
პასუხი:
ჩავრთოთ ვებ-სერვერი
კოდის რედაქტორ პროგრამაში გავხსნათ, სატესტო ვებ-გვერდის 1800flowers.com, index.html ფაილი:

ასევე კოდის რედაქტორ პროგრამაში გავხსნათ, სატესტო ვებ-გვერდის 1800flowers.com, js ფოლდერში არსებული ფაილი myjqueryscripts.js:
ამოცანა 2 – დავალება  პასუხი – jQuery
ამოცანა 2 – დავალება  პასუხი – jQuery
დავალების პირველი პუნქტიდან:
1) თქვენ უნდა აირჩიოთ / მიიღოთ / ამოიღოთ ყველა ბმული, რომლებიც მოთავსებულია ბლოკში id=”my_links” და სადაც href  ატრიბუტის მნიშვნელობა იწყება სიტყვით “documents”.
გამომდინარე, სასურველი შედეგის მისაღებად, უნდა დავწეროთ შემდეგი პირობა / კოდი:
შენიშვნა: თუ მარტივი ამოცანების შესრულების დროს, ყოველთვის არ დაათვალიერებთ index.html ფაილში არსებულ კოდს და მასში არსებულ კოდს / სტრუქტურას დაიმახსოვრებთ, ამ თვისებით შეამცირებთ დავალების შესრულების დროს.
$(‘#my_links a[href^=documents]’);
ამოცანა 2 – დავალება  პასუხი – jQuery
დავალების მეორე პუნქტიდან:
2) თქვენ უნდა აირჩიოთ / მიიღოთ / ამოიღოთ ყველა ის სურათი, რომლებიც მოთავსებულია ბლოკში id=”forfooter” და სადაც title ატრიბუტის მნიშვნელობა შეიცავს სიტყვას “ბრენდები”.
გამომდინარე, სასურველი შედეგის მისაღებად, უნდა დავწეროთ შემდეგი პირობა /კოდი:
$(‘#forfooter img[title=ბრენდები]’);
ამოცანა 2 – დავალება  პასუხი – jQuery
შენიშვნა: ყურადღება მიაქციეთ და დაიმახსოვრეთ ის კონკრეტული შემთხვევა რომ, მსგავსი პირობის შესრულების დროს ატრიბუტის მნიშვნელობა, ჩვენს შემთხვევაში სიტყვა: ბრენდები (თუ სხვა) უნდა დაიწეროს ნებმისმიერი სახის ბრჭყალების, ფრჩხილების და რაიმე დამატებითი სიმბოლოს გარეშე.
$(‘#forfooter img[title=ბრენდები]’);

ელემენტების არჩევა / მიღება / ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით – jQuery

ჩავრთოთ ლოკალური ვებ-სერვერი
ჩვენ უკვე განვიხილეთ / ვისწავლეთ ელემენტების არჩევა / მიღება / ამოღება, შემდეგი წესების მიხედვით:
$(‘#div_for_img > img’); – შვილობილი / შვილი ტეგის ( -ების) არჩევა / მიღება / ამოღება;
$(‘#main_h1 + p’); – შემდეგი ტეგის არჩევა / მიღება / ამოღება;
$(‘#div_for_img img’); – ელემენტების არჩევა / მიღება / ამოღება, ჩაშენებული / მოთავსებული სელექტორის ( -ების) მიხედვით;
$(‘.maindiv’); – კლასის სახელის მიხედვით;
$(‘#main_h1′); – იდენტიფიკატორის მიხედვით;
$(‘p’); – ტეგის სახელის მიხედვით;
ჩვენს მიერ შესწავლილი ეს ექვსი წესი კომენტარის სახით, გადავიტანოთ სატესტო ვებ-გვერდის ფაილებში, ჩვენს მიერ შექმნილ javascript ფაილში: myjqueryscripts.js
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery


იმისათვის რომ ავირჩიოთ / მივიღოთ / ამოვიღოთ სასურველი ელემენტები, საკუთარი ატრიბუტების მიხედვით, ჩვენი სატესტო ვებ-გვერდის მთავარი ფაილიდან index.html, ამისათვის ჯერ გადავხედოთ index.html ფაილში არსებულ კოდს:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
ჩვენ ვხედავთ რომ, ტეგებს გააჩნია ბევრი სხვადასხვა ტიპის ატრიბუტები, მაგალითად ქვემოთ მოცემულ ელემენტ ფორმას გააჩნია უამრავი ატრიბუტი:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
ასევე ელემენტ ბმულს გააჩნია ბევრი ატრიბუტი:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
სურათებსაც ბევრი ატრიბუტები გააჩნიათ:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
jQuery ბიბლიოთეკის დახმარებით ჩვენ შეგვიძლია ელემენტების არჩევა / მიღება / ამოღება ატრიბუტების მიხედვით, 4 სხვადასხვა წესის / ხერხის გამოყენებით. ელემენტების არჩევა / მიღება / ამოღება მათი ატრიბურების გამოყენებით, გვაძლევს საშუალებას ესა თუ ის ელემენტი ამოვიღოთ სწორად და მიზანმიმართულად.
პირველი რასაც ჩვენ განვიხილავთ ეს არის, ელემენტის არჩევა / მიღება / ამოღება, მისი ატრიბუტის ზუსტი მნიშვნელობის მიხედვით, მაგალითად ჩვენ გვსურს ჩვენი სატესტო ვებ-გვერდის მთავარი ფაილიდან index.html ამოვიღოთ ყველა სურათი (ელემენტი), რომელთა სიგანე ტოლია 200 პიქსელისა, თუ დავათვალირებთ index.html გვერდის კოდს, ვნახავთ რომ ჩვენ ზუსტად 200 px სიგანის მქონე სურათი ( -ები) (ელემენტი), გვაქვს სულ ოთხი ცალი, ესენია:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
index.html გვერდზე ასევე გაგვაჩნია სხვა სურათებიც თუმცა მათ სხვა ზომის სიგანე აქვთ.
ჩვენი მოთხოვნიდან გამომდინარე:  ჩვენ გვსურს ჩვენი სატესტო ვებ-გვერდის მთავარი ფაილიდან index.html, ამოვირჩიოთ / მივიღოთ / ამოვიღოთ ყველა სურათი (ელემენტი), რომელთა სიგანე ტოლია 200 პიქსელისა.
გამომდინარე აქედან უნდა დავწეროთ შემდეგი პირობა: ჩვენ გვაინტერესებს ყველა სურათი გვერდზე index.html, რომელთა სიგანეც ტოლია 200 px -ისა:
$(‘img[witdh = 200]’);
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery


ასევე შესაძლებელია jQuery ბიბლიოთეკის გამოყენებით / დახმარებით, ელემენტების არჩევა / მიღება / ამოღება, მათი ატრიბუტების საწყისი მნიშვნელობების მიხედვით.
მაგალითად: თუ ჩვენ გვსურს, ჩვენი სატესტო ვებ-გვერდის მთავარი ფაილიდან index.html, ამოვიღოთ ყველა ბმული, რომელიც იწყება: http -თი:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
მაშინ უნდა დავწეროთ შემდეგი:
$(‘a[href^=http]’);
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
სიმბოლო ^ ჩვენ განვიხილეთ javascript -ის შესწავლის დროს, კერძოდ რეგულარული გამოსახულებების შესწავლისას, შემდეგ გაკვეთილში:
ამოცანა 19 – დავალება / პასუხი – JS
რაც ნიშნავს ხაზის დასაწყისს.
$(‘a[href^=http]’); – ანუ გვერდზე index.html გადამოწმდეს ყველა ბმული, რომელიც ხაზის დასაწყისის მხრიდა, ტოლია http -სი.


ასევე ცხადია და შესაძლებელია jQuery ბიბლიოთეკის გამოყენებით / დახმარებით, ელემენტების არჩევა / მიღება / ამოღება, მათი ატრიბუტების საბოლოო მნიშვნელობების მიხედვით. მაგალითად, ჩვენ გვსურს იმ ელემენტების არჩევა / მიღება / ამოღება, რომლებიც წარმოადგენენ pdf ტიპის დოკუმენტებს. გამომდინარე აქედან ცხადია რომ, ასეთი ტიპის დოკუმენტის ბმული უნდა მთავრდებოდეს .pdf გაფართოებაზე. ჩვენი სატესტო ვებ-გვერდის მთავარი ფაილის index.html, კოდს თუ დავათვალიერებთ, ერთ-ერთი ასეთია:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
ასევე არსებობს სიტუაცია / შემთხვევა როცა ჩვენ გვსურს იმ ელემენტების არჩევა / მიღება / ამოღება, რომლებიც წარმოადგენენ სურათებს და მათი გაფართოებაა .jpg
იმისათვის რომ, სატესტო ვებ-გვერდის მთავარი ფაილიდან index.html ავირჩიოთ / მივიღოთ / ამოვიღოთ, ყველა სურათი რომელთა გაფართოებაც არის .jpg, ამისათვის უნდა დავწეროთ შემდეგი:
$(‘img [src$=.jpg]’);
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
$(‘img [src$=.jpg]’);
$ -იც ასევე წარმოადგენს რეგულარული გამოსახულების ერთ-ერთ შაბლონს, რომელიც ნიშნავს ხაზის დასასრულს.
$(‘img [src$=.jpg]’); – ანუ ვებ-გვერდზე index.html გადამოწმდეს ყველა სურათი, რომელიც ხაზის დასასრულის მხრიდანტოლია  გაფართოებისა .jpg


ასევე jQuery -ს საშუალებით შესაძლებელია ელემენტის არჩევა / მიღება / ამოღება, ატრიბუტში არსებული რომელიმე მნიშვნელობის მიხედვით.
მაგალითად: ჩვენი სატესტო ვებ-გვერდის მთავარი index.html ფაილიდან გვსურს ყველა სურათის არჩევა / მიღება / ამოღება, რომელთა წყაროშიც (source -ში / src -ში) არსებობს სიტყვა / მნიშვნელობა flower.
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
იმისათვის რომ, ჩვენი სატესტო ვებ-გვერდის მთავარი ფაილიდან index.html, ამოვიღოთ ყველა სურათი რომლის წყაროშიც (source -ში / src -ში) არსებობს სიტყვა flower, ამისათვის უნდა დავწეროთ შემდეგი პირობა:
$(‘img [src*=flower]’);
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
$(‘img [src*=flower]’);
* -იც ასევე წარმოადგენს რეგულარული გამოსახულების ერთ-ერთ შაბლონს, რომელიც ნიშნავს ძიებას სრულად ხაზში.
$(‘img [src*=flower]’); – ანუ ვებ-გვერდზე index.html გადამოწმდეს ყველა სურათი, რომლის წყაროშიც (source -ში / src -ში), არსებობს (* როგორც ზემოთ ავღნიშნეთ, ნიშნავს ხაზში ნებისმიერ ადგილას) სიტყვა flower.

ამოცანა 1 – დავალება / პასუხი – jQuery

ჩართეთ ვებ-სერვერი
1) იპოვეთ სატესტო ვებ-გვერდის HTML გვერდის (index.html) კოდში სურათი იდენთიფიკატორით id=”img_4″ და მოათავსეთ ის აბზაცში, ანუ p ტეგში;
2) სატესტო ვებ-გვერდის ფოლდერში css არსებულ სტილის ცხრილის ფაილში: style.css, შეასრულეთ შემდეგი ამოცანები / მანიპულაციები:
2-ა. შექმენით css სელექტორი და დაწერეთ css წესი, ყველა სურათს, რომლებიც მოთავსებულია div ბლოკში, იდენთიფიკატორით: id=”div_for_img”, უნდა გაუკეთოთ 1
პიქსელიანი წითელი ჩარჩო.
2-ბ. შეცვალეთ სელექტორი ისეთი წესით რომ, ჩარჩო გაუჩნდეს მხოლოდ div ბლოკის, რომლის იდენტიფიკატორიცაა id=”div_for_img”, შვილ სურათის ტეგებს.
2-გ. შეცვალეთ სელექტორი ისეთი წესით რომ, ჩარჩო გაუჩნდეს მხოლოდ div ბლოკის, რომლის იდენტიფიკატორიცაა id=”div_for_img”, მომდევნო / შემდეგ ტეგს.
3) წაშალეთ ყველა ცვლილება სტილის ცხრილიდან სახელით: style.css / დააბრუნეთ ის საწყის, სტანდარტულ მდგომარეობაში, რათა ამ კონკტრეტული ამოცანის შესრულების
დროს style.css ფაილში შეტანილმა ცვლილებებმა არ შეგვიშალოს, ხელი შემგომი ამოცანის შესრულებაში.
პასუხი:
ჩავრთოთ ვებ-სერვერი
კოდის რედაქტორ პროგრამაში გავხსნათ, სატესტო ვებ-გვერდის 1800flowers.com, index.html ფაილი:
ამოცანა 1 – დავალება - პასუხი – JQUERY
და სატესტო ვებ-გვერდის css ფოლდერში არსებული სტილის ცხრილის ფაილი სახელით: style.css :
ამოცანა 1 – დავალება - პასუხი – JQUERY
დავალების პირველი პუნქტიდან:
1) იპოვეთ სატესტო ვებ-გვერდის HTML გვერდის (index.html) კოდში სურათი იდენთიფიკატორით id=”img_4″ და მოათავსეთ ის აბზაცში, ანუ p ტეგში;
გამომდინარე, index.html ფაილის კოდში ვიპოვოთ, სურათი იდენთიფიკატორით id=”img_4″ :
ამოცანა 1 – დავალება - პასუხი – JQUERY
და მოვათავსოთ ის აბზაცში:
ამოცანა 1 – დავალება - პასუხი – JQUERY
დავალების მეორე პუნქტიდან გამომდინარე:
2) სატესტო ვებ-გვერდის ფოლდერში css არსებულ სტილის ცხრილის ფაილში: style.css, შეასრულეთ შემდეგი ამოცანები / მანიპულაციები;
კოდის რედაქტორ პროგრამაში, გავხსნათ სატესტო ვებ-გვერდის ფოლდერში css არსებულ სტილის ცხრილის ფაილი: style.css :
ამოცანა 1 – დავალება - პასუხი – JQUERY
დავალების 2-ა პუნქტიდან გამომდინარე:
2-ა. შექმენით css სელექტორი და დაწერეთ css წესი, ყველა სურათს, რომლებიც მოთავსებულია div ბლოკში, იდენთიფიკატორით: id=”div_for_img”, უნდა გაუკეთოთ 1
პიქსელიანი წითელი ჩარჩო.
style.css ფაილში არსებული ჩანაწერების ბოლოს, შევქმნათ სელექტორი იდენთიფიკატორის სახელით #div_for_img :
ამოცანა 1 – დავალება - პასუხი – JQUERY
და დავწეროთ წესი, რომლის თანახმადაც div ბლოკში იდენთიფიკატორით  id=”div_for_img”, მოთავსებულ ყველა სურათს (ყველა img ტეგს) გაუკეთდება 1 პიქსელიანი, წითელი ჩარშო :
ამოცანა 1 – დავალება - პასუხი – JQUERY
ვიხილოთ შედეგი ვებ-ბრაუზერში:
ამოცანა 1 – დავალება - პასუხი – JQUERY
დავალების 2-ბ პუნქტიდან გამომდინარე:
2-ბ. შეცვალეთ სელექტორი ისეთი წესით რომ, ჩარჩო გაუჩნდეს მხოლოდ div ბლოკის, რომლის იდენტიფიკატორიცაა id=”div_for_img”, შვილ სურათის ტეგებს.
ჩაშენებული / მოთავსებული და შვილობილი / შვილი სელექტორები, მომდევნო / შემდეგი ტეგი – jQuery გაკვეთილიდან გამომდინარე, თუ გვსურს რომ ბლოკში
მოთავსებული ელემენტებიდან, ამავე ბლოკის შვილი ელემენტები ავირჩიოთ / მივიღოთ / ამოვიღოთ, ამისათვის css ფაილში, სელექტორის სახელსა და მის შვილ ტეგს შორის უნდა დავწეროთ მეტობის ნიშანი:
ამოცანა 1 – დავალება - პასუხი – JQUERY
ვიხილოთ შედეგი ვებ-ბრაუზერში:
ამოცანა 1 – დავალება - პასუხი – JQUERY
რის შედეგადაც, როგორც ვხედავთ ჩარჩო მხოლოდ პირველ id=”img_1″, მეორე id=”img_2″ და მესამე id=”img_3″ სურათს გაუკეთდა,
თუ index.html ფაილში არსებული div ბლოკის იდენთიფიკატორით  id=”div_for_img”, კოდს ვიხილავთ:
ამოცანა 1 – დავალება - პასუხი – JQUERY
id=”img_4″, ჩვენ ჩავსვით აბზაცში და ის უკვე აღარ არის div ბლოკის, იდენთიფიკატორით  id=”div_for_img” -ს შვილი სურათის ტეგი,
ის უკვე იქცა, აბზაცის სურათის ტეგად, ხოლო აბზაცი კი div ბლოკის, იდენთიფიკატორით  id=”div_for_img” -ს შვილი აბზაცის (p) ტეგია.
დავალების 2-გ პუნქტიდან გამომდინარე:
2-გ. შეცვალეთ სელექტორი ისეთი წესით რომ, ჩარჩო გაუჩნდეს მხოლოდ div ბლოკის, რომლის იდენტიფიკატორიცაა id=”div_for_img”, მომდევნო / შემდეგ ტეგს.
ვიპოვოთ index.html ფაილში, div ბლოკის, რომლის იდენტიფიკატორიცაა id=”div_for_img”, მომდევნო / შემდეგ ტეგი:
ამოცანა 1 – დავალება - პასუხი – JQUERY
როგორც ვხედავთ ეს არის, აბზაცი (p)
ჩაშენებული / მოთავსებული და შვილობილი / შვილი სელექტორები, მომდევნო / შემდეგი ტეგი – jQuery გაკვეთილიდან გამომდინარე, თუ გვსურს მომდევნო / შემდეგი ტეგის
არჩევა / მიღება / ამოღება, ამისათვის css ფაილში, სელექტორის სახელის შემდეგ უნდა დავწეროთ პლიუსის ნიშანი და შემდეგ მომდევნო / შემდეგი ტეგის სახელი, ჩვენს შემთხვევაში აბზაცი ანუ p :
ამოცანა 1 – დავალება - პასუხი – JQUERY
ვიხილოთ შედეგი ვებ-ბრაუზერში:
ამოცანა 1 – დავალება - პასუხი – JQUERY
შედეგი სწორია.
დავალების 3 პუნქტიდან გამომდინარე:
3) წაშალეთ ყველა ცვლილება სტილის ცხრილიდან სახელით: style.css / დააბრუნეთ ის საწყის, სტანდარტულ მდგომარეობაში, რათა ამ კონკტრეტული ამოცანის შესრულების
დროს style.css ფაილში შეტანილმა ცვლილებებმა არ შეგვიშალოს, ხელი შემგომი ამოცანის შესრულებაში: