জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
লগইন
 

জেকুয়েরি টিউটোরিয়াল - Jquery Tutorial



জেকুয়েরি | jquery


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

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



আমাদের প্রতিটি পরিচ্ছেদে আছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copy করার একটি অপশন দেখতে পাবেন। copy অপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।

আপনি আপনার এডিটর ওপেন করে copy করা কোড paste করতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।



উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").hide();
    });
  });
  </script>
</head>
<body>

  <h2>এটি একটি হেডিং।</h2>
  <p>এটি একটি প্যারাগ্রাফ।</p>
  <p>এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
  <button>ক্লিক করুন</button>

</body>
</html>

ফলাফল




জেকুয়েরি উদাহরণ

উদাহরণের মাধ্যমে জেকুয়েরি শিখুন! কেননা একটি উদাহরণ এক হাজার শব্দের চেয়েও উত্তম। আমাদের জেকুয়েরি টিউটোরিয়ালে অসংখ্য উদাহরণ দেখতে পাবেন, যেগুলোর মাধ্যমে আপনি খুব সহজেই জেকুয়েরি শিখতে পারবেন।


জেকুয়েরির মূল উদ্দেশ্য হলো কোনো ওয়েবসাইটে জাভাস্ক্রিপ্টকে সহজভাবে ব্যবহার করা।


জেকুয়েরি টিউটোরিয়ালটি আরম্ভ করার পূর্বে আপনাকে কি কি জানতে হবে?

এটা শেখা আরম্ভ করার পূর্বে আপনাকে নিম্নোক্ত বিষয়গুলো জানতে হবে?

স্ব-স্ব লিংক ভিজিট করে আপনি উপরের বিষয়গুলো শিখতে পারেন।


জেকুয়েরি কি?(What is jQuery?)

জেকুয়েরি "খুবই সহজ এবং কথা কম কাজ বেশি" টাইপের একটি জাভাস্ক্রিপ্ট লাইব্রেরী। এটার মূল উদ্দেশ্যই হচ্ছে আপনার ওয়েবসাইটে জাভাস্ক্রিপ্টের ব্যবহার সহজ করা।

জাভাস্ক্রিপ্টের একাধিক লাইনের কোড লিখে যে কাজ সম্পন্ন করা হয় তা জেকুয়েরির শুধুমাত্র এক লাইনের কোড লিখেই করা সম্ভব।

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

আপনার প্রয়োজন অনুযায়ী ঐ মেথডগুলো রেফারেন্স হিসাবে ব্যবহার করে সংশ্লিষ্ট কাজ গুলো আপনি খুব সহজেই সমাধান করতে পারবেন।

এছাড়া জাভাস্ক্রিপ্টের Ajax এবং DOM এর মত কঠিন বিষয়গুলোকেও জেকুয়েরি খুবই সহজ করে তুলেছে।

জেকুয়েরি লাইব্রেরীর মধ্যে নিম্নোক্ত বৈশিষ্ট্যগুলো বিদ্যমানঃ

  1. ডোম(DOM) মেথড
  2. সিএসএস মেথড
  3. এইচটিএমএল ইভেন্ট মেথড
  4. এনিমেশন মেথড
  5. এজাক্স মেথড
  6. ইউটিলিটি মেথড
পরামর্শঃ উপরোক্ত বৈশিষ্ট্যগুলো ছাড়াও প্রয়োজনীয় কাজ করার জন্য আপনি জেকুয়েরি প্লাগইন ব্যবহার করতে পারেন।

কেন জেকুয়েরি ব্যবহার করবেন?

জাভাস্ক্রিপ্টের অসংখ্য লাইব্রেরী/ফ্রেমওয়ার্ক রয়েছে। কিন্তু জেকুয়েরি অনেক জনপ্রিয়। কারণ এটি জাভাস্ক্রিপ্টের একটি সিদ্ধ লাইব্রেরী।

অনেক বড় বড় কোম্পানিও জেকুয়েরি ব্যবহার করে। যেমনঃ


জেকুয়েরির ব্রাউজার সাপোর্টঃ

জেকুয়েরি ডেভেলপার টিম ক্রস ব্রাউজার ইস্যুগুলো খুব ভাল ভাবেই জানেন এবং সেই জ্ঞানকেই তারা জেকুয়েরি লাইব্রেরীতে প্রয়োগ করেছে। এজন্য IE ভার্সন-৬ সহ সকল ব্রাউজারেই জেকুয়েরি খুব ভাল ভাবেই সাপোর্ট করে।


ওয়েব পেজে জেকুয়েরি যুক্ত করা

আপনি দুইটি উপায়ে জেকুয়েরি লাইব্রেরীকে একটি ওয়েব পেজে যুক্ত করতে পারেন। উপায় সমূহ নিম্নে দেওয়া হলোঃ

  1. jQuery.com থেকে জেকুয়েরি লাইব্রেরী ডাউনলোড করে <script>ট্যাগের মাধ্যমে যুক্ত করা।
  2. <script> ট্যাগের মাধ্যমে কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) এর সাথে সংযোগ দিয়ে।

