জেকোয়েরি দিয়ে সিএসএস পরিচালনা(jQuery - Get and Set CSS Classes) ।

লেখাঃ  মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

কেমন আছেন সবাই? আজ আমরা জেকোয়েরি দিয়ে ওয়েব পেজ এর উপাদান (HTML Elements) গুলোর CSS property (such as display, font-height) পরিবর্তন করা শিখবো । সাথে সাথে উপাদান গুলোর CSS class পরিবর্তন করবো যেমন নতুন css class যোগ করা।

জেকোয়েরি দিয়ে খুব সহজে সিএসএস ক্লাস গুলোকে পরিচালনা করা যায় ।

জেকোয়েরি দিয়ে সিএসএস পরিচালনা(jQuery Manipulating CSS):

সিএসএস পরিচালনা করার জন্য জেকোয়েরি এর কয়েকটি পদ্ধতি আছে । আমরা এর ভিতর নিচের পদ্ধতি গুলো অনুসরণ করবো ।

১। addClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস যোগ করা যায় ।

২। removeClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস দূরীভূত করা যায় ।

৩। toggleClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করা যায় ।

৪। css() ঃ স্টাইল এট্রিবিউটকে সেট করে থাকে ।

স্টাইলশিট এর উদাহরণঃ

নিচের উদাহরণটি আজ সবখানে ব্যবহার করবো । তাই খুব ভালভাবে খেয়াল করুন ।

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

১। jQuery addClass() Method:

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

$("button").click(function(){

$("h1,h2,p").addClass("blue");

$("div").addClass("important");

});

addClass() method এর মাধ্যমে আপনি একসাথে অনেক গুলো ক্লাস কে নির্দেশনা দিতে পারবেন ।

$("button").click(function(){

$("#div1").addClass("important blue");

});

২। jQuery removeClass() Method:

নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর থেকে কিভাবে ক্লাস এট্রিবিউটসকে দূর করতে হয় ।

$("button").click(function(){

$("h1,h2,p").removeClass("blue");

});

৩। jQuery toggleClass() Method:

নিচের উদাহরণের মাধ্যমে আমরা দেখতে পাবো jQuery toggleClass() Method ব্যবহার করতে হয় । এই মেথড নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করে ।

$("button").click(function(){

$("h1,h2,p").toggleClass("blue");

});

৪। jQuery css() Method:

এই মেথড স্টাইল এট্রিবিউটকে সেট করে থাকে । এটা অনেকভাবে স্টাইল করে থাকে । তাই পরে এটা নিয়ে একটি পোস্ট করবো ।

তাই এই গুলো আপাতত প্র্যাকটিস করতে থাকুন । দেখা হবে পরবর্তী পোস্টে jQuery css() Method নিয়ে । ততক্ষণ আমাদের সাথেই থাকুন ।

http://www.w3schools.com/jquery/jquery_css_classes.asp

জেকোয়েরি অ্যাজাক্স মেথডস(jQuery AJAX Methods) ।

লেখকঃ  মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

কেমন আছেন সবাই ? আজ আমি আপনাদের সাথে জেকোয়েরি অ্যাজাক্স মেথডস সম্পর্কে আলোচনা করবো ।

জেকোয়েরি অ্যাজাক্স মেথডস(jQuery AJAX Methods):

অ্যাজাক্স হলো এমন একটা কৌশল যা পুরো পেজ রিলোড না করে সার্ভারের সাথে ডাটা ট্রান্সফার করে একটি ওয়েব পেজকে আপডেট করে ।

আমরা যখন ফেসবুক ব্যবহার করি তখন যখন নিচের দিকে নামি তখন অ্যাজাক্স কিন্তু পেজটা রিলোড না করে পরের পোস্টগুলো দেখায় ।

তাহলে আসুন আমরা অ্যাজাক্স এর সকল মেথড গুলো শিখে ফেলি ।

মেথডঃ   $.ajax()

মেথডের বর্ণনাঃ  async AJAX রিকোয়েস্ট সম্পাদন করে ।

মেথডঃ   $.ajaxPrefilter()

মেথডের বর্ণনাঃ  যখন একটা রিকোয়েস্ট পাঠানো হয় $.ajax() প্রসেস করার আগে তখন কাস্টম অ্যাজাক্স অপশনগুলো নিয়ন্ত্রণ করে অথবা আগের অপশনগুলোকে সংশোধন করে ।

