არტიკოლი

JQuery, რა არის და რისი გაკეთება შეგვიძლია JavaScript ბიბლიოთეკით

jQuery არის სწრაფი, მსუბუქი და ფუნქციებით მდიდარი JavaScript ბიბლიოთეკა, რომელიც ეფუძნება პრინციპს "დაწერეთ ნაკლები, გააკეთე მეტი" . JQuery API-ები ამარტივებს HTML დოკუმენტების მართვას და შენარჩუნებას, ღონისძიებების მართვას, ანიმაციური ეფექტების დამატებას ვებ გვერდზე. ის თავსებადია ყველა მთავარ ბრაუზერთან, როგორიცაა Chrome, Firefox, Safari, Edge.

Ajax-ზე დაფუძნებული აპლიკაციის შექმნა jQuery-ით ძალიან მარტივი და სწრაფი ხდება.

jQuery თავდაპირველად შეიქმნა ჯონ რეზიგის მიერ 2006 წლის დასაწყისში. jQuery პროექტი ამჟამად ინახება და ინახება დეველოპერთა განაწილებული ჯგუფის მიერ, როგორც ღია კოდის პროექტი.

თქვენ შეგიძლიათ დაზოგოთ ბევრი დრო და ძალისხმევა jQuery-ით. ასე რომ, დაამატეთ ეს საიტი თქვენს რჩეულებში და განაგრძეთ კითხვა

სტატიის შინაარსი

რისი გაკეთება შეგიძლიათ jQuery-ით

კიდევ ბევრი რამის გაკეთება შეგიძლიათ jQuery-ით.

  • თქვენ შეგიძლიათ მარტივად აირჩიოთ HTML გვერდის ელემენტები, წაიკითხოთ ან შეცვალოთ ატრიბუტები;
  • თქვენ შეგიძლიათ მარტივად შექმნათ ეფექტები, როგორიცაა ელემენტების ჩვენება ან დამალვა, გადასვლები, გადახვევები და ა.შ.
  • თქვენ შეგიძლიათ მარტივად შექმნათ რთული CSS ანიმაციები კოდის ნაკლები ხაზით;
  • თქვენ შეგიძლიათ მარტივად მანიპულირება DOM ელემენტები და მათი ატრიბუტები;
  • თქვენ შეგიძლიათ მარტივად დანერგოთ Ajax კლიენტსა და სერვერს შორის მონაცემთა ასინქრონული გაცვლის გასააქტიურებლად;
  • თქვენ შეგიძლიათ მარტივად გადაკვეთოთ ყველა DOM ხე, რათა იპოვოთ ნებისმიერი ელემენტი;
  • თქვენ შეგიძლიათ მარტივად შეასრულოთ რამდენიმე მოქმედება ელემენტზე კოდის ერთი ხაზით;
  • თქვენ შეგიძლიათ მარტივად მიიღოთ ან დააყენოთ HTML ელემენტების ზომა.

სია ამით არ მთავრდება, jQuery-ით ბევრი სხვა მაგარი რამის გაკეთება შეგიძლიათ.

jQuery-ის გამოყენების უპირატესობები

