জেকুয়েরি সিলেক্টর-সমূহ
জেকুয়েরি লাইব্রেরীর গুরুত্বপূর্ণ অংশ হচ্ছে জেকুয়েরি সিলেক্টর। জেকুয়েরির একটি মেথড কোনো এলিমেন্টে প্রয়োগ করতে হলে অবশ্যই ঐ এলিমেন্টকে প্রথমে সিলেক্ট করতে হবে। এলিমেন্ট সিলেক্ট করা ব্যতীত কোনো মেথডই প্রয়োগ করা যাবে না।
জেকুয়েরি সিলেক্টর
এইচটিএমএল এলিমেন্টকে নিয়ে কাজ করতে হলে প্রথমেই ঐ এলিমেন্টকে সিলেক্ট/নির্বাচন করতে হবে। জেকুয়েরি সিলেক্টরের মাধ্যমে একটি এলিমেন্টকে সিলেক্ট করা যায় এবং এর উপর ইচ্ছামত জেকুয়েরির মেথড-সমুহ প্রয়োগ করা যায়।
জেকুয়েরি সিলেক্টরের মাধ্যমে এইচটিএমএল এলিমেন্টের name, id, class, type, attribute এবং value ইত্যাদির উপর ভিত্তিকরে এইচটিএমএল এলিমেন্টকে সিলেক্ট করা হয়। এটা বিদ্যমান সিএসএস সিলেক্টর এর নিয়ম অনুসরন করে এবং এগুলো ছাড়াও এইচটিএমএল এলিমেন্টকে সিলেক্ট করার জন্য জেকুয়েরির নিজস্ব কিছু মেথড রয়েছে।
জেকুয়েরিতে সকল সিলেক্টর শুরু হয় ডলার চিহ্ন এবং প্রথম বন্ধনীর মাধ্যমেঃ $()
এলিমেন্ট সিলেক্টর
জেকুয়েরি এলিমেন্ট সিলেক্টর নামের উপর ভিত্তিকরে এইচটিএমএল এলিমেন্টকে সিলেক্ট করে।
আপনি নিম্নের পদ্ধতি ব্যবহার করে সকল <p> এলিমেন্টকে সিলেক্ট করেতে পারবেনঃ
$("p")
নিম্নের উদাহরণে ব্যবহারকারী বাটনে ক্লিক করলে সকল <p> এলিমেন্ট হাইড হয়ে যাবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>এটি হেডিং</h2>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
<button>প্যারাগ্রাফগুলোকে হাইড করার জন্য এখানে ক্লিক করুন</button>
</body>
</html>
ফলাফল
#id সিলেক্টর
একটি নির্দিষ্ট এইচটিএমএল এলিমেন্টকে আপনি জেকুয়েরি #id সিলেক্টরের মাধ্যমে সিলেক্ট করতে পারবেন। একটি পেজে ব্যবহৃত id সর্বদাই ইউনিক হওয়া উচিৎ। আপনি যদি ইউনিক বা অনন্য এলিমেন্টকে খুঁজে বের করতে চান তবে #id সিলেক্টর ব্যবহার করুন।
id যুক্ত একটি এইচটিএমএল এলিমেন্টকে খুঁজে পেতে id এর নামের পূর্বে "#" ক্যারেক্টারটি ব্যবহার করুনঃ
$("#test")
নিম্নের উদাহরণে ব্যবহারকারী বাটনে ক্লিক করলে id="test" যুক্ত এলিমেন্টটি হাইড হয়ে যাবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি আইডি সিলেক্টর এর উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>এটি একটি হেডিং</h2>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p id="test">এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
<button>এখানে ক্লিক করুন</button>
</body>
</html>
ফলাফল
.class সিলেক্টর
ক্লাস যুক্ত এইচটিএমএল এলিমেন্টকে জেকুয়েরি ক্লাস সিলেক্টরের মাধ্যমে সিলেক্ট করতে পারবেন।
নির্দিষ্ট ক্লাস যুক্ত এলিমেন্টকে সিলেক্ট করার জন্য ক্লাসের নামের পূর্বে একটি ডট(.) ক্যারেক্টার ব্যবহার করতে হবেঃ
$(".test")
নিম্নের উদাহরণে ব্যবহারকারী বাটনে ক্লিক করলে class="test" যুক্ত এলিমেন্ট-সমুহ হাইড(hide) হয়ে যাবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি ক্লাস সিলেক্টর এর উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">এটি হেডিং</h2>
<p class="test">এটি প্যারাগ্রাফ।</p>
<p>এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
<button>এখানে ক্লিক করুন</button>
</body>
</html>
ফলাফল
নিম্নে কিছু জেকুয়েরি সিলেক্টারের বর্ণনা দেওয়া হল
সকল এলিমেন্টকে সিলেক্ট করে।
বর্তমান এইচটিএমএল এলিমেন্টটিকে সিলেক্ট করে।
ক্লাস satt যুক্ত সকল <p> এলিমেন্টকে সিলেক্ট করে।
প্রথম <p> এলিমেন্টকে সিলেক্ট করে।
প্রথম <ul> এলিমেন্টের প্রথম চাইল্ড <li> এলিমেন্টকে সিলেক্ট করে।
সকল <ul> এলিমেন্টের প্রথম চাইল্ড <li> এলিমেন্টটিকে সিলেক্ট করে।
href এট্রিবিউট যুক্ত সকল এলিমেন্টকে সিলেক্ট করে।
টার্গেট(target) "_blank" এট্রিবিউট যুক্ত সকল <a> এলিমেন্টকে সিলেক্ট করে।
টার্গেট(target) "_blank" এট্রিবিউট ব্যাতিত সকল <a> এলিমেন্টকে সিলেক্ট করে।
সকল জোড়(even) <tr> এলিমেন্টকে সিলেক্ট করে।
সকল বিজোড়(odd) <tr> এলিমেন্টকে সিলেক্ট করে।
<button> এবং <input> এলিমেন্টের টাইপ(type) এট্রিবিউটের মান <button> হলে তাদের সিলেক্ট করে।
জেকুয়েরি সিলেক্টরের সম্পূর্ণ রেফারেন্সের জন্য আমাদের জেকুয়েরি সিলেক্টর রেফারেন্স পেজে ভিজিট করুন।
বহিরাগত ফাইলের মধ্যে ফাংশন
আপনার সাইটে যদি একাধিক ওয়েব পেজ থাকে এবং জেকুয়েরি ফাংশন গুলোকে যদি সহজভাবে রক্ষনাবেক্ষন করতে চান তাহলে আপনি জেকুয়েরি ফাংশনগুলো আলাদা ফাইলের মধ্যে লিখতে পারেন। এক্ষেত্রে আপনার সাইটে ব্যবহৃত সকল ফাংশন-সমূহকে আপনি খুব সহজেই মেইনটেইন/পরিচালনা করতে পারবেন।
আমাদের এই টিউটোরিয়ালের সকল উদাহরণে জেকুয়েরির ফাংশন সমুহ <head> সেকশনে যুক্ত করেছি। যাইহোক আপনি চাইলে <script> ট্যাগের মাধ্যমে বহিরাগত ফাইলে ফাংশন-সমুহ যুক্ত করতে পারেনঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
<body>
<h2 class="test">এটি হেডিং</h2>
<p class="test">এটি প্যারাগ্রাফ।</p>
<p>এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
<button>এখানে ক্লিক করুন</button>
</body>
</html>
ফলাফল