JQuery এ কীভাবে একটি উপাদান তৈরি করবেন তা শিখুন

JQuery এ কীভাবে একটি উপাদান তৈরি করবেন তা শিখুন

JQuery জাভাস্ক্রিপ্ট লাইব্রেরির সাহায্যে একটি নতুন উপাদান তৈরি করা অন্যতম মৌলিক কাজ। JQuery ব্যবহার করে, ডকুমেন্ট অবজেক্ট মডেল (DOM) এর সমতুল্য পদ্ধতির তুলনায় কাজটি অনেক সহজ। আপনি এটি আরও নমনীয় এবং অভিব্যক্তিপূর্ণ পাবেন, আপনি যত বেশি jQuery ব্যবহার করবেন।





একটি উদ্দেশ্য পূরণ করতে, আপনাকে একটি ওয়েব পৃষ্ঠায় আপনার উপাদান যোগ করতে সক্ষম হতে হবে। JQuery ব্যবহার করে একটি নতুন তালিকা আইটেম কিভাবে যোগ করা যায় বা একটি নতুন অনুচ্ছেদ দিয়ে একটি অনুচ্ছেদ প্রতিস্থাপন করতে হয় তা শিখুন।



JQuery কি?

JQuery লাইব্রেরি একটি সংগ্রহ জাভাস্ক্রিপ্ট দুটি প্রাথমিক লক্ষ্য সহ কোড:





  • এটি সাধারণ জাভাস্ক্রিপ্ট অপারেশন সহজ করে।
  • এটি বিভিন্ন ব্রাউজারের মধ্যে ক্রস-সামঞ্জস্য জাভাস্ক্রিপ্ট সমস্যাগুলি পরিচালনা করে।

দ্বিতীয় লক্ষ্য বাগগুলির জন্য পূরণ করে, তবে এটি ব্রাউজারের মধ্যে বাস্তবায়নের পার্থক্যগুলিও মোকাবেলা করে। উভয় লক্ষ্যই আগের তুলনায় কম প্রয়োজনীয়, কারণ ব্রাউজারগুলি সময়ের সাথে উন্নত হয়। কিন্তু jQuery এখনও একটি মূল্যবান হাতিয়ার হতে পারে।

একটি উপাদান কি?

একটি উপাদান কখনও কখনও একটি ট্যাগ হিসাবে উল্লেখ করা হয়। যদিও দুটি প্রায়শই বিনিময়যোগ্যভাবে ব্যবহৃত হয়, সেখানে একটি সূক্ষ্ম পার্থক্য রয়েছে। একটি ট্যাগ আক্ষরিক বোঝায়

অথবা



আপনি পাঠ্য বিষয়বস্তু মার্কআপ করার জন্য একটি HTML ফাইলে অন্তর্ভুক্ত করেন। একটি উপাদান হল পর্দার পিছনের বস্তু যা চিহ্নিত করা পাঠ্যকে উপস্থাপন করে। এইচটিএমএল ট্যাগের একটি উপাদানকে DOM প্রতিপক্ষ হিসেবে ভাবুন।

কিভাবে jQuery ব্যবহার করে একটি নতুন উপাদান তৈরি করবেন

বেশিরভাগ jQuery ক্রিয়াকলাপের মতো, একটি উপাদান তৈরি করা শুরু হয় ডলার ফাংশন দিয়ে, $ () । এটি মূলের একটি শর্টকাট jQuery () ফাংশন এই ফাংশনের তিনটি স্বতন্ত্র উদ্দেশ্য রয়েছে, এটি:



  • উপাদানগুলির সাথে মেলে, সাধারণত যেগুলি ইতিমধ্যেই নথিতে বিদ্যমান
  • নতুন উপাদান তৈরি করে
  • DOM প্রস্তুত হলে একটি কলব্যাক ফাংশন চালায়

যখন আপনি প্রথম প্যারামিটার হিসাবে HTML ধারণকারী একটি স্ট্রিং পাস করেন, তখন এই ফাংশনটি একটি নতুন উপাদান তৈরি করবে:

$(' ')

এটি একটি বিশেষ jQuery বস্তু প্রদান করে যা উপাদানগুলির একটি সংগ্রহ ধারণ করে। এই ক্ষেত্রে, একটি 'a' উপাদানকে প্রতিনিধিত্ব করে এমন একটি একক বস্তু রয়েছে যা আমরা সদ্য তৈরি করেছি।



ফোন থেকে গাড়িতে গান বাজানো

এই ক্রিয়াটিকে মিলে যাওয়া উপাদান থেকে আলাদা করতে স্ট্রিংটি অবশ্যই HTML এর মতো দেখতে হবে। অনুশীলনে, এর মানে হল যে স্ট্রিংটি একটি দিয়ে শুরু করতে হবে < । আপনি এই পদ্ধতি ব্যবহার করে নথিতে প্লেইন টেক্সট যোগ করতে পারবেন না।

এটি বোঝা গুরুত্বপূর্ণ যে এটি আপনার নথিতে উপাদান যুক্ত করে না, এটি কেবল একটি নতুন উপাদান তৈরি করে যা আপনার যোগ করার জন্য প্রস্তুত। উপাদানটি 'সংযুক্ত নয়', মেমরি গ্রহণ করছে কিন্তু প্রকৃতপক্ষে চূড়ান্ত পৃষ্ঠার অংশ নয় - এখনও।

আরো জটিল HTML যোগ করা