არსებობს რამდენიმე უპირატესობა, თუ რატომ უნდა აირჩიოთ jQuery-ის გამოყენება:

  • დაზოგეთ ბევრი დრო: შეგიძლიათ დაზოგოთ ბევრი დრო და ძალისხმევა jQuery-ის ჩაშენებული ეფექტებისა და სელექტორების გამოყენებით და განვითარების სხვა ასპექტებზე ფოკუსირებით;
  • საერთო JavaScript ამოცანების გამარტივება - jQuery მნიშვნელოვნად ამარტივებს საერთო JavaScript ამოცანებს. ახლა თქვენ შეგიძლიათ მარტივად შექმნათ ფუნქციებით მდიდარი და ინტერაქტიული ვებ გვერდები, კოდის ნაკლები ხაზით. ტიპიური მაგალითია Ajax-ის დანერგვა გვერდის შინაარსის განახლების მიზნით, მისი განახლების გარეშე;
  • სიმარტივე: jQuery ძალიან მარტივი გამოსაყენებელია. ნებისმიერს, ვისაც აქვს HTML, CSS და JavaScript-ის საბაზისო სამუშაო ცოდნა, შეუძლია დაიწყოს განვითარება jQuery-ით;
  • თავსებადია ყველა ბრაუზერთან: jQuery შეიქმნა თანამედროვე ბრაუზერების გათვალისწინებით და თავსებადია ყველა ძირითად თანამედროვე ბრაუზერთან, როგორიცაა Chrome, Firefox, Safari, Edge;
  • აბსოლუტურად უფასო – და საუკეთესო ნაწილი ის არის, რომ სრულიად უფასოა ჩამოტვირთვა და გამოყენება.

jQuery ჩამოტვირთვა

დასაწყებად, ჯერ გადმოვწეროთ jQuery-ის ასლი და შემდეგ ჩავრთოთ იგი ჩვენს პროექტში. jQuery-ის ორი ვერსია ხელმისაწვდომია ჩამოსატვირთად: სიჩქარეში e არ არის შეკუმშული .

შეკუმშული ფაილი უფრო შესაფერისია განვითარების ან გამართვისთვის; ხოლო, მინიფიცირებული და შეკუმშული ფაილი რეკომენდირებულია წარმოებისთვის, რადგან ის ზოგავს სიჩქარეს და აუმჯობესებს შესრულებას ფაილის უფრო მცირე ზომის გამო.

ჩვენ შეგვიძლია გადმოვწეროთ jQuery აქედან: https://jquery.com/download/

jQuery ფაილის გადმოტვირთვის შემდეგ ხედავთ, რომ მას აქვს js გაფართოება, ანუ ეს არის JavaScript ფაილი. სინამდვილეში JQuery სხვა არაფერია, თუ არა JavaScript ბიბლიოთეკა, ასე რომ თქვენ შეგიძლიათ შეიტანოთ jQuery ფაილი HTML დოკუმენტში ელემენტთან ერთად. ისევე როგორც თქვენ ჩართავთ ჩვეულებრივ JavaScript ფაილებს.

<head>
    <title>Simple HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

დაიმახსოვრეთ, რომ ყოველთვის ჩართეთ jQuery ფაილი მორგებული სკრიპტების წინ; წინააღმდეგ შემთხვევაში, jQuery API არ იქნება ხელმისაწვდომი, როდესაც თქვენი jQuery კოდი შეეცდება მათზე წვდომას.

როგორც თქვენ შენიშნეთ, წინა მაგალითში ჩვენ გამოვტოვეთ ატრიბუტი type="text/javascript" ტეგის შიგნით . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiდასრულდა HTML5-ში და ყველა თანამედროვე ბრაუზერში.

jQuery CDN-დან

როგორც ალტერნატივა, შეგიძლიათ ჩართოთ jQuery თქვენს დოკუმენტში, თავისუფლად ხელმისაწვდომი CDN (კონტენტის მიწოდების ქსელი) ბმულების საშუალებით, თუ გსურთ თავიდან აიცილოთ ფაილის ჩამოტვირთვა.

CDN-ებს შეუძლიათ შესთავაზონ შესრულების უპირატესობა დატვირთვის დროის შემცირებით, რადგან ისინი ატარებენ jQuery-ს მრავალ სერვერზე მთელს მსოფლიოში და როდესაც მომხმარებელი ითხოვს ფაილს, ის მოემსახურება უახლოეს სერვერს.

ამას ასევე აქვს ის უპირატესობა, რომ თუ თქვენს ვებ გვერდის ვიზიტორმა უკვე ჩამოტვირთა jQuery-ის ასლი იმავე CDN-დან სხვა საიტებზე ვიზიტისას, მათ აღარ მოუწევთ მისი ჩამოტვირთვა, რადგან ის უკვე არის მათი ბრაუზერის ქეში.

ამ შემთხვევაში მოგიწევთ დაწეროთ:

<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>

jquery პროექტის მიერ მოწოდებული CDN-ის გარდა, შეგიძლიათ ჩართოთ jQuery via Google e microsoft cdn.

პირველი ვებ გვერდი jQuery-ზე დაფუძნებული

მას შემდეგ რაც დავინახეთ jQuery ბიბლიოთეკის მიზნები და როგორ შეიტანოთ იგი თქვენს დოკუმენტში, ახლა დროა გამოიყენოთ jQuery პრაქტიკაში.

ახლა მოდით გავაკეთოთ მარტივი jQuery ოპერაცია სათაურის ტექსტის ფერის შეცვლით წინა ფერიდანdefiშეღებილი შავიდან მწვანემდე.

<head>
    <title>My First jQuery Web Page</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "#00ff00");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

კოდში ჩვენ შევასრულეთ მარტივი jQuery ოპერაცია სათაურის, ანუ ელემენტის ფერის შეცვლით jQuery ელემენტის სელექტორის და css() მეთოდის გამოყენებით, როდესაც დოკუმენტი მზად არის, რომელიც ცნობილია როგორც დოკუმენტის მზადების მოვლენა. 

jQuery სინტაქსი

jQuery განცხადება ჩვეულებრივ იწყება დოლარის ნიშნით ( $) და მთავრდება მძიმით ( ;).

jQuery-ში დოლარის ნიშანი ( $) არის მხოლოდ jQuery-ის მეტსახელი. განვიხილოთ შემდეგი ნიმუშის კოდი, რომელიც აჩვენებს jQuery-ის უმარტივეს განცხადებას.

<script>
    $(document).ready(function(){

        alert("Hello I'm a JQuery sign");
    });
</script>

მაგალითი უბრალოდ აჩვენებს გამაფრთხილებელ შეტყობინებას "Hello I'm a JQuery sign”მომხმარებელს. ვნახოთ რამდენიმე მახასიათებელი:

  • ელემენტი <script>: jQuery უბრალოდ JavaScript ბიბლიოთეკაა, jQuery კოდი შეიძლება განთავსდეს ელემენტის შიგნით <script>, ან შეგიძლიათ განათავსოთ ის გარე JavaScript ფაილში;
  • Ხაზი $(document).ready(handler); ცნობილია, როგორც მზად ღონისძიება. Სად არის handler ეს არის ფუნქცია, რომელიც გადაეცემა შესასრულებელ მეთოდს, როგორც კი დოკუმენტი მზად იქნება, ანუ როდესაც DOM იერარქია მთლიანად აშენდება.

jQuery მეთოდი ready() ის ჩვეულებრივ გამოიყენება ანონიმური ფუნქციით. ასე რომ, ზემოთ მოყვანილი მაგალითი ასევე შეიძლება დაიწეროს სტენოგრამის აღნიშვნით ასე:

<script>
    $(function(){
        alert("Hello I'm a JQuery sign");
    });
</script>

სელექტორები

ფუნქციის შიგნით შეგიძლიათ დაწეროთ jQuery განცხადებები ნებისმიერი მოქმედების შესასრულებლად ძირითადი სინტაქსის მიხედვით, როგორიცაა:

$(selector).action();

Სად არის, $(selector) ის ძირითადად ირჩევს HTML ელემენტებს DOM ხიდან, რათა მოხდეს მისი მანიპულირება და action() გამოიყენეთ გარკვეული მოქმედებები არჩეულ ელემენტებზე, როგორიცაა CSS თვისების მნიშვნელობის შეცვლა ან ელემენტის შინაარსის დაყენება და ა.შ.

ახლა მოდით შევხედოთ სხვა მაგალითს, რომელიც ადგენს აბზაცის ტექსტს:

<head>
    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

jQuery მაგალითი ეხება სელექტორს pდა ირჩევს ყველა აბზაცს, შემდეგ მეთოდს text() დააყენეთ აბზაცის ტექსტის შინაარსი "Hello World!".

წინა მაგალითში აბზაცის ტექსტი ავტომატურად შეიცვლება, როდესაც დოკუმენტი მზად არის. მაგრამ ვნახოთ, როგორ გავაკეთოთ ეს იმ შემთხვევაში, თუ გსურთ მოქმედების შესრულება jQuery კოდის გაშვებამდე, რათა შეცვალოთ აბზაცის ტექსტი. 

განვიხილოთ ერთი ბოლო მაგალითი:


<head>

    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">Replace Text</button>
</body>
</html>

ამ მაგალითში აბზაცის ტექსტი იცვლება მხოლოდ მაშინ, როდესაც ხდება ღილაკზე დაწკაპუნების მოვლენა "Replace Text", რაც უბრალოდ ნიშნავს, როდესაც მომხმარებელი დააწკაპუნებს ამ ღილაკს.

ნივთების შერჩევა ID-ით

შეგიძლიათ იდენტიფიკაციის ამომრჩეველი გამოიყენოთ გვერდზე უნიკალური ID-ის მქონე ერთი ელემენტის ასარჩევად.

მაგალითად, შემდეგი jQuery კოდი შეარჩევს და მონიშნავს ელემენტს ID ატრიბუტით id="markid"როდესაც დოკუმენტი მზად იქნება.

<script>
$(document).ready(function(){
    // Highlight element with id markid
    $("#markid").css("background", "grey");
});
</script>
ელემენტების შერჩევა კლასის სახელით

კლასის სელექტორი შეიძლება გამოყენებულ იქნას კონკრეტული კლასის ელემენტების შესარჩევად.

მაგალითად, შემდეგი jQuery კოდი შეარჩევს და მონიშნავს ელემენტებს კლასის ატრიბუტით class="markclass"როდესაც დოკუმენტი მზად იქნება.

<script>
$(document).ready(function(){
    // Highlight elements with class markclass
    $(".markclass").css("background", "grey");
});
</script>
ნივთების შერჩევა სახელით

ელემენტის ამომრჩევი შეიძლება გამოყენებულ იქნას ნივთების სახელის მიხედვით შესარჩევად.

მაგალითად, შემდეგი jQuery კოდი შეარჩევს და მონიშნავს ყველა აბზაცს, ანუ ელემენტებს "<p>" დოკუმენტი, როდესაც ის მზად იქნება.

საინფორმაციო ბიულეტენი
არ გამოტოვოთ ყველაზე მნიშვნელოვანი სიახლეები ინოვაციების შესახებ. დარეგისტრირდით, რომ მიიღოთ ისინი ელექტრონული ფოსტით.
<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "grey");
});
</script>
ელემენტების შერჩევა ატრიბუტის მიხედვით

თქვენ შეგიძლიათ გამოიყენოთ ატრიბუტის ამომრჩეველი, რათა აირჩიოთ ელემენტი მისი ერთ-ერთი HTML ატრიბუტის საფუძველზე, როგორიცაა ბმული ატრიბუტი targetან შეყვანის ატრიბუტი typeდა ა.შ.

მაგალითად, შემდეგი jQuery კოდი შეარჩევს და მონიშნავს ყველა ტექსტის შეყვანას, როგორიცაა ელემენტები "<input>" ერთად type="text"როდესაც დოკუმენტი მზად იქნება.

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "grey");
});
</script>
ელემენტის შერჩევა რთული CSS სელექტორის საშუალებით

თქვენ ასევე შეგიძლიათ დააკავშიროთ CSS სელექტორები, რომ თქვენი არჩევანი კიდევ უფრო ზუსტი გახადოთ.

