একটি Ajax-ভিত্তিক অ্যাপ্লিকেশন তৈরি করা jQuery দিয়ে খুব সহজ এবং দ্রুত হয়ে যায়।
jQuery মূলত জন রেসিগ দ্বারা 2006 সালের প্রথম দিকে তৈরি করা হয়েছিল। jQuery প্রকল্পটি বর্তমানে একটি ওপেন সোর্স প্রকল্প হিসাবে ডেভেলপারদের একটি বিতরণ করা গ্রুপ দ্বারা রক্ষণাবেক্ষণ ও রক্ষণাবেক্ষণ করে।
আপনি jQuery দিয়ে অনেক সময় এবং শ্রম বাঁচাতে পারেন। তাই আপনার পছন্দের এই সাইট যোগ করুন এবং পড়া চালিয়ে যান
আপনি jQuery দিয়ে আরও অনেক কিছু করতে পারেন।
তালিকাটি সেখানে শেষ হয় না, jQuery দিয়ে আপনি করতে পারেন এমন আরও অনেক দুর্দান্ত জিনিস রয়েছে।
jQuery ব্যবহার করার জন্য কেন বেছে নেওয়া উচিত তার বিভিন্ন সুবিধা রয়েছে:
শুরু করার জন্য, আসুন প্রথমে jQuery এর একটি অনুলিপি ডাউনলোড করি এবং তারপর এটিকে আমাদের প্রকল্পে অন্তর্ভুক্ত করি। jQuery এর দুটি সংস্করণ ডাউনলোডের জন্য উপলব্ধ: তাড়ার মধ্যে e সংকুচিত না .
অসংকুচিত ফাইলটি ডেভেলপমেন্ট বা ডিবাগিংয়ের জন্য আরও উপযুক্ত; যখন, ছোট এবং সংকুচিত ফাইলটি উৎপাদনের জন্য সুপারিশ করা হয় কারণ এটি ব্যান্ডউইথ সংরক্ষণ করে এবং ছোট ফাইলের আকারের কারণে কর্মক্ষমতা উন্নত করে।
আমরা এখান থেকে jQuery ডাউনলোড করতে পারি: https://jquery.com/download/
একবার আপনি jQuery ফাইলটি ডাউনলোড করলে আপনি দেখতে পাবেন যে এটিতে একটি js এক্সটেনশন রয়েছে, অর্থাৎ এটি একটি জাভাস্ক্রিপ্ট ফাইল। আসলে JQuery একটি জাভাস্ক্রিপ্ট লাইব্রেরি ছাড়া আর কিছুই নয়, তাই আপনি উপাদান সহ 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 এবং সমস্ত আধুনিক ব্রাউজারে সমাপ্ত।
বিকল্প হিসেবে, আপনি যদি ফাইলটি ডাউনলোড করা এড়াতে চান তাহলে অবাধে উপলব্ধ CDN (কন্টেন্ট ডেলিভারি নেটওয়ার্ক) লিঙ্কের মাধ্যমে আপনার নথিতে jQuery এম্বেড করতে পারেন।
CDNs লোডের সময় কমিয়ে পারফরম্যান্সের সুবিধা দিতে পারে, কারণ তারা সারা বিশ্বে একাধিক সার্ভারে jQuery হোস্ট করে এবং যখন একজন ব্যবহারকারী ফাইলের অনুরোধ করে, তখন এটি নিকটতম সার্ভার থেকে পরিবেশন করা হবে।
এটির সুবিধাও রয়েছে যে আপনার ওয়েব পেজ ভিজিটর যদি ইতিমধ্যেই অন্য সাইটগুলি দেখার সময় একই CDN থেকে jQuery-এর একটি অনুলিপি ডাউনলোড করে থাকে, তবে তাদের এটিকে আর ডাউনলোড করতে হবে না কারণ এটি ইতিমধ্যেই তাদের ব্রাউজারের ক্যাশে রয়েছে৷
এই ক্ষেত্রে আপনাকে লিখতে হবে:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jquery প্রকল্প দ্বারা প্রদত্ত CDN ছাড়াও, আপনি jQuery এর মাধ্যমে অন্তর্ভুক্ত করতে পারেন গুগল e মাইক্রোসফট সিডিএন।
jQuery লাইব্রেরির লক্ষ্যগুলি দেখে এবং কীভাবে এটি আপনার নথিতে অন্তর্ভুক্ত করতে হয়, এখনই jQuery-কে অনুশীলন করার সময়।
এখন প্রি কালার থেকে হেডার টেক্সট কালার পরিবর্তন করে একটি সাধারণ jQuery অপারেশন করা যাকdefiকালো থেকে সবুজ রং nished.
<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 শুধুমাত্র একটি জাভাস্ক্রিপ্ট লাইব্রেরি, jQuery কোড উপাদানের ভিতরে স্থাপন করা যেতে পারে <script>, অথবা আপনি এটি একটি বহিরাগত জাভাস্ক্রিপ্ট ফাইলে রাখতে পারেন;$(document).ready(handler); একটি প্রস্তুত ইভেন্ট হিসাবে পরিচিত. এটা কই handler এটি একটি ফাংশন যা কার্যকর করার পদ্ধতিতে পাস করা হয়, নথিটি প্রস্তুত হওয়ার সাথে সাথে, অর্থাৎ যখন DOM শ্রেণিবিন্যাস সম্পূর্ণরূপে নির্মিত হয়।jQuery পদ্ধতি ready() এটি সাধারণত একটি বেনামী ফাংশন ব্যবহার করা হয়. সুতরাং, উপরের উদাহরণটিও এইভাবে সংক্ষিপ্ত স্বরলিপিতে লেখা যেতে পারে:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>একটি ফাংশনের ভিতরে আপনি মৌলিক সিনট্যাক্স অনুসরণ করে যেকোন ক্রিয়া সম্পাদন করতে jQuery বিবৃতি লিখতে পারেন, যেমন:
$(selector).action();এটা কোথায়, $(selector) এটি মূলত 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", যার সহজ অর্থ হল যখন একজন ব্যবহারকারী এই বোতামটি ক্লিক করেন।
আপনি পৃষ্ঠায় অনন্য আইডি সহ একটি একক আইটেম নির্বাচন করতে আইডি নির্বাচক ব্যবহার করতে পারেন।
উদাহরণস্বরূপ, নিম্নলিখিত jQuery কোডটি আইডি অ্যাট্রিবিউট সহ একটি উপাদান নির্বাচন এবং হাইলাইট করবে 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 নির্বাচকদের একত্রিত করতে পারেন।
উদাহরণস্বরূপ, আপনি একটি নির্দিষ্ট ধরন এবং শ্রেণী আছে এমন একটি নথিতে উপাদানগুলি খুঁজে পেতে একটি উপাদান নির্বাচকের সাথে শ্রেণি নির্বাচককে একত্রিত করতে পারেন।
<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 বিলিয়ন বাজারের দিকে নেভিগেট করেছে...
গত সোমবার, ফাইন্যান্সিয়াল টাইমস ওপেনএআই-এর সাথে একটি চুক্তি ঘোষণা করেছে। FT তার বিশ্বমানের সাংবাদিকতার লাইসেন্স দেয়...