jQuery-এর কাছে অনেকগুলি পদ্ধতি রয়েছে যা বিকাশকারীদের দক্ষতার সাথে একটি গতিশীল ওয়েব অভিজ্ঞতা তৈরি করতে সহায়তা করে৷ jQuery html() পদ্ধতি নির্বাচিত উপাদানের ভিতরে সমস্ত HTML প্রতিস্থাপন করে। পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করার পরে ব্যবহারকারী যা দেখছেন তা আপনি গতিশীলভাবে পরিবর্তন করতে চাইলে এটি কার্যকর।
এই নির্দেশিকায় আমরা কীভাবে html() ব্যবহার করতে হয় সে সম্পর্কে শিখব এবং এর সিনট্যাক্স। আমরা html() ব্যবহার করার জন্য ধাপে ধাপে পদ্ধতির দিকেও নজর দেব . jQuery html() এটি jQuery লাইব্রেরিতে একটি মৌলিক পদ্ধতি এবং প্রায়ই ব্যবহৃত হয়। মৌলিক বিষয়গুলো শেখার পর, আপনি html() ব্যবহার করে অনুশীলন শুরু করতে প্রস্তুত হবেন .
jQuery html() কি?
jQuery html() মিলিত উপাদানগুলির একটি সেটে প্রতিটি উপাদানের HTML বিষয়বস্তু সেট করে। শুধুমাত্র কাঙ্ক্ষিত HTML প্রতিস্থাপন করার জন্য একটি নির্দিষ্ট পর্যাপ্ত ক্যোয়ারী প্রদান করার জন্য সতর্কতা অবলম্বন করা উচিত।
html() দিয়ে শুধুমাত্র বিষয়বস্তু পরিবর্তন করা হয়েছে . যদি একটি স্টাইলশীট থাকে তবে নতুন বিষয়বস্তু পূর্ববর্তী সামগ্রীর মতোই স্টাইল করা হবে। এটাও উল্লেখ করার মতো যে html() শুধুমাত্র একটি HTML নথিতে কাজ করে — এটি XML এর সাথে কাজ করে না৷
html() jQuery সিনট্যাক্স
মনে রাখবেন যে jQuery পদ্ধতিগুলি প্রথমে একটি নির্বাচককে কল করা হয়। নির্বাচক একটি
ট্যাগের মতো বিস্তৃত হতে পারে বা একটি আইডি (
) সহ একটিhtml() কল করতে পারি এবং html()-এ প্যারামিটার হিসাবে একটি HTML স্ট্রিং পাস করুন . CSS নির্বাচকদের পুঙ্খানুপুঙ্খ ব্যাখ্যার জন্য, আমাদের গাইড পড়ুন।
html() হয় একটি স্ট্রিং আক্ষরিক প্যারামিটার বা স্ট্রিং ধারণকারী একটি পরিবর্তনশীল হিসাবে গ্রহণ করে। "নতুন সামগ্রী" এর একটি স্ট্রিং আক্ষরিক পাস করা একটি পরিবর্তনশীল রেফারেন্সিং "নতুন সামগ্রী" পাস করার মতোই রেন্ডার করবে।
বলুন আমাদের এই সহজ
<div class='main-content> <p class='paragraphOne'> Hello World </p> </div>
আমরা সম্পূর্ণ
ট্যাগ প্রতিস্থাপন করতে পারি:
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
$('div.main-content').html('<p>New Content</p>')
উপরের কোডটি নতুন HTML কে রেন্ডার করে:
<div class='main-content> <p>New Content </p> </div>
আসল
ট্যাগের সাথে স্টাইলিং যুক্ত থাকলে, এটি আর নতুন সামগ্রীর সাথে সক্রিয় থাকবে না। একটি সাধারণ স্ট্রিংও পাস করা সম্ভব:
$('div.main-content').html('New Content')
আমাদের HTML এখন নিম্নরূপ:
<div class='main-content> New Content </div>
আমরা দেখতে পাচ্ছি নতুন কন্টেন্টে কিছু পার্থক্য আছে। একটি স্ট্রিং আক্ষরিক পাস করা পূর্ববর্তী বিষয়বস্তুর স্টাইল বজায় রাখার একটি দুর্দান্ত উপায়। মনে রাখবেন, একটি স্ট্রিং আক্ষরিক কেবল অক্ষর ধারণকারী একটি স্ট্রিং। যদি নতুন বিষয়বস্তু একটি শিশু উপাদান হতে হয়, একটি HTML স্ট্রিং ব্যবহার করে এটি সম্পন্ন করা হয়।
এখন যেহেতু মৌলিক সিনট্যাক্স কভার করা হয়েছে, আসুন একটি উদাহরণ দেখি।
html() jQuery উদাহরণ
আমরা দেখেছি কিভাবে html() আমাদের উপরের "নতুন বিষয়বস্তু" উদাহরণে নির্বাচিত উপাদানের ভিতরে সামগ্রী প্রতিস্থাপন করে৷ এটি একটি প্যারামিটার হিসাবে একটি স্ট্রিং আক্ষরিক বা একটি HTML স্ট্রিং পাস করে সম্পন্ন করা যেতে পারে। আসুন একটি উদাহরণ দেখি যেখানে আমরা মূল স্টাইলিং বজায় রাখি।
<head>
<style>
.blue {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h2>
html() Demo:
</h2>
<div class='main'>
<p class='blue'>
Hello
</p>
<p>
World
</p>
<p>
Goodbye
</p>
</div>
<script>
</script>
</body> আমাদের শুরুর এইচটিএমএল পৃষ্ঠার দিকে তাকালে, আমরা দেখতে পাব শুধুমাত্র "হ্যালো" শব্দটি নীল রঙ দিয়ে স্টাইল করা হয়েছে৷
এই উদাহরণে, আমরা নতুন বিষয়বস্তু দিয়ে "হ্যালো" শব্দটি প্রতিস্থাপন করতে চাই, কিন্তু মূল স্টাইলিং বজায় রাখতে চাই। এটি সম্পন্ন করার জন্য, আমরা শ্রেণী নামের নীল সহ অনুচ্ছেদটি নির্বাচন করি।
$('p.blue').html("Hello AGAIN")
আমরা নীল শ্রেণীর অনুচ্ছেদটি নির্বাচন করেছি এবং "হ্যালো" এর পরিবর্তে "হ্যালো এগেইন" দিয়েছি। যেহেতু html() উপাদানের নামের মধ্যে আবৃত বিষয়বস্তু প্রতিস্থাপন করে, নীল রঙ থাকবে।
আমরা যদি অনুচ্ছেদ টেক্সট সব প্রতিস্থাপন করতে চেয়েছিলেন? আমরা যদি
এলিমেন্ট নির্বাচন করি, তাহলে এটি উপরের লেখাটিকে "Hello AGAIN" এর তিনটি উদাহরণ দিয়ে প্রতিস্থাপন করবে।
$('p').html("Hello AGAIN")
এখানে আমরা HTML ফাইলের সমস্ত অনুচ্ছেদ ট্যাগ নির্বাচন করছি এবং প্রতিটির বিষয়বস্তুকে “Hello AGAIN” দিয়ে প্রতিস্থাপন করছি। আমাদের প্রথম উদাহরণের মতো, আসল স্টাইলিং রেন্ডার হবে কারণ আমরা সেই ট্যাগগুলিতে মোড়ানো সামগ্রী প্রতিস্থাপন করছি।
ঠিক যেমনটা আমরা আশা করেছিলাম। আসুন আমাদের নির্বাচকের এক স্তর উপরে যাই আমাদের
$('div.main').html('<p class=blue>Main Div Content</p>') 
আমাদের প্রধান ডিভের ভিতরে, আমাদের তিনটি অনুচ্ছেদ উপাদান রয়েছে। কিভাবে html() জানা কাজ করে, আমরা অনুমান করতে পারি যে উপরের কোডটি প্যারামিটার হিসাবে পাস করা তিনটি
ট্যাগ প্রতিস্থাপন করবে। উপরের ধারণার সাথে আরও গভীরে যেতে HTML শেখার বিষয়ে আমাদের গাইড পড়ুন
কোডের এক লাইনে, আমরা তিনটি ভিন্ন অনুচ্ছেদ উপাদান প্রতিস্থাপন করেছি এবং আমাদের মূল ক্লাস স্টাইলিং ব্যবহার করেছি।
উপসংহার
jQuery html() একটি গতিশীল অভিজ্ঞতা তৈরি করতে HTML পৃষ্ঠাগুলিতে সামগ্রী প্রতিস্থাপনের জন্য একটি সাধারণভাবে ব্যবহৃত পদ্ধতি৷ কারণ html() এইচটিএমএল উপাদানের ভিতরে মোড়ানো বিষয়বস্তু প্রতিস্থাপন করে, jQuery নির্বাচক এবং যেকোনো শৈলী ক্লাসে মনোযোগ দেওয়া গুরুত্বপূর্ণ। এটি কোনো অবাঞ্ছিত শৈলী পরিবর্তন প্রতিরোধ করবে।
আমরা jQuery কী, এর সিনট্যাক্স এবং এটি কীভাবে ব্যবহার করা যায় তার একটি উদাহরণ শিখেছি। অনুশীলনে কিছু সময় ব্যয় করুন এবং এখন এই বহুল ব্যবহৃত পদ্ধতিতে যান।