მაგალითად, შეგიძლიათ დააკავშიროთ კლასის სელექტორი ელემენტის ამომრჩეველთან, რათა იპოვოთ ელემენტები დოკუმენტში, რომლებსაც აქვთ გარკვეული ტიპი და კლასი.

<script>
$(document).ready(function(){
    // Highlight only paragraph elements with class mark
    $("p.mark").css("background", "yellow");
  
    // Highlight only span elements inside the element with ID mark
    $("#mark span").css("background", "yellow");
  
    // Highlight li elements inside the ul elements
    $("ul li").css("background", "red");
  
    // Highlight li elements only inside the ul element with id mark
    $("ul#mark li").css("background", "yellow");
  
    // Highlight li elements inside all the ul element with class mark
    $("ul.mark li").css("background", "green");
  
    // Highlight all anchor elements with target blank
    $('a[target="_blank"]').css("background", "yellow");
});
</script>
jQuery Custom Selector

სელექტორების გარდა definiti, jQuery უზრუნველყოფს საკუთარ პერსონალურ სელექტორს, რათა კიდევ უფრო გაზარდოს გვერდზე ელემენტების შერჩევის შესაძლებლობები.

<script>
$(document).ready(function(){
    // Highlight table rows appearing at odd places
    $("tr:odd").css("background", "yellow");
  
    // Highlight table rows appearing at even places
    $("tr:even").css("background", "orange");
  
    // Highlight first paragraph element
    $("p:first").css("background", "red");
  
    // Highlight last paragraph element
    $("p:last").css("background", "green");
  
    // Highlight all input elements with type text inside a form
    $("form :text").css("background", "purple");
  
    // Highlight all input elements with type password inside a form
    $("form :password").css("background", "blue");
  
    // Highlight all input elements with type submit inside a form
    $("form :submit").css("background", "violet");
});
</script>

მოვლენები

მოვლენები ხშირად გამოწვეულია მომხმარებლის ინტერაქციის შედეგად ვებ გვერდზე, მაგალითად, ბმულზე ან ღილაკზე დაწკაპუნებით, ტექსტის შეყვანის ველში ან ტექსტის ზონაში, შერჩევის ველში შერჩევისას, კლავიატურაზე ღილაკზე დაჭერისას, მაუსის მაჩვენებლის გადაადგილებისას. და ა.შ. ზოგიერთ შემთხვევაში, თავად ბრაუზერმა შეიძლება გამოიწვიოს მოვლენები, როგორიცაა გვერდის ჩატვირთვა და ჩამოტვირთვის მოვლენები.

jQuery აუმჯობესებს მოვლენის მართვის ძირითად მექანიზმებს ღონისძიების მეთოდების შეთავაზებით ბრაუზერის ძირითადი მოვლენების უმეტესობისთვის, ზოგიერთი ეს მეთოდია ready(), click(), keypress(), focus(), blur(), change()და ა.შ.

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

ზოგადად, მოვლენები შეიძლება დაიყოს ოთხ ძირითად ჯგუფად: 

  • მაუსის მოვლენები,
  • კლავიატურის მოვლენები,
  • მოვლენების მოდული რედ
  • დოკუმენტი/ფანჯრის მოვლენები. 

მაუსის მოვლენები

მაუსის მოვლენა ამოქმედდება, როდესაც მომხმარებელი დააწკაპუნებს ნივთზე, ანაცვლებს მაუსის მაჩვენებელს და ა.შ.

აქ არის რამოდენიმე ხშირად გამოყენებული jQuery მეთოდი მაუსის მოვლენების დასამუშავებლად.

Მეთოდი click()

Მეთოდი click() მიამაგრეთ მოვლენის დამმუშავებლის ფუნქცია ღონისძიებისთვის არჩეულ ელემენტებს "click“. დაკავშირებული ფუნქცია შესრულებულია, როდესაც მომხმარებელი დააწკაპუნებს ამ ელემენტზე. შემდეგი მაგალითი დამალავს ელემენტებს <p> გვერდზე დაწკაპუნებისას.

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
Მეთოდი dblclick()

