Ajax-आधारित अनुप्रयोग सिर्जना गर्नु jQuery को साथ धेरै सरल र छिटो हुन्छ।
jQuery मूलतः जोन रेसिग द्वारा 2006 को शुरुमा सिर्जना गरिएको थियो। jQuery परियोजना हाल एक खुला स्रोत परियोजना को रूप मा विकासकर्ताहरु को एक वितरित समूह द्वारा मर्मत र मर्मत गरिएको छ।
तपाईं jQuery को साथ धेरै समय र प्रयास बचत गर्न सक्नुहुन्छ। त्यसैले यो साइटलाई आफ्नो मनपर्नेमा थप्नुहोस् र पढ्न जारी राख्नुहोस्
त्यहाँ धेरै चीजहरू छन् जुन तपाईंले jQuery मार्फत गर्न सक्नुहुन्छ।
सूची त्यहाँ समाप्त हुँदैन, त्यहाँ धेरै अन्य उत्कृष्ट चीजहरू छन् जुन तपाईंले jQuery सँग गर्न सक्नुहुन्छ।
त्यहाँ धेरै फाइदाहरू छन् किन एकले jQuery प्रयोग गर्न रोज्नुपर्छ:
सुरु गर्नको लागि, पहिले jQuery को प्रतिलिपि डाउनलोड गरौं र त्यसपछि यसलाई हाम्रो परियोजनामा समावेश गरौं। jQuery को दुई संस्करणहरू डाउनलोडका लागि उपलब्ध छन्: हतारमा e संकुचित छैन .
असम्पीडित फाइल विकास वा डिबगिङको लागि राम्रो उपयुक्त छ; जबकि, मिनिफाइड र कम्प्रेस गरिएको फाइल उत्पादनको लागि सिफारिस गरिएको छ किनभने यसले ब्यान्डविथ बचत गर्छ र सानो फाइल साइजको कारण कार्यसम्पादन सुधार गर्दछ।
हामी यहाँबाट jQuery डाउनलोड गर्न सक्छौं: https://jquery.com/download/
एकचोटि तपाईंले jQuery फाइल डाउनलोड गरेपछि तपाईंले देख्न सक्नुहुन्छ कि यसमा js एक्सटेन्सन छ, अर्थात् यो JavaScript फाइल हो। वास्तवमा JQuery भनेको JavaScript लाइब्रेरी बाहेक केही होइन, त्यसैले तपाईले HTML कागजातमा jQuery फाइललाई तत्वसँग समावेश गर्न सक्नुहुन्छ। जसरी तपाईले नियमित जाभास्क्रिप्ट फाइलहरू समावेश गर्नुहुन्छ।
<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 र सबै आधुनिक ब्राउजरहरूमा समाप्त भयो।
एक विकल्पको रूपमा, तपाईले jQuery लाई आफ्नो कागजातमा स्वतन्त्र रूपमा उपलब्ध CDN (सामग्री डेलिभरी नेटवर्क) लिङ्कहरू मार्फत इम्बेड गर्न सक्नुहुन्छ, यदि तपाई फाइल डाउनलोड गर्नबाट जोगिन चाहनुहुन्छ भने।
CDN ले लोड समय घटाएर कार्यसम्पादन लाभ प्रदान गर्न सक्छ, किनभने तिनीहरूले संसारभरका धेरै सर्भरहरूमा jQuery होस्ट गर्छन्, र जब प्रयोगकर्ताले फाइल अनुरोध गर्दछ, यो नजिकको सर्भरबाट सेवा गरिन्छ।
यो पनि फाइदा छ कि यदि तपाईंको वेब पृष्ठ आगन्तुकले अन्य साइटहरू भ्रमण गर्दा उही CDN बाट jQuery को प्रतिलिपि डाउनलोड गरिसकेका छन् भने, तिनीहरूले यसलाई फेरि डाउनलोड गर्नु पर्दैन किनकि यो पहिले नै उनीहरूको ब्राउजरको क्यासमा छ।
यस अवस्थामा तपाईले लेख्नु पर्छ:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jquery परियोजना द्वारा प्रदान गरिएको CDN को अतिरिक्त, तपाईंले jQuery मार्फत समावेश गर्न सक्नुहुन्छ गुगल e माइक्रोसफ्ट CDN।
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 कथन देखाउने निम्न नमूना कोडलाई विचार गर्नुहोस्।
<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", जसको सरल अर्थ हो जब प्रयोगकर्ताले यो बटन क्लिक गर्दछ।
तपाईं पृष्ठमा अद्वितीय 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>" con type="text"जब कागजात तयार हुन्छ।
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>तपाईं आफ्नो चयन अझ सटीक बनाउन 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>चयनकर्ताहरू बाहेक 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, ब्याकस्पेस वा मेटाउने, तीर कुञ्जीहरू, आदि बाहेक। तिनीहरूले किडाउन घटनाहरू फायर गर्छन् तर घटनाहरू कुञ्जी थिच्दैनन्।
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
.
नौसेना क्षेत्र एक साँचो वैश्विक आर्थिक शक्ति हो, जसले 150 बिलियन बजारमा नेभिगेट गरेको छ ...
गत सोमबार, फाइनान्सियल टाइम्सले OpenAI सँग सम्झौताको घोषणा गर्यो। FT ले आफ्नो विश्व स्तरीय पत्रकारिता लाई लाइसेन्स...
लाखौं मानिसहरूले स्ट्रिमिङ सेवाहरूको लागि भुक्तानी गर्छन्, मासिक सदस्यता शुल्क तिर्छन्। यो आम धारणा छ कि तपाईं…
Veeam द्वारा Coveware ले साइबर जबरजस्ती घटना प्रतिक्रिया सेवाहरू प्रदान गर्न जारी राख्नेछ। Coveware ले फोरेन्सिक र उपचार क्षमताहरू प्रदान गर्दछ ...