jQuery -ს გამოყენებით, ელემენტების არჩევის / მიღების / ამოღების საფუძვლები – jQuery

ჩავრთოთ ლოკალური ვებ-სერვერი, გავხნათ ლოკალური ვებ-სერვერის ფოლდერებში არსებული ფოლდერი სახელით root, შემდეგ root ფოლდერში არსებული ფოლდერი 1800flowers.com, შემდეგ 1800flowers.com -ში არსებული ფოლდერებიდან გავსხსნათ ფოლდერი სახელით: js

jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
როგორც ვხედავთ js ფოლდერში მოთავსებულია ორი ფაილი, ესენია:
jQuery.js
და
myscripts.js
ეს ორივე ფაილი მიერთებული გვაქვს, ჩვენს გამშვებ გვერდზე / დოკუმენტზე, ანუ index.html -ზე, jQuery.js ფაილი მიერთებული გვაქვს დოკუმენტის თავში / დასაწყისში:
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
ხოლო myscripts.js კი დოკუმენტის ბოლოში:
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
თუ რატომ გვაქვს მიერთებული myscripts.js ფაილი დოკუმენტის ბოლოში, ეს ჩვენ javascript -ის სწავლის დროს განვიხილეთ შემდეგ გაკვეთილში:
ელემენტების არჩევა / მიღება / ამოღება მეთოდით getElementsByTagName() – JS
იმის გამო რომ, არ დავაზიანოთ ჩვენი javascript გაკვეთილის დროს ნასწავლი მასალები რომლებიც გვიწერია პირობების / კოდის / სკრიპტის სახით myscripts.js ფაილში, ამიტომ ფოლდერში js შევქმნათ ახალი ფაილი სახელით:
myjqueryscripts.js
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
დოკუმენტის ბოლოს კი, myscripts.js ფაილის ნაცვლად, ჩვენს index.html გვერდს მივუერთოთ, ჩვენს მიერ შექმნილი ფაილი ანუ: myjqueryscripts.js
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
ჩვენ უკვე მივუერთეთ jQuery ბიბლიოთეკა და myjqueryscripts.js ფაილი index.html ფაილს / დოკუმენტს,  გავხსნათ რედაქტორში ფაილი myjqueryscripts.js და განვიხილოთ თუ როგორ ხდება ელემენტების არჩევა / მიღება / ამოღება jQuery -ს დახმარებით / გამოყენებით.
jQuery ბიბლიოთეკის გვერდზე მიერთების შემდეგ ჩვენს განკარგულებაშია ფუნქცია:
jquery();
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
ამ ფუნქციასთან ჩვენ ყოველთვის / ხშირად ვიმუშავებთ, რომელიც იღებს საკუთარ თავზე (ითავსებს / ითვისებს /  ითავისებს) სამ ფუნქციას, ესენია:

  • ჩვენთვის სასურველი ელემენტების არჩევა / მიღება / ამოღება;
  • ელემენტების ქსევისათვის საჭირო თვისებების ჩამოყალიბება / დარეგისტრირება;
  • ელემენტებზე ( -ისათვის) (ელემენტების გამოყენებით, მათზე) სხვადასხვა ქმედებების შესრულება;

ანუ javascript -ის შესწავლის დროს ჩვენს მიერ განხილულ გაკვეთილში: ობიექტი – ქცევა – ქმედება – JS, სამივე ფუნქციის შესრულებას, jQuery ერთი ფუნქციით ასრულებს, გამომდინარე აქედან შეიძლება ვთქვათ რომ ის არის უნივერსალური ფუნქცია.
jquery();  ფუნქცია შეიძლება დავწეროთ შემოკლებული სახით: $();
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
ანუ სიტყვა jquery -ს ნაცვლას ვწერთ სიმბოლოს: $

პრაქტიკაში გამოიყენება ორივე ვატიანტი.
თუ ერთ დოკუმენტში მიერთებული გაქვთ რამოდენიმე სხვადასხვა ტიპის javascript ბიბლიოთეკა, მაშინ სასურველია jQuery ფუნქციონალის შესასრულებლად, გამოიყენოთ ვრცელი ჩანაწერი jquery(); იმიტომ რომ შესაძლებელია სხვა ბიბლიოთეკაც იყენებდეს ჩანაწერს: $(); და მოხდეს კონფლიქტი ბიბლიოთეკებს შორის, რის შედეგადაც შეიძლება თქვენს მიერ დაწერილმა პირობამ / კოდმა / სკრიპტმა არ იმუშაოს.
შენიშვნა: ორი სხვადასხვა ბიბლიოთეკის (რომელიც თუნდაც ასრულებდეს ერთსა და იმავე ფუნქციონალს) მიერთება ერთ გვერდზე არ არის რეკომენდირებული.
ჩვენ jQuery -ს შესწავლის პროცესში jquery ფუნქციას დავწერთ $(); სახით, იმიტომ რომ ჩვენ გვერდზე ამჟამად მიერთებული გვაქვს მხოლოდ ერთი javascript ბიბლიოთეკა ანუ jQuery.js

დაიმახსოვრეთ რომ, ზეპირად და მაღალ დონეზე უნდა ვიცოდეთ თუ როგორ ხდება ელემენტების არჩევა / მიღება / ამოღება jQuery -ს გამოყენებით / დახმარებით.

ცოტა ხნით დავუბრუნდეთ css -ს, ჩვენ გაკვეთილში: შესავალი – jQuery, უკვე ვისაუბრეთ იმაზე რომ jQuery ბიბლიოთეკის შემქმნელებმა, გადაწყვიტეს არ შეემქნათ / გამოეგონებინათ ველოსიპედი ახალად ამ ფაქტის გათვალისწინებით გადაწყვიტეს jQuery -ში ცხრილის სტილი (style css) -ის ფუნქციონალის / ლოგიკის გამოყენება, ანუ როგორც css -ში ხდება ელემენტების არჩევა / მიღება / ამოღება, სწორედ ისეთი სტილით / სახით გადაწყვიტეს მომხდარიყო jQuery -შიც ელემენტების არჩევა / მიღება / ამოღება.
ცოტათი გავიხსენოთ css, გავხსნათ ფოლდერ root -ში, მოთავსებული ფოლდერებიდან css ფოლდერი, ხოლო css ფოლდერში არსებული ფაილი style.css ჩვენს კოდის რედაქტორ პროგრამაში:
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
ეს style.css ფაილიც მიერთებულია ჩვენს გამშვებ ფაილზე ანუ index.html -ზე და მისი საშუალებით ხდება გვერდის / დოკუმენტის სტილის / დიზაინის, დამუშავება / ამუშავება / ჩამოყალიბება / შექმნა.
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
თუ გადავხედავთ კოდის რედაქტორ პროგრამაში გახსნილი ფაილის style.css -ის სტრუქტურას:
ყველა ფიგურული გახსნის ფრჩხილების წინ წერია ან ელემენტის დასახელება, ან კლასის დასახელება, ან იდენტიფიკატორი.
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
დაიმახსოვრეთ რომ, ყველაფერი რაც ფიგურული გახსნის ფრჩხილების ზევით წერია ეწოდება სელექტორი.
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
გამომდინარე აქედან body არის სელექტორი ტეგის ( -ების) მიხედვით / -ისთვის.
ანუ ჩვენ css ფაილში ვუთითებთ / ვწერთ ტეგის დასახელებას / სახელს: body, შემდეგ ფიგურულ ფრჩხილებში ვწერთ მისთვის წესს:
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
როცა index.html ფაილზე მიერთებულ style.css ფაილს ბრაუზერი წაიკითხავს, იპოვის body ტეგს და მისთვის დაწერილ წესს, შემდეგ body ტეგს იპოვის ასევე პარალელურად index.html ფაილშიც / დოკუმენტშიც:
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
მას მიანიჭებს style.css ფაილში, ტეგი body -სათვის დაწერილ წესს.


