jQuery first application : Basic

jQuery first application : Basic

 

প্রথমে যেকোন নামে একটি Folder তৈরী করে ডাউনলোডকৃত jquery framework টি (jquery_latest.js) এই ফোল্ডারে রাখুন।এই ফোল্ডারে আরও দুটি ফাইল বানান . index.html এবং . style.css

এবার index.html ফাইলে নিচের কোড লিখুন

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<script  src="/jquery_latest.js" type="text/javascript"></script>

05.<script type="text/javascript">

06.$(document).ready(function(){

07.$(".myheader").hide();

08.$(".mypara").click(function(){

09.$(".myheader").show();

10.});

11.});

12.</script>

13.</head>

14.<body>

15.<h2 class="myheader">JQUERY tutorials</h2>

16.<p class="mypara">spfoundationbd is nice tutorial site</p>

17.</body>

18.</html>

Output

নিচে " spfoundationbd is nice tutorial site" এই লাইনে Click করুন

spfoundationbd is nice tutorial site

ব্যাখ্যা: নম্বর লাইনটি দেখুন,এভাবে (Jqueyr ফ্রেমওয়ার্কটি) স্ক্রিপ্টটি লোড করেছি।আপনি চাইলে এই Framework অনলাইন থেকে লোড করাতে পারেন,যেমন গুগল এই ফ্রেমওয়ার্ক তার লাইব্রেরিতে রেখেছে এবং আপনি নম্বর লাইন বাদ দিয়ে নিচের মত লিখলেও হবে

1.<script  src="https://ajax.googleapis.com/ajax/libs

2./jquery/1.8.1/jquery.min.js" type="text/javascript">

3.</script>

script ট্যাগের src এট্রিবিউটে ফাইলটির ঠিকানা দিতে হয়।এরপর আবার <script> </script> ট্যাগের ভিতর জেকোয়েরির code লিখেছি,

1.$(document).ready(function(){

2.$(".myheader").hide();

3.$(".mypara").click(function(){

4.$(".myheader").show();

5.});

6.});

7.</script>

যেহেতু  HTML এর Element নিয়েই জেকোয়েরির কাজ তাই html আগে লোড করে তারপর jquery কে Execute করানো উচিৎ।এখানে প্রথম লাইন দ্বারা এই কাজটিই হচ্ছে অর্থ্যাৎ  $(document).ready(); দ্বারা বলা হচ্ছে যে আগে পুরো এইচটিএমএল ডকুমেন্ট টুকু লোড হবে তারপর জেকোয়েরির ফাংশনগুলি কাজ শুরু করবে।(তাই দেখুন ready ফাংশনের প্রথম বন্ধনীর মধ্যে বাকি সবগুলি কোড বা ফাংশনগুলি রাখা হয়েছে)

** $(document).ready(); এই লাইনকে সংক্ষিপ্ত করে নিচের মত করে লেখা যায়

1.$(function(){

2.//code goes here

3.});

এরপর আসল জেকোয়েরির কোড শুরু হয়েছে।$(".myheader").hide(); এই লাইনে myheader নামে যে ক্লাসটি এইচটিএমএল কোডে আছে সেটি প্রথমে সিলেক্ট করা হয়েছে।

উল্লেখ্য যে, জেকোয়েরি কোড লেখার নিয়মই এটা যে সব আগে ডলার সাইন ($) বা jQuery

এই শব্দটি লিখে এরপর প্রথম বন্ধনীতে সিঙ্গেল বা ডাবল কোটেশন এর ভিতর সিএসএস সিলেক্টর টি লিখতে হয় (যে এইচটিএমএল এলিমেন্টটি তে কাজ করবেন তার আইডি, ক্লাস অর্থ্যাৎ তার সিলেক্টর)।সবশেষে ডট (.) চিহ্ন দিয়ে জেকোয়েরির মেথডটি দিতে হয়।যেমন আমি দিয়েছি hide() মেথড।এই মেথড সিলেক্টেড এলিমেন্টকে লুকিয়ে রাখে।এরুপ আরও অনেক ফাংশন তাদের সাইটে গিয়ে দেখতে পারেন,সেখানে বিস্তারিত বিবরন আছে।এই ফাংশনগুলিই ভালভাবে জানতে হবে এবং প্রয়োগ শিখতে হবে।

এরপরের লাইনে mypara ক্লাস সম্বলিত যে প্যারাগ্রাফটি আছে সেটি সিলেক্ট করেছি এবং ডট দিয়ে click ইভেন্ট হ্যান্ডলার ব্যবহার করেছি।এখন এই প্যারাগ্রাফের উপর ক্লিক করলে (অর্থ্যাৎ ক্লিক ইভেন্ট ঘটলে) ঐটা হবে যেটা এই click() ইভেন্ট হ্যান্ডলার এর ভিতর আছে (প্রথম বন্ধনীর ভিতর)

এখন আমার myheader ক্লাস সম্বলিত হেডার টি বের করে আনার দরকার যখন কেউ mypara ক্লাস সম্বলিত প্যারাগ্রাফে ক্লিক করবে।তাই myheader সিলেক্ট করেছি এবং show() মেথড দিয়ে বের করে এনেছি যেটা পেজ লোড হবার পর লুকানো থাকবে।show ফাংশন এভাবেই লুকানো element কে বের করে আনার জন্য ব্যবহৃত হয়।

এই হল জেকোয়েরির একদম মৌলিক ধারনা।জেকোয়েরির সাইটে গিয়ে আরও কিছু function দেখুন এবং এভাবে ছোট ছোট কোড লিখে অনুশীলন করুন তাহলে ধারনা স্বচ্ছ হয়ে যাবে।