8.1 jQuery সংযোগ করা
অবশেষে, আমরা jQuery লাইব্রেরিতে গিয়েছিলাম। এই নিবন্ধটি লেখার সময়, এটি ইতিমধ্যেই অপ্রচলিত এবং নতুন প্রকল্পগুলিতে প্রায় কখনই ব্যবহৃত হয় না । কিন্তু এক সময়ে এটি খুব জনপ্রিয় ছিল, খুব ভালোভাবে নথিভুক্ত করা হয়েছে এবং ইন্টারনেটে এর ব্যবহার নিয়ে অনেক উদাহরণ রয়েছে ।
অতএব, আপনি যদি একটি ছোট ওয়েব প্রজেক্ট লিখছেন এবং আধুনিক ফ্রেমওয়ার্ক শিখতে কয়েক মাস ব্যয় করতে না চান, আমি আপনাকে jQuery লাইব্রেরি ব্যবহার করার পরামর্শ দিচ্ছি।
হাজার হাজার jQuery ফাংশন ব্যবহার করার জন্য, আপনাকে কেবল এটি আপনার পৃষ্ঠায় অন্তর্ভুক্ত করতে হবে। আপনি এটি এই মত করতে পারেন:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>jQuery এর সাথে কাজ করাকে দুই প্রকারে ভাগ করা যায়।
প্রথমত, আপনি একটি jQuery লাইব্রেরি অবজেক্ট পেতে পারেন, যা একটি কাস্টম jQuery অবজেক্টে মোড়ানো একটি নিয়মিত HTML উপাদান।
দ্বিতীয়ত, jQuery এর বেশ কিছু গ্লোবাল অবজেক্ট আছে যেগুলো HTML এলিমেন্টের সাথে আবদ্ধ নয়। সেগুলোও ব্যবহার করা দরকার।
প্রথম দিয়ে শুরু করা যাক।
8.2 নির্বাচকদের সাথে কাজ করা
jQuery অবজেক্টের সাথে কাজ করার জন্য নির্বাচক ব্যবহার করে (সিএসএস এবং এর ক্লাস মনে রাখবেন?) সুতরাং, jQuery এ, আপনি যদি কিছু অবজেক্ট বা অবজেক্টের গোষ্ঠী নির্বাচন করতে চান তবে আপনাকে তাদের নির্বাচক সেট করতে হবে।
উদাহরণ:
| কোড | বর্ণনা | বিঃদ্রঃ | |
|---|---|---|---|
| 1 | $("div") | একটি DIV ট্যাগ সহ সমস্ত বস্তু নির্বাচন করে | অনেক বস্তু |
| 2 | $("img.#image123") | IMG ট্যাগ এবং ID == image123 সহ সমস্ত বস্তু নির্বাচন করে | একটি বস্তু |
| 3 | $("#image123") | ID == image123 সহ সমস্ত বস্তু নির্বাচন করে | একটি বস্তু |
| 4 | $("div.article") | একটি DIV ট্যাগ সহ সমস্ত অবজেক্ট নির্বাচন করে যাতে ক্লাস নিবন্ধ রয়েছে | অনেক বস্তু |
ধরা যাক আমরা সমস্ত লিঙ্কে ইভেন্ট হ্যান্ডলিং যুক্ত করতে চাই onclick, এখানে আমরা jQuery এর সাথে কীভাবে এটি করতে পারি:
$("a").click(function() {
alert("Click");
});এখানে তিনটি পদক্ষেপ নেওয়া হয়:
- নির্বাচকের সাথে মেলে এমন বস্তু(গুলি) পায়
"a"। - আমরা একটি বেনামী ফাংশন তৈরি করি যা কল করে
alert()। clickআমরা পয়েন্ট 1 থেকে সমস্ত অবজেক্টের জন্য একটি ইভেন্ট হ্যান্ডলার হিসাবে এই ফাংশনটি সেট করি ।
jQuery সম্পর্কে আরেকটি ভাল জিনিস হল এর কোড পড়া সহজ। সবকিছু কিভাবে কাজ করে তা বের করতে বেশি কিছু লাগে না। যদি কাজের কোড থাকে, তবে এটি কী করে তা বোঝা যথেষ্ট সহজ।
8.3 নথি উপাদানগুলির সাথে কাজ করা
আসুন jQuery ব্যবহার করে একটি নথির সাথে কাজ করার জন্য কয়েকটি পরিস্থিতি দেখি।
একটি উপাদানের মান পান (মান আছে এমন উপাদানগুলির জন্য):
var result = $ ("selector").value();উপাদান মান সেট করুন (মান আছে এমন উপাদানগুলির জন্য):
$ ("selector").value(newValue);কিভাবে কিছু উপাদান ভিতরে HTML যোগ করতে?
$ ("selector").html(newHTML);এবং কিভাবে উপাদান ভিতরে আছে যে HTML পেতে?
var html = $ ("selector").html();আমি যদি HTML না, কিন্তু প্লেইন টেক্সট পেতে/যোগ করতে চাই? এখানেও কোন চমক নেই।
var html = $ ("selector").text();যদি আমি একটি উপাদানের রঙ পেতে/পরিবর্তন করতে চাই?
$ ("selector").color("red");আপনার যদি শৈলীগুলির সাথে কাজ করার প্রয়োজন হয় তবে এটি করাও সহজ:
$ ("selector").css("color", "red");কিভাবে একটি নতুন উপাদান যোগ করতে?
$ (".container").append($("h3"));