জেকুয়েরির ব্যবহার
ওয়েব পেজে জেকুয়েরি যুক্ত করা
আপনি দুইটি উপায়ে জেকুয়েরি লাইব্রেরীকে একটি ওয়েব পেজে যুক্ত করতে পারেন। উপায় সমূহ নিম্নে দেওয়া হলোঃ
jQuery.comথেকে জেকুয়েরি লাইব্রেরী ডাউনলোড করে<script>ট্যাগের মাধ্যমে যুক্ত করা।- <script> ট্যাগের মাধ্যমে কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) এর সাথে সংযোগ দিয়ে।
জেকুয়েরি ডাউনলোড
জেকুয়েরির দুইটি ভার্সন রয়েছে। ইচ্ছা করলে আপনি দুইটি ভার্সনই ডাউনলোড করতে পারেনঃ
- প্রোডাকশন ভার্সন - সাধারণত লাইভ ওয়েবসাইটের জন্য ব্যবহার করা হয় কারন এটি মিনিফাইড(Minified) এবং কমপ্রেসড(Compressed) ফাইল।
- ডেভেলপমেন্ট ভার্সন - সাধারণত কোনো ওয়েবসাইট ডেভেলপমেন্ট এবং টেস্টের জন্য ব্যবহার করা হয়। কারন এই ফাইলটি খুব সহজেই পড়া এবং এডিট করা যায়।
আপনি উপরের দুটি ভার্সনই 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>
ফলাফল