ডলার ফাংশন আসলে একাধিক উপাদান তৈরি করতে পারে। প্রকৃতপক্ষে, এটি এইচটিএমএল উপাদানগুলির যেকোনো গাছ তৈরি করতে পারে যা আপনি চান:

$('
  • one
  • two
  • three
')

আপনি বৈশিষ্ট্য সহ একটি উপাদান তৈরি করতে এই বিন্যাসটি ব্যবহার করতে পারেন:

$(' my hometown')

কিভাবে একটি নতুন এলিমেন্টে অ্যাট্রিবিউট সেট করবেন

আপনি একটি নতুন jQuery উপাদান তৈরি করতে পারেন এবং সম্পূর্ণ এইচটিএমএল স্ট্রিং নিজে তৈরি না করেই এর বৈশিষ্ট্যগুলি সেট করতে পারেন। আপনি যদি গতিশীলভাবে অ্যাট্রিবিউট মান তৈরি করেন তবে এটি কার্যকর। উদাহরণ স্বরূপ:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

কীভাবে একটি উপাদান যুক্ত করবেন

একবার আপনি একটি নতুন উপাদান তৈরি করলে, আপনি এটিকে বিভিন্ন উপায়ে নথিতে যুক্ত করতে পারেন। JQuery ডকুমেন্টেশন এই পদ্ধতিগুলিকে একত্রিত করে 'ম্যানিপুলেশন' বিভাগ ।

একটি বিদ্যমান উপাদান শিশু হিসাবে যোগ করুন

$('body').append($('

Hello, world

'));
$(document.body).append($el);

আপনি এই পদ্ধতিটি ব্যবহার করতে পারেন, উদাহরণস্বরূপ, একটি তালিকার শেষে একটি নতুন তালিকা আইটেম যোগ করতে।

এটি একটি বিদ্যমান উপাদানের সহোদর হিসেবে যোগ করুন

$('p.last').after('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    এটি একটি ভাল পছন্দ যদি, উদাহরণস্বরূপ, আপনি অন্য দুজনের মাঝখানে একটি নতুন অনুচ্ছেদ যোগ করতে চান।

    একটি বিদ্যমান উপাদান প্রতিস্থাপন করুন

    আপনি একটি নতুন তৈরি একটি জন্য একটি বিদ্যমান উপাদান অদলবদল করতে পারেন প্রতিস্থাপন() পদ্ধতি:

    $('#old').replaceWith('

    New paragraph

    ');

    একটি বিদ্যমান উপাদান চারপাশে মোড়ানো

    এটি বেশ বিরল ব্যবহারের একটি কেস, কিন্তু আপনি একটি বিদ্যমান উপাদানকে নতুন একটিতে আবদ্ধ করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনার একটি থাকতে পারে কোড যে উপাদানটি আপনি মোড়ানো করতে চান জন্য :

    $('code#n1').wrap('
    ')
    আপনার তৈরি করা উপাদানটি অ্যাক্সেস করা
     
    দ্য $ () ফাংশন একটি jQuery বস্তু প্রদান করে। এটি ফলো-আপ ক্রিয়াকলাপগুলির জন্য দরকারী:
    $el = $('p');  
    $('body').append($el);
    উল্লেখ্য, কনভেনশন অনুসারে, jQuery প্রোগ্রামাররা প্রায়শই jQuery ভেরিয়েবলের নাম অগ্রণী ডলার চিহ্ন দিয়ে রাখে। এটি কেবল একটি নামকরণ স্কিম এবং সরাসরি এর সাথে সম্পর্কিত নয় $ () ফাংশন
     
    JQuery ব্যবহার করে উপাদান তৈরি করা
     
    যদিও আপনি নেটিভ জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে DOM ম্যানিপুলেট করতে পারেন, jQuery এটি করা অনেক সহজ করে তোলে। DOM- এর ভাল বোঝার জন্য এটি এখনও খুব দরকারী, কিন্তু jQuery এর সাথে কাজ করা অনেক বেশি আনন্দদায়ক করে তোলে।
      শেয়ার করুন    শেয়ার করুন      টুইট      ইমেইল      ওয়েবসাইটের লুকানো নায়ক: DOM বোঝা  
    ওয়েব ডিজাইন শেখা এবং ডকুমেন্ট অবজেক্ট মডেল সম্পর্কে আরও জানতে হবে? DOM সম্পর্কে আপনার যা জানা দরকার তা এখানে।
    পরবর্তী পড়ুন       সম্পর্কিত বিষয়  
       
    • প্রোগ্রামিং
      •  
    • ওয়েব ডেভেলপমেন্ট
      •  
    • jQuery
      •  
      লেখক সম্পর্কে   ববি জ্যাক(58 নিবন্ধ প্রকাশিত)      
    ববি একজন প্রযুক্তি উৎসাহী যিনি দুই দশকের বেশিরভাগ সময় সফটওয়্যার ডেভেলপার হিসেবে কাজ করেছেন। তিনি গেমিং সম্পর্কে উত্সাহী, সুইচ প্লেয়ার ম্যাগাজিনে রিভিউ এডিটর হিসাবে কাজ করছেন এবং অনলাইন প্রকাশনা এবং ওয়েব ডেভেলপমেন্টের সকল ক্ষেত্রে নিমজ্জিত।
    ববি জ্যাক থেকে আরো
    আমাদের নিউজলেটার সদস্যতা
     
    প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!
    সাবস্ক্রাইব করতে এখানে ক্লিক করুন