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

ჩავრთოთ ლოკალური ვებ-სერვერი
ჩვენ წინა გაკვეთილში უკვე განვიხილეთ / ვისწავლეთ ელემენტების არჩევა / მიღება / ამოღება:
$(‘.maindiv’); – კლასის სახელის მიხედვით
$(‘#main_h1′); – იდენტიფიკატორის მიხედვით
$(‘p’); – ტეგის სახელის მიხედვით
უფრო კარგად რომ წარმოვიდგინოთ ეს ყველაფერი, ვიხილოთ შემდეგი ილუსტრაცია:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი ელემენტები, მომდევნო -  შემდეგი ტეგი - JQUERY
სადაც ნათლად ჩანს რომ, როცა ჩვენ ვწერთ $(‘#main_h1’);
ამ შემთხვევაში DOM -ხიდან ხდება, სურათზე ნაჩვენები ელემენტის არჩევა:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი ელემენტები, მომდევნო -  შემდეგი ტეგი - h1 - JQUERY
მაგრამ ჩვენ თუ დავწერთ $(‘div’);
მაშინ ჩვენ შევძლებთ DOM ხიდან ავირჩიოთ მასზე / მასში არსებული ყველა div ელემენტი:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი ელემენტები, მომდევნო -  შემდეგი ტეგი - h1 - JQUERY
დავიმახსოვროთ რომ, როგორც javascript -ი, ასევე jQuery -ც მუშაობს DOM ხე -თან და როცა გვსურს რომელიმე ელემენტის არჩევა / მიღება / ამოღება გვერდიდან / დოკუმენტიდან, სწორედ DOM ხე -ში ხდება ამ ელემენტის მოძებნა, პოვნა და ამოღება.
შენიშვნა: ჩვენს ილუსტრაციაში მე მოვნიშნე სამი div ელემენტი, მოგახსენებთ რომ ილუსტრაციაში არ არის გამოსახული სრული index.html გვერდის DOM ხე, გამომდინარე აქედან გასაგებია რომ, მოხდება არა მარტო ამ სამი div ელემენტის არჩევა, არამედ ყველა div ელემენტისა რომელიც გაგვაჩნია ჩვენ index.html გვერდზე / დოკუმენტზე.


შემდეგი სელექტორი რომელსაც ჩვენ განვიხილავთ ეს არის ჩაშენებული / მოთავსებული სელექტორი, ერთ-ერთი ასეთი ჩვენი მაგალითისათვის შექმნილი სატესტო ვებ-გვერდან, არის ტეგი strong რომელიც მოთავსებულია ტეგ p (აბზაცი) -ში, ვიხილოთ ის style.css ფაილის ჩანაწერში:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
ყველა / ნებისმიერი ტეგი strong -ის არჩევა / მიღება / ამოღება, რომელიც მოთავსებულია p (აბზაცი) -ის შიგნით jQuery -ს საშუალებით, შეგვიძლია ზუსტად ისეთივე ჩანაწერით როგორც ეს css -ში წერია:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
ასევე / მსგავსად, თუ გვსურს ყველა სურათის არჩევა / მიღება / ამოღება jQuery -ს საშუალებით, რომელიც მოთავსებულია div ბლოკში, რომლის იდენტიფიკატორიც არის div_for_img :
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
ალბათ ცხადია რომ, თქვენ უნდა დაწეროთ შემდეგი კოდი / სკრიპტი:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
შედეგად, თქვენ შეძლებთ div ბლოკში მოთავსებული ოთხივე სურათის / ელემენტის არჩევას / მიღებას / ამოღებას:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY


შემდეგი სახეობის სელექტორი რომელსაც ჩვენ განვიხილავთ ეს არის მომდევნო / შემდეგი ტეგის არჩევა / მიღება / ამოღება, წარმოიდგინეთ დავალება / ამოცანა როცა თქვენ გსურთ რომელიმე / რომელიღაც ტეგის მომდევნო ტეგის არჩევა / მიღება / ამოღება jQuery -ს საშუალებით, მაგალითად:
ტეგი h1 -ის რომლის იდენთიფიკატორიც არის main_h1, მომდევნო p (აბზაცი) ტეგის არჩევა / მიღება / ამოღება  jQuery -ს საშუალებით:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
თუ ყურადღებით დავაკვირდებით p (აბზაცი) ტეგს:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
მას არ გააჩნია არც იდენთიფიკატორი და არც კლასი, გამომდინარე აქედან რთული იქნება მისი არჩევა ( საუბარი არ არის აქ javascript -ის გამოყენებაზე, საუბარია მხოლოდ-და-მხოლოდ jQuery -ის გამოყენებით მომდევნო ტეგის არჩევაზე ), იმ შემთხვევაში თუ ჩვენ დავწერთ:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
ასეთი ჩანაწერით ჩვენ ავირჩევთ index.html გვერდზე / დოკუმენტზე არსებულ ყველა p (აბზაცი) ტეგს, რომელიც არ არის ჩვენი ამოცანის გადაჭრისათვის სასურველი შედეგი.
იმისათვის რომ ჩვენ შევძლოთ რომელიმე / რომელიღაც ტეგის მომდევნო ტეგის არჩევა / მიღება / ამოღება jQuery -ს საშუალებით, ჩვენს შემთხვევაში ტეგი h1 -ის რომლის იდენთიფიკატორიც არის main_h1, მომდევნო p (აბზაცი) -ისა, უნდა დავწეროთ შემდეგი სკრიპტი / კოდი:
$(‘#main_h1 + p’);
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
ანუ ამ შემთხვევაში მოხდება ჯერ h1  ტეგის პოვნა რომლის იდენთიფიკატორიც არის main_h1:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
შემდეგ კი მისი მომდევნო p (აბზაცი) -ის პოვნა და არჩევა / მიღება / ამოღება, index.html გვერდიდან / დოკუმენტიდან:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY


საბოლოო მეთოდი ელემენტების არჩევის / მიღების / ამოღებისა, ეს არის შვილობილი / შვილი ტეგების არჩევა / მიღება / ამოღება, ჩვენ javascript -ის შესწავლის დროს განვიხილეთ თვისება childNodes, გამომდინარე აქედან როგორც javascript -ში, ასევე jQuery -თაც შესაძლებელია შვილობილი / შვილი ელემენტების არჩევა / მიღება / ამოღება, მაგალითად თუ ჩვენი დავალება / ამოცანაა, ყველა div ბლოკში, რომლის იდენთიფიკატორიც არის div_for_img, მოთავსებული შვილობილი / შვილი ტეგის არჩევა / მიღება / ამოღება  jQuery -ის გამოყენებით:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
უნდა დავწეროთ შემდეგი კოდი / სკრიპტი:
$(‘#div_for_img > img’);
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
ანუ ამ შემთხვევაში მოხდება ჯერ div ბლოკის პოვნა რომლის იდენთიფიკატორიც არის div_for_img:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
შემდეგ კი მასში არსებული ყველა img ტეგის პოვნა და არჩევა / მიღება / ამოღება, index.html გვერდიდან / დოკუმენტიდან:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
იმ შემთხვევაში თუ ბლოკ div -ში, რომლის იდენთიფიკატორიც არის div_for_img, რომელიმე img ტეგი მოთავსებული იქნება, ასევე p (აბზაცი) ტეგში:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
ხოლო ჩვენ დავწერდით შემდეგნაირად:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
ნაცვლად შემდეგი ჩანაწერისა:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
ამ შემთხვევაში, ჩვენ ამოვიღებდით მხოლოდ ყველა img ტეგებს, p (აბზაცი) -ში მოთავსებული img ტეგის ჩათვლით, div ბლოკიდან იდენთიფიკატორით div_for_img:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
რაც არასწორია, იმიტომ რომ ჩვენი ამოცანა იყო მხოლოდ div ბლოკში იდენთიფიკატორით div_for_img მოთავსებული ყველა შვილობილი / შვილი img ტეგის ამოღება.
შენიშვნა: თუ DOM ხის ილუსტრაციას შევქმნით / წარმოვიდგენთ, ამ შემთხვევაში:
ჩაშენებული - მოთავსებული და შვილობილი - შვილი სელექტორები, მომდევნო -  შემდეგი ტეგი - div - JQUERY
div ბლოკის იდენთიფიკატორით div_for_img -ს შვილები არიან:
img (იდენთიფიკატორით: img_1)
img (იდენთიფიკატორით: img_2)
img (იდენთიფიკატორით: img_3)
და
p (აბზაცი)
ტეგები, ხოლო p ტეგის შვილი არის img ტეგი (იდენთიფიკატორით: img_4).

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