জেকুয়েরি

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

জেকুয়েরি শুরুর আগে

Link
  • জেকুয়েরির মৌলিক সিনট্যাক্স

    $(selector).action();
  • ইভেন্ট মেথড

    $(document).ready();

জেকুয়েরি সিলেক্টর সমূহ

Link
  • সকল এলিমেন্টকে সিলেক্ট করতে

    $('*')
  • id='test' যুক্ত সকল এলিমেন্টকে সিলেক্ট করতে

    $('#test')
  • class='demo' যুক্ত সকল এলিমেন্টকে সিলেক্ট করতে

    $('.demo')
  • ক্লাস 'demo' অথবা 'test' যুক্ত সকল এলিমেন্টকে সিলেক্ট করতে

    $('.demo, .test')
  • সকল <h4>, <div> এবং <p> এলিমেন্টকে সিলেক্ট করতে

    $('h4,div,p')

জেকুয়েরি ইভেন্ট মেথড

Link
  • এলিমেন্টে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। এইচটিএমএল এলিমেন্টের উপর ক্লিক করলে ফাংশনটি এক্সিকিউট হয়

    $(selector).click();
  • এলিমেন্টে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। এইচটিএমএল এলিমেন্টের উপর ডাবল-ক্লিক করলে ফাংশনটি এক্সিকিউট হয়

    $(selector).dblclick();
  • এলিমেন্টে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। এইচটিএমএল এলিমেন্টের উপর মাউসের পয়েন্টারটি নিয়ে আসলে ফাংশনটি এক্সিকিউট হয়

    $(selector).mouseenter();
  • এলিমেন্টে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। এইচটিএমএল এলিমেন্টের উপর মাউসের পয়েন্টারটি সরিয়ে নিয়ে আসলে ফাংশনটি এক্সিকিউট হয়

    $(selector).mouseleave();
  • এলিমেন্টে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। এইচটিএমএল এলিমেন্টের উপর মাউসের যেকোনো একটি বাটন প্রেস করলে ফাংশনটি এক্সিকিউট হয়

    $(selector).mousedown();
  • এলিমেন্টে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। এইচটিএমএল এলিমেন্টের উপর মাউসের যেকোনো একটি বাটন প্রেস করে ছেড়ে দিলে ফাংশনটি এক্সিকিউট হয়

    $(selector).mouseup();
  • ফরম এলিমেন্টের ইনপুট ফিল্ডে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে

    $(selector).focus();
  • ফরম এলিমেন্টের ইনপুট ফিল্ডে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে

    $(selector).blur();
  • এলিমেন্টে এক বা একাধিক ইভেন্ট হ্যান্ডলার সংযুক্ত করতে

    $(selector).on();
  • mouseenter() এবং mouseleave() এই দুই মেথডের সমন্বয়ে গঠিত

    $(selector).hover();

জেকুয়েরি ইফেক্ট

Link
  • এলিমেন্টকে অদৃশ্য করতে

    $(selector).hide();
  • এলিমেন্টকে দৃশ্যমান করতে

    $(selector).show();
  • হিডেন এলিমেন্টকে প্রদর্শন করা এবং প্রদর্শিত এলিমেন্টকে হাইড করা

    $(selector).toggle();
  • কোনো এলিমেন্টকে হাইড/প্রদর্শন করার গতি নির্ধারণ করতে

    $(selector).toggle(speed);
  • লুকানো এলিমেন্টকে ধীরে ধীরে প্রদর্শন করতে

    $(selector).fadeIn(speed);
  • দৃশ্যমান এলিমেন্টকে ধীরে ধীরে লুকাতে

    $(selector).fadeOut(speed);
  • লুকানো এলিমেন্টকে ধীরে ধীরে দৃশ্যমান করতে এবং দৃশ্যমান এলিমেন্টকে ধীরে ধীরে লুকিয়ে ফেলতে

    $(selector).fadeToggle(speed);
  • একটি রেঞ্জ এর মধ্যবর্তী মান দিয়ে কোনো এলিমেন্টকে স্পষ্ট/অস্পষ্ট করতে

    $(selector).fadeTo(speed);
  • এলিমেন্টকে নিচে স্লাইড করেতে

    $(selector).slideDown(speed);
  • এলিমেন্টকে উপর দিকে স্লাইড করেতে

    $(selector).slideUp(speed);
  • এলিমেন্টকে উপরে নিচে স্লাইড করেতে

    $(selector).slideToggle(speed);
  • কাস্টম এনিমেশন তৈরি করতে

    $(selector).animate({css},speed);
  • এনিমেশন অথবা অন্য যে কোন ইফেক্ট শেষ হওয়ার পূর্বেই বন্ধ করে দেয়ার জন্য

    $(selector).stop();

জেকুয়েরি- এট্রিবিউট এবং কন্টেন্ট খোজা

Link
  • এলিমেন্টের টেক্সট কন্টেন্ট রিটার্ন করতে

    $(selector).text();
  • এলিমেন্টের মার্কআপ সহ কন্টেন্ট রিটার্ন করতে

    $(selector).html();
  • ফর্ম এলিমেন্টের ভ্যালু রিটার্ন করতে

    $(selector).val();
  • এট্রিবিউটের ভ্যালু পাওয়ার জন্যে

    $(selector).attr('attributeName');

জেকুয়েরি- এট্রিবিউট এবং কন্টেন্ট সেট

Link
  • এলিমেন্টের টেক্সট কন্টেন্ট সেট করতে

    $(selector).text('write something');
  • এলিমেন্টের মার্কআপ সহ কন্টেন্ট সেট করতে

    $(selector).html('hello world');
  • ফর্ম এলিমেন্টের ভ্যালু সেট করতে

    $(selector).val('zihadul islam');
  • এট্রিবিউটের ভ্যালু পরিবর্তন করতে

    $(selector).attr('attributeName','value');

জেকুয়েরি - নতুন এলিমেন্ট যুক্ত করা

Link
  • এলিমেন্টের শেষে নতুন কন্টেন্ট যুক্ত করতে

    $(selector).append();
  • এলিমেন্টের শুরুতে নতুন কন্টেন্ট যুক্ত করতে

    $(selector).prepend();
  • এলিমেন্টের পরে নতুন কন্টেন্ট যুক্ত করতে

    $(selector).after();
  • এলিমেন্টের আগে নতুন কন্টেন্ট যুক্ত করতে

    $(selector).before();

জেকুয়েরি - এলিমেন্ট রিমুভ করা

Link
  • এলিমেন্টকে রিমুভ করতে

    $(selector).remove();
  • এলিমেন্টের চাইল্ড এলিমেন্টকে রিমুভ করতে

    $(selector).empty();
  • রিমুভ করার জন্য এলিমেন্ট ফিল্টার করতে

    $(selector).remove('.className, #id');

জেকুয়েরি সিএসএস ক্লাস Get এবং Set

Link
  • এলিমেন্টে এক বা তার অধিক ক্লাস যুক্ত করতে

    $(selector).addClass('className');
  • এলিমেন্ট থেকে এক বা তার অধিক ক্লাস রিমোভ করতে

    $(selector).removeClass('className');
  • এলিমেন্ট থেকে ক্লাস যুক্ত/রিমোভ করতে

    $(selector).toggleClass('className');
  • এলিমেন্টে স্টাইল এট্রিবিউট রিটার্ন করতে

    $(selector).css('propertyName');
  • এলিমেন্টে স্টাইল এট্রিবিউট সেট করতে

    $(selector).css('propertyName','value');

জেকুয়েরি - ডাইমেনশন

Link
  • এলিমেন্টের প্রস্থ (প্যাডিং, বর্ডার এবং মার্জিন ব্যাতীত) সেট/রিটার্ন করতে

    $(selector).width();
  • এলিমেন্টের উচ্চতা (প্যাডিং, বর্ডার এবং মার্জিন ব্যাতীত) সেট/রিটার্ন করতে

    $(selector).height();
  • এলিমেন্টের প্রস্থ (প্যাডিং সহকারে) রিটার্ন করতে

    $(selector).innerWidth();
  • এলিমেন্টের উচ্চতা (প্যাডিং সহকারে) রিটার্ন করতে

    $(selector).innerHeight();
  • এলিমেন্টের প্রস্থ (প্যাডিং এবং বর্ডার সহকারে) রিটার্ন করতে

    $(selector).outerWidth();
  • এলিমেন্টের উচ্চতা (প্যাডিং এবং বর্ডার সহকারে) রিটার্ন করতে

    $(selector).outerHeight();

জেকুয়েরি ট্রাভার্সিং - পূর্বসূরী

Link
  • এলিমেন্টের সরাসরি প্যারেন্ট এলিমেন্টকে খুঁজে পাওয়ার জন্য

    $(selector).parent();
  • এলিমেন্টের সকল পূর্বসূরিকে ফেরত পাওয়ার জন্য

    $(selector).parents();
  • দুইটি এলিমেন্টের মধ্যবর্তী সকল পূর্বসূরীকে খুঁজে বের করার জন্য

    $(selector).parentsUntil();

জেকুয়েরি ট্রাভার্সিং - উত্তরসূরী

Link
  • এলিমেন্টের সরাসরি চাইল্ড এলিমেন্টকে খুঁজে পাওয়ার জন্য

    $(selector).children();
  • এলিমেন্টের সকল উত্তরসূরী এলিমেন্টকে খুঁজে পাওয়ার জন্য

    $(selector).find();

জেকুয়েরি ট্রাভার্সিং - সিবলিং

Link
  • এলিমেন্টের সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

    $(selector).siblings();
  • এলিমেন্টের পরবর্তী সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

    $(selector).next();
  • এলিমেন্টের পরবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

    $(selector).nextAll();
  • দুটি আর্গুমেন্টের মধ্যবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

    $(selector).nextUntil();
  • এলিমেন্টের পূর্ববর্তী সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

    $(selector).prev();
  • এলিমেন্টের পূর্ববর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

    $(selector).prevAll();
  • দুটি আর্গুমেন্টের মধ্যবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

    $(selector).prevUntil();

জেকুয়েরি ট্রাভার্সিং - ফিল্টার

Link
  • এলিমেন্টের প্রথম এলিমেন্টকে রিটার্ণ করতে

    $(selector).first();
  • এলিমেন্টের শেষ এলিমেন্টকে রিটার্ণ করতে

    $(selector).last();
  • এলিমেন্টের ইনডেক্স অনুসারে কাঙ্ক্ষিত এলিমেন্টকে রিটার্ণ করতে

    $(selector).eq();
  • মানদণ্ডের উপর ভিত্তি করে কোনো এলিমেন্টকে রিটার্ণ করতে

    $(selector).filter();
  • filter() মেথডের বিপরীত

    $(selector).not();