মেথডঃ   $.ajaxSetup()

মেথডের বর্ণনাঃ  ভবিষ্যতের অ্যাজাক্স রিকোয়েস্ট এর জন্য ডিফল্ট ভেলু গুলো ঠিক করা হয় ।

মেথডঃ   $.ajaxTransport()

মেথডের বর্ণনাঃ  একটি অবজেক্ট তৈরি করা হয় যা অ্যাজাক্স ডাটার পরিবর্তন নিয়ন্ত্রণ করতে পারে ।

মেথডঃ   $.get()

মেথডের বর্ণনাঃ  AJAX HTTP GET request সার্ভার থেকে ডাটা লোড নেয় ।

মেথডঃ   $.getJSON()

মেথডের বর্ণনাঃ  AJAX HTTP GET request সার্ভার থেকে JSON-encoded ডাটা লোড নেয় ।

মেথডঃ   $.getScript()

মেথডের বর্ণনাঃ  AJAX HTTP GET request সার্ভার থেকে জাভাস্ক্রীপ্ট লোড নেয় ।

মেথডঃ  $.param()

মেথডের বর্ণনাঃ  কোনো অবজেক্টের শ্রেণীবিন্যাস করে তার সিরিয়ালি প্রদর্শন করে ।

মেথডঃ   $.post()

মেথডের বর্ণনাঃ  AJAX HTTP POST request সার্ভার থেকে ডাটা লোড নেয় ।

মেথডঃ   ajaxComplete()

মেথডের বর্ণনাঃ  যখন অ্যাজাক্স রিকোয়েস্ট পূরণ হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । কোন ফাংশন চালাবে সেটা আপনি নির্দেশ করে দিতে পারবেন ।

মেথডঃ  ajaxError()

মেথডের বর্ণনাঃ  যখন অ্যাজাক্স রিকোয়েস্ট এরর দেখিয়ে সম্পন্ন হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । এখানে পরের ফাংশনের কাজ শুরু করে দেয় ।

মেথডঃ   ajaxSend()

মেথডের বর্ণনাঃ  যখন অ্যাজাক্স রিকোয়েস্ট পাঠানোর আগে একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । এই ফাংশনটা হতে পারে আপনার নির্দেশ করা কোনো ফাংশন ।

মেথডঃ  ajaxStart()

মেথডের বর্ণনাঃ  যখন প্রথম অ্যাজাক্স রিকোয়েস্ট শুরু হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় ।এই ফাংশনটা হতে পারে আপনার নির্দেশ করা কোনো ফাংশন ।

মেথডঃ   ajaxStop()

মেথডের বর্ণনাঃ  যখন সকল অ্যাজাক্স রিকোয়েস্ট সম্পন্ন হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । রিকোয়েস্ট সম্পন্ন হলে এরপর কোন ফাংশন চালিত হবে তা আপনি নির্দেশ করে দিতে পারেন অথবা এর আগের ফাংশনের রিকোয়েস্ট গুলো চেক করবে ।

মেথডঃ   ajaxSuccess()

মেথডের বর্ণনাঃ  যখন সকল অ্যাজাক্স রিকোয়েস্ট সফলভাবে সম্পন্ন হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । এই ফাংশনটা হতে পারে আপনার দেখানো কোনো ম্যাসেজ অথবা টেক্সট ।

মেথডঃ   load()

মেথডের বর্ণনাঃ  সার্ভার থেকে ডাটা লোড নেয় এবং সেই ডাটা সিলেক্টেড এলিমেন্টে পাঠায় ।

মেথডঃ   serialize()

মেথডের বর্ণনাঃ  অনেকগুলো এলিমেন্ট থেকে ডাটা সংগ্রহ করে ফর্ম আকারে সিরিয়ালি তা সাবমিট করে ।

মেথডঃ   serializeArray()

মেথডের বর্ণনাঃ  ফর্মের উপাদান থেকে নাম এবং ভেলু গুলোকে সংগ্রহ করে সিরিয়াল করে সাজায় । আপনি যেভাবে নির্দেশ করবেন সেভাবে এটা নাম এবং মানগুলোকে সিরিয়াল করবে । হতে পারে সেটা বড় মান থেকে ছোট মান অথবা ছোট থেকে বড় । নামের ক্ষেত্রেও কিন্তু তেমন A থেকে Z অথবা Z থেকে A তে সাজাতে পারবে ।

