jQuery:একটি সংক্ষিপ্ত ভূমিকা
jQuery হল একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা ডেভেলপারদেরকে DOM ম্যানিপুলেট করতে, ইভেন্ট হ্যান্ডলার, অ্যানিমেশন এবং AJAX অনুরোধগুলিকে মাত্র কয়েকটি লাইনের কোড দিয়ে লিখতে দেয়। নির্বাচক এবং jQuery API-এর অনন্য পদ্ধতির মাধ্যমে এটি সম্ভব। এই পদ্ধতিগুলির মধ্যে একটি হল append() .
jQuery append() কি?
append() পদ্ধতিটি "সামগ্রী" এর এক বা একাধিক আর্গুমেন্ট নিতে সক্ষম (যা একটি HTML স্ট্রিং, টেক্সট, একটি অ্যারে, একটি উপাদান, বা আরও jQuery হতে পারে), এবং যেকোন বা সমস্ত উপাদানের শেষে এটি সংযুক্ত বা "সংযোজন" করতে সক্ষম। নির্বাচক কিছু সাধারণ ব্যবহারের মধ্যে রয়েছে একটি তালিকার শেষে একটি আইটেম যুক্ত করা (যেমন একটি করণীয় তালিকায় একটি নতুন "করতে হবে" আইটেম), বা একটি বোতামের ক্লিকে নতুন সামগ্রী প্রদর্শন করা। এখন দেখা যাক কিভাবে append() কিছু উদাহরণ কোডের সাথে কাজ করে।
কিভাবে jQuery অ্যাপেন্ড()
ব্যবহার করবেন
একটি করণীয় তালিকায় আইটেম সন্নিবেশ করার উপরের উদাহরণটি নিয়ে, আমরা দেখব কিভাবে append() একটি নির্বাচককে ডাকা হয় এবং সমস্ত মিলে যাওয়া নির্বাচনগুলিতে বিষয়বস্তু সন্নিবেশ করায়৷
আমাদের এইচটিএমএল দিয়ে শুরু করে যা একটি মৌলিক করণীয় তালিকা তৈরি করে:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h2>To Do List</h2> <ol class="list1"> <li>Read Chapters 1 & 2 </li> <li>Meeting at 3:00pm</li> <li>Write about yesterday's reading</li> </ol> </body> </html>
<script>-এর ভিতরে jQuery API-তে একটি ঠিকানা অন্তর্ভুক্ত করা নোট করা গুরুত্বপূর্ণ <head>-এ ট্যাগ করুন HTML পৃষ্ঠার। অন্যথায়, আমরা আমাদের HTML পৃষ্ঠায় jQuery ব্যবহার করতে পারব না।
এখন, আমাদের করণীয় তালিকা সুন্দরভাবে উপস্থাপন করে!
আমরা আজ উৎপাদনশীল বোধ করছি, তাই তালিকার শেষে একটি আইটেম যোগ করা যাক। ডিনার পরিকল্পনা সম্পর্কে কি?
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
আমাদের এইচটিএমএল লেআউট উল্লেখ করে, আমরা অর্ডার করা তালিকা দেখতে পাই (<ol> ) list1. এর একটি ক্লাস আছে . এটি একটি দুর্দান্ত খবর কারণ আমরা আরেকটি <script> যোগ করে সেই সম্পূর্ণ নির্বাচনটি নির্বাচন করতে পারি
<script>
$(document).ready( () => {
$(".list1").append("<li>Make dinner plans</li>")
})
</script>
<script> এর ভিতরে ট্যাগ, আমাদের কিছু $ চিহ্ন আছে। এগুলো কি? এই শক্তিশালী jQuery নির্বাচক.
আমরা আমাদের DOM-এ একটি উপাদান, শ্রেণির নাম, বা আইডি নাম দিয়ে কিছু নাম দেওয়ার মাধ্যমে যেকোনো কিছু নির্বাচন করতে পারি। এই ক্ষেত্রে, আমরা list1, এর ক্লাস সহ যেকোনো কিছু নির্বাচন করেছি যা সম্পূর্ণ <ol> নির্বাচন করবে উপাদান উপরের (document) নির্বাচক সমগ্র পৃষ্ঠা নির্বাচন করে এবং ready() কল করে পৃষ্ঠাটি সম্পূর্ণরূপে লোড না হওয়া পর্যন্ত কোডের পরবর্তী লাইনে কল করার জন্য অপেক্ষা করার পদ্ধতি। এটি আমাদের কোড ক্রমান্বয়ে চলতে সাহায্য করে।
এখন, আমাদের ready() এর ভিতরে কলব্যাক ফাংশন, আমরা list1. এর ক্লাস সহ সমস্ত উপাদান নির্বাচন করেছি এই ক্ষেত্রে, এটি আমাদের <ol> নির্বাচন করবে এবং <li> ঢোকান append()-এ পাস করা হয়েছে আমাদের ক্লোজিং </ol> এর ঠিক উপরে . সুতরাং, আমাদের পৃষ্ঠা লোড হওয়ার পরে, Make dinner plans তালিকার আইটেমটি আমাদের করণীয় তালিকায় যুক্ত করা হবে:
চমত্কার! এবার আরেকটা উদাহরণ দেখা যাক। এইবার একটি বোতামে ক্লিক করার পরে আরও সামগ্রী প্রদর্শন করা যাক৷
৷jQuery append():একটি বাস্তব-বিশ্বের উদাহরণ
ধরুন আমাদের ওয়েব পেজে একটি বোতাম আছে এবং বোতামটি ক্লিক করলে আমরা নতুন বিষয়বস্তু প্রদর্শন করতে চাই। যদি আমরা পৃষ্ঠা রিফ্রেশ বা পুনঃনির্দেশ ছাড়াই নতুন বিষয়বস্তু প্রদর্শন করি তবে এটি আমাদের ব্যবহারকারীদের জন্য দক্ষ এবং আরও তৃপ্তিদায়ক হবে।
এখানে jQuery এর শক্তি এবং কমনীয়তা রয়েছে :যখন বোতামটি ক্লিক করা হয় তখন আমরা রিফ্রেশ বা পুনঃনির্দেশ ছাড়াই নতুন সামগ্রী প্রদর্শন করতে পারি।
এই বেস HTML প্রদত্ত:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="content"> <p>Hello World!</p> </div> <button id="btn-main">Click Me!</button> </body> </html>
আমাদের কাছে একটি বোতাম না থাকলে আমরা কীভাবে আমাদের করণীয় তালিকা শুরু করেছি তার সাথে প্রায় একই রকম:
"হ্যালো ওয়ার্ল্ড!" এর অধীনে আরও কন্টেন্ট যুক্ত করতে jQuery সম্পর্কে আমরা যা শিখেছি তা ব্যবহার করি। বোতামটি ক্লিক করা হলে।
<script>
$(document).ready( () => {
$("#main-btn").click( () => {
$("p").append("<b>Goodbye</b>")
})
})
</script>
আবার, আমরা আমাদের
এর শেষে একটি