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