জেকুয়েরি ডাউনলোড

জেকুয়েরির দুইটি ভার্সন রয়েছে। ইচ্ছা করলে আপনি দুইটি ভার্সনই ডাউনলোড করতে পারেনঃ

আপনি উপরের দুটি ভার্সনই jQuery.com থেকে ডাউনলোড করতে পারবেন।

যেহেতু জেকুয়েরি লাইব্রেরী একটি একক জাভাস্ক্রিপ্ট ফাইল। সুতরাং এইচটিএমএল ডকুমেন্টের সাথে জেকুয়েরি লাইব্রেরীকে সংযোগ করতে <head> সেকশনের মধ্যে <script> এলিমেন্টের scr এট্রিবিউটের মাধ্যমে যুক্ত করতে পারবেন।

<head>
<script src="jquery-3.1.1.min.js"></script>
</head>
সর্তকতাঃ যে পেজের মধ্যে জেকুয়েরি লাইব্রেরী ব্যবহার করবেন সেই পেজটি এবং জেকুয়েরি লাইব্ররেরী একই ডিরেক্টরিতে রাখুন। অর্থাৎ এইচটিএমএল ডকুমেন্টের সাথে সিএসএস এবং জাভাস্ক্রিপ্ট এর এক্সটার্নাল ফাইল যেভাবে লিংক করা হয় ঠিক একই নিয়মই অনুসরন করুন।


আপনি কি বিস্মিত হলেন! <script> এলিমেন্টের মধ্যে কেন type="text/javascript" ব্যবহার করিনি?

এটা এইচটিএমএল(৫)-এ ব্যবহার করা বাধ্যতামূলক না। কারন এইচটিএমএল(৫) এবং অধিকাংশ ব্রাউজারে ডিফল্টভাবে জাভাস্ক্রিপ্ট থাকে।


জেকুয়েরি সিডিএন (CDN)

আপনি যদি জেকুয়েরি ডাউলোড এবং হোস্ট করতে না চান সেক্ষেত্রে কন্টেন্ট ডেলিভারি নেটওয়ার্কের (CDN) মাধ্যমে জেকুয়েরি লাইব্রেরীকে আপনার ওয়েবসাইটের সাথে সংযোগ দিতে পারেন। এক্ষেত্রেও লাইব্রেরীটি এমনভাবে কাজ করবে যেন আপনার সাইটেরই কোনো ডিরেক্টরিতে এটি সংরক্ষিত আছে বলে মনে হবে।

গুগল এবং মাইক্রোসফট উভয়ই জেকুয়েরি হোস্ট করে। এদের থেকে জেকুয়েরি হোস্টিং নিতে চাইলে নিচের যেকোনো একটি নিয়ম অনুসরন করুনঃ

গুগল সিডিএন (CDN):

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").hide();
    });
  });
  </script>
</head>
<body>

  <h2>এটি একটি হেডিং।</h2>
  <p>এটি একটি প্যারাগ্রাফ।</p>
  <p>এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
  <button>ক্লিক করুন</button>

</body>
</html>

ফলাফল





মাইক্রোসফট সিডিএন (CDN):

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").hide();
    });
  });
  </script>
</head>
<body>

  <h2>এটি একটি হেডিং।</h2>
  <p>এটি একটি প্যারাগ্রাফ।</p>
  <p>এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
  <button>ক্লিক করুন</button>

</body>
</html>

ফলাফল




জেকুয়েরি রেফারেন্স

আমাদের জেকুয়েরি টিউটোরিয়ালে অবজেক্ট এবং মেথডের সম্পূর্ণ রেফারেন্স রয়েছে।

রেফারেন্স পেতে ভিজিট করুন জেকুয়েরি রেফারেন্স


জেকুয়েরি টিউটোরিয়াল লিস্ট


জেকুয়েরি ব্যাসিক টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction শুরু করুন-Get Started গঠনপ্রনালী-Syntax সিলেক্টর-Selector ইভেন্ট-Event

জেকুয়েরি ইফেক্ট টিউটোরিয়াল

হাইড/শো-Hide/Show ফেইড-Fade স্লাইড-Slide এনিমেশন-Animation জেকুয়েরি stop() কলব্যাক-Callback চেইনিং-Chaining

জেকুয়েরি এইচটিএমএল টিউটোরিয়াল

জেকুয়েরি Get জেকুয়েরি Set জেকুয়েরি Add জেকুয়েরি Remove জেকুয়েরি সিএসএস ক্লাস জেকুয়েরি সিএসএস জেকুয়েরি Dimension

জেকুয়েরি ট্রাভার্সিং টিউটোরিয়াল

ট্রাভার্সিং-Traversing পূর্বসূরি-Ancestor উত্তরসূরি-Descendant সিবলিং-Sibling ফিল্টার-Filter

জেকুয়েরি অ্যাজাক্স টিউটোরিয়াল

অ্যাজাক্স পরিচিতি-AJAX জেকুয়েরি অ্যাজাক্স Load জেকুয়েরি আজাক্স Get/Post

জেকুয়েরি বিবিধ টিউটোরিয়াল

জেকুয়েরি noConflict()