Category Archives: JQuery : জেকুএরি
আজ আমরা জেকোয়েরি দিয়ে ওয়েব পেজ এর উপাদান (HTML Elements) গুলোর CSS property (such as display, font-height) পরিবর্তন করা শিখবো
আজ আমরা জেকোয়েরি দিয়ে ওয়েব পেজ এর উপাদান (HTML Elements) গুলোর CSS property (such as display, font-height) পরিবর্তন করা শিখবো । সাথে সাথে উপাদান গুলোর CSS class পরিবরতন করবো যেমন নতুন css class যোগ করা।
লেখাঃ মোস্তাফিজুর ফিরোজ ।
কেমন আছেন সবাই? আজ আমরা জেকোয়েরি দিয়ে সিএসএস ক্লাস পরিচালনা করা শিখবো ।
জেকোয়েরি দিয়ে খুব সহজে সিএসএস ক্লাস গুলোকে পরিচালনা করা যায় ।
জেকোয়েরি দিয়ে সিএসএস পরিচালনাঃ
সিএসএস পরিচালনা করার জন্য জেকোয়েরি এর কয়েকটি পদ্ধতি আছে । আমরা এর ভিতর নিচের পদ্ধতি গুলো অনুসরণ করবো ।
১। addClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস যোগ করা যায় ।
২। removeClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস দূরীভূত করা যায় ।
৩। toggleClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করা যায় ।
৪। css() ঃ স্টাইল এট্রিবিউটকে সেট করে থাকে ।
স্টাইলশিট এর উদাহরণঃ
নিচের উদাহরণটি আজ সবখানে ব্যবহার করবো । তাই খুব ভালভাবে খেয়াল করুন ।
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
১। jQuery addClass() Methodঃ
নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর সাথে কিভাবে ক্লাস এট্রিবিউটস যোগ করতে হয় । যখন ক্লাস যোগ করা হয় তখন অবশ্যই আপনি অনেকগুলো এলিমেন্টস একসাথে নির্বাচন করতে পারবেন ।
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
addClass() method এর মাধ্যমে আপনি একসাথে অনেক গুলো ক্লাস কে নির্দেশনা দিতে পারবেন ।
$("button").click(function(){
$("#div1").addClass("important blue");
});
২। jQuery removeClass() Methodঃ
নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর থেকে কিভাবে ক্লাস এট্রিবিউটসকে দূর করতে হয় ।
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
৩। jQuery toggleClass() Methodঃ
নিচের উদাহরণের মাধ্যমে আমরা দেখতে পাবো jQuery toggleClass() Method ব্যবহার করতে হয় । এই মেথড নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করে ।
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
৪। jQuery css() Methodঃ
এই মেথড স্টাইল এট্রিবিউটকে সেট করে থাকে । এটা অনেকভাবে স্টাইল করে থাকে । তাই পরে এটা নিয়ে একটি পোস্ট করবো ।
তাই এই গুলো আপাতত প্র্যাকটিস করতে থাকুন । দেখা হবে পরবর্তী পোস্টে jQuery css() Method নিয়ে । ততক্ষণ আমাদের সাথেই থাকুন ।
জেকয়ারি এফেক্ট মেথড
জেকয়ারি এফেক্ট মেথড
নয়ন চন্দ্র সরকার
জেকয়ারি হল এমন একটি জাভাস্ক্রিপ্ট লাইব্রি যা সহজ, ছোট এবং সমৃদ্ধ এবং যা, এইচ টি এম এল ডকুমেন্ট গুলোকে একটা এ পি আই এর মাধ্যমে বিভিন্ন ব্রাউজার দক্ষতা সহকারে হস্তচালন করতে সাহায্য করে। নিচে এর এফেক্ট গুলো আলোচনা করা হল।
জেকয়ারির অ্যানিমেশন এফেক্ট তৈরি করতে যে পদ্ধতিগুলো ব্যবহার করা হয়, সেগুলো নিচে আলোচনা করা হল।
“animate ( ) মেথডঃ
এই মেথডটা নিদিষ্ট উপাদানে কাস্টম অ্যানিমেশন রান করে।
clearQueue ( ) মেথডঃ
এই মেথড অপেক্ষারত ফাংশনগুলোকে নিদিষ্ট উপাদান গুলো থেকে দূর করতে সাহায্য করে।
Delay( ) মেথডঃ
এই মেথডের মাধ্যমে সকল অপ্পেক্ষারত ফাংশনগুলোর জন্য একটা ডিলে সেট করা হয়।
Dequeue ( ) মেথডঃ
এটা পরবর্তী ফাংশন কে লাইন থেকে বিতারিত করে ফাংশন টা সম্পাদন করে।
FadeIn ( ) মেথডঃ
নির্বাচিত উপাদানগুলোকে ফেইদ ইন করে।
Fadeout ( ) মেথডঃ
নির্বাচিত উপাদানগুলোকে ফেইদ আউট করে।
fadeTo ( ) মেথডঃ
এই নিয়মটা নিদিষ্ট উপাদানগুলোকে একটা প্রদত্ত অপাছিতিতে ফেইদ ইন বা আউট করে।
fadeToggle ( ) মেথডঃ
এটা ফেইদ ইন এবং আউট এর মধ্যে টগল করে ।
Finish ( ) মেথডঃ
এই মেথডটা সব অপ্পেক্ষারত এনিমেশনগুলোকে নির্দিষ্ট উপাদাগুলথেকে থামতে, দূর করতে অথবা সম্পন্ন করতে সাহায্য করে ।
Hide ( ) মেথডঃ
এটা নির্দিষ্ট উপাদানগুলোকে হাইট করে ।
Queue ( ) মেথডঃ
এটা অপ্পকেক্ষারত ফাংশনগুলোকে নির্দিষ্ট উপদানে দেখায় ।
Show ( ) মেথডঃ
এটা সো করায়
Slidedown ( ) মেথডঃ
এটা নির্দিষ্ট উপাদানগুলোকে স্লাইড দাউন করে ।
Slideup ( ) মেথডঃ
এটা নির্দিষ্ট উপদাঙ্গুলকে স্লাইড আপ করে ।
Stop ( ) মেথডঃ
এটা চলতি অ্যানিমেশন নির্দিষ্ট উপদান থেকে থামতে সাহায্য করে ।
Toggle ( ) মেথডঃ
এটা hide() এবং show() এর মধ্যে তগল করে
jQuery Mobile Scrollstart
jQuery Mobile Scrollstart
--------------------------------
অনুবাদক: ফয়সাল রকি
-------------------------------
যখন কোনো ব্যবহারকারী কোনো page scroll করা শুরু করে তখন scrollstart ইভেন্টটি কাজ করতে শুরু করে।
উদাহরণ:
$(document).on("scrollstart",function(){
alert("Started scrolling!");
});
লক্ষ্যণীয় বিষয়: iOS ব্যবহৃত device গুলো page scroll এর সময় DOM manipulation কে freeze করে দেয়; সুতরাং যখন কোনো ব্যবহারকারী কোনো page scroll করে তখন কোনো কিছু পরিবর্তন করা সম্ভব হয় না।
jQuery Mobile Scrollstop
যখন কোনো ব্যবহারকারী কোনো page scroll করা বন্ধ করে তখন Scrollstop ইভেন্টটি কাজ শুরু করে।
উদাহরণ:
$(document).on("scrollstop",function(){
alert("Stopped scrolling!");
});
জেকোয়েরি এর বিভিন্ন প্রক্রিয়া ।
জেকোয়েরি এর বিভিন্ন প্রক্রিয়া ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।
কেমন লাগছে সবার জেকোয়েরি ? নিশ্চয়ই ভালো । আজ আমি আপনাদের সাথে জেকোয়েরি এর বিভিন্ন প্রক্রিয়া সম্পর্কে আলোচনা করবো ।
প্রক্রিয়ার নামঃ data()
প্রক্রিয়ার বর্ণনাঃ বিভিন্ন উপাদানের সাথে ডাটা যোগ করতে অথবা এসব উপাদান থেকে ডাটা সংগ্রহ করতে ব্যবহার করা হয় ।
প্রক্রিয়ার নামঃ each()
প্রক্রিয়ার বর্ণনাঃ সকল সদৃশ উপাদান থেকে ফাংশন তৈরি করে ।
প্রক্রিয়ার নামঃ get()
প্রক্রিয়ার বর্ণনাঃ সিলেক্টর দ্বারা DOM elements কে সদৃশ করতে ব্যবহৃত হয় ।
প্রক্রিয়ার নামঃ index()
প্রক্রিয়ার বর্ণনাঃ কোনো তথ্য দেয়া থাকলে তার অনুরুপ উপাত্ত গুলো খুঁজে বের করে থাকে ।
প্রক্রিয়ার নামঃ $.noConflict()
প্রক্রিয়ার বর্ণনাঃ $ ভেরিয়েবলস এর ক্ষেত্রে জেকোয়েরি এর নিয়ন্ত্রণ করে ।
প্রক্রিয়ার নামঃ $.param()
প্রক্রিয়ার বর্ণনাঃ কোনো শ্রেণীবিন্যাস অথবা কোনো উপাদান থাকলে তাদের একটা সিরিয়াল তৈরি করে প্রদর্শন করে ।
প্রক্রিয়ার নামঃ removeData()
প্রক্রিয়ার বর্ণনাঃ পূর্বের সংগ্রহকৃত ডাটা মুছে ফেলে ।
প্রক্রিয়ার নামঃ size()
প্রক্রিয়ার বর্ণনাঃ জেকোয়েরি সিলেক্টর দ্বারা DOM elements গুলোকে সদৃশ করে থাকে ।
প্রক্রিয়ার নামঃ toArray()
প্রক্রিয়ার বর্ণনাঃ জেকোয়েরি তে থাকা শ্রেণীবিন্যাসকৃত সকল DOM elements গুলো কে আলাদা করে ।
তাহলে আমরা জেকোয়েরি এর বিভিন্ন প্রক্রিয়াগুলোর নাম এবং তাদের কাজগুলো জানলাম তো । এখন এগুলো একটু জেনে রাখুন, পরে এর উদাহরণসহ বর্ণনা দিবো তাহলে আরো বুঝতে সুবিধা হবে । এখন সব একবারে শিখতে গেলে আরো জটিল মনে হবে । কোথাও বুঝতে না পারলে কমেন্ট করতে ভুলবেন না কিন্তু ।
jQuery এবং অন্যান্যJavaScript অবকাঠামো
jQuery এবং অন্যান্যJavaScript অবকাঠামো
ইতিমধ্যে আপনি যেনেছেন , jQuery তে $ চিহ্ন ব্যবহার করা হয় শর্টকাট হিসাবে।
অন্যান্য অনেক জনপ্রিয় জাভাস্ক্রিপ্ট অবকাঠামো আছে যেমন Angular, Backbone, Ember, Knockout আরও অনেক।
তাছারা কিভাবে অন্যান্য জাভাস্ক্রিপ্ট অবকাঠামো $ চিহ্ন ব্যবহার করা হয় শর্টকাট হিসাবে।
দুটি আলাদা অবকাঠামো একই শর্টকাট ব্যবহার করে থাকে, তাদের মধ্যে একটি কাজ বন্ধ হতে পারে ।
ইতিমধ্যে JQuery এর টিম এই সম্পর্কে চিন্তা আছে, এবং noConflict() পদ্ধতি প্রয়োগ করা।
JQuery এর noConflict() পদ্ধতি
noConflict()পদ্ধতি, $ শর্টকাট পরিচিতি ধরে রিলিজ, তাই অন্য যে কোন স্ক্রিপ্টের ব্যবহার করতে পারেন।
আপনি অবশ্যই এখনও jQuery ব্যবহার করতে পারেন।
উদাহরন
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
});
});
আপনি খুব সহজেই আপনার নিজের শর্টকাট তৈরি করতে পারেন। noConflict() পদ্ধতিতে jQuery এর রেফারেন্স প্রদান করে, তাছারা একতি variable save করতে পারেন, পরে ব্যবহারের জন।
এখানে একটি উদাহরণ:
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
যদি আপনার ব্যবহার করা jQuery code ব্লক থাকে এবং পরিবর্তন করতে না চান, আপনি পারেন $ সাইন পারামিটার হিসাবে ব্যবহার করতে।
আপনি jQuery $ ব্যবহার করে অ্যাক্সেস করতে পারবেন, এই ফাংশন ভিতরে - এটা বাইরে ব্যবহার করতে যাবে "jQuery":
উদাহরণ
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
নাম :: মাহবুবুর রহমান
jQuery এর মাত্রা সঙ্গে কাজ করার জন্য বেশ কিছু গুরুত্বপূর্ণ পদ্ধতি আছে
jQuery এর মাত্রা সঙ্গে কাজ করার জন্য বেশ কিছু গুরুত্বপূর্ণ পদ্ধতি আছে:
যেমনঃ
• width() -প্রস্থ ()
• height() -উচ্চতা ()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()
jQuery এর প্রস্থ () এবং উচ্চতা () পদ্ধতি নিম্নে দেখানো হলঃ
প্রস্থ () মেথড সেট বা একটি উপাদান প্রস্থ কত হবে তা নির্দেশ করে (প্যাডিং, সীমানা, বা মার্জিন অন্তর্ভুক্ত রয়েছে)।
উচ্চতা () মেথড সেট বা একটি উপাদান এর উচ্চতা কত হবে তা প্রদান করে থাকে (প্যাডিং, সীমানা, বা মার্জিন অন্তর্ভুক্ত).
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ এবং উচ্চতা দেখানো হলঃ
যেমনঃ
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery এর innerWidth () এবং innerHeight () পদ্ধতি নিম্নে দেখানো হলঃ
InnerWidth () মেথড একটি উপাদান প্রস্থ (প্যাডিং বিদ্যমান রয়েছে) প্রদান করে।
InnerHeight () মেথড একটি উপাদান উচ্চতা (প্যাডিং বিদ্যমান রয়েছে) প্রদান করে।
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর ভেতরের প্রস্থ / উচ্চতা দেখানো হল:
যেমনঃ
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery এর outerWidth () এবং outerHeight () পদ্ধতি নিম্নে দেখানো হলঃ
OuterWidth () মেথড একটি উপাদান প্রস্থ নির্দেশ করে (প্যাডিং এবং সীমানা অন্তর্ভুক্ত রয়েছে)।
OuterHeight () মেথড একটি উপাদান এর উচ্চতা নির্দেশ করে থাকে (প্যাডিং এবং সীমানা অন্তর্ভুক্ত রয়েছে)।
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর বাইরের প্রস্থ / উচ্চতা দেখানো হল:
যেমনঃ
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
OuterWidth (এটি সত্য হতে হবে) পদ্ধতি একটি উপাদানের প্রস্থ (প্যাডিং, সীমানা, এবং মার্জিন রয়েছে) নির্দেশ করে থাকে।
OuterHeight ((এটি সত্য হতে হবে) পদ্ধতি একটি উপাদানের উচ্চতা (প্যাডিং, সীমানা, এবং মার্জিন রয়েছে) নির্দেশ করে থাকে।
যেমনঃ
$("button").click(function(){
var txt="";
txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery এর আরো প্রস্থ () এবং উচ্চতা () পদ্ধতি রয়েয়ছেঃ
নিম্নলিখিত উদাহরণে আমরা (এইচটিএমএল ডকুমেন্ট) এবং উইন্ডো (ব্রাউজার ভিউপোর্ট) প্রস্থ এবং উচ্চতা দেখব:
যেমনঃ
$("button").click(function(){
var txt="";
txt+="Document width/height: " + $(document).width();
txt+="x" + $(document).height() + "\n";
txt+="Window width/height: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ ও উচ্চতা দেখানো হল:
যেমনঃ
$("button").click(function(){
$("#div1").width(500).height(500);
});
জেকোয়েরি মোবাইল দিয়ে ফিল্টার লিস্ট তৈরি করে সার্চ ফিল্ড তৈরি
জেকোয়েরি মোবাইল দিয়ে ফিল্টার লিস্ট তৈরি করে সার্চ ফিল্ড তৈরি
লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
আমরা কম্পিউটারে বা মোবাইলে সার্চ করার জন্য কোন কিছু লেখার সাথে সাথেই তা দেখিয়ে দেয় । এর কারণ হলো তাদের আগে থেকে সবকিছুর একটা লিস্ট তৈরি করে ফিল্টার করা থাকে তাই আমরা সার্চ করার সাথে সাথে খুঁজে পাই । আজ আমরা জেকোয়েরি মোবাইল দিয়ে এই ফিল্টার তৈরি করা শিখবো ।
ফিল্টার যোগ্য উপাদান সমূহঃ
যে সকল উপাদানের একটি সাব উপাদান লিস্ট বা বাচ্চা ক্যাটাগরি থাকে তাদের ফিল্টার লিস্ট তৈরি করা যাবে ।
কিভাবে একটি সার্চের জায়গা তৈরি করবো?
১। যে সকল উপাদান সমূহকে ফিল্টার করবো তাদের data-filter="true" এট্রিবিউট দ্বারা অবশ্যই অন্তর্ভূক্ত থাকতে হবে ।
২। একটি <input> উপাদান তৈরি করতে হবে এবং এর সাথে data-type="search" এট্রিবিঊট যোগ করতে হবে । এটা একটি সার্চের জায়গা তৈরি করবে । <input> কে একটি ফর্মের সাথে জড়াতে হবে এবং এই <form> element এর সাথে "ui-filterable" ক্লাস যোগ করতে হবে । এটা সার্চ ফিল্ড এবং সার্চের তথ্যের মাঝে একটা ভাগ দেখাবে ।
৩। তারপর data-input এট্রিবিউট কে ফিল্টারযোগ্য উপাদানের সাথে যোগ করতে হবে । এর ভেলু অবশ্যই <input> উপাদানের সাথে মিলতে হবে । তা না হলে কিন্তু সার্চ করা হলে কিছুই খুঁজে পাবে না ।
নিচে আমরা একটি উদাহরণ দেখাচ্ছিঃ
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter">
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
</ul>
আপনি এর জন্য একটা স্থান ধারক তৈরি করতে পারেন যেটা সার্চ ফিল্ডে কিছু সাজেশান হিসেবে দেখাতে পারে ।
উদাহরণ হিসেবে নিচের কোডটি দেখতে পারেনঃ
<input id="myFilter" data-type="search" placeholder="Search for names..">
নিজের মত করে ফিল্টার তৈরিঃ
চাইল্ড এলিমেন্টে যেটা থাকবে সুধু সার্চ রেজাল্টে সেটাই দেখাবে । কিন্তু আপনি চাইল্ড এলিমেন্টে data-filtertext এট্রিবিউট যোগ করে নিজের মত করে ফিল্টার তৈরি করতে পারবেন ।
কোডের উদাহরণঃ
<li data-filtertext="fav"><a href="#">Adele</a></li>
কিন্তু মনে রাখবেন আপনি যখন এমন ফিল্টার রেজাল্ট তৈরি করবেন সার্চ এর জন্য তখন আসল রেজাল্ট গুলো কিন্তু দেখাবে না, আপনার রেজাল্ট টায় প্রাধান্য পাবে ।
তাহলে দেখলেন তো কত সহজে আমরা একটা সার্চ ফিল্ড তৈরি করে ফেললাম । আসলেই খুব সহজ এবং অনেক মজার ।
জে- কুয়ারী ইফেক্ট – অ্যানিমেশন
জে- কুয়ারী ইফেক্ট – অ্যানিমেশন :
Query animate() method ব্যবহার করে কাস্টম অ্যানিমেশন তৈরী করার পদ্ধতি :
সিনট্যাক্স:
$(selector).animate({params},speed,callback);
সিনট্যাক্স এর মধ্যে যে {params}, parameter আছে তাকে যার অ্যানিমেশন তৈরী করতে তার CSS property এর মধ্যে define করতে হবে.
অন্য parameter (speed parameter) টি অপশনাল এবং এটি ব্যাবহার করা হয় ইফেক্ট আর সময়কাল (duration) সেট করার জন্য . "slow", "fast", অথবা মিলি সেকেন্ড এ ও ভ্যালু দেয়া যায়
অন্য আর অপশনাল একটি parameter callback যা অ্যানিমেশন সমাপ্ত হওয়ার পরে কার্যকর করা হয়.
একটি খুব ছোট উদাহরণ নীচে দেওয়া হলো
$("button").click(function(){
$("div").animate({left:'250px'});
});
এবার jQuery animate() method একাধিক Properties এর উদাহরণ নীচে দেওয়া হলো যার মাধ্যমে একাধিক Properties একই সময়ে animate করা যেতে পারে
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
এখন প্রশ্ন হতে পারে animate() method দিয়া কি CSS Properties animate করা সম্ভব?
উত্তর প্রায়, হ্যাঁ!
এখন আমরা দেখব কিভাবে animate() method Relative Values ব্যবহার করে |
যেমন নিচের example দেখুন
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
পূর্ব নির্ধারিত (Pre-defined) Values ব্যবহার করেও animate() method use করা যায় |
যেমন নিচের উধাহরণ দেখুন
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
এবার আমার দেখব কিভাবে Queue Functionality ব্যবহার করে animate() method use করা যায়
যেমন নিচের উধাহরণ দুটি লক্ষ করুন
উধাহরণ 1 .
আপনি যদি একে অপরের পর বিভিন্ন অ্যানিমেশন সম্পাদন করতে চান , তখন Queue Functionality ar সুবিধা গ্রহণ করতে পারেন
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
উধাহরণ 2
এটা প্ৰথম এ <div> এলিমেন্ট কে ডান দিকে মুভ করে এবং তারপর ফন্ট সাইজ বাড়ায়
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
জেকোয়েরি মোবাইল বাটনে আইকন সাজানো ।
জেকোয়েরি মোবাইল বাটনে আইকন সাজানো ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।
জেকোয়েরি মোবাইল এক ঝাঁক আইকন প্রদান করে যা আপনার বাঁটনকে করে তোলে আরো আকর্ষণীয় ।
জেকোয়েরি মোবাইল বাটোনে আইকন যোগ করাঃ
বাটনে আইকন যোগ করার জন্য ui-icon ক্লাস ব্যবহার করতে হবে এবং একে পজিশন করার জন্য ui-btn-icon-pos ক্লাস ব্যবহার করতে হবে ।
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
অন্যান্য বাটোনের জন্য যেমন লিস্ট বাটন এবং ফর্ম বাটনের জন্য আপনাকে data-icon এট্রিবিউট ব্যবহার করতে হবে । এটা পরে আমরা আরো বিস্তারিত আলোচনা করবো ।
নিচে আমরা জেকয়েরি মোবাইলের কিছু আইকন সম্পর্কে আলোচনা করবো ঃ
আইকন ক্লাসঃ ui-icon-arrow-r
আইকনের বর্ণনাঃ ডানমূখী তীর ।
আইকন ক্লাসঃ ui-icon-arrow-l
আইকনের বর্ণনাঃ বামমূখী তীর ।
আইকন ক্লাসঃ ui-icon-delete
আইকনের বর্ণনাঃ ডিলিট আইকন ।
আইকন ক্লাসঃ ui-icon-info
আইকনের বর্ণনাঃ ইনফরমেশন আইকন ।
আইকন ক্লাসঃ ui-icon-audio
আইকনের বর্ণনাঃ স্পীকার আইকন ।
আইকন ক্লাসঃ ui-icon-back
আইকনের বর্ণনাঃ ব্যাক আইকন ।
আইকন ক্লাসঃ ui-icon-search
আইকনের বর্ণনাঃ সার্চ আইকন ।
আইকন ক্লাসঃ ui-icon-lock
আইকনের বর্ণনাঃ তালার আইকন ।
আইকন ক্লাসঃ ui-icon-grid
আইকনের বর্ণনাঃ গ্রিড আইকন ।
আইকন ক্লাসঃ ui-icon-alert
আইকনের বর্ণনাঃ সংকেত আইকন ।
আইকন ক্লাসঃ ui-icon-home
আইকনের বর্ণনাঃ হোম আইকন ।
আইকনের পজিশন করাঃ
আপনি চার জায়গায় আইকন বসাতে পারবেন তা হলো সবার উপরে, সবার নিচে , সবার বামে এবং সবার ডানে । এজন্য আপনাকে ui-btn-icon ক্লাস ব্যবহার করতে হবে ।
বাটনে লিংক যোগ করাঃ
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>
আপনি উল্লেখিত স্থানে লিংক বসাতে পারবেন । মনে রাখবেন, আপনি যদি আইকনের পজিশন যদি না বলে দেন তাহলে কিন্তু আইকনকে দেখাবে না ।
শুধু আইকন দেখানোঃ
আপনি ইচ্ছা করলে লেখা না দেখিয়ে শুধু আইকন দেখাতে পারেন । এজন্য আপনাকে আইকন পজিশন করার জন্য "notext" ভেলু ব্যবহার করতে হবে ।
a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">Search</a>
এভাবে "notext" ভেলু ব্যবহার করে শুধু আইকন দেখাতে পারবেন ।
বেষ্টনী দূর করাঃ
ডিফল্টভাবে সকল আইকনের চারিদিকে ধূসর বেষ্টনী থাকে । এই বেষ্টনী দূর করার জন্য আপনাকে "ui-nodisc-icon" ক্লাস ব্যবহার করতে হবে ।
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">Without circle</a>
সাদা আইকনকে কালো করাঃ
ডিফল্টভাবে সকল আইকন সাদা রঙের হয় । এই সাদা আইকনকে কালো করার জন্য আপনাকে "ui-alt-icon" এলিমেন্ট যোগ করতে হবে ।
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">Black</a>
এভাবে আপনার ইচ্ছা খুশি মত আইকনকে সাজাতে পারবেন । খুবই সহজ তাই নাহ? 😉
jQuery এর ফেইড পদ্ধতি নিম্নে দেয়া হল
jQuery এর ফেইড পদ্ধতি নিম্নে দেয়া হলঃ
JQuery দিয়ে আপনি একটি লেখাকে দৃশ্যমানতা এবং এই উপাদানটি আউট/বিবর্ণ করতে পারেন.
jQuery এর নিম্নলিখিত বিবর্ণ পদ্ধতি আছে:
• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()
jQuery এর FadeIn () পদ্ধতি নিম্নে দেয়া হলঃ
JQuery তে FadeIn () মেথডটি লুকানো উপাদান দেখতে ব্যবহার করা হয়।
ইহার Syntax: $(selector).fadeIn(speed,callback); এভাবে লেখা হয়ে থাকে।
আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।
অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।
নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে FadeIn () মেথড দেখানো হলঃ
যেমনঃ
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery এর fadeout () পদ্ধতি নিম্নে দেয়া হলঃ
JQuery এর fadeout () মেথড দিয়ে একটি দৃশ্যমান উপাদানকে আউট করতে ব্যবহার করা হয়।
ইহার Syntax: $(selector).fadeOut(speed,callback); এভাবে লেখা হয়ে থাকে।
এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।
অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।
নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeout () মেথড দেখানো হলঃ
যেমনঃ
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery এর fadeToggle () পদ্ধতি নিম্নে দেয়া হলঃ
JQuery এর fadeToggle () মেথড হচ্ছে FadeIn () এবং fadeout () পদ্ধতির মধ্যে পার্থক্য।
উপাদান কে হাইড করে দেয়,এবং fadeToggle () তাদের আবার বিবর্ণ করে দেয়।
উপাদান কে হাইড করে দেয়,এবং fadeToggle () তাদের আবার দৃশ্যমান করে দেয়।
ইহার Syntax: $(selector).fadeToggle(speed,callback); এভাবে লেখা হয়ে থাকে।
এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।
অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।
নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeToggle () মেথড দেখানো হলঃ
যেমনঃ
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery এর fadeTo () পদ্ধতি নিম্নে দেখানো হলঃ
JQuery এর fadeTo () মেথড (0 এবং 1 এর মধ্যে মান) একটি প্রদত্ত অস্বচ্ছতা ফেইড দেখাতে পারবেন।
ইহার Syntax: $(selector).fadeTo(speed,opacity,callback); এভাবে লেখা হয়ে থাকে।
এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।
FadeTo () মেথড প্রয়োজন অস্বচ্ছতা করতে প্যারামিটারের মান দিয়ে দিতে পারবেন। অস্বচ্ছতা ফেইড নির্দিষ্ট (0 মধ্যে মান 1) এর মধ্যে।
অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।
নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeTo () মেথড দেখানো হলঃ
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
জে কুয়েরি ইভেন্ট । jQuery Events
আরিফ
আজ আমি আপনাদের সামনে web page এর একটি বিশেষ element "event" নিয়ে আলোচনা করবো। প্রথমে জেনে নেই ইভেন্ট কি??? সহজ কথায় এটা যেকোন কিছু যা আপনি একটি ওয়েব পেজ এ করে থাকেন। যেমন ধরুন ফেসবুকে মাউসের পয়েন্টার আপনার সেরা সেলিব্রিটির নামের উপর রাখলেন, সাথে সাথে দেখতে পাবেন একটি পপ- আপ বক্স আপনার সামনে আসবে যেখানে সেই সেলিব্রিটির info দেখাবে। তারপর ধরুন আপনি একটি অনলাইন রেডিও স্টেশন এ গান শুনছেন, আপনার মনে হরো ভলিউম বাড়ানো দরকার, আপনি vol+ বাটনে ক্লিক করলেন এক্ষেত্রে ক্লিকটাই event. অর্থাৎ মাউস বলেন কিবোর্ড বলেন যেকোন কি এর জন্য যেকোন এক্টিভিটিই হলো ইভেন্ট। এখন এই যে ইভেন্ট এবং তার এক্টিভিটি কাজ করানোর জন্য আপনার সাংকেতিক চিহ্ন এর প্রয়োজন হবে। আপনার একটি ওয়েব পেজ বানানোর জন্য। সর্বাধিক ব্যবহৃত সংকেত টি হলো
$("p").click();
এবার চলুন আমরা কয়েকটি ইভেন্ট নিয়ে আলোচনা করি:
click:
একটি পাতা সব অনুচ্ছেদ (প্যারা) এর জন্য একটি ক্লিক ইভেন্ট ব্যবহার করার জন্য:
$("p").click();
পরবর্তী ধাপে ক্লিক করার ফলে কি ঘটবে তা নির্ধারণ করা হয়। এর জন্য অবশ্যই একটি ফাংশন ব্যবহার করা আবশ্যক:
$("p").click(function(){
// action goes here!!
});
এখানে কিছু DOM ইভেন্ট দেয়া হলো:
| মাউস ইভেন্ট | কীবোর্ড ইভেন্ট | ফরম ইভেন্ট | ডকুমেন্ট/উইন্ডো ইভেন্ট |
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
সাধারণভাবে ব্যবহৃত jQuery Event Methods
click():
click() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন ইউজার HTML element টিতে ক্লিক করবেন।
এখানে একটি উদাহরন দেখুন। এই p এর উপর ক্লিক করলে p উধাও হয়ে যাবে:
$("p").click(function(){
$(this).hide();
});
এখান থেকে উদাহরন দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
dblclick():
dblclick() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন ইউজার HTML element টিতে ডাবল ক্লিক করবেন।
$("p").dblclick(function(){
$(this).hide();
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
mouseenter():
mouseenter() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টার HTML element এর ভিতরে প্রবেশ করবে।
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
mouseleave():
mouseleave() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টার HTML element এর ভিতরে থেকে বের হয়ে যায়।
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
mousedown():
mousedown() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির উপরে থাকবে এবং HTML element এর উপর বাম, ডান বা মিডেল ক্লিক করা হবে,
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
mouseup():
mouseup() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির উপরে থাকবে এবং HTML element এর উপর বাম, ডান বা মিডেল ক্লিক ছেড়ে দেয়া হবে,
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
hover():
hover() method দুইটি ইভেন্ট হ্যান্ডেলার ফাংশন mouseenter() এবং mouseleave() এর সমন্নয়ে HTML element এর সাথে যুক্ত করে।
প্রথম ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির ভিতরে প্রবেশ করবে এবং প্রথম ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির ভিতর থেকে বাহিরে যাবে,
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
focus():
focus() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML ফর্ম ফিল্ড এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন ফিল্ডটিকে ফোকাস করা হবে,
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
blur():
blur() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML ফর্ম ফিল্ড এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন ফিল্ডটি থেকে ফোকাস সরিয়ে নেয়া হবে,
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
on():
on() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML ফর্ম ফিল্ড এর সাথে যুক্ত করে।
$("p").on("click", function(){
$(this).hide();
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click", function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
<p> এলিমেন্ট এ একাধিক ইভেন্ট হ্যান্ডেলার ফাংশন যোগ করার উদাহরণ,
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
জেকুএরি ভুমিকা । jQuery Introduction
jQuery হলো JavaScript এর সমগ্র বা Library. JavaScript প্রোগ্রামকে সহজীকরণ করে। এর সাহায্যে জটিলতম JavaScript প্রোগ্রামগুলোকে সহজে একসূত্রে গাঁথা যায়। খুব সামান্য চেষ্টা এবং শ্রম ব্যয় করে আপনি jQuery শিখতে পারবেন।
এই ওয়েবসাইটের প্রতি অনুচ্ছেদে "নিজে চেষ্টা কর" রয়েছে।
আমাদের অনলাইন এডিটরের সাহায্যে আপনি সহজে কোড এডিট করতে এবং ফলাফল দেখতে পারবেন।
উদাহরণ:
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
"নিজে চেষ্টা কর" বাটনে ক্লিক করুন এবং এর ফলাফল দেখুন।
jQuery উদাহরণ
উদাহরণের সাহায্যে শিক্ষন একটি আধুনিক প্রক্রিয়া! এই ওয়েবসাইটে jQuery এর প্রচুর উদাহরণ রয়েছে। উদাহরণগুলো ধারাবাহিকভাবে বিন্যস্ত করা আছে যেন একজন নতুন শিক্ষার্থীর জন্য প্রক্রিয়াটি সহজ হয়। আমাদের অনলাইন এডিটর ব্যবহার করে এসকল উদাহরণ এডিট ও পরীক্ষা করে ফলাফল দেখতে পারবেন।
jQuery কুইজ টেস্ট
এই ওয়েবসাইটে jQuery এর পর্যাপ্ত পরিমাণ কুইজ টেস্ট রয়েছে। এসকল কুইজে অংশ নিয়ে আপনি আপনার jQuery দক্ষতা পরীক্ষা করতে পারবেন সহজেই।
jQuery রেফারেন্স
jQuery এর পরিপূর্ণ শিক্ষণের জন্য এর অবজেক্ট ও মেথড সম্পর্কে যথার্থ শিক্ষা উপকরণ প্রয়োজন। এই ওয়েবসাইটে অবজেক্ট ও মেথড সম্পর্কে পরিপূর্ণ রেফারেন্স পাওয়া যায়।
-----------------
অনুবাদক: ফয়সাল রকি
জেকোয়েরি প্রোপার্টিজ বা জেকোয়েরি এর ধর্ম – jQuery Properties
জেকোয়েরি প্রোপার্টিজ বা জেকোয়েরি এর ধর্ম - jQuery Properties
লেখকঃ মোস্তাফিজুর ফিরোজ ।
জেকোয়েরি কেমন শিখছেন সবাই? নিশ্চয়ই ভালো । আজ আমি আপনাদের সাথে জেকোয়েরি প্রোপার্টিজ বা জেকোয়েরি এর ধর্ম সম্পর্কে আলোচনা করবো ।
জেকোয়েরি প্রোপার্টিজঃ context
বর্ণনাঃ এটা version 1.10 তে আর কাজ করে না । এটা jQuery() তে প্রসঙ্গত বেশি ভাল কাজ করে থাকে ।
জেকোয়েরি প্রোপার্টিজঃ jquery
বর্ণনাঃ জেকোয়েরি এর ভার্সন কত তা এটা থেকে বোঝা যায় ।
জেকোয়েরি প্রোপার্টিজঃ jQuery.fx.interval
বর্ণনাঃ অ্যানিমেশন এর পরিবর্তনের গতি মিলিসেকেন্ডে পরিবর্তন করে থাকে ।
জেকোয়েরি প্রোপার্টিজঃ jQuery.fx.off
বর্ণনাঃ সকল অ্যানিমেশনকে সচল এবং অচল করতে সাহায্য করে ।
জেকোয়েরি প্রোপার্টিজঃ jQuery.support
বর্ণনাঃ সকল প্রকার ব্রাউজারের ফিচার এবং বাগ ঠিক রেখে এর সকল ধর্ম প্রদর্শন করে থাকে । এটা শুধুমাত্র জেকোয়েরি এর অভ্যন্তরীণ কাজে সাহায্য করে ।
জেকোয়েরি প্রোপার্টিজঃ length
বর্ণনাঃ জেকোয়েরি এর ভিতর কতটি অবজেক্ট বা উপাদান আছে তার সংখ্যা প্রকাশ করে ।
তাহলে প্রত্যেকটি জেকোয়েরি প্রোপার্টিজ এর কাজ বুঝলেন তো? না বুঝতে পারলে কমেন্ট করতে ভুলবেন না । আমি আমার সাধ্যমত বুঝায় দিতে সর্বাত্মক চেষ্টা করবো ।
জেকোয়েরি দিয়ে মোবাইল টুলবার এর বাটন বানানো . jQuery Mobile Toolbars
জেকোয়েরি দিয়ে মোবাইল বাটন বানানো
লেখকঃ মোস্তাফিজুর ফিরোজ ।
আমরা প্রত্যেক সাইটে ঢুকলে অনেক ধরণের বাটন দেখি । এগুলো আমাদের সাইটটিকে খুব সহজে ভিজিট করতে আর এক পেজ থেকে হোম পেজ অথবা অন্য কোন পেজে নেভিগেশনে সাহায্য করে । আসুন আজ খুব সহজে জেকোয়েরি দিয়ে বাটন বানানো শিখবো ।
জেকোয়েরি মোবাইল বাটনগুলো সাধারণত হেড এবং ফুটারে বসানো হয়ে থাকে । কারণ এই দুইটি স্থান থেকেই সবাই পেজ নেভিগেশন করতে চায় ।
হেডার বারের কোড সমূহ
হেডার বার বলতে একটা সাইটের পেজের উপরিভাগকে বুঝায় । হেডার সাধারণত একটি পেজের নাম অথবা লোগো অথবা হোম, অপশন অথবা খোঁজার জন্য এক অথবা দুইটি বাটন থাকে ।
আপনি খুব সহজেই হেডারের বাম অথবা ডান সাইডে বাটন যোগ করতে পারেন জেকোয়েরি ব্যবহার করে ।
<div data-role="header">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>
উপরের কোডটুকু আপনাকে পেজের বাম সাইডে একটা হোম বাটন এবং ডান সাইডে একটা খোঁজ বাটন যুক্ত করতে সাহায্য করবে ।
<div data-role="header">
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div>
এই কোড ব্যবহার করে আপনি হেডারের টাইটেলের বাম সাইডে একটা বাটন যুক্ত করতে পারবেন ।
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div>
এই কোড ব্যবহার করে আপনি হেডারের টাইটেলের ডান সাইডে একটা বাটন যুক্ত করতে পারবেন ।
মনে রাখবেন হেডারে আপনি একসাথে দুইটির বেশি বাটন রাখতে পারবেন না । কিন্তু ফুটারে বাটনের কোনো সীমাবদ্ধতা নেই । আপনি আপনার ইচ্ছামত বাটন ব্যবহার করতে পারবেন ।
ফুটার বারের কোড সমূহ
একটি পেজের সবথেকে নিচের অংশকে ফুটার বলা হয় । ফুটার হেডারের চেয়ে বেশি পরিবর্তন করা সহজ । এতে বেশি পেজ লিংক, বাটন ইত্যাদি যোগ করে একে আরো বেশি আকর্ষণীয় করে তোলা যায় ।
<div data-role="footer">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
এই কোডটি ফুটারে বসিয়ে আপনি খুব সহজে ফেসবুক, টুইটার, ইন্সটাগ্রামের বাটন যোগ করতে পারবেন ।
কিন্তু ফুটারের বাটনগুলো সাধারণত মাঝখানে বসে না । তাই এই জন্য আপনাকে নিচের সিএসএস কোড দিয়ে পরিবর্তন করে নিতে হবে ।
<div data-role="footer" style="text-align:center;">
তাছাড়া আপনি গুরুপ বাটন গুলো ফুটারে নিচের কোড দিয়ে সমান্তরালে অথবা আনুভূমিকভাবে ব্যবহার করতে পারবেন ।
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div>
হেডার এবং ফুটারের পজিশন ঠিক করা
হেডার এবং ফুটারের পজিশন তিনভাবে ঠিক করা যায় ।
১। ইনলাইনঃ এটা ডিফল্টভাবে যেটা দেয়া থাকে । মানে হেডার এবং ফুটার পেজের উপাদানের সাথে একই লাইনে থাকে ।
২। ফিক্সডঃ হেডার এবং ফুটার যথাক্রমে পেজের উপরে এবং নিচে থাকে ।
৩। ফুল স্ক্রীনঃ এটা ফিক্সড পজিশনের মত । কিন্তু এতে হেডার এবং ফুটার পেজের উপাদান সমূহের উপরে থাকে ।
আসুন তাহলে এবার কোড গুলো দেখে নেই ।
১। ইনলাইন পজিশনের কোডঃ
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>
২। ফিক্সড পজিশনের কোডঃ
<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
৩। ফুল স্ক্রীন পজিশনের কোডঃ
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
এতে উপরের মত data-position="fixed" রাখতে হবে ।
ফুল স্ক্রীন পজিশন ছবি, ভিডিও সাইটের জন্য খুব উপযোগী ।
আর এরই ভিতর কিন্তু আমরা খুব সহজে জেকোয়েরি দিয়ে মোবাইল বাটন বানানো শিখে গেলাম । খুব সহজ তাই না । হুম, আমার কাছেও এটা খুব সহজ লাগে । তবুও কোথাও না বুঝলে কমেন্ত করতে ভুলবেন না কিন্তু ।
জেকয়ারি এফেক্ট মেথডস। jQuery Effect Methods Reference
জেকয়ারি এফেক্ট মেথড
নয়ন চন্দ্র সরকার
জেকয়ারি হল এমন একটি জাভাস্ক্রিপ্ট লাইব্রি যা সহজ, ছোট এবং সমৃদ্ধ এবং যা, এইচ টি এম এল ডকুমেন্ট গুলোকে একটা এ পি আই এর মাধ্যমে বিভিন্ন ব্রাউজার দক্ষতা সহকারে হস্তচালন করতে সাহায্য করে। নিচে এর এফেক্ট গুলো আলোচনা করা হল।
জেকয়ারির অ্যানিমেশন এফেক্ট তৈরি করতে যে পদ্ধতিগুলো ব্যবহার করা হয়, সেগুলো নিচে আলোচনা করা হল।
“animate ( ) মেথডঃ
এই মেথডটা নিদিষ্ট উপাদানে কাস্টম অ্যানিমেশন রান করে।
clearQueue ( ) মেথডঃ
এই মেথড অপেক্ষারত ফাংশনগুলোকে নিদিষ্ট উপাদান গুলো থেকে দূর করতে সাহায্য করে।
Delay( ) মেথডঃ
এই মেথডের মাধ্যমে সকল অপ্পেক্ষারত ফাংশনগুলোর জন্য একটা ডিলে সেট করা হয়।
Dequeue ( ) মেথডঃ
এটা পরবর্তী ফাংশন কে লাইন থেকে বিতারিত করে ফাংশন টা সম্পাদন করে।
FadeIn ( ) মেথডঃ
নির্বাচিত উপাদানগুলোকে ফেইদ ইন করে।
Fadeout ( ) মেথডঃ
নির্বাচিত উপাদানগুলোকে ফেইদ আউট করে।
fadeTo ( ) মেথডঃ
এই নিয়মটা নিদিষ্ট উপাদানগুলোকে একটা প্রদত্ত অপাছিতিতে ফেইদ ইন বা আউট করে।
fadeToggle ( ) মেথডঃ
এটা ফেইদ ইন এবং আউট এর মধ্যে টগল করে ।
Finish ( ) মেথডঃ
এই মেথডটা সব অপ্পেক্ষারত এনিমেশনগুলোকে নির্দিষ্ট উপাদাগুলথেকে থামতে, দূর করতে অথবা সম্পন্ন করতে সাহায্য করে ।
Hide ( ) মেথডঃ
এটা নির্দিষ্ট উপাদানগুলোকে হাইট করে ।
Queue ( ) মেথডঃ
এটা অপ্পকেক্ষারত ফাংশনগুলোকে নির্দিষ্ট উপদানে দেখায় ।
Show ( ) মেথডঃ
এটা সো করায়
Slidedown ( ) মেথডঃ
এটা নির্দিষ্ট উপাদানগুলোকে স্লাইড দাউন করে ।
Slideup ( ) মেথডঃ
এটা নির্দিষ্ট উপদাঙ্গুলকে স্লাইড আপ করে ।
Stop ( ) মেথডঃ
এটা চলতি অ্যানিমেশন নির্দিষ্ট উপদান থেকে থামতে সাহায্য করে ।
Toggle ( ) মেথডঃ
এটা hide() এবং show() এর মধ্যে তগল করে
জেকোয়েরি সিলেক্টর এর ব্যবহার এবং কাজ . jQuery Selectors Reference
জেকোয়েরি সিলেক্টর এর ব্যবহার এবং কাজ . Mostafizur Rahman, Firoz
কি খবর সবার? জেকোয়েরি কেমন শিখছেন সবাই? আজ আমি জেকোয়েরি এর অনেক গুরুত্বপুর্ণ একটা বিষয় জেকোয়েরি সিলেক্টর এর ব্যবহার এবং কাজ সম্পর্কে বিস্তারিত আলোচনা করবো ।
সিলেক্টর নামঃ *
উদাহরণঃ $("*")
কাজঃ সকল উপাদান সিলেক্ট করে ।
সিলেক্টর নামঃ #id
উদাহরণঃ $("#lastname")
কাজঃ id="lastname" গুলো শুধুমাত্র সিলেক্ট করে । মানে আইডিগুলোর লাস্টনেমকে শুধু মাত্র সিলেক্ট করবে ।
সিলেক্টর নামঃ .class
উদাহরণঃ $(".intro,.demo")
কাজঃ "intro" অথবা "demo" এর সকল ক্লাস সিলেক্ট করে ।
সিলেক্টর নামঃ element
উদাহরণঃ $("p")
কাজঃ সকল <p> ট্যাগের উপাদান গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ el1,el2,el3
উদাহরণঃ $("h1,div,p")
কাজঃ সকল <h1>, <div> এবং <p> elements গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :first
উদাহরণঃ $("p:first")
কাজঃ শুধুমাত্র প্রথম <p> element গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :last
উদাহরণঃ $("p:last")
কাজঃ শুধুমাত্র শেষ <p> element গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :even
উদাহরণঃ $("tr:even")
কাজঃ সকল জোড় <tr> elements গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :odd
উদাহরণঃ $("tr:odd")
কাজঃ সকল বিজোড় <tr> elements গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :first-child
উদাহরণঃ $("p:first-child")
কাজঃ পিতা-মাতার সকল প্রথম শিশুকে শুধুমাত্র সিলেক্ট করবে ।
সিলেক্টর নামঃ :first-of-type
উদাহরণঃ $("p:first-of-type")
কাজঃ পিতামাতা এবং শিশু দুজনই প্রথম হলে শুমাত্র তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ :last-child
উদাহরণঃ $("p:last-child")
কাজঃ পিতা-মাতার সকল শেষ শিশুকে শুধুমাত্র সিলেক্ট করবে ।
সিলেক্টর নামঃ :last-of-type
উদাহরণঃ $("p:last-of-type")
কাজঃ পিতামাতা এবং শিশু দুজনই শেষের হলে শুমাত্র তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ :nth-child(n)
উদাহরণঃ $("p:nth-child(2)")
কাজঃ পিতা-মাতার সকল দ্বিতীয় শিশুকে শুধুমাত্র সিলেক্ট করবে ।
সিলেক্টর নামঃ :nth-last-child(n)
উদাহরণঃ $("p:nth-last-child(2)")
কাজঃ পিতা-মাতার সকল শেষের দ্বিতীয় শিশুকে শুধুমাত্র সিলেক্ট করবে । মানে ছোট জনের আগের জন ।
সিলেক্টর নামঃ :nth-of-type(n)
উদাহরণঃ $("p:nth-of-type(2)")
কাজঃ দ্বিতীয় <p> elements এর সকল <p> element কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :nth-last-of-type(n)
উদাহরণঃ $("p:nth-last-of-type(2)")
কাজঃ দ্বিতীয় <p> elements এর সকল <p> element কে সিলেক্ট করবে । শেষের দিক থেকে কিন্তু ।
সিলেক্টর নামঃ :only-child
উদাহরণঃ $("p:only-child")
কাজঃ একমাত্র শিশু হলে শুধু মাত্র তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ :only-of-type
উদাহরণঃ $("p:only-of-type")
কাজঃ একই রকমের পিতা-মাতার একমাত্র শিশু হলে শুধু মাত্র তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ parent > child
উদাহরণঃ $("div > p")
কাজঃ <div> element এর সরাসরি শিশু হলে সকল <p> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ parent descendant
উদাহরণঃ $("div p")
কাজঃ <div> element এর নিচের দিককার শিশু হলে সকল <p> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ element + next
উদাহরণঃ $("div + p")
কাজঃ <div> element এর পরবর্তী শিশু হলে সকল <p> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ element ~ siblings
উদাহরণঃ $("div ~ p")
কাজঃ <div> element ভাই-বোন হলে সকল <p> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :eq(index)
উদাহরণঃ $("ul li:eq(3)")
কাজঃ চার নাম্বার ইলিমেন্টসকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :gt(no)
উদাহরণঃ $("ul li:gt(3)")
কাজঃ ৩ এর চেয়ে বড় হলে শুধুমাত্র তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ :lt(no)
উদাহরণঃ $("ul li:lt(3)")
কাজঃ ৩ এর চেয়ে ছোট হলে শুধুমাত্র তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ :not(selector)
উদাহরণঃ $("input:not(:empty)")
কাজঃ যাদের মান শূন্য নয় তাদের সকল্কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :header
উদাহরণঃ $(":header")
কাজঃ সকল হেডার এলিমেন্টস <h1>, <h2> ... কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :animated
উদাহরণঃ $(":animated")
কাজঃ সকল এনিমেটেড এলিমেন্টসকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :focus
উদাহরণঃ $(":focus")
কাজঃ যেগুলো ফোকাসে থাকবে শুধু তাদের সিলেক্ট করবে ।
সিলেক্টর নামঃ :contains(text)
উদাহরণঃ $(":contains('Hello')")
কাজঃ "Hello" টেক্সট থাকলে তাদের সবগুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :has(selector)
উদাহরণঃ $("div:has(p)")
কাজঃ <p> element যুক্ত সকল <div> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :empty
উদাহরণঃ $(":empty")
কাজঃ যারা খালি থাকবে শুধু তাদেরই সিলেক্ট করবে ।
সিলেক্টর নামঃ :parent
উদাহরণঃ $(":parent")
কাজঃ যারা অন্য এলিমেন্টের প্যারেন্ট ক্যাটাগরিতে থাকবে তাদের সকল্কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :hidden
উদাহরণঃ $("p:hidden")
কাজঃ সকল হিডেন <p> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ :visible
উদাহরণঃ $("table:visible")
কাজঃ সকল ভিজিবল টেবিলকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :root
উদাহরণঃ $(":root")
কাজঃ ডকুমেন্টের root element কে শুধুমাত্র সিলেক্ট করবে ।
সিলেক্টর নামঃ :lang(language)
উদাহরণঃ $("p:lang(de)")
কাজঃ "de" লেখা দ্বারা শুরু সকল <p> elements কে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute]
উদাহরণঃ $("[href]")
কাজঃ href attribute থাকা সকল উপাদানকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute=value]
উদাহরণঃ $("[href='default.htm']")
কাজঃ href attribute থাকা সকল "default.htm" ভেলুর উপাদানকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute!=value]
উদাহরণঃ $("[href!='default.htm']")
কাজঃ href attribute থাকা সকল "default.htm" ভেলু বাদের বাকি সব উপাদানকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute$=value]
উদাহরণঃ $("[href$='.jpg']")
কাজঃ href attribute থাকা সকল ".jpg" উপাদানকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute|=value]
উদাহরণঃ $("[title|='Tomorrow']")
কাজঃ title attribute এর সকল 'Tomorrow' ভেলুকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute^=value]
উদাহরণঃ $("[title^='Tom']")
কাজঃ title attribute এর সকল "Tom" ভেলুকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute~=value]
উদাহরণঃ $("[title~='hello']")
কাজঃ title attribute এর শুধুমাত্র "hello" ভেলুকে সিলেক্ট করবে ।
সিলেক্টর নামঃ [attribute*=value]
উদাহরণঃ $("[title*='hello']")
কাজঃ title attribute এর সকল "hello" ভেলুকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :input
উদাহরণঃ $(":input")
কাজঃ সকল ইনপুট উপদান গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :text
উদাহরণঃ $(":text")
কাজঃ সকল ইনপুট উপদানের type="text" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :password
উদাহরণঃ $(":password")
কাজঃ সকল ইনপুট উপদানের type="password" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :radio
উদাহরণঃ $(":radio")
কাজঃ সকল ইনপুট উপদানের type="radio" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :checkbox
উদাহরণঃ $(":checkbox")
কাজঃ সকল ইনপুট উপদানের type="checkbox" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :submit
উদাহরণঃ $(":submit")
কাজঃ সকল ইনপুট উপদানের type="submit" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :reset
উদাহরণঃ $(":reset")
কাজঃ সকল ইনপুট উপদানের type="reset" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :button
উদাহরণঃ $(":button")
কাজঃ সকল ইনপুট উপদানের type="button" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :image
উদাহরণঃ $(":image")
কাজঃ সকল ইনপুট উপদানের type="image" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :file
উদাহরণঃ $(":file")
কাজঃ সকল ইনপুট উপদানের type="file" গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :enabled
উদাহরণঃ $(":enabled")
কাজঃ সকল enabled ইনপুট উপদান গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :disabled
উদাহরণঃ $(":disabled")
কাজঃ সকল disabled ইনপুট উপদান গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :selected
উদাহরণঃ $(":selected")
কাজঃ সকল selected ইনপুট উপদান গুলোকে সিলেক্ট করবে ।
সিলেক্টর নামঃ :checked
উদাহরণঃ $(":checked")
কাজঃ সকল checked ইনপুট উপদান গুলোকে সিলেক্ট করবে ।
দেখছেন তো জেকোয়েরি এর সব সিলেক্টর গুলোকে । খুব মজার তাই না। আমার কিন্তু এগুলোকে অনেক ভাল লাগে । শুধু মনে রাখাই যা কষ্টের । তাই বেশি বেশি করে প্রাকটিস করা দরকার তাহলে সব আরো সহজ হয়ে যাবে । আর কোথাও না বুঝতে পারলে কমেন্ট করতে ভুলবেন না কিন্তু ।
আপনার ওয়েব পেজ এ যেভাবে JQuery ব্যবহার/Install করবেন । Installing JQuery Library
আপনার ওয়েব পেজ এ যেভাবে JQuery ব্যবহার/Install করবেন । Installing JQuery Library ।
Name: Md. Ariful Islam. Edited by Sayed Ahmed
============================================
আপনার ওয়েব সাইটে jQuery ব্যবহার করার জন্য বেশ কিছু উপায় আছে।যেমন:
*JQuery.com থেকে jQuery লাইব্রেরি ডাউনলোড করে ব্যবহার করা।
*অথবা, CDN (Content Delivery Network) থেকে jQuery ব্যবহার করা। কিছু CDN যেমন: গুগল, মাইক্রোসফট এর CDN
jQuery ডাউনলোড করে ব্যবহার-
…………………………………………………
ডাউনলোড করার জন্য jQuery এর দুটি সংস্করণ পাওয়া যায়। সেগুলি হল:
১. Production সংস্করণ।-এটা minified version এটাকে সংকুচিত/compressed করা হয়েছে, কারণ এটা আপনার লাইভ ওয়েবসাইট এ ব্যবহার করার জন্য।এটা জায়গা কম নেয় এবং দ্রুত লোড হয় ।
২. Development সংস্করণ।-এটা পরীক্ষামূলক ব্যবহার করার জন্য এবং এটা একটা পাঠযোগ্য কোড। এটার বিস্তারিত আমরা পরবর্তীতে জনবো। আপনি ডেভেলপ করার সমই আএই ভারসন ব্যবহার করে কোড ডিবাগ করতে পারবেন।
দুটি সংস্করণই jQuery.com থেকে ডাউনলোড করা যাবে।
JQuery লাইব্রেরি একটি একক জাভাস্ক্রিপ্ট ফাইল।
আপনার ডাউনলোড করা jQuery ফাইলটি একই ডিরেক্টরির/folder এর মধ্যে রাখুন। তারপর HTML Script tag ব্যবহার করে HTML file থেকে jquery library কে পয়েন্ট করুন।
<head>
<script src="jquery-1.11.1.min.js"></script>
</head>
------
CDN থেকে কিভাবে JQuery ব্যবহার করবেন
Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
</head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
</head>
গুগল বা মাইক্রোসফট থেকে হোস্ট থেকে jQuery ব্যবহার করার বড় সুবিধা হল:
অনেকেই হইত CDN থেকে ইতিমধ্যে JQuery ডাউনলোড করেছে যখন অন্য ওয়েবসাইট ব্রাউজ করেছে। সেহেতু তাদের কম্পিউটারে আপনার ওয়েবসাইট তারাতারি লোড হবে কারন JQuery তাদের cache থেকে লোড হবে। ব্যবহারকারী অন্য সাইট ভিজিট করার সময় যখন গুগল বা মাইক্রোসফট থেকে jQuery ডাউনলোড করে তখন তা তার browser এর cache তে থাকে । পরবর্তীতে অন্য কোন jQuery সাইট ভিজিট করলে website টি cache থেকে jquery ডাটা নিয়ে খুব দ্রুত লোড হয়।
JQuery Introduction : JQuery শুরুর কথা
JQuery Introduction : JQuery শুরুর কথা : Partially edited by Sayed Ahmed
আপনার jQuery সম্পর্কে জানার আগে কয়েকটি মৌলিক জ্ঞান থাকতে হবেঃ
এইচটিএমএল
সিএসএস
জাভাস্ক্রিপ্ট
JQuery কি?
JQuery একটি লাইটওয়েট, জাভাস্ক্রিপ্ট লাইব্রেরি। JQuery এর উদ্দেশ্য হচ্ছে সহজভাবে আপনার ওয়েবসাইটে জাভাস্ক্রিপ্ট ব্যবহার করা। JQuery দ্বারা অনেকটা একই ধরনের কাজ করা হয়, যে পদ্ধতিটি হল জাভাস্ক্রিপ্ট এর অনেকগুলো লাইন কোড আকারে সাজিয়ে সেগুলোকে একটিমাত্র লাইনের কোডে বসানোর পদ্ধতি।
JQuery হল জাভাস্ক্রিপ্ট, AJAX ও DOM দক্ষতার সাথে ব্যবহার এর জটিল বিষয়সমূহকে আরও অনেক সহজসাধ্য করা।
JQuery লাইব্রেরি এর নিম্নলিখিত আরও কিছু বৈশিষ্ট্য রয়েছেঃ
এইচটিএমএল / DOM ম্যানিপুলেশন
সিএসএস এর ম্যানিপুলেশন
এইচটিএমএল ঘটনা পদ্ধতি
ইফেক্ট এবং অ্যানিমেশন
AJAX এর
ইউটিলিটি
কেন JQuery?
আরও অন্যান্য অনেক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কস বা অবকাঠামো রয়েছে কিন্তু JQuery বর্তমানে সবচেয়ে জনপ্রিয় এবং সবচেয়ে বাড়তি সুবিধাজনক মনে হয়। অনেক বড় বড় জনপ্রিয় কোম্পানির ওয়েবসাইটে JQuery ব্যবহার করে থাকে। যেমন-
গুগল
মাইক্রোসফট
আইবিএম
Netflix
ইতাদি আরও সাইট রয়েছে…
এখন প্রশ্ন JQuery এর সব ব্রাউজারে কাজ করবে?
JQuery ইন্টারনেট এক্সপ্লোরার 6 সহ সব প্রধান ব্রাউজারগুলোতে ঠিকভাবে কাজ করবে।
