জেকুয়েরি

ডেভসংকেত

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

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

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

$(selector).action();

ইভেন্ট মেথড

$(document).ready();

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

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

$('*')

id='test' যুক্ত সকল এলিমেন্টকে সিলেক্ট করতে

$('#test')

class='demo' যুক্ত সকল এলিমেন্টকে সিলেক্ট করতে

$('.demo')

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

$('.demo, .test')

সকল <h4>, <div> এবং <p> এলিমেন্টকে সিলেক্ট করতে

$('h4,div,p')

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

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

$(selector).click();

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

$(selector).dblclick();

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

$(selector).mouseenter();

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

$(selector).mouseleave();

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

$(selector).mousedown();

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

$(selector).mouseup();

ফরম এলিমেন্টের ইনপুট ফিল্ডে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে

$(selector).focus();

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

ফরম এলিমেন্টের ইনপুট ফিল্ডে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে

$(selector).blur();

ফরম এলিমেন্টে কোন পরিবর্তন ঘটলে ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে

$(selector).change();

এলিমেন্টে এক বা একাধিক ইভেন্ট হ্যান্ডলার সংযুক্ত করতে

$(selector).on();

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

$(selector).hover();

কোন নির্দিষ্ট সেকশনে স্ক্রল করার সাথে সাথে যে ইভেন্ট কল হয়

$(selector).scroll(function() {})

চাইল্ড এলিমেন্টে ক্লিক করার সাথে সাথে প্যারেন্ট এলিমেন্টে বাবল হওয়া বন্ধ করে

event.stopPropagation()

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

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

$(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();

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

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

$(selector).text();

এলিমেন্টের মার্কআপ সহ কন্টেন্ট রিটার্ন করতে

$(selector).html();

ফর্ম এলিমেন্টের ভ্যালু রিটার্ন করতে

$(selector).val();

এট্রিবিউটের ভ্যালু পাওয়ার জন্যে

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

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

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

$(selector).text('write something');

এলিমেন্টের মার্কআপ সহ কন্টেন্ট সেট করতে

$(selector).html('<h3>hello world</h3>');

ফর্ম এলিমেন্টের ভ্যালু সেট করতে

$(selector).val('zihadul islam');

এট্রিবিউটের ভ্যালু পরিবর্তন করতে

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

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

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

$(selector).append();

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

$(selector).prepend();

এলিমেন্টের পরে নতুন কন্টেন্ট যুক্ত করতে

$(selector).after();

এলিমেন্টের আগে নতুন কন্টেন্ট যুক্ত করতে

$(selector).before();

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

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

$(selector).remove();

এলিমেন্টের চাইল্ড এলিমেন্টকে রিমুভ করতে

$(selector).empty();

রিমুভ করার জন্য এলিমেন্ট ফিল্টার করতে

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

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

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

$(selector).addClass('className');

এলিমেন্ট থেকে এক বা তার অধিক ক্লাস রিমোভ করতে

$(selector).removeClass('className');

এলিমেন্ট থেকে ক্লাস যুক্ত/রিমোভ করতে

$(selector).toggleClass('className');

এলিমেন্টে স্টাইল এট্রিবিউট রিটার্ন করতে

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

এলিমেন্টে স্টাইল এট্রিবিউট সেট করতে

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

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

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

$(selector).width();

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

$(selector).height();

এলিমেন্টের প্রস্থ (প্যাডিং সহকারে) রিটার্ন করতে

$(selector).innerWidth();

এলিমেন্টের উচ্চতা (প্যাডিং সহকারে) রিটার্ন করতে

$(selector).innerHeight();

এলিমেন্টের প্রস্থ (প্যাডিং এবং বর্ডার সহকারে) রিটার্ন করতে

$(selector).outerWidth();

এলিমেন্টের উচ্চতা (প্যাডিং এবং বর্ডার সহকারে) রিটার্ন করতে

$(selector).outerHeight();

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

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

$(selector).parent();

এলিমেন্টের সকল পূর্বসূরিকে ফেরত পাওয়ার জন্য

$(selector).parents();

দুইটি এলিমেন্টের মধ্যবর্তী সকল পূর্বসূরীকে খুঁজে বের করার জন্য

$(selector).parentsUntil();

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

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

$(selector).children();

এলিমেন্টের সকল উত্তরসূরী এলিমেন্টকে খুঁজে পাওয়ার জন্য

$(selector).find();

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

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

$(selector).siblings();

এলিমেন্টের পরবর্তী সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

$(selector).next();

এলিমেন্টের পরবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

$(selector).nextAll();

দুটি আর্গুমেন্টের মধ্যবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

$(selector).nextUntil();

এলিমেন্টের পূর্ববর্তী সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

$(selector).prev();

এলিমেন্টের পূর্ববর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

$(selector).prevAll();

দুটি আর্গুমেন্টের মধ্যবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য

$(selector).prevUntil();

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

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

$(selector).first();

এলিমেন্টের শেষ এলিমেন্টকে রিটার্ণ করতে

$(selector).last();

এলিমেন্টের ইনডেক্স অনুসারে কাঙ্ক্ষিত এলিমেন্টকে রিটার্ণ করতে

$(selector).eq();

মানদণ্ডের উপর ভিত্তি করে কোনো এলিমেন্টকে রিটার্ণ করতে

$(selector).filter();

filter() মেথডের বিপরীত

$(selector).not();

জেকুয়েরি - এজ্যাক্স

সার্ভারে HTTP GET রিকুয়েস্ট পাঠিয়ে কাঙ্ক্ষিত ডেটা পেতে

$.get('URL/file_name.ext', function(data, status){})

সার্ভারে HTTP POST রিকুয়েস্ট এ কিছু ডাটা পাঠিয়ে এক্সিকিউটেড ডেটা পেতে

$.post('URL/file_name.ext', data, function(data, status){})

এই চিটশিটে কন্ট্রিবিউট করেছেনঃ

  • zonayedpca

    Zonayed Ahmed

    username/zonayedpca

  • hasanfardous

    Md Hasan Fardous

    username/hasanfardous

  • iamraufu

    iamraufu

    username/iamraufu

  • lahin31

    MuhammadLahin

    username/lahin31

  • zuizihad

    zuizihad

    username/zuizihad

ডেভসংকেত

বাংলা চিটশিটের ভান্ডার

devsonket.com

প্রিন্ট করুন