ამოცანა 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
შედეგი იქნება იგივე, რაც პირველი ხერხის შემთხვევაში ანუ:

ამოცანა 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=ბრენდები]’);

ამოცანა 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 ფაილში შეტანილმა ცვლილებებმა არ შეგვიშალოს, ხელი შემგომი ამოცანის შესრულებაში: