জেকুয়েরি সিলেক্টরসমূহ

0
18
jquery
jquery

এইচটিএমএল এলিমেন্টকে নিয়ে কাজ করতে হলে প্রথমেই সেই এলিমেন্টকে সিলেক্ট/নির্বাচন করতে হয়। জেকুয়েরি সিলেক্টরের মাধ্যমে একটি এলিমেন্টকে সিলেক্ট করা হয় এবং এর উপর ইচ্ছামত জেকুয়েরির বিভিন্ন মেথড প্রয়োগ করা যায়।

জেকুয়েরি সিলেক্টরের মাধ্যমে এইচটিএমএল এলিমেন্টের name, id, class, type, attribute এবং value ইত্যাদির উপর ভিত্তিকরে এইচটিএমএল এলিমেন্টকে সিলেক্ট বা খুঁজে বের করা হয়। ইহা বিদ্যমান সিএসএস সিলেক্টরের নিয়ম অনুসরন করে এবং এগুলো ছাড়াও এইচটিএমএল এলিমেন্টকে সিলেক্ট করার জন্য জেকুয়েরির নিজস্ব কিছু মেথড রয়েছে।

জেকুয়েরিতে সকল সিলেক্টর শুরু হয় ডলার চিহ্ন এবং প্রথম বন্ধনীর মাধ্যমে: $()


এলিমেন্ট সিলেক্টর

জেকুয়েরি এলিমেন্ট সিলেক্টর নামের উপর ভিত্তিকরে এইচটিএমএল এলিমেন্টকে সিলেক্ট করে।

আপনি নিচের ন্যায় সকল <p> এলিমেন্টকে সিলেক্ট করেতে পারেন:

$(“p”)

উদাহরণ

যকন একজন ইউজার বাটনে ক্লিক করবে, তখন সকল <p> এলিমেন্ট হাইড হয়ে যাবে:

উদাহরণ

$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});

নিজে চেষ্টা করি »


#id সিলেক্টর

জেকুয়েরি #id সিলেক্টর নির্দিষ্ট এলিমেন্টকে খুজের বের করার জন্য এইচটিএমএল ট্যাগের id এট্রিবিউট ব্যবহার করে।

একটি পেজের মধ্যে id ইউনিক হওয়া উচিৎ। যখন আপনি একক, ইউনিক এলিমেন্টকে খুজে বের করতে চান, তখন আপনার #id সিলেক্টর ব্যবহার করা উচিৎ।

নির্দিষ্ট id যুক্ত এলিমেন্টকে খুজে পেতে, ঐ এইচটিএমএল এলিমেন্টের id র পূর্বে “#” ক্যারেক্টার ব্যবহার করুন:

$(“#test”)

উদাহরণ

যখন একজন ইউজার বাটনে ক্লিক করবে, তখন id="test" যুক্ত এলিমেন্টটি হাইড হয়ে যাবে:

উদাহরণ

$(document).ready(function(){
$(“button”).click(function(){
$(“#test”).hide();
});
});

নিজে চেষ্টা করি »


.class সিলেক্টর

জেকুয়েরি ক্লাস সিলেক্টর নির্দিষ্ট ক্লাসযুক্ত এলিমেন্টকে খুজে বের করে।

নির্দিষ্ট ক্লাস যুক্ত এলিমেন্টকে খোজার জন্য, ক্লাসের নামের পূর্বে একটি ডট (.) ক্যারেক্টার ব্যবহার করুন:

$(“.test”)

উদাহরণ

যখন একজন ইউজার বাটনে ক্লিক করবে, তখন class="test" যুক্ত এলিমেন্টগুলো হাইড হয়ে যাবে:

উদাহরণ

$(document).ready(function(){
$(“button”).click(function(){
$(“.test”).hide();
});
});

নিজে চেষ্টা করি »


জেকুয়েরি সিলেক্টরের আরো উদাহরণ

সিনট্যাক্স বিবরন উদাহরণ
$(“*”) সকল এলিমেন্টকে সিলেক্ট করে। নিজে চেষ্টা করি
$(this) বর্তমান এইচটিএমএল এলিমেন্টটিকে সিলেক্ট করে। নিজে চেষ্টা করি
$(“p.intro”) class="intro" যুক্ত সকল <p> এলিমেন্টকে সিলেক্ট করে। নিজে চেষ্টা করি
$(“p:first”) প্রথম <p> এলিমেন্টটিকে সিলেক্ট করে। নিজে চেষ্টা করি
$(“ul li:first”) প্রথম <ul> এলিমেন্টের প্রথম <li> এলিমেন্টটিকে সিলেক্ট করে। নিজে চেষ্টা করি
$(“ul li:first-child”) সকল <ul> এলিমেন্টের প্রথম <li> এলিমেন্টটিকে সিলেক্ট করে। নিজে চেষ্টা করি
$(“[href]”) href এট্রিবিউট যুক্ত সকল এলিমেন্টকে সিলেক্ট করে। নিজে চেষ্টা করি
$(“a[target=’_blank’]”) সকল <a> এলিমেন্টকে সিলেক্ট করে, যাদের টার্গেট ভ্যালু “_blank” নির্দিষ্ট করা হয়েছে। নিজে চেষ্টা করি
$(“a[target!=’_blank’]”) সকল <a> এলিমেন্টকে সিলেক্ট করে, যাদের টার্গেট ভ্যালু “_blank” নয়। নিজে চেষ্টা করি
$(“:button”) type="button" যুক্ত সকল <button> এবং <input> এলিমেন্টকে সিলেক্ট করে। নিজে চেষ্টা করি
$(“tr:even”) সকল জোড় (even) <tr> এলিমেন্টকে সিলেক্ট করে। নিজে চেষ্টা করি
$(“tr:odd”) সকল বিজোড় (odd) <tr> এলিমেন্টকে সিলেক্ট করে। নিজে চেষ্টা করি

বিভিন্ন সিলেক্টর একসাথে শিখার জন্য আমাদের জেকুয়েরি সিলেক্টার টেস্টার ব্যবহার করুন।

জেকুয়েরি সিলেক্টরের সম্পূর্ণ রেফারেন্সের জন্য আমাদের জেকুয়েরি সিলেক্টর রেফারেন্স পেজে ভিজিট করুন।


আলাদা ফাইলের মধ্যে ফাংশন

যদি আপনার সাইটে অধিক পেজ থাকে, এবং আপনি হয়তো জেকুয়েরি ফাংশনগুলোকে সহজে মেইনটেইন করতে চাইবেন। এরজন্য চাইলে আপনি এগুলোকে আলাদা .js ফাইলে রাখতে পারেন।

যখন আমরা এই টিউটোরিয়ালে জেকুয়েরি প্রকাশ করি, ফাংশনগুলো সরাসরি <head> সেকশনে যুক্ত করা হয়েছে। যাইহোক, মাঝে মাঝে আলাদা ফাইলে রাখা ভালো হয়; যেমন (.js ফাইলকে রেফার করার জন্য src এট্রিবিউট ব্যবহার করুন):

উদাহরণ

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”>
</script>
<script src=”my_jquery_functions.js”></script>
</head>

LEAVE A REPLY

Please enter your comment!
Please enter your name here