Მეთოდი dblclick() მიამაგრეთ მოვლენის დამმუშავებლის ფუნქცია ღონისძიებისთვის არჩეულ ელემენტებს "dblclick“. დაკავშირებული ფუნქცია სრულდება, როდესაც მომხმარებელი ორჯერ დააწკაპუნებს ამ პუნქტზე. შემდეგი მაგალითი დამალავს ელემენტებს <p> მათზე ორჯერ დაწკაპუნებისას.

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>
Მეთოდი hover()

Მეთოდი hover() მიამაგრეთ ერთი ან ორი მოვლენის დამმუშავებლის ფუნქცია შერჩეულ ელემენტებს, რომლებიც სრულდება, როდესაც მაუსის მაჩვენებელი მოძრაობს ელემენტებში და გარეთ. პირველი ფუნქცია მუშაობს მაშინ, როდესაც მომხმარებელი ათავსებს მაუსის მაჩვენებელს ერთეულზე, ხოლო მეორე ფუნქცია მუშაობს მაშინ, როდესაც მომხმარებელი აშორებს მაუსის მაჩვენებელს ამ ელემენტიდან.

შემდეგი მაგალითი გამოყოფს ნივთებს <p> როდესაც კურსორს დააყენებთ მასზე, ხაზგასმული ამოღებული იქნება კურსორის ამოღებისას.

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>
Მეთოდი mouseenter()

Მეთოდი mouseenter() არჩეულ ელემენტებს მიამაგრეთ მოვლენის დამმუშავებლის ფუნქცია, რომელიც შესრულდება ელემენტში მაუსის შეყვანისას. შემდეგი მაგალითი ელემენტს დაამატებს კლასის მონიშვნას <p> როდესაც კურსორს ათავსებთ მასზე.

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>
Მეთოდი mouseleave()

Მეთოდი mouseleave() დაურთეთ მოვლენის დამმუშავებლის ფუნქცია შერჩეულ ელემენტებს, რომელიც მუშაობს, როდესაც მაუსი ტოვებს ელემენტს. შემდეგი მაგალითი წაშლის კლასის ხაზგასმას ელემენტიდან <p> როცა კურსორს ამოიღებთ მისგან.

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

კლავიატურის მოვლენები

კლავიატურის ღონისძიება ჩნდება, როდესაც მომხმარებელი დააჭერს ან ათავისუფლებს კლავიატურაზე კლავიშს. მოდით გადავხედოთ jQuery-ის რამდენიმე ჩვეულებრივ მეთოდს კლავიატურის მოვლენების დასამუშავებლად.

Მეთოდი keypress()

Მეთოდი keypress() ანიჭებს მოვლენის დამუშავების ფუნქციას შერჩეულ ელემენტებს (როგორც წესი, ფორმის მართვის საშუალებები), რომელიც მუშაობს მაშინ, როდესაც ბრაუზერი იღებს მომხმარებლისგან კლავიატურის შეყვანას. შემდეგი მაგალითი აჩვენებს შეტყობინებას მოვლენის გაშვებისას keypress და რამდენჯერ ირთვება კლავიატურაზე ღილაკზე დაჭერისას.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

კლავიატურის დაჭერის მოვლენა მსგავსია კლავიშის მოვლენის, გარდა მოდიფიკატორისა და არაბეჭდვის კლავიშებისა, როგორიცაა Shift, Esc, Backspace ან Delete, ისრიანი ღილაკები და ა.შ. ისინი ააქტიურებენ კლავიშების მოვლენებს, მაგრამ არა კლავიშების მოვლენებს.

Მეთოდი keydown()

