ডেভসংকেত

জেকুয়েরি

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

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

    শেয়ার করুন

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

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

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

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

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

    স্পন্সর