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

Advertisements

კომენტარის დატოვება

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / შეცვლა )

Twitter picture

You are commenting using your Twitter account. Log Out / შეცვლა )

Facebook photo

You are commenting using your Facebook account. Log Out / შეცვლა )

Google+ photo

You are commenting using your Google+ account. Log Out / შეცვლა )

Connecting to %s