jQuery Introduction
- jQuery একটি জাভাস্ক্রিপ্ট লাইব্রেরী।
- jQuery জাভাস্ক্রিপ্ট প্রোগ্রামিং কে অনেক সহজ করে।
- jQuery শেখা সহজ।
- এইচটিএমএল
- সিএসএস
- জাভাস্ক্রিপ্ট
jQuery কি?
jQuery একটি লাইটওয়েট, জাভাস্ক্রিপ্ট লাইব্রেরি। jQuery এর উদ্দেশ্য হচ্ছে সহজভাবে আপনার ওয়েবসাইটে জাভাস্ক্রিপ্ট ব্যবহার করা। জাভাস্ক্রিপ্ট এর মাধ্যমে যে কাজ অনেকগুলো লাইন এর কোড বসিয়ে এবং মেথড এর মধ্যে নিয়ে এসে করতে হয় তা jQuery একটিমাত্র লাইনের কোড এর মাধ্যমেই করতে পারে। জাভাস্ক্রিপ্ট এ যা অনেক জটিল সেখানে jQuery অনেক সহজসাধ্য, যেমন- AJAX কল এবং DOM ম্যানিপুলেশন। JQuery লাইব্রেরি এর নিম্নলিখিত আরও কিছু বৈশিষ্ট্য রয়েছেঃ- এইচটিএমএল / DOM ম্যানিপুলেশন
- সিএসএস এর ম্যানিপুলেশন
- এইচটিএমএল ইভেন্ট মেথড
- ইফেক্ট এবং অ্যানিমেশন
- AJAX
- ইউটিলিটি
JQuery কেন?
জাভাস্ক্রিপ্ট এর অনেক ফ্রেমওয়ার্ক রয়েছে, কিন্তু jQuery কে সবচেয়ে জনপ্রিয়, এবং সবচেয়ে বৃদ্ধিযোগ্য মনে করা হয়। ওয়েব এর অনেক বড় বড় কম্পানী jQuery ব্যবহার করে, যেমন-- গুগল
- মাইক্রোসফট
- আইবিএম
- Netflix
- ইতাদি আরও সাইট রয়েছে…
আপনার ওয়েব পেজ এ jQuery নিয়ে কিভাবে কাজ করবেন?
আপনার ওয়েব পেজ এ jQuery শুরু করার জন্য বেশ কিছু উপায় রয়েছে:- jQuery.com থেকে jQuery লাইব্রেরি ডাউনলোড করে অথবা তাদের CDN লিঙ্ক টি ব্যাবহার করতে পারেন ।
- উৎপাদন সংস্করণ – এটি আপনার লাইভ (ওয়েবে সচল) ওয়েব সাইটের জন্য ছোট (সংক্ষিপ্ত) এবং সংকুচিত (compressed)
- উন্নয়ন সংস্করণ – এটি ওয়েব সাইট পরীক্ষা এবং উন্নয়ন করার জন্য (সংকুচিত নয় এবং পাঠযোগ্য কোড)।
ফাইল কিভাবে লিঙ্ক করবেন?
JQuery লাইব্রেরি একটি একক জাভাস্ক্রিপ্ট ফাইল এবং আপনি এটি HTML <script> ট্যাগ দ্বারা প্রকাশ করতে পারবেন। (<script> ট্যাগ <head> এর ধারা ভিতরে হওয়া উচিত)<head> <script src="jquery-1.11.3.min.js"></script> </head>
jQuery CDN
যদি আপনি JQuery ডাউনলোড এবং হোস্ট করতে না চান, তাহলে আপনি CDN (কনটেন্ট ডেলিভারি নেটওয়ার্ক) এ jQuery অন্তর্ভুক্ত করে দিতে পারেন। Google এবং Microsoft উভয়ই jQuery হোস্ট করে। Google অথবা Microsoft থেকে হোস্ট করতে চাইলে নিচের যেকোন একটি প্রয়োগ করুন :Google CDN:
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> </head>
Microsoft CDN:
<head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script> </head>
Google অথবা Microsoft এ হোস্ট করার একটি বড় সুবিধা হচ্ছে: এতোমধ্যে প্রচুর সংখ্যক ব্যবহারকারী Google অথবা Microsoft থেকে jQuery ডাউনলোড করেছে। ফলে আপনার সাইট দেখার সময় এটি এটা ক্যাশ থেকে লোড হবে, যা দ্রুত লোড হওয়ার সময় এর উপর প্রভাব ফেলে। অধিকাংশ CDN নিশ্চিত করে যে, যখন কোন ব্যবহারকারী কোন ফাইল এর জন্য অনুরোধ করবে তখন তা সবচেয়ে কাছের সার্ভার থেকে লোড হবে, যা দ্রুত লোড হওয়ার সময় এর উপর প্রভাব ফেলে।
jQuery সিনট্যাক্স
- $ চিহ্ন হচ্ছে jQuery কে সঙ্গায়িত বা jQuery এ প্রবেশ করার জন্য
- (selector) হচ্ছে এইচটিএমএল এলিমেন্ট এর “কুয়েরি (বা খোজার জন্য)”
- jQuery action() হচ্ছে এলিমেন্ট এর উপর কার্য সম্পাদনের জন্য
Document Ready ইভেন্ট
আমাদের সকল উদাহরণে jQuery মেথড document ready ইভেন্ট এর ভিতরে লেখা হয়েছে:$(document).ready(function(){
// jQuery methods go here...
});
এটি ডকুমেন্ট লোড হওয়ার পূর্বে jQuery কোড রান হওয়া থেকে রক্ষা করে। ভাল অভ্যাস হচ্ছে jQuery নিয়ে কাজ করার পূর্বে ডকুমেন্ট পুরোপুরি লোড হওয়া পর্যন্ত অপেক্ষা করা। এটি ডকুমেন্ট প্রদর্শনের পূর্বেই হেড সেকশনে আপনার জাভাস্ক্রিপ্ট কোড পাওয়ার জন্য সহায়তা করে। ডকুমেন্ট পুরোপুরি লোড হওয়ার পূর্বেই jQuery মেথড নিয়ে কাজ করলে কোন কার্য ব্যর্থ হতে পারে এখানে তার কিছু উদাহরণ দেখানো হলো:
- একটি এলিমেন্টকে লুকানর চেষ্টা করে যা এখনও তৈরি হয়নিি
- একটি ছবির আকার পেতে চেষ্টা করে যা এখনও লোড হয়নি
$(function(){
// jQuery methods go here...
});
jQuery নির্বাচক (Selectors)
jQuery Selectors সবচেয়ে গুরুত্বপূর্ণ অংশ। jQuery নির্বাচক আপনাকে এইচটিএমএল উপাদান (গুলি) নির্বাচন এবং নিপূণভাবে ব্যবহার করার অনুমতি দেয়। HTML উপাদান আইডি, ক্লাস, টাইপ, এট্রিবিউট, এট্রিবিউট এর মান সহ আরও অনেক কিছুর উপর ভিত্তি করে “খুঁজতে” (বা নির্বাচন করতে) jQuery নির্বাচক ব্যবহৃত হয়। এটা বিদ্যমান সিএসএস সিলেক্টর এর উপর নির্ভর করে এবং এ ছাড়াও, এটার কিছু নিজস্ব সিলেক্টর আছে।
JQuery মধ্যে সকল নির্বাচক ডলার চিহ্ন এবং বন্ধনী দিয়ে শুরু হয়: $ ()।
এলিমেন্ট নির্বাচক
JQuery এলিমেন্ট নির্বাচক এলিমেন্ট এর নাম অনুসারে নির্বাচন করে। আপনি একটি পেজ এর সকল <p> এলিমেন্ট নির্বাচন করতে পারেন:$ (“p”) উদাহরণ: যখন একজন ব্যবহারকারী একটি বাটন ক্লিক করবে, তখন সকল <p> এলিমেন্ট অদৃশ্য হয়ে যাবে:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
#id নির্বাচক
JQuery এর #id নির্বাচক একটি HTML ট্যাগ এর আইডি অ্যাট্রিবিউট ব্যবহার করে নির্দিষ্ট এলিমেন্ট খোজে। একটি পেজ এর মধ্যে আইডি অনন্য হতে হবে,যাতে নির্দিষ্ট এলিমেন্ট খুঁজে বের করার জন্য আপনি #id নির্বাচক ব্যবহার করতে পারেন। নির্দষ্ট আইডি বিশিষ্ট কোন এলিমেন্ট খুঁজে বের করার জন্য উক্ত আইডি এর পূর্বে # (হ্যাস) ব্যবহার করুন। $ (“#test”) উদাহরণ একজন ব্যবহারকারী যখন একটি বাটন ক্লিক করে, id=”test” এলিমেন্ট অদৃশ্য হয়ে যাবে:$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
JQuery নির্বাচক এর আরো উদাহরণ
| সিনটেক্স | বর্ণনা |
| $(“*”) | সকল এলিমেন্ট নির্বাচন করে |
| $(this) | বর্তমান এইচটিএমএল এলিমেন্ট নির্বাচন করে |
| $(“p.intro”) | class=”intro” বিশিষ্ট সকল <p> এলিমেন্ট নির্বাচন করে |
| $(“p:first”) | প্রথম <p> এলিমেন্ট নির্বাচন করে |
| $(“ul li:first”) | প্রথম <ul> এলিমেন্ট এর প্রথম <li> এলিমেন্ট নির্বাচন করে |
| $(“ul li:first-child”) | প্রতিটি <ul> এলিমেন্ট এর প্রথম <li> এলিমেন্ট নির্বাচন করে |
| $(“[href]”) | href এট্রিবিউট বিশিষ্ট সকল এলিমেন্ট নির্বাচন করে |
| $(“a[target=’_blank’]”) | টার্গেন এট্রিবিউট মান “_blank” বিশিষ্ট সকল <a> এলিমেন্ট নির্বাচন করে |
| $(“a[target!=’_blank’]”) | টার্গেন এট্রিবিউট মান NOT সমান “_blank” বিশিষ্ট সকল <a> এলিমেন্ট নির্বাচন করে |
| $(“:button”) | type=”button” এর সকল <button> এবং <input> এলিমেন্ট নির্বাচন করে |
| $(“tr:even”) | সকল জোড় <tr> এলিমেন্ট নির্বাচন করে |
| $(“tr:odd”) | সকল বেজোড় <tr> এলিমেন্ট নির্বাচন করে |
একটি পৃথক ফাইলে jQuery ফাংশান রাখা
যদি আপনার ওয়েব সাইটে প্রচুর সংখ্যক পেজ থাকে এবং jQuery ফাংশন সহজে ব্যবহার করতে চান তাহলে jQuery ফাংশনগুলোকে একটি আলাদা ফাইলে রাখতে পারেন, যার এক্সটেনশন হবে .js আমাদের টিউটোরিয়াল এর উদাহরণগুলোতে jQuery ফাংশন হেড সেকশন এর ভিতরে রাখা হয়েছে। কিছু কিছু ক্ষেত্রে নিচের মতো করে আলাদা ফাইল এও রাখা হয়েছে:<head> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”> </script> <script src=”my_functions.js”></script> </head>