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