შემდეგი სელექტორი, ჩვენს style.css ფაილში არის კლასის სელექტორი: .maindiv :
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
როცა ბრაუზერი index.html ფაილის წაკითხვის დროს, იპოვის div ბლოკს, კლასის სახელით: maindiv:
<div class=”maindiv” id=”main_div”>
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
იგივე კლასის სახელის (.maindiv) style.css ფაილში პოვნის დროს, ამ div ბლოკს მიანიჭებს იმ წესს, რა წესიც დავწერეთ ამ კლასისათვის ჩვენ style.css ფაილში:
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
ანუ, ჩვენ მთელს index.html გვერდზე / დოკუმენტში ვირჩევთ / ვიღებთ ჩვენთვის სასურველ div ბლოკს, ჩვენს მიერ მინიჭებული კლასის სახელით maindiv და მას ვანიჭებთ / ვუთავსებთ / ვუწერთ, ჩვენთვის სასურველ წესს.


შემდეგი სელექტორი, ჩვენს style.css ფაილში, კლასის სელექტორი: .maindiv -ის შემდეგ, ეს გახლავთ იდენტიფიკატორის სელექტორი: #forbody
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
ანუ ხდება შემოწმება / გადარჩევა ელემენტებისა მთელს index.html გვერდზე forbody -ს შესაბამისი id -ბისა და ხდება მათთვის შესაბამისი წესის მინიჭება.
index.html გვერდზე არსებული div ბლოკი, რომელსაც მინიჭებული აქვს id, forbody:
<div id=”forbody”>
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
style.css ფაილში id, forbody -სათვის დაწერილი წესი:
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
თუ დავათვალიერებთ / გავაგრძელებთ style.css -ში არსებულ სელექტორებს, სელექტორი forbody -ს შემდეგ ვიპოვით, ასევე იდენტიფიკატორის სელექტორს #main_h1, რომელსაც როგორც ზევით ავღნიშნეთ index.html ფაილში ვებ-ბრაუზერის მიერ პოვნის შემდეგ მიენიჭება ჩვენს მიერ მისთვის დაწერილი წესი
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
იგივე პირობა ( -ები) შესრულდება, მის შემდეგ დაწერილ / მის მომყოლ სელექტორებზეც, ესენია:  ტეგის სელექტორი h2 და p, ხოლო ჩვენ style.css -ში p ტეგის სელექტორის შემდეგ ვხედავთ სელექტორს ტეგის სელექტორის p საკუთარ შვილთან ერთად strong ანუ: p strong
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
რაც ნიშნავს შემდეგს: index.html გვერდზე არსებულ ყველა აბზაცში ( p – Paragraph – აბზაცი), რომელშიც რომელიმე ტექსტი (სიტყვა ან წინადადება და ა.შ.), მოქცეულია / ჩასმულია <strong> </strong> ტეგებს შორის (strong – ტექსტის გამუქების ტეგი), მას მიენიჭოს ფერი: #2c2c2c;

