ডেভসংকেত

জেকুয়েরি

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

কন্ট্রিবিউটর

  • zonayedpca
  • hasanfardous
  • iamraufu
  • lahin31
  • zuizihad

শেয়ার করুন

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

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

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

    $(document).ready();

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

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

    $(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).text();
  • এলিমেন্টের মার্কআপ সহ কন্টেন্ট রিটার্ন করতে

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

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

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

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

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

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

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

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

    $(selector).before();

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

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

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

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

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

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

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

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

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

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

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

    $(selector).parentsUntil();

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

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

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

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

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

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

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

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

    $(selector).prevUntil();

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

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

    $.get('URL/file_name.ext', function(data, status){})
  • সার্ভারে HTTP POST রিকুয়েস্ট এ কিছু ডাটা পাঠিয়ে এক্সিকিউটেড ডেটা পেতে

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

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

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

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

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

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

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

    $('h4,div,p')

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

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

    $(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('write something');
  • এলিমেন্টের মার্কআপ সহ কন্টেন্ট সেট করতে

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    $(selector).outerHeight();

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

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

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

    $(selector).find();

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

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

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

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

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

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

    $(selector).not();

ডেভসংকেত সম্পর্কে

ডেভসংকেত এর লক্ষ্য হচ্ছে বাংলাতে একটা বড় চিটশিটের ভান্ডার গড়ে তোলা। এটা সম্পূর্ণ স্বাধীন এবং ওপেন সোর্স গিটহাব অর্গানাইজেশন।

স্পন্সর