Მეთოდი keydown() ანიჭებს მოვლენის დამუშავების ფუნქციას შერჩეულ ელემენტებს (როგორც წესი, ფორმებს კონტროლს), რომელიც შესრულებულია, როდესაც მომხმარებელი პირველად დააჭერს კლავიატურაზე კლავიშს. შემდეგი მაგალითი აჩვენებს შეტყობინებას მოვლენის გაშვებისას keydown და რამდენჯერ ირთვება კლავიატურაზე ღილაკზე დაჭერისას.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
Მეთოდი keyup()

Მეთოდი keyup() დაურთეთ მოვლენის დამუშავების ფუნქცია შერჩეულ ელემენტებს (როგორც წესი, ფორმირებს კონტროლს), რომელიც შესრულებულია, როდესაც მომხმარებელი ათავისუფლებს კლავიატურაზე კლავიშს. შემდეგი მაგალითი აჩვენებს შეტყობინებას მოვლენის გაშვებისას keyup და რამდენჯერ ირთვება კლავიატურაზე კლავიშის დაჭერისას და გამოშვებისას.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

ჩამოაყალიბეთ მოვლენები

ფორმის მოვლენა ხდება მაშინ, როდესაც ფორმის კონტროლი იღებს ან კარგავს ფოკუსს, ან როდესაც მომხმარებელი ცვლის ფორმის კონტროლის მნიშვნელობას, მაგალითად, ტექსტის შეყვანაში ტექსტის აკრეფას, არჩევის ველში ოფციის არჩევას და ა.შ. აქ არის რამოდენიმე ხშირად გამოყენებული jQuery მეთოდი ფორმის მოვლენების დასამუშავებლად.

Მეთოდი change()

Მეთოდი change() ელემენტებს მიამაგრეთ მოვლენის დამმუშავებლის ფუნქცია <input> და შესრულებულია, როდესაც მისი მნიშვნელობა იცვლება. შემდეგი მაგალითი აჩვენებს გამაფრთხილებელ შეტყობინებას ოფციის არჩევისას ჩამოსაშლელ ველში.

<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>

დაწკაპუნების ველების, მონიშვნის ველებისა და რადიოს ღილაკებისთვის, მოვლენა მაშინვე ირთვება, როდესაც მომხმარებელი აკეთებს მაუსის არჩევას, მაგრამ ტექსტის შეყვანისა და ტექსტის ზონისთვის ღონისძიება ირთვება მას შემდეგ, რაც ელემენტი დაკარგავს ფოკუსს.

Მეთოდი focus()

Მეთოდი focus() ანიჭებს მოვლენის დამმუშავებლის ფუნქციას შერჩეულ ელემენტებს (როგორც წესი, აკონტროლებს და ფორმებს აკავშირებს), რომელიც ახორციელებს ფოკუსირებისას. შემდეგი მაგალითი აჩვენებს შეტყობინებას, როდესაც ტექსტის შეყვანა მიიღებს ფოკუსს.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
Მეთოდი blur()

Მეთოდი blur() მიამაგრეთ მოვლენის დამმუშავებლის ფუნქცია ისეთი ელემენტების შესაქმნელად, როგორიცაა <input><textarea><select> რომელიც შესრულებულია ყურადღების დაკარგვისას. შემდეგი მაგალითი აჩვენებს შეტყობინებას, როდესაც ტექსტის შეყვანა კარგავს ფოკუსს.

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
Მეთოდი submit()

Მეთოდი submit() ელემენტებს მიამაგრეთ მოვლენის დამმუშავებლის ფუნქცია <form> რომელიც მუშაობს მაშინ, როდესაც მომხმარებელი ცდილობს ფორმის გაგზავნას. შემდეგი მაგალითი აჩვენებს შეტყობინებას ფორმის გაგზავნის მცდელობისას შეყვანილი მნიშვნელობის მიხედვით.

<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
            // Preventing form submission
            event.preventDefault();
        }
    });
});
</script>

დოკუმენტი/ფანჯრის მოვლენები

მოვლენები ასევე ირთვება იმ სიტუაციაში, როდესაც DOM (დოკუმენტის ობიექტის მოდელი) გვერდი მზად არის ან როდესაც მომხმარებელი ზომავს ან გადაახვევს ბრაუზერის ფანჯარას და ა.შ. აქ არის რამოდენიმე ხშირად გამოყენებული jQuery მეთოდი ამ ტიპის ღონისძიებისთვის.

Მეთოდი ready()

Მეთოდი ready() განსაზღვრავს ფუნქციას, რომელიც უნდა შესრულდეს DOM-ის სრულად ჩატვირთვისას.

შემდეგი მაგალითი ჩაანაცვლებს აბზაცის ტექსტს, როგორც კი DOM იერარქია სრულად აშენდება და მზად იქნება მანიპულირებისთვის.

<script>
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
Მეთოდი resize()

Მეთოდი resize() მიამაგრეთ მოვლენის დამმუშავებლის ფუნქცია ფანჯრის ელემენტს, რომელიც მუშაობს ბრაუზერის ფანჯრის ზომის შეცვლისას.

შემდეგი მაგალითი აჩვენებს ბრაუზერის ფანჯრის ამჟამინდელ სიგანეს და სიმაღლეს, როდესაც ცდილობთ მისი ზომის შეცვლას მისი კუთხეების გადათრევით.

<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>
Მეთოდი scroll()

Მეთოდი scroll() მიამაგრეთ ღონისძიების დამმუშავებლის ფუნქცია ფანჯარაზე ან iframe და გადაადგილებადი ელემენტი, რომელიც მუშაობს ყოველთვის, როცა ელემენტის გადახვევის პოზიცია იცვლება.

შემდეგი მაგალითი აჩვენებს შეტყობინებას ბრაუზერის ფანჯრის გადახვევისას.

<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>

Ercole Palmeri

.

საინფორმაციო ბიულეტენი
არ გამოტოვოთ ყველაზე მნიშვნელოვანი სიახლეები ინოვაციების შესახებ. დარეგისტრირდით, რომ მიიღოთ ისინი ელექტრონული ფოსტით.

ბოლო სტატიები

Smart Lock Market: გამოქვეყნდა ბაზრის კვლევის ანგარიში

ტერმინი Smart Lock Market ეხება ინდუსტრიას და ეკოსისტემას, რომელიც გარშემორტყმულია წარმოების, დისტრიბუციისა და გამოყენების…

მარტი 27 2024

რა არის დიზაინის ნიმუშები: რატომ გამოიყენოთ ისინი, კლასიფიკაცია, დადებითი და უარყოფითი მხარეები

პროგრამული უზრუნველყოფის ინჟინერიაში, დიზაინის შაბლონები არის ოპტიმალური გადაწყვეტილებები იმ პრობლემებისთვის, რომლებიც ჩვეულებრივ გვხვდება პროგრამული უზრუნველყოფის დიზაინში. მე ვგავარ…

მარტი 26 2024

სამრეწველო მარკირების ტექნოლოგიური ევოლუცია

სამრეწველო მარკირება არის ფართო ტერმინი, რომელიც მოიცავს რამდენიმე ტექნიკას, რომლებიც გამოიყენება ზედაპირზე მუდმივი ნიშნების შესაქმნელად…

მარტი 25 2024

Excel მაკროების მაგალითები დაწერილი VBA-ით

შემდეგი მარტივი Excel მაკრო მაგალითები დაიწერა VBA კითხვის სავარაუდო დროის გამოყენებით: 3 წუთი მაგალითი…

მარტი 25 2024

წაიკითხეთ ინოვაცია თქვენს ენაზე

საინფორმაციო ბიულეტენი
არ გამოტოვოთ ყველაზე მნიშვნელოვანი სიახლეები ინოვაციების შესახებ. დარეგისტრირდით, რომ მიიღოთ ისინი ელექტრონული ფოსტით.

Follow us