लेख

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 वापरण्यास अतिशय सोपे आहे. एचटीएमएल, सीएसएस आणि जावास्क्रिप्टचे मूलभूत ज्ञान असलेले कोणीही jQuery सह विकसित करणे सुरू करू शकते;
  • सर्व ब्राउझरशी सुसंगत: jQuery आधुनिक ब्राउझर लक्षात घेऊन तयार करण्यात आली आहे आणि Chrome, Firefox, Safari, Edge सारख्या सर्व प्रमुख आधुनिक ब्राउझरशी सुसंगत आहे;
  • पूर्णपणे विनामूल्य - आणि सर्वात चांगली गोष्ट म्हणजे ते डाउनलोड आणि वापरण्यासाठी पूर्णपणे विनामूल्य आहे.

jQuery डाउनलोड

प्रारंभ करण्यासाठी, प्रथम jQuery ची प्रत डाउनलोड करू आणि नंतर ती आमच्या प्रकल्पात समाविष्ट करू. jQuery च्या दोन आवृत्त्या डाउनलोड करण्यासाठी उपलब्ध आहेत: घाईत e संकुचित नाही .

संकुचित फाइल विकास किंवा डीबगिंगसाठी अधिक योग्य आहे; तर, लहान आणि संकुचित फाइल उत्पादनासाठी शिफारस केली जाते कारण ती बँडविड्थ वाचवते आणि लहान फाइल आकारामुळे कार्यप्रदर्शन सुधारते.

आम्ही येथून jQuery डाउनलोड करू शकतो: https://jquery.com/download/

एकदा तुम्ही jQuery फाईल डाउनलोड केल्यावर तुम्ही पाहू शकता की त्यात js विस्तार आहे, म्हणजे ती JavaScript फाइल आहे. खरं तर JQuery ही JavaScript लायब्ररीशिवाय काहीही नाही, त्यामुळे तुम्ही HTML दस्तऐवजात घटकासह jQuery फाइल समाविष्ट करू शकता. जसे तुम्ही नियमित 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 कोड त्यात प्रवेश करण्याचा प्रयत्न करेल तेव्हा jQuery API उपलब्ध होणार नाहीत.

तुमच्या लक्षात आले असेल की, आम्ही मागील उदाहरणातील विशेषता वगळली type="text/javascript" टॅगच्या आत . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5 आणि सर्व आधुनिक ब्राउझरमध्ये पूर्ण.

CDN कडून jQuery

पर्याय म्हणून, तुम्ही फाइल डाउनलोड करणे टाळत असल्यास, तुम्ही मुक्तपणे उपलब्ध CDN (कंटेंट डिलिव्हरी नेटवर्क) लिंक्सद्वारे तुमच्या दस्तऐवजात jQuery एम्बेड करू शकता.

CDN लोड वेळ कमी करून कामगिरीचा फायदा देऊ शकतात, कारण ते जगभरातील एकाधिक सर्व्हरवर jQuery होस्ट करतात आणि जेव्हा वापरकर्ता फाइलची विनंती करतो तेव्हा ती सर्वात जवळच्या सर्व्हरवरून दिली जाते.

याचा फायदा असाही आहे की जर तुमच्या वेब पेज अभ्यागताने इतर साइट्सना भेट देताना त्याच CDN वरून jQuery ची प्रत आधीच डाउनलोड केली असेल, तर त्यांना ती पुन्हा डाउनलोड करावी लागणार नाही कारण ती त्यांच्या ब्राउझरच्या कॅशेमध्ये आहे.

या प्रकरणात, आपल्याला लिहावे लागेल:

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

jquery प्रकल्पाद्वारे प्रदान केलेल्या CDN व्यतिरिक्त, तुम्ही jQuery द्वारे समाविष्ट करू शकता Google e मायक्रोसॉफ्ट 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) हे मुळात DOM ट्री मधून HTML घटक निवडते जेणेकरून ते हाताळले जाऊ शकते आणि 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“, ज्याचा सरळ अर्थ असा होतो की जेव्हा वापरकर्ता हे बटण क्लिक करतो.

आयडीनुसार आयटम निवडत आहे

पृष्ठावरील अद्वितीय आयडीसह एकल आयटम निवडण्यासाठी तुम्ही आयडी निवडक वापरू शकता.

उदाहरणार्थ, खालील 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 कस्टम सिलेक्टर

निवडकर्त्यांव्यतिरिक्त 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, arrow keys. ते कीडाउन इव्हेंट्स फायर करतात परंतु कीप्रेस इव्हेंट नाहीत.

पद्धत 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

.

इनोव्हेशन वृत्तपत्र
नवोपक्रमावरील सर्वात महत्त्वाच्या बातम्या चुकवू नका. त्यांना ईमेलद्वारे प्राप्त करण्यासाठी साइन अप करा.

अलीकडील लेख

Veeam मध्ये रॅन्समवेअरसाठी सर्वात व्यापक समर्थन, संरक्षणापासून प्रतिसाद आणि पुनर्प्राप्तीपर्यंत वैशिष्ट्ये आहेत

Veeam द्वारे Coveware सायबर खंडणी घटना प्रतिसाद सेवा प्रदान करणे सुरू ठेवेल. Coveware फॉरेन्सिक आणि उपाय क्षमता प्रदान करेल…

23 एप्रिल 2024

हरित आणि डिजिटल क्रांती: भविष्यसूचक देखभाल तेल आणि वायू उद्योगात कशी बदल घडवत आहे

वनस्पती व्यवस्थापनासाठी नाविन्यपूर्ण आणि सक्रिय दृष्टीकोनसह, भविष्यसूचक देखभाल तेल आणि वायू क्षेत्रात क्रांती घडवत आहे.…

22 एप्रिल 2024

यूके अँटिट्रस्ट रेग्युलेटरने GenAI वर BigTech अलार्म वाढवला

UK CMA ने आर्टिफिशियल इंटेलिजन्स मार्केटमध्ये बिग टेकच्या वर्तनाबद्दल चेतावणी जारी केली आहे. तेथे…

18 एप्रिल 2024

कासा ग्रीन: इटलीमध्ये शाश्वत भविष्यासाठी ऊर्जा क्रांती

इमारतींची उर्जा कार्यक्षमता वाढविण्यासाठी युरोपियन युनियनने तयार केलेल्या "ग्रीन हाऊसेस" डिक्रीने त्याची वैधानिक प्रक्रिया पूर्ण केली आहे ...

18 एप्रिल 2024

तुमच्या भाषेत इनोव्हेशन वाचा

इनोव्हेशन वृत्तपत्र
नवोपक्रमावरील सर्वात महत्त्वाच्या बातम्या चुकवू नका. त्यांना ईमेलद्वारे प्राप्त करण्यासाठी साइन अप करा.

आमचे अनुसरण करा