დანარჩენი რომელი სელექტორებიც წერია, style.css ფაილში, ზევით ახსნილი / გახსენებული წესების მიხედვით თქვენთვის უკვე ნათელი და გასაგებია, მოკლედ რომ ვთქვათ ჩვენთვის საჭირო საკითხი გავიხსენეთ css -ში.
შენიშვნა: თქვენ style.css ფაილში ასევე შეგხვდებათ დედა სელექტორი, საკუთარი შვილის ერთად:
#my_button, select
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
სადაც დედა და შვილი  გაყოფილია მძიმით
ნუ დაიბნევით, ისიც იგივე პირობას და ფუნქციონალს ასრულებს, როგორიც სრულდებოდა p strong -ის შემთხვევაში.
jQuery -შიც ყველაფერი ხდება თითქმის ასე, როცა გვინდა ვიპოვოთ რაიმე ელემენტი, ჩვენთვის სასურველი ტეგის სახელით ანუ ავირჩიოთ / მივიღოთ / ამოვიღოთ ელემენტი სასურველი ტეგის სახელით, ჩვენ jQuery კოდს / სკრიპტს ვწერთ შემდეგნაირად:
მაგალითად გვსურს ავირჩიოთ / მივიღოთ / ამოვიღოთ ყველა ელემენტი ტეგის დასახელებით p (აბზაცი)
$(‘p’);
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
ეს იგივეა რაც, დაგვეწერა javascript -ში: document.getElementsByTagName(‘p’);
ალბათ თქვენ ხედავთ, jQuery -ში ეს როგორ მოკლედ იწერება.
სულ რაღაც 7 სიმბოლოს დაწერის შემდეგ, ავირჩიეთ / მივიღეთ / ამოვიღეთ ჩვენთვის სასურველი ელემენტი ტეგის სახელით p (აბზაცი).
იმ შემთხვევაში თუ ჩვენი სურვილი იქნება ავირჩიოთ / მივიღოთ / ამოვიღოთ index.html გვერდიდან / დოკუმენტიდან რომელიმე ობიექტი, ჩვენთვის სასურველი იდენტიფიკატორის სახელით, ზუსტად როგორც ვწერთ ჩვენ css -ში, ისეთი სახით / სტილით უნდა ამოვიღოთ:
მაგალითად ჩვენი ამოცანაა, index.html გვერდიდან, შემდეგი იდენტიფიკატორის ამოღება:
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
ანუ: main_h1
javascript -ში ჩვვენ შეგვეძლო დაგვეწერა შემდეგი კოდი / სკრიპტი:
document.getElementById(‘main_h1′);
ხოლო jQuery -ში, ვწერთ თითქმის ისე როგორც ეს იწერება css -ში:
$(‘#main_h1’);
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
ხდება მთელი index.html გვერდის შემოწმება და არჩევა / მიღება / ამოღება ჩვენს მიერ მითითებული ელემენტისა.
ანუ ხდება ე.წ. არჩევნები, ან თუნდაც ჩვენს მიერ მითითებული კომპლექტის შესაბამისად მითითებული ელემენტის მოძიება.
ასევე index.html ფაილში გამოყენებულია კლასებიც, თუ ჩვენი ამოცანაა გვერდიდან ავირჩიოთ / ამოვიღოთ / მივიღოთ ელემენტი ჩვენთვის სასურველი კლასის სახელით, ამ შემთხვევაშიც ისე ვიქცევით როგორც ეს css -ში და ზევით განხილულ მაგალითში ხდება, მაგალითად ჩვენი ამოცანაა ამოვიღოთ / მივიღოთ / ავირჩიოღ ელემენტი შემდეგი კლასის სახელით:
class=”maindiv”
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
შენიშვნა: შესაბამისი კლასი თუ მითითებულია index.html გვერდზე არსებულ რომელიმე სხვა ობიექტზე ( -ებზე), არჩვენების დროს, ის ობიექტებიც მოხვდება ჩვენს მიერ ჩატარებული არჩვენებისათვის შექმნილ კომპლექტში.
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery
სამი ძირითადი სელექტორი რომელსაც ჩვენ ხშირად გამოვიყენებთ, ესენია:
$(‘.maindiv’); – სელექტორი კლასის სახელის მიხედვით
$(‘#main_h1’); – სელექტორი იდენტიფიკატორის მიხედვით
$(‘p’); – სელექტორი ტეგის სახელის მიხედვით
jQuery -ს გამოყენებით, ელემენტების არჩევის - მიღების - ამოღების საფუძვლები - jQuery

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