খুব মজার কিন্তু । আর এর ভিতরেই আমরা কিন্তু খুব সহজে জেকোয়েরি অ্যাজাক্সের সকল মেথড গুলো শিখে ফেললাম ।

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

jQuery Traversing পদ্ধতি
ইন্দ্র ভূষণ শুভ

jQuery Traversing পদ্ধতি
পদ্ধতি বর্ণনা
add() একই রকম উপাদানের সেটে উপাদান যোগ করা
addBack() বর্তমান সেটের সাথে পুর্বের সেটের উপাদান যোগ করা
andSelf() ১.৮ সংস্করণ বাদে। addBack() এর অন্য নাম
children() বাছাইকৃত উপাদানের সব direct children ফিরে আসে
closest() বাছাইকৃত উপাদানের প্রথম ancestor ফিরে আসে
contents() বাছাইকৃত উপাদানের সব direct children ফিরে আসে ( টেক্সট এবং মন্তব্য
নোড সহ)
each() একই রকম প্রত্যেকটি উপাদান একটি ফাংশন সঞ্চালন করে
end() বর্তমান চেইনের সাম্প্রতিক ফিল্টারিং অপারেশন শেষ হয়, এবং একই রকম
উপাদানের সেট তার পূর্বের অবস্থাই ফিরে যায়।
eq() একটি উপাদান নির্দিষ্ট সংখ্যক সূচক সহ বাছাইকৃত উপাদানে ফিরে আসে
filter() একই রকম উপাদানের সংখ্যা এমনভাবে কমানো হয় যাতে বাছাইকৃত
উপাদানের সাথে মিলে যায় অথবা ফাংশন টেস্ট অতিক্রম করতে পারে
find() বাছাইকৃত উপাদানের Descendant উপাদান ফিরে আসে
first() বাছাইকৃত উপাদানের প্রথম উপাদান ফিরে আসে
has() যেসব উপাদানের ভিতর এক বা ততোধিক উপাদান রয়েছে তারা সবাই ফিরে
আসে
is() নির্বাচক / উপাদান / jQuery বস্তুর বিরুদ্ধে একই রকম উপাদানের সেট
পরীক্ষা করা হয়, এবং যদি একটি উপাদান প্রদত্ত আর্গুমেন্টের সাথে মিলে
যায় তাহলে সত্যি ফিরে আসে
last() বাছাইকৃত উপাদেনের শেষ উপাদান ফিরে আসে
map() একই রকম সেটের প্রতিটি উপাদান একটি ফাংশনের মধ্য দিয়ে যায়, ফিরে
আসা মান ধারনকারী jQuery বস্তু তৈরি করে
next() বাছাইকৃত উপাদেনের পরবর্তি sibling উপাদান ফিরে আসে
nextAll() বাছাইকৃত উপাদেনের সব পরবর্তি sibling উপাদান ফিরে আসে
nextUntil() সব পরবর্তি sibling উপাদান প্রদত্ত দুইটি আর্গুমেন্টের মধ্যে ফিরে আসে
not() বাছাইকৃত উপাদান সেট থেকে উপাদান বাদ দেওয়া হয়
offsetParent() প্রথম অবস্থার parent উপাদানে ফিরে আসে
parent() বাছাইকৃত উপাদানের সরাসরি parent উপাদান ফিরে আসে
parents() বাছাইকৃত উপাদানের সব ancestor উপাদান ফিরে আসে
parentsUntil() প্রদত্ত দুইটি আর্গুমেন্টের মধ্যে সব ancestor উপাদান ফিরে আসে
prev() বাছাইকৃত উপাদানে পূর্বের sibling উপাদান ফিরে আসে
prevAll() বাছাইকৃত উপাদানে পূর্বের সব sibling উপাদান ফিরে আসে
prevUntil() প্রদত্ত দুইটি আর্গুমেন্টের মধ্যে পূর্বের সব sibling উপাদান ফিরে আসে
siblings() বাছাইকৃত উপাদেনের সব sibling উপাদান ফিরে আসে
slice() একই রকম উপাদানের সেটকে একটি পরিসীমা সূচকের উপসেটে কমানো
হয়

1. লিখেছেন সুদীপ্ত সাহা

জেক্যুয়েরি এজাক্স মেথডস

এজাক্স হল কোন ওয়েব পেজকে সম্পূর্ণ রিলোড না করে সার্ভারের মধ্যে থেকে ডাটার আদান-প্রদানের মাধ্যমে ওয়েব পেজের কোন অংশের আপডেট করার একটি কৌশল।

নিচের টেবিলে জেক্যুয়েরিতে ব্যবহৃত এজাক্স মেথডগুলো তালিকাভুক্ত করা হয়েছেঃ

মেথড বর্ণনা
$.ajax() এজাক্সের async রিকোয়েস্ট সম্পাদন করা
$.ajaxPrefilter() $.ajax() মেথডে কোন রিকোয়েস্ট প্রেরণের আগে কাস্টম অপশনগুলো পরিচালনা করা অথবা বিদ্যমান অপশনগুলোকে পরিবর্তন করা
$.ajaxSetup() ভবিষ্যতে কোন AJAX রিকোয়েস্টের জন্য ডিফল্ট ভ্যালু সেট করা
$.ajaxTransport() AJAX ডাটা পরিচালনার জন্য অবজেক্ট তৈরি করা
$.get() সার্ভার থেকে AJAX HTTP GET রিকোয়েস্টের মাধ্যমে ডাটা লোড করা
$.getJSON() সার্ভার থেকে HTTP GET রিকোয়েস্টের মাধ্যমে JSON-encoded ডাটা লোড করা
$.getScript() AJAX HTTP GET রিকোয়েস্টের মাধ্যমে সার্ভার থেকে JavaScript লোড করা এবং চালু করা
$.param() ধারাবাহিকভাবে কোন অ্যারে বা অবজেক্টকে প্রদর্শন করা
$.post() AJAX HTTP POST রিকোয়েস্টের মাধ্যমে সার্ভার থেকে ডাটা লোড করা
ajaxComplete() AJAX রিকোয়েস্ট কমপ্লিটের পর কোন ফাংশনকে রান করা
ajaxError() AJAX রিকোয়েস্ট ইররসহ কমপ্লিটের পর কোন ফাংশনকে রান করা
ajaxSend() AJAX রিকোয়েস্ট প্রেরণের পূর্বে কোন ফাংশনকে রান করা
ajaxStart() AJAX রিকোয়েস্ট প্রথম শুরু হবার সময় কোন ফাংশনকে রান করা
ajaxStop() সকল AJAX রিকোয়েস্ট কমপ্লিটের পর কোন ফাংশনকে রান করা
ajaxSuccess() AJAX রিকোয়েস্ট সঠিকভাবে কমপ্লিটের পর কোন ফাংশনকে রান করা
load() সার্ভার থেকে ডাটা লোড করা এবং সিলেক্টেড ইলিমেন্টে ডাটা রিটার্ন করা
serialize() সাবমিশনের জন্য ফর্মের উপাদানগুলোকে স্ট্রিংএ এনকোডিং করা
serializeArray() ফর্মের উপাদানগুলোকে নেম এবং ভ্যালু অনুযায়ী অ্যারেতে এনকোডিং করা

jQuery তে Siblings খোঁজা
ইন্দ্র ভূষণ শুভ

Siblings একই parent ভাগাভাগি করে।
আপনি jQuery দিয়ে একটি উপাদানের Siblings গুলো DOM ট্রির পার্শ্বাভিমুখে খুঁজতে পারেন।

DOM ট্রির আশেপাশে খোঁজা
DOM ট্রির আশেপাশে খোঁজার জন্য অনেক ধরনের jQuery পদ্ধতি আছেঃ
• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

jQuery তে siblings() পদ্ধতি
siblings() পদ্ধতিতে বাছাইকৃত উপাদানে সকল siblings উপাদান ফিরে আসে।
নিচের উদাহরণটি <h2> সকল siblings উপাদান ফিরিয়ে আনেঃ
উদাহরণ
$(document).ready(function(){
$("h2").siblings();
});
নিজে চেষ্টা করুন >>
আপনি আপনার ইচ্ছা মত পরিমাপক ব্যবহার করতে পারেন siblings অনুসন্ধানকে ফিল্টার করার জন্য।
নিচের উদাহরণটি <h2> সকল siblings উপাদান ফিরিয়ে আনে যা

উপাদানঃ
উদাহরণ
$(document).ready(function(){
$("h2").siblings("p");
});
নিজে চেষ্টা করুন >>

jQuery তে next () পদ্ধতি
next () পদ্ধতি বাছাইকৃত উপাদানে পরবর্তী siblings উপাদান ফিরিয়ে আনে।
নিচের উদাহরণটি <h2> পরবর্তী siblings উপাদান ফিরিয়ে আনেঃ
উদাহরণ
$(document).ready(function(){
$("h2").next();
});
নিজে চেষ্টা করুন >>

jQuery তে nextAll () পদ্ধতি
nextAll () পদ্ধতি বাছাইকৃত উপাদানে পরবর্তী সকল siblings উপাদান ফিরিয়ে আনে।
নিচের উদাহরণটি <h2> পরবর্তী সকল siblings উপাদান ফিরিয়ে আনেঃ
উদাহরণ
$(document).ready(function(){
$("h2").nextAll();
});
নিজে চেষ্টা করুন >>

jQuery তে nextUntil() পদ্ধতি
nextUntil() পদ্ধতি দুইটি আর্গুমেন্টের মধ্যে পরবর্তী সকল siblings উপাদান ফিরিয়ে আনে।
নিচের উদাহরণটি

এবং <h6> উপাদানের মধ্যে পরবর্তী সকল siblings উপাদান ফিরিয়ে আনেঃ

উদাহরণ
$(document).ready(function(){
$("h2").nextUntil("h6");
});
নিজে চেষ্টা করুন >>

jQuery তে prev(), prevAll() এবং prevUntil() পদ্ধতিঃ
prev(), prevAll() এবং prevUntil() পদ্ধতি উপরে বর্ণিত পদ্ধতির মতই কাজ কওরে কিন্তু কার্যকারিতা বিপরীতঃ তারা পুর্বের siblings উপাদান ফিরিয়ে আনে (DOM ট্রির সামনে খোঁজার বদলে পেছনের দিকে খুজতে থাকে )।

jQuery তে খোঁজার রেফারেন্সঃ
jQuery Traversing পদ্ধতির উপর পরোপুরি ধারনা লাভের জন্য, jQuery Traversing Reference পেইজটিতে যান।

1. লিখেছেন সুদীপ্ত সাহা

জেকুয়্যেরি ট্রাভেসিং-ডিসেন্ডেন্টস
ডিসেন্ডেন্টস হল চাইল্ড, গ্র্যান্ডচাইন্ড, গ্রেট-গ্র্যান্ডচাইন্ড এবং একইভাবে আরও... অর্থাৎ উত্তরসূত্রি। জেকুয়্যেরির সাহায্যে আপনি DOMট্রি কে ট্রাভার্স ডাউনের মাধ্যমে কোন ইলিমেন্ট্র ডিসেন্ডন্টগুলো খুজে দেখতে পারবেন।
DOMট্রি এর ট্রাভাসিং ডাউন
DOMট্রি কে ট্রাভাসিং ডাউনের জন্য দুটি উপযোগী জেকুয়্যেরি মেথড হলঃ
▪children()
▪ find()

জেকুয়্যেরি children() মেথড
children() মেথড কোন সিলেক্টেড ইলিমেন্টের সকল ডিরেক্ট চিলড্রেনকে রিটার্ন করে। এই মেথড DOMট্রি কে শুধুমাত্র একটি লেভেলে ট্রাভাসি ডাউন করে। নিচের উদাহরনটি প্রত্যেক <div> এর সকল ডিরেক্ট চিলড্রেন ইলিমেন্টকে রিটার্ন করেঃ
$(document).ready(function(){
$("div").children();
});

সার্চ রেজাল্টের জন্য চিলড্রেন ইলিমেন্টকে ফিল্টার করতে আপনি অপশনাল একটি প্যারামিটার ব্যবহার করতে পারেন। নিচের উদাহরনটি প্রত্যেক <div> এর <p> ইলিমেন্ট এবং ক্লাসনেম "1" এরকম সকল ডিরেক্ট চিলড্রেনকে রিটার্ন করেঃ
$(document).ready(function(){
$("div").children("p.1");
});

জেকুয়্যেরি find()মেথড
find() মেথড ফেরত আনে ডিসেন্ডেন্ট ইলিমেন্ট সমূহের নির্ধারিত ইলিমেন্ট। নিচের উদাহরনটি প্রত্যেক <span> ইলিমেন্ট এরকম ডিসেন্ডেন্টকে <div>: রিটার্ন করেঃ
$(document).ready(function(){
$("div").find("span");
});

নিচের উদাহরনটি রিটার্ন করে প্রত্যেক ডিসেন্ডেন্টকে <div>:
$(document).ready(function(){
$("div").find("*");
});

Sheikh Mahfuzur Rahman
Author at BloggersEcho.Com
Bengali Word Count: 280
জেকোয়ারি - কনটেন্ট ও এলিমেন্ট পাওয়া বা নির্বাচন করা

ওয়েব স্ক্রিপ্টিং ল্যাঙ্গুয়েজগুলোর মধ্যে জেকোয়ারি(jQuery) হলো অত্যন্ত গুরুত্বপূর্ণ ও শক্তিশালী একটি প্রোগ্রামিং ল্যাঙ্গুয়েজ। জেকোয়ারি হলো এমন কতগুলো পদ্ধতি বা কৌশল এর সমন্বয় যার মাধ্যমে এইচটিএমএল(HTML) বা এক্সএইচটিএমএল(XHTML) ডকুমেন্টের যেকোন এলিমেন্ট বা এট্রিবিউটকে নির্বাচন এবং পরিচালনা করা সম্ভব।

জেকোয়ারি ডম ম্যানিপিউলেশন(Manipulation)

জেকোয়ারির একটি গুরুত্বপূর্ণ অংশ হলো ডমকে(DOM) ম্যানিপিউলেট বা প্রয়োজনমতো পরিচালনা করা। প্রথমে জেনে নেয়া যাক ডম কিঃ

ডম হলো ডকুমেন্ট অবজেক্ট মডেল(Document Object Model) যা এইচটিএমএল এবং এক্সএইচটিএমএল ডকুমেন্টকে অ্যাক্সেস করার আদর্শ(Standard) নির্ধারিত করে দেয়। অর্থাৎ পুর্বোক্ত দুটি ভাষাকে( HTML ও XHTML) কোন পদ্ধতি ব্যবহার করে প্রোগ্রামিং করা যাবে তা নির্ধারণ করে ডম। ডব্লিওথ্রিসি'র(W3C) সংজ্ঞানুযায়ী ডম হলো একটি প্লাটফর্ম এবং ল্যাঙ্গুয়েজ-নির্বিশেষ ইন্টারফেস যা প্রোগ্রাম ও স্ক্রিপ্টসমূহকে (যেমন JavaScript, jQuery) ডাইনামিকভাবে কোন ডকুমেন্টের কন্টেন্ট, স্ট্রাকচার(গঠন) এবং স্টাইল অ্যাক্সেস ও আপডেট করার সুযোগ করে দেয়।

জেকোয়ারি কতগুলো ডম সংশ্লিষ্ট পদ্ধতি নিয়ে গঠিত হয়েছে যার মধ্যমে সহজেই এলিম্যান্ট এবং এট্রিবিউটকে নিজের প্রয়োজনমত পরিবর্তন ও পরিচালনা করা যায়।

কন্টেন্ট নির্বাচন – text(), html(), এবং val()

ডম ম্যানিপিউলেশন করার তিনটি সহজ কিন্তু কার্যকর পদ্ধতি হলোঃ

text() - কতগুলো নির্বাচিত এলিমেন্টের টেক্সট কনন্টেকে নির্ধারণ(Set) বা ফেরত(Return) পাঠায়
html() - নির্বাচিত এলিমেন্টগুলোর(এইচটিএমএল মার্কআপসহ) কন্টেন্ট নির্ধারণ অথবা ফেরত পাঠায়।
val() - ফর্ম ফিল্ডগুলোর মান(Value) নির্ধারণ বা ফেরত পাঠায়।

কিভাবে text() এবং html() মেথডের মাধ্যমে কন্টেন্ট পাওয়া বা নির্বাচন যায় তা নিচের উদাহরণটির মাধ্যমে বুঝা যাবেঃ

$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

নিচের উদাহরণটি জেকোয়ারি val() মেথডের মাধ্যমে কোন ইনপুট ফিল্ডের মান নির্বাচন করার() কৌশল ব্যাখ্যা করা করেঃ

$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});

এট্রিবিউট নির্বাচন - attr()

কোন এইচটিএমএল বা এক্সএইচটিএমএল ডকুমেন্টের এট্রিবিউটগুলোর ভ্যালু এই মেথডের মাধ্যমে পাওয়া যায়। নিচের উদাহরণটি দেখুন, কোন লিংকে কিভাবে এট্রিবিউটের ভ্যালু পাওয়া সম্ভব তা এর মাধ্যমে বুঝা যাবেঃ

$("button").click(function(){
alert($("#w3s").attr("href"));
});

এই ছিল জেকোয়ারির মাধ্যমে এইচটিএমএল ও এক্সএইচটিএমএল ডকুমেন্ট এর কন্টেন্ট ও এট্রিবিউট নির্বাচন বা পাওয়ার উপায়। পরবর্তী টিউটোরিয়ালে কন্টেন্টের ভ্যালু বা মান নির্ধারণ ও পরিবর্তন করার ব্যাপারে আলোচনা করা হবে।

আপনার ওয়েব পেজ এ যেভাবে jQuery যোগ করবেন
Name: Md. Ariful Islam
============================================
আপনার ওয়েব সাইটে jQuery ব্যবহার করার জন্য বেশ কিছু উপায় আছে।যেমন:
*JQuery.com থেকে jQuery লাইব্রেরি ডাউনলোড করে ব্যবহার করা।
*অথবা, CDN থেকে jQuery ব্যবহার করা।যেমন: গুগল, মাইক্রোসফট

jQuery ডাউনলোড করে ব্যবহার-
…………………………………………………
ডাউনলোড করার জন্য jQuery এর দুটি সংস্করণ পাওয়া যায়।সেগুলি হল:
১. Production সংস্করণ।-এটা minified version এটাকে সংকুচিত করা হয়েছে, কারণ এটা আপনার লাইভ ওয়েবসাইট এ ব্যবহার করার জন্য।এটা জায়গা কম নেয়।
২. Development সংস্করণ।-এটা পরীক্ষামূলক ব্যবহার করার জন্য এবং এটা একটা পাঠযোগ্য কোড।এটার বিস্তারিত আমরা পরবর্তীতে জনবো।

দুটি সংস্করণই jQuery.com থেকে ডাউনলোড করা যাবে।

JQuery লাইব্রেরি একটি একক জাভাস্ক্রিপ্ট ফাইল এবং এটা এইচটিএমএল “

আপনার ডাউনলোড করা jQuery ফাইলটি পেজ এর একই ডিরেক্টরির মধ্যে রাখুন।

আপনি কি আশ্চর্য হচ্ছেন কেন আমরা

Microsoft CDN:

গুগল বা মাইক্রোসফট থেকে হোস্ট থেকে jQuery ব্যবহার করার বড় সুবিধা হল:
CDN থেকে call করলে net connection থাকতে হবে আর website দ্রুত load হবে।ব্যবহারকারী অন্য সাইট ভিজিট করার সময় যখন গুগল বা মাইক্রোসফট থেকে jQuery ডাউনলোড করে তখন তা তার browser এর cache তে থাকে । পরবর্তীতে অন্য কোন jQuery সাইট ভিজিট করলে website টি cache থেকে jquery ডাটা নিয়ে খুব দ্রুত লোড হয়।

অনুবাদক: ফয়সাল রকি

jQuery হলো JavaScript এর সমগ্র বা Library. JavaScript প্রোগ্রামকে সহজীকরণ করে। এর সাহায্যে জটিলতম JavaScript প্রোগ্রামগুলোকে সহজে একসূত্রে গাঁথা যায়। খুব সামান্য চেষ্টা এবং শ্রম ব্যয় করে আপনি jQuery শিখতে পারবেন।

এই ওয়েবসাইটের প্রতি অনুচ্ছেদে "নিজে চেষ্টা কর" রয়েছে।
আমাদের অনলাইন এডিটরের সাহায্যে আপনি সহজে কোড এডিট করতে এবং ফলাফল দেখতে পারবেন।

উদাহরণ:
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});

"নিজে চেষ্টা কর" বাটনে ক্লিক করুন এবং এর ফলাফল দেখুন।

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

jQuery কুইজ টেস্ট
এই ওয়েবসাইটে jQuery এর পর্যাপ্ত পরিমাণ কুইজ টেস্ট রয়েছে। এসকল কুইজে অংশ নিয়ে আপনি আপনার jQuery দক্ষতা পরীক্ষা করতে পারবেন সহজেই।

jQuery রেফারেন্স
jQuery এর পরিপূর্ণ শিক্ষণের জন্য এর অবজেক্ট ও মেথড সম্পর্কে যথার্থ শিক্ষা উপকরণ প্রয়োজন। এই ওয়েবসাইটে অবজেক্ট ও মেথড সম্পর্কে পরিপূর্ণ রেফারেন্স পাওয়া যায়।

-----------------