ფუნქციები text(), hide() და show() – jQuery

ჩვენ შევისწავლეთ ელემენტების ვებ-გვერდიდან არჩევა / მიღება / ამოღების ფუნქციონალი და ეხლა უკვე დროა შევისწავლოთ გარკვეული / კონკრეტული ქმედებების განხორციელება ვებ-გვერდიდან უკვე არჩეულ / მიღებულ / ამოღებულ ელემენტებზე. ამ გაკვეთილში ჩვენ შევისწავლით პირველ სამ მეთოდს რომელიც მოგვცემს საშუალებას განვახორციელოთ კონკრეტული ტიპის ქმედებები ელემენტებზე რომელიც ჩვენს ვებ-გვერდზე არსებობს.
ამისათვის საჭიროა:
ჩავრთოთ ლოკალური ვებ-სერვერი
განვიხილოთ მეთოდი text() რომელიც გვაძლევს საშუალებას ამოვიღოთ ვებ-გვერდზე არსებულ ნებისმიერ ელემენტში შენახული ტექსტი და შევცვალოთ ის.
ჩვენ javascript კურსის შესწავლის დროს განვიხილეთ თვისება innerText, რომელიც სამწუხაროდ არც თუ ისე სწორად მუშაობდა ყველა ვებ ბრაუზერში, jQuery -ში კი ეს პრობლემა მოგვარებულია.
მაგალითად ამოცანა გვეუბნება რომ, ჩვენი სატესტო ვებ-გვერდიდან გვსურს ამოვიღოთ ტექსტი და შემდეგ შევცვალოთ ის სხვა ტექსტით:
2015-04-13 15_12_18-ყვავილების მაღაზია_ 1800flowers.com
2015-04-13 15_13_41-_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
პირველი საჭიროა რომ ელემენტში მოთავსებული ტექსტი ჯერ ამოვიღოთ და დავბეჭდოთ ის ეკრანზე, ჩვენ ეს უკვე ვიცით როგორც უნდა გავაკეთოთ, რადგან ელემენტს რომელშიც ეს ტექსტია მოთავსებული აქვს იდენთიფიკატორი main_h1:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
მას ამოვიღებთ სწორედაც იდენთიფიკატორის დახმარებით / გამოყენებით:
გავხსნათ სატესტო ვებ-გვერდის ცენტრალურ ფოლდერში არსებულ, js ფოლდერში მოთავსებული: myjqueryscripts.js ფაილი და დავწეროთ მასში შემდეგი jQuery ფუნქცია:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
რომლითავ ვეუბნებით კომპიუტერს რომ, ჩვენ გვსურს ელემენტის არჩევა / მიღება / ამოღება main_h1 იდენთიფიკატორის დახმარებით.
ასევე აქვე აღსანიშნავი და აუცილებელია იცოდეთ შემდეგი ფაქტი, რომ მსგავსი ჩანაწერით ჩვენ შევქმენით jQuery ობიექტი, დაიმახსოვრეთ რომ როცა თქვენ წერთ ფუნქციას რომლის საშუალებითაც იღებთ ელემენტს (-ებს), თქვენ ამ დროს ქმნით jQuery ობიექტს და თქვენთვის ხელმისაწვდომი ხდება ყველა jQuery თვისება ამ ობიექტის მიმართ. jQuery ობიექტს გააჩნია ძალიან ბევრი თვისებები და თანმიმდევრობით ჩვენ შევისწავლით მათ.
ჩვენ შევქმენით როგორც ზევით ავღნიშნეთ jQuery ობიექტი და ეხლა უკვე ჩვენ შეგვიძლია მას მივაკუთვნოთ / მივუწეროთ / გავუთავისოთ / დავუწეროთ რომელიმე ჩვენთვის სასურველი მეთოდი (-ები). პირველი ასეთი მეთოდი არის როგორც ასევე ზევით ავღნიშნეთ არის მეთოდი text(), რომელიც იწერება შემდეგნაირად:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
ეს ჩანაწერი დაგვიბრუნებს ტექტს რომელიც მოთავსებულია main_h1 ელემენტში.
იმისათვის რომ ის დავბეჭდოთ კომპიუტერის ეკრანზე ვებ-ბრაუზერში, ჯერ უნდა მივაკუთვნოთ / შევუთავსოთ / გავუთავისოთ / გავუტოლოთ ის ცვლადს ჩვენთვის სასურველი სახელით (მაგალითის შემთხვევაში შევქმნით js ცვლადს სახელით: textH1) და შემდეგ alert() მეთოდის საშუალებით გამოვიტანოთ ეკრანზე:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
განვაახლოთ ჩვენი სატესტო ვებ-გვერდი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
შედეგი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
იმ შემთხვევაში თუ გვინდა ამ ტექსტის შეცვლა, ალბათ თქვენ უკვე გამოიცანით თუ რა ქმედება უნდა შევასრულოთ, უბრალოდ ფუნქციას უნდა გადავცეთ პარამეტრის სახით ჩვენთვის სასურველი ტექსტი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
შენიშვნა: alert() მეთოდი აღარ გვჭირდება, იმიტომ რომ ჩვენ გვსურს ტექსტის ჩანაცვლება და არა ეკრანზე შეტყობინების სახით დაბეჭდვა.
განვაახლოთ ჩვენი სატესტო ვებ-გვერდი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
შედეგი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
შემდეგი ფუნქცია რომელსაც ჩვენ შევისწავლით არის ფუნქცია hide(), რომლის დახმარებითაც / გამოყენებითაც ჩვენ შეგვიძლია დავმალოთ ჩვენთვის სასურველი ელემენტი ვებ-გვერდიდან. წარმოვიდგინოთ რომ ჩვენი ამოცანაა ვებ-გვერდიდან დავმალოთ ელემენტი რომელიც მოთავსებულია ჩვენი სატესტო ვებ-გვერდის თავში (header) და მისი სახელია logo.jpg:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
პირველ შემთხვევაში საჭიროა რომ ჩვენ ის ავირჩიოთ / მივიღოთ / ამოვიღოთ jQuery ფუნქციის დახმარებით ანუ მივწვდეთ მას, მისი არჩევა / მიღება / ამოღება შესაძლებელია რამოდენიმე მეთოდის საშუალებით / დახმარებით, მოდით ჩვენ ავირჩიოთ ამ მეთოდთაგან ერთერთი და ვიპოვოთ ისეთი სურათი რომელსაც წყაროს (source / src) ატრიბუტში უწერია / წერია / შეიცავს ჩანაწერს logo:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
როგორც ზემოთ ავღნიშნეთ ამ ჩანაწერით ჩვენ შევქმენით jQuery ობიექტი, რომელიც მიუთითებს მისამართს / ბმულს ჩვენთვის სასურველ სურათზე, ეხლა კი ჩვენ შეგვიძლია მასზე განვახორციელოთ ჩვენთვის სასურველი ქმედებები jQuery -ს დახმარებით / გამოყენებით.
იმისათვის რომ დავმალოთ ჩვენთვის სასურველი სურათი logo, საჭიროა ჩვენს მიერ შექმნილ jQuery ობიექტს მივუწეროთ მეთოდი hide():
1
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
განვაახლოთ ჩვენი სატესტო ვებ-გვერდი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
შედეგი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
ასევე აღსანიშნავია ისიც რომ მეთოდს hide() გააჩნია ორი პარამეტრი:
პირველი: გაქრობის სიჩქარე (რომელიც იზომება მილიწამებში) – ამ პარამეტს ამავე გაკვეთილში განვიხილავთ
მეორე: ფუნქცია რომელიც შესრულდება ამ მეთოდის ქმედების დასრულენის შემდეგ (როცა სურათი გაქრება, შემდეგ შესრულდეს რაიმე / რომელიმე ჩვენს მიერ დაწერილი ფუნქცია) – შემდეგ გაკვეთილებში განვიხილავთ.
მივუთითოთ / გადავცეთ პარამეტრის სახით, ჩვენთვის სასურველი გაქრობის სიჩქარის დრო, მაგალითად 3 წამი, ანუ 3000 მილიწამი:
2
განვაახლოთ ჩვენი სატესტო ვებ-გვერდი:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
შედეგი:

მეთოდი show() ალბათ უკვე გამოიცანით რომ, პირიქით გამოაჩენს დამალულ სურათს:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
ანუ ამ შემთხვევაში მოხდება, ჯერ სურათის გაქრობა 3 წამის განმავლობაში ხოლო შემდეგ 3 წამის განმავლობაში მისი გამოჩენა:

შენიშვნა: იმ შემთხვევაში თუ თქვენ ერთი და იგივე არჩეულ ელემენტთან (ანუ როგორც ზევით ავღნიშნეთ ჩვენს მიერ შექმნილ jQuery ობიექტთან) მუშაობთ jQuery -ს სხვადასხვა მეთოდების გამოყენებით, სასურველია jQuery ობიექტი შევინახოთ რაიმე ცვლადში, იმიტომ რომ როცა ამას ჩვენ არ ვაკეთებთ, კომპიუტერს ორ ჯერ უწევს DOM ხეზე არსებული ელემენტების მოძებნა და შემდეგ მასზე ჩვენს მიერ მითითებული მეთოდების / მოქმედებების განხორციელება ანუ ჩვენს ჩემთხვევაში:
$(document).ready(function() {
$(“img[src*=logo]”).hide(3000); – მოძებნა, იპოვა, დამალა
$(“img[src*=logo]”).show(3000); – მოძებნა, იპოვა, გამოაჩინა
});
ანუ ვებ-გვერდზე რომ ძალიან ბევრი სურათი გვქონდეს, ეს ფუნქცია მაშინ ყველა სურათს გადაამოწმებს და ბოლოს იპოვის ჩვენთვის სასურველს და შემდეგ განახორციელებს მეთოდს, იმისათვის რომ არ მოხდეს ტყუილად დროის კარგვა, იმ შემთხვევაში თუ ჩვენ ერთი და იგივე ობიექტს ვემუშავებით რამოდენიმე / სხვადასხვა მეთოდებით ამისათვის საჭიროა, ობიექტი მოვათავსოთ რაიმე ჩვენთვის სასურველ ცვლადში, ცვლადის სახელს კი დავუწეროთ ჩვენთვის სასურველი მეთოდები:
2015-04-13 15_17_19-C_Desktop_mylocalwebserver_root_1800flowers.com_index.html - Sublim
ანუ:
$(document).ready(function() {
var myLogo = $(“img[src*=logo]”); – myLogo ცვლადში შეინახა ნაპოვნი სურათი (ან მხოლოდ ერთხელ მოძებნა, იპოვა და შეინახა myLogo ცვლადში ნაპოვნი სურათი)
myLogo.hide(3000); – დამალა
myLogo.show(3000); – გამოაჩინა
});
შედეგი კი იგივეა / უცვლელია: