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

ჩავრთოთ ლოკალური ვებ-სერვერი
ჩვენ უკვე განვიხილეთ / ვისწავლეთ ელემენტების არჩევა / მიღება / ამოღება, შემდეგი წესების მიხედვით:
$(‘#div_for_img > img’); – შვილობილი / შვილი ტეგის ( -ების) არჩევა / მიღება / ამოღება;
$(‘#main_h1 + p’); – შემდეგი ტეგის არჩევა / მიღება / ამოღება;
$(‘#div_for_img img’); – ელემენტების არჩევა / მიღება / ამოღება, ჩაშენებული / მოთავსებული სელექტორის ( -ების) მიხედვით;
$(‘.maindiv’); – კლასის სახელის მიხედვით;
$(‘#main_h1′); – იდენტიფიკატორის მიხედვით;
$(‘p’); – ტეგის სახელის მიხედვით;
ჩვენს მიერ შესწავლილი ეს ექვსი წესი კომენტარის სახით, გადავიტანოთ სატესტო ვებ-გვერდის ფაილებში, ჩვენს მიერ შექმნილ javascript ფაილში: myjqueryscripts.js
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery


იმისათვის რომ ავირჩიოთ / მივიღოთ / ამოვიღოთ სასურველი ელემენტები, საკუთარი ატრიბუტების მიხედვით, ჩვენი სატესტო ვებ-გვერდის მთავარი ფაილიდან index.html, ამისათვის ჯერ გადავხედოთ index.html ფაილში არსებულ კოდს:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
ჩვენ ვხედავთ რომ, ტეგებს გააჩნია ბევრი სხვადასხვა ტიპის ატრიბუტები, მაგალითად ქვემოთ მოცემულ ელემენტ ფორმას გააჩნია უამრავი ატრიბუტი:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
ასევე ელემენტ ბმულს გააჩნია ბევრი ატრიბუტი:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
სურათებსაც ბევრი ატრიბუტები გააჩნიათ:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
jQuery ბიბლიოთეკის დახმარებით ჩვენ შეგვიძლია ელემენტების არჩევა / მიღება / ამოღება ატრიბუტების მიხედვით, 4 სხვადასხვა წესის / ხერხის გამოყენებით. ელემენტების არჩევა / მიღება / ამოღება მათი ატრიბურების გამოყენებით, გვაძლევს საშუალებას ესა თუ ის ელემენტი ამოვიღოთ სწორად და მიზანმიმართულად.
პირველი რასაც ჩვენ განვიხილავთ ეს არის, ელემენტის არჩევა / მიღება / ამოღება, მისი ატრიბუტის ზუსტი მნიშვნელობის მიხედვით, მაგალითად ჩვენ გვსურს ჩვენი სატესტო ვებ-გვერდის მთავარი ფაილიდან index.html ამოვიღოთ ყველა სურათი (ელემენტი), რომელთა სიგანე ტოლია 200 პიქსელისა, თუ დავათვალირებთ index.html გვერდის კოდს, ვნახავთ რომ ჩვენ ზუსტად 200 px სიგანის მქონე სურათი ( -ები) (ელემენტი), გვაქვს სულ ოთხი ცალი, ესენია:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
index.html გვერდზე ასევე გაგვაჩნია სხვა სურათებიც თუმცა მათ სხვა ზომის სიგანე აქვთ.
ჩვენი მოთხოვნიდან გამომდინარე:  ჩვენ გვსურს ჩვენი სატესტო ვებ-გვერდის მთავარი ფაილიდან index.html, ამოვირჩიოთ / მივიღოთ / ამოვიღოთ ყველა სურათი (ელემენტი), რომელთა სიგანე ტოლია 200 პიქსელისა.
გამომდინარე აქედან უნდა დავწეროთ შემდეგი პირობა: ჩვენ გვაინტერესებს ყველა სურათი გვერდზე index.html, რომელთა სიგანეც ტოლია 200 px -ისა:
$(‘img[witdh = 200]’);
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery


ასევე შესაძლებელია jQuery ბიბლიოთეკის გამოყენებით / დახმარებით, ელემენტების არჩევა / მიღება / ამოღება, მათი ატრიბუტების საწყისი მნიშვნელობების მიხედვით.
მაგალითად: თუ ჩვენ გვსურს, ჩვენი სატესტო ვებ-გვერდის მთავარი ფაილიდან index.html, ამოვიღოთ ყველა ბმული, რომელიც იწყება: http -თი:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
მაშინ უნდა დავწეროთ შემდეგი:
$(‘a[href^=http]’);
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
სიმბოლო ^ ჩვენ განვიხილეთ javascript -ის შესწავლის დროს, კერძოდ რეგულარული გამოსახულებების შესწავლისას, შემდეგ გაკვეთილში:
ამოცანა 19 – დავალება / პასუხი – JS
რაც ნიშნავს ხაზის დასაწყისს.
$(‘a[href^=http]’); – ანუ გვერდზე index.html გადამოწმდეს ყველა ბმული, რომელიც ხაზის დასაწყისის მხრიდა, ტოლია http -სი.


ასევე ცხადია და შესაძლებელია jQuery ბიბლიოთეკის გამოყენებით / დახმარებით, ელემენტების არჩევა / მიღება / ამოღება, მათი ატრიბუტების საბოლოო მნიშვნელობების მიხედვით. მაგალითად, ჩვენ გვსურს იმ ელემენტების არჩევა / მიღება / ამოღება, რომლებიც წარმოადგენენ pdf ტიპის დოკუმენტებს. გამომდინარე აქედან ცხადია რომ, ასეთი ტიპის დოკუმენტის ბმული უნდა მთავრდებოდეს .pdf გაფართოებაზე. ჩვენი სატესტო ვებ-გვერდის მთავარი ფაილის index.html, კოდს თუ დავათვალიერებთ, ერთ-ერთი ასეთია:
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
ასევე არსებობს სიტუაცია / შემთხვევა როცა ჩვენ გვსურს იმ ელემენტების არჩევა / მიღება / ამოღება, რომლებიც წარმოადგენენ სურათებს და მათი გაფართოებაა .jpg
იმისათვის რომ, სატესტო ვებ-გვერდის მთავარი ფაილიდან index.html ავირჩიოთ / მივიღოთ / ამოვიღოთ, ყველა სურათი რომელთა გაფართოებაც არის .jpg, ამისათვის უნდა დავწეროთ შემდეგი:
$(‘img [src$=.jpg]’);
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
$(‘img [src$=.jpg]’);
$ -იც ასევე წარმოადგენს რეგულარული გამოსახულების ერთ-ერთ შაბლონს, რომელიც ნიშნავს ხაზის დასასრულს.
$(‘img [src$=.jpg]’); – ანუ ვებ-გვერდზე index.html გადამოწმდეს ყველა სურათი, რომელიც ხაზის დასასრულის მხრიდანტოლია  გაფართოებისა .jpg


ასევე jQuery -ს საშუალებით შესაძლებელია ელემენტის არჩევა / მიღება / ამოღება, ატრიბუტში არსებული რომელიმე მნიშვნელობის მიხედვით.
მაგალითად: ჩვენი სატესტო ვებ-გვერდის მთავარი index.html ფაილიდან გვსურს ყველა სურათის არჩევა / მიღება / ამოღება, რომელთა წყაროშიც (source -ში / src -ში) არსებობს სიტყვა / მნიშვნელობა flower.
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
იმისათვის რომ, ჩვენი სატესტო ვებ-გვერდის მთავარი ფაილიდან index.html, ამოვიღოთ ყველა სურათი რომლის წყაროშიც (source -ში / src -ში) არსებობს სიტყვა flower, ამისათვის უნდა დავწეროთ შემდეგი პირობა:
$(‘img [src*=flower]’);
ელემენტების არჩევა  მიღება  ამოღება, არტიბუტების ხელმისაწვდომობისა და მნიშვნელობების მიხედვით -  jQuery
$(‘img [src*=flower]’);
* -იც ასევე წარმოადგენს რეგულარული გამოსახულების ერთ-ერთ შაბლონს, რომელიც ნიშნავს ძიებას სრულად ხაზში.
$(‘img [src*=flower]’); – ანუ ვებ-გვერდზე index.html გადამოწმდეს ყველა სურათი, რომლის წყაროშიც (source -ში / src -ში), არსებობს (* როგორც ზემოთ ავღნიშნეთ, ნიშნავს ხაზში ნებისმიერ ადგილას) სიტყვა flower.

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