jQuery find():একটি ধাপে ধাপে গাইড

jQuery find() পদ্ধতিটি পরিচিত শোনাতে পারে, কিন্তু জাভাস্ক্রিপ্ট পদ্ধতি find()! এর সাথে এটিকে বিভ্রান্ত করবেন না তারা উভয়ই জিনিসগুলি "খুঁজে পায়" তবে তারা যা ফেরত দেয় তা সম্পূর্ণ আলাদা হতে পারে। জাভাস্ক্রিপ্টে, find() পদ্ধতি শুধুমাত্র একটি অ্যারে কল করা যেতে পারে.

এটি একটি কলব্যাক ফাংশন নেয়, যা একটি ফাংশন যা একটি পদ্ধতিতে একটি যুক্তি হিসাবে পাস করা হয়, যা পরে কল করা হবে। এটি কলব্যাক ফাংশনে বর্ণিত প্রয়োজনীয়তাগুলিকে সন্তুষ্ট করে এমন প্রথম উপাদানটি খুঁজে পায় এবং ফেরত দেয়।

jQuery find() পদ্ধতি বেশ ভিন্ন। সমস্ত jQuery পদ্ধতির মত, এটি একটি নির্বাচক কল করা হয়. এটি সেই নির্বাচকের মধ্যে অনুসন্ধান করে এবং শুধুমাত্র সেই নির্বাচকের শিশু উপাদানগুলিকে কাজে লাগায়। এই উচ্চ স্তরের ম্যানিপুলেশনটি উপযোগী যদি আপনি কিছু উপাদান পরিবর্তন করতে চান এবং একই প্যারেন্ট উপাদানের মধ্যে থাকা অন্যদের নয়।

jQuery ফাইন্ড() ব্যবহার করে

আমরা এখন jQuery find() জানি একটি প্রদত্ত নির্বাচকের সমস্ত চাইল্ড উপাদান নির্বাচন করতে ব্যবহৃত হয়। কিভাবে jQuery find() ব্যবহার করতে হয় তা দেখতে কিছু উদাহরণ কোড দেখুন .

আসুন সহজ শুরু করি এবং পরবর্তী বিভাগে কিছু জটিলতা যোগ করি। কিভাবে find() পৃষ্ঠাটি লোড হওয়ার পরে আমরা একটি উপাদানকে ম্যানিপুলেট করতে পারি কাজ করে পৃষ্ঠাটি লোড হওয়ার পরে আমরা একটি অনুচ্ছেদের প্রসঙ্গে কিছু শব্দের রঙ পরিবর্তন করব? আমরা এখানে শুরু করব:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
jQuery find() method example
</h2>
  <p>
  This is an example paragraph. 
  </p>
  <p>We are going to change the color <span>blue</span> to the color blue.</p>
<div class="green">We are going to change the word <span>green</span> to the color green.</div> 
<p>
Every other will word will stay the same. 
</p>

</div>

এই কোডটি দেখুন এবং আপনি

উপাদানের ভিতরে লক্ষ্য করবেন কয়েকটি উপাদান রয়েছে। উপাদানগুলির মধ্যে একটি হল

উপাদানের একটি শিশু। অন্য সবুজ রঙের একটি শ্রেণির

এর একটি শিশু। আমাদের অনুচ্ছেদ অনুযায়ী, আমরা শুধুমাত্র এ মোড়ানো শব্দের রঙ পরিবর্তন করব। আমরা তা করার আগে আমাদের HTML রেন্ডার হচ্ছে তা নিশ্চিত করুন:

আমাদের HTML রেন্ডারিং হয়. আমরা এখন find() চিত্রিত করার জন্য পাঠ্যের রং পরিবর্তন করতে যাচ্ছি কর্মে এটি একটি মহান শিক্ষানবিস পদক্ষেপ কারণ এটি অর্জন করতে আমাদের শুধুমাত্র একটি CSS বৈশিষ্ট্য পরিবর্তন করতে হবে। আমাদের নির্বাচক হিসাবে

উপাদানটিকে find()-এ পাস করার সময় , আমরা jQuery এর css() ব্যবহার করতে পারি রঙ পরিবর্তন রেন্ডার করার পদ্ধতি:

<script>
$(document).ready(() => {
  $('p').find('span').css('color', 'blue');
  $('div.green').find('span').css('color', 'green');
})
 
</script>

find() এর প্রথম ব্যবহারে , আমরা সমস্ত

উপাদান নির্বাচন করছি। আমরা find() ব্যবহার করি যে কোনো উপাদানগুলি সনাক্ত করতে যা

-এর সন্তান। এই উদাহরণে, এটি শুধুমাত্র নীল শব্দ। তারপর আমরা css() ব্যবহার করি নীল রঙ পরিবর্তন করার পদ্ধতি।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

find() এর দ্বিতীয় ব্যবহারের দিকে . এবার আমরা সবুজ শ্রেণী সহ

নির্বাচন করছি এবং কল করছি find() চালু কর. পদ্ধতিটি অন্য একটি উপাদান সনাক্ত করছে যেটি

-এর সন্তান।

আবার, এটি কেবল সবুজ শব্দ। প্রথম লাইনের মত, আমরা css() ব্যবহার করছি রঙ সবুজে পরিবর্তন করার পদ্ধতি।

চলুন এটি চালান এবং দেখুন কি হয়!

লক্ষ্য করুন যে নীল এবং সবুজ উভয় শব্দই একটি স্প্যান এলিমেন্টে মোড়ানো ছিল যার কোনো ক্লাস বা আইডি বরাদ্দ করা হয়নি। আমরা এখনও সেই শব্দগুলিকে আলাদা করতে এবং তাদের রঙ পরিবর্তন করতে সক্ষম হয়েছি। আপনি অনুমান করতে পারেন, কারণ এর মূল উপাদানগুলি ভিন্ন।

হল নীল শব্দের জনক।

হল এর জনক যেখানে সবুজ শব্দ রয়েছে।

এটি ঘটেছে কারণ find() নির্বাচক হিসাবে ব্যবহৃত উপাদানগুলির সন্তানদের সনাক্ত করে। আসুন কিছু জটিলতা যোগ করি এবং করণীয় তালিকার একটি উদাহরণ দেখি।

একটি তালিকায় jQuery খুঁজুন()

এই উদাহরণে, আমরা একটি তালিকা আছে. আমাদের আজ কিছু করার আছে, কিন্তু সেগুলি করার জন্য আমাদের দোকানে জিনিস কিনতে হবে। একবার আমরা এই আইটেমগুলি কিনলে, আমরা সেগুলিকে তালিকা থেকে চিহ্নিত করতে পারি এবং আমাদের দিনের সাথে চলতে পারি! এখানে আমাদের তালিকা:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
To Do list example
</h2>
<ul>
  <li class="store">Go to the store
    <ul>
      <li>Trash bags</li>
      <li>Dish Soap</li>
    </ul>
  </li>
  <li>Take out the trash</li>
  <Li>Wash the dishes</Li>
</ul>
</div>

এখানে আমরা আমাদের তালিকা আছে. আমাদের কাছে

উপাদান আছে “দোকানে যাও”, “আবর্জনা বের কর” এবং “থালা-বাসন ধুয়ে ফেলো,” এই

এলিমেন্টের বাচ্চা হিসেবে, যেটি একটি আইডি সহ আমাদের
এর সন্তান। "প্রধান।" আমাদের "স্টোরে যান" তালিকার আইটেমের ভিতরে, আমাদের কাছে দোকানে কেনার মতো জিনিস রয়েছে৷ আজকে আমাদের কাজ শেষ করার জন্য আমাদের ট্র্যাশ ব্যাগ এবং ডিশ সাবান দরকার। আমরা তাদের ছোটবেলায় একটি নেস্টেড তালিকা হিসেবে
দোকানের ক্লাসের সাথে রেখেছি।


এখন আমরা এই আইটেমগুলি কেনার পরে তালিকার বাইরে চিহ্নিত করতে পারি:
<script>
$(document).ready(() => {
  $('li.store').find('li').css('text-decoration', 'line-through')
})
</script>
দোকানের ক্লাসের সাথে
নির্বাচন করে এবং find() ব্যবহার করে আমরা আমাদের তালিকায় থাকা আইটেমগুলিকে ক্রস আউট করতে পারি। শিশুদের
উপাদানগুলি সনাক্ত করতে। আবার, আমরা jQuery css() ব্যবহার করছি "টেক্সট-সজ্জা" এর বৈশিষ্ট্যে "লাইন-থ্রু" এর মান প্রয়োগ করার পদ্ধতি। এটি করার ফলে নির্বাচিত আইটেমগুলি তাদের মাধ্যমে একটি লাইন সহ রেন্ডার করবে:


উপসংহার
jQuery find() পদ্ধতি নির্বাচকের সমস্ত চাইল্ড উপাদান সনাক্ত করে এটি পাস করা হয়েছে। find() পদ্ধতিটি শুধুমাত্র এই শিশু উপাদানগুলিকে পরিচালনা করবে, এবং পিতামাতা নিজেই নয়।

কোন শিশু উপাদানগুলি নির্বাচন করতে হবে তা পার্থক্য করতে সক্ষম হওয়া আমাদেরকে সাধারণ হতে এবং একটি পৃষ্ঠার সম্পূর্ণ বিভাগ পরিবর্তন করতে বা নির্দিষ্ট এবং শুধুমাত্র একটি পৃষ্ঠার কিছু উপাদান পরিবর্তন করতে দেয়৷ এই নমনীয়তার মধ্যেই find() নিজেকে সবচেয়ে দরকারী করে তোলে।

এখানে jQuery কিভাবে শিখতে হয় সে সম্পর্কে আরও জানুন।