Mar 29

চিকেন এন্ড ভেজিটেবল ফ্রাইডরাইস রেসিপি

চিকেন এন্ড ভেজিটেবল ফ্রাইডরাইস রেসিপি

১। চাল- ৫০০ গ্রাম

২। ভেজিটেবল- (বাধাকপি, গাজর, গ্রিন পিপার)

৩। মুরগীর মাংস- আধা কাপ

৪। পেয়াজ- ২টি(মাঝারি)

৫। লবণ

৬। তেল

৭। সয়াসস- ৩ চামচ

৮। টমেটো সস- ৩ চামচ

৯। চিনি।

প্রনালীঃ প্রথমে দুই রকমের সস ওচিনি মিশিয়ে একটি বাটিতে রাখতে হবে।

এরপর সবজি গুলো ঝুরি ঝুরি করে ও মাংস জুলিয়ান কাট করে কাটতে হবে। চাল ধুয়ে রান্না করতে হবে এবং খেয়াল রাখতে হবে যাতে চাল বেশি সিদ্ধ না হয়। চাল সিদ্ধ হয়ে এলে এর পানি ঝরিয়ে ঠান্ডা পানি দিয়ে ধুয়ে ঝরঝরা করে নিতে হবে, প্যানে তেল গরম হলে প্রথমে মাংস দিয়ে কিছুক্ষণ ভেজে ভেজিটেবল মিক্স করে আরও কিছুক্ষণ ভাজতে হবে। এরপর এতে ভাত দিয়ে দিতে হবে। সবশেষে সসমিক্স , কাচামরিচ , পরিমানমত লবণ মিশিয়ে আরও কিছুক্ষণ ভেজে চুলো থেকে নামিয়ে ফেলতে হবে।

Mar 29

শিশুর জ্বর হলে করনীয়

শিশুর জ্বর হলে করনীয়

প্রথমেই দেখতে হবে শিশুর শরীরের তাপমাত্রা ১০০ ডিগ্রি ফারেনহাইট বা তার বেশি কিনা। যদি তাপমাত্রা ১০০ ডিগ্রি বা তার বেশি হয় তবে কুসুম গরম পানিতে ভেজা কাপড় দিয়ে কিছুক্ষণ পর পর শিশুর গা মুছে দিতে হবে। শিশুর গায়ের কাপড় খুলে তাকে খোলামেলা পরিবেশে রাখতে হবে । এছাড়া শিশুকে তরল খাবার যেমন- ফলের রস, স্যুপ, পানি বেশি করে খাওয়াতে হবে। ঘন ঘন মায়ের দুধ খাওয়াতে হবে। শিশুর জ্বর ৪৮ ঘন্টার বেশি হলে অবশ্যি ডাক্তারের কাছে নিতে হবে।

Mar 29

জেকোয়েরি দিয়ে মোবাইল টুলবার এর বাটন বানানো . 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” রাখতে হবে ।
ফুল স্ক্রীন পজিশন ছবি, ভিডিও সাইটের জন্য খুব উপযোগী ।

আর এরই ভিতর কিন্তু আমরা খুব সহজে জেকোয়েরি দিয়ে মোবাইল বাটন বানানো শিখে গেলাম । খুব সহজ তাই না । হুম, আমার কাছেও এটা খুব সহজ লাগে । তবুও কোথাও না বুঝলে কমেন্ত করতে ভুলবেন না কিন্তু ।

Mar 29

jQuery – এর মেথড গুলোকে এক এর পর এক ব্যবহার করা । jQuery – Chaining

Protap Chandra

 

জে’কুয়েরি (jQuery) চেইনিং (Chaining)

jQuery এর সাহায্যে আপনি অ্যাকশন/মেথডকে একত্রে চেইনিং (Chaining) করতে পারবেন।

চেইনিং এর সুবিধা হলো, এর মাধ্যমে একের অধিক jQuery মেথডকে একটিমাত্র এলিমেন্টের ভিতরে রান করানো যায়।

 

 

jQuery মেথড চেইনিং

এখন পযর্ন্ত আমরা একসাথে একটি jQuery স্টেটমেন্ট লেখা শিখেছি (একটির পর অন্যটি)।

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

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

একটি action কে “চেইনি” করার জন্য আপনাকে যা করতে হবে তা হলো “পূর্ববর্তী” action এর সাথে “পরবর্তী” action টি জুড়ে দিতে হবে।

নিচের উদাহরণটি css(), slideUp(), এবং slideDown() মেথডগুলোকে একত্রে চেইনিং করে। এখানে “p1” element প্রথমে লালে রুপান্তরিত হয়। এরপর এটি উপরের দিকে স্লাইডিং করে (Slide up), এবং পরে নিচের দিকে স্লাইডিং করে (Slide down)।

উদাহরণ:

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

ফলাফল : চেইনিং

 

আপনি নিজে ইচ্ছা করলে আরো মেথড জুড়ে দিতে পারেন।

পরামর্শ: যখন চেইনিং করা হচ্ছে তখন কোডের লাইনগুলো যথেষ্ট লম্বা হয়ে যেতে পারে। তবে সিনট্যাক্সের ব্যাপারে jQuery অতটা কড়াকড়ি আরোপ করে না। লাইন ব্রেক (linebreak) কিংবা অবচ্ছেদগুলো (indentations) আপনার নিজের খুশিমতো সাজিয়ে নিতে পারেন।

যেমন নিচের কোডটিও সুন্দরভাবে কাজ করবে:

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

ফলাফল : চেইনিং

 

Mar 29

jQuery – HTML DOM উপদান/element এর আয়তন (প্রস্থ, উচ্চতা )

Query এর আয়তন নিয়ে কাজ করার জন্য বেশ কিছু গুরুত্বপূর্ণ মেথড আছে:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

 

Query আয়তন

 

jQuery এর width() এবং height() মেথড

width() মেথড একটি এলিমেন্ট এর প্রসস্থতা সেট করে বা ফেরত দেয় (প্যাডিং, সীমানা, বা মার্জিন সহ)।

height() মেথড একটি এলিমেন্ট এর উচ্চতা সেট করে বা ফেরত দেয় (প্যাডিং, সীমানা, বা মার্জিন সহ)।

নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ এবং উচ্চতা দেখানো হলঃ

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});

ফলাফল : width() এবং height()

 

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);
});

ফলাফল : innerWidth () এবং innerHeight ()

 

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

 

outerWidth(true) মেথড একটি এলিমেন্ট এর এর প্রস্থ (প্যাডিং, সীমানা, বা মার্জিন সহ) ফেরত দেয়/প্রদান করে।

outerHeight(true) মেথড একটি এলিমেন্ট এর এর উচ্চতা (প্যাডিং, সীমানা, বা মার্জিন সহ) ফেরত দেয়/প্রদান করে।

$("button").click(function(){
    var txt = "";
    txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
    txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
    $("#div1").html(txt);
});

ফলাফল : outerWidth(true) মেথড এবং outerHeight(true) মেথড

 

jQuery এর আরো width() এবং height() পদ্ধতি

নিম্নলিখিত উদাহরণে আমরা (এইচটিএমএল ডকুমেন্ট) এবং উইন্ডো (ব্রাউজার ভিউপোর্ট) প্রস্থ এবং উচ্চতা দেখব:

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

ফলাফল : width() এবং height()

 

নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ ও উচ্চতা দেখানো হল:

$("button").click(function(){
    $("#div1").width(500).height(500);
});

ফলাফল : প্রস্থ ও উচ্চতা

Mar 29

jQuery – AJAX এর noConflict() মেথড । jQuery – AJAX noConflict() Method

মাহবুবুর রহমান

 

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() পদ্ধতি

 

আপনি খুব সহজেই নিজেই নিজের শর্টকাট তৈরি করতে পারেন। noConflict() মেথড jQuery তে একটি রেফারেন্স ফেরত দেয়, যা আপনি পরবর্তীতে ব্যবহারের জন্য ভ্যারিয়েবল হিসেবে সংরক্ষণ করে রাখতে পারেন।

উদাহরণ

var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery is still working!");
    });
});

ফলাফল : শর্টকাট তৈরি

 

যদি আপনার একটি jQuery code ব্লক থাকে এবং আপনি এটিকে পরিবর্তন করতে না চান, তাহলে আপনি  আপনি ready মেথড ব্যবহার করে $ সাইন পারামিটার হিসাবে ব্যবহার করতে পারেন। এটি jQuery এর ফাংশনের ভিতরে $ সাইন ব্যবহারের অনুমতি দেয় – এর বাহিরে আপনাকে jQuery ব্যবহার করতে হবে।

উদাহরণ

$.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
        $("p").text("jQuery is still working!");
    });
});

ফলাফল : ready মেথড

Mar 29

জেকয়ারি এফেক্ট মেথডস। jQuery Effect Methods Reference

জেকয়ারি এফেক্ট মেথড
নয়ন চন্দ্র সরকার

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

জেকয়ারির অ্যানিমেশন এফেক্ট তৈরি করতে যে পদ্ধতিগুলো ব্যবহার করা হয়, সেগুলো নিচে আলোচনা করা হল।

“animate ( ) মেথডঃ
এই মেথডটা নিদিষ্ট উপাদানে কাস্টম অ্যানিমেশন রান করে।

clearQueue ( ) মেথডঃ
এই মেথড অপেক্ষারত ফাংশনগুলোকে নিদিষ্ট উপাদান গুলো থেকে দূর করতে সাহায্য করে।

Delay( ) মেথডঃ
এই মেথডের মাধ্যমে সকল অপ্পেক্ষারত ফাংশনগুলোর জন্য একটা ডিলে সেট করা হয়।

Dequeue ( ) মেথডঃ
এটা পরবর্তী ফাংশন কে লাইন থেকে বিতারিত করে ফাংশন টা সম্পাদন করে।

FadeIn ( ) মেথডঃ
নির্বাচিত উপাদানগুলোকে ফেইদ ইন করে।

Fadeout ( ) মেথডঃ
নির্বাচিত উপাদানগুলোকে ফেইদ আউট করে।

fadeTo ( ) মেথডঃ
এই নিয়মটা নিদিষ্ট উপাদানগুলোকে একটা প্রদত্ত অপাছিতিতে ফেইদ ইন বা আউট করে।

fadeToggle ( ) মেথডঃ
এটা ফেইদ ইন এবং আউট এর মধ্যে টগল করে ।

Finish ( ) মেথডঃ
এই মেথডটা সব অপ্পেক্ষারত এনিমেশনগুলোকে নির্দিষ্ট উপাদাগুলথেকে থামতে, দূর করতে অথবা সম্পন্ন করতে সাহায্য করে ।

Hide ( ) মেথডঃ
এটা নির্দিষ্ট উপাদানগুলোকে হাইট করে ।

Queue ( ) মেথডঃ
এটা অপ্পকেক্ষারত ফাংশনগুলোকে নির্দিষ্ট উপদানে দেখায় ।

Show ( ) মেথডঃ
এটা সো করায়

Slidedown ( ) মেথডঃ
এটা নির্দিষ্ট উপাদানগুলোকে স্লাইড দাউন করে ।

Slideup ( ) মেথডঃ
এটা নির্দিষ্ট উপদাঙ্গুলকে স্লাইড আপ করে ।

Stop ( ) মেথডঃ
এটা চলতি অ্যানিমেশন নির্দিষ্ট উপদান থেকে থামতে সাহায্য করে ।
Toggle ( ) মেথডঃ
এটা hide() এবং show() এর মধ্যে তগল করে

Mar 29

জেকোয়েরি সিলেক্টর এর ব্যবহার এবং কাজ . 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 ইনপুট উপদান গুলোকে সিলেক্ট করবে ।

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

 

Mar 29

jQuery – AJAX এর get() and post() মেথড । jQuery – AJAX get() and post() Methods

অনুবাদক: ফয়সাল রকি

 

জেকুয়েরি – এজাক্স get() এবং post() পদ্ধতি ব্যবহার করে HTTP GET বা POST request বা অনুেরাধ-এর মাধ্যমে সার্ভারে data request পাঠানো হয়।

HTTP request: GET বনাম POST

ক্লাইন্ট ও সার্ভারের মধ্যকার request ও response এর জন্য বহুল ব্যবহৃত পদ্ধতি দুটি হলো GET ও POST.

GET: নির্দিষ্ট কোনো resource হতে data request পাঠানো হয়।

POST: নির্দিষ্ট কোনো resource এ data process এর উদ্দেশ্যে পাঠানো হয়।

মূলতঃ সার্ভার হতে কোনো data পুনরুদ্ধার করাই হলো GET এর কাজ। উল্লেখ্য যে, GET এর মাধ্যমে data পুনরুদ্ধারের ক্ষেত্রে অনেক সময় cached data দেখাতে পারে।
POST এর মাধ্যমেও সার্ভার হতে data পুনরুদ্ধার করা যায়। তবে POST এর পদ্ধতির ক্ষেত্রে কখনো cached data দেখায় না এবং প্রায় সময়ই data পাঠানোর ক্ষেত্রে request সহ প্রেরণ করা হয়।

GET ও POST সম্বন্ধে বিস্তারিত জানতে এবং উভয়ের পার্থক্য জানতে “HTTP পদ্ধতি: GET বনাম POST” অধ্যায়টি পড়ুন।

jQuery $.get() পদ্ধতি

এই $.get() পদ্ধতিতে HTTP GET request এর সাথে সার্ভারে data request পাঠানো হয়।
সিনট্যাক্স:

$.get(URL,callback);

required বা প্রয়োজনীয় URL parameter বা URL এর মানদন্ডটি আপনার পাঠানো এর URL request কে নির্দেশ করে।

optional callback parameter টি এমন একটি ফাংশন যা request টি সফল হলে কাজ করে।

নিম্নোক্ত উদাহরণে $.get() পদ্ধতির সাহায্যে সার্ভার হতে একটি ফাইল পুনরুদ্ধার দেখানো হলো।

$("button").click(function(){
    $.get("demo_test.asp", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

ফলাফল : $.get() পদ্ধতির সাহায্যে সার্ভার হতে একটি ফাইল পুনরুদ্ধার

$.get() এর প্রথম parameter টি আপনার পাঠানো এর URL request কে নির্দেশ করে (“demo_test.asp”).

দ্বিতীয় parameter টি একটি callback ফাংশন। প্রথম callback parameter টি request কৃত page এর content কে নির্দেশ করে এবং দ্বিতীয় callback parameter টি request এর status কে নির্দেশ করে।

টিপ: এখানে ASP file এর একটা উদাহরণ দেয়া হলো (“demo_test.asp”)

<%
 response.write("This is some text from an external ASP file.")
 %>

 

jQuery $.post() পদ্ধতি

$.post() পদ্ধতিতে HTTP POST request এর সাথে সার্ভারে data request পাঠানো হয়।

সিনট্যাক্স

$.post(URL,data,callback);

 

required বা প্রয়োজনীয় URL parameter বা URL এর মানদন্ডটি আপনার পাঠানো এর URL request কে নির্দেশ করে।

optional data parameter টি নির্দিষ্ট কিছু data কে নির্দেশ করে যা request এর সাথে পাঠানো হয়।

optional callback parameter টি এমন একটি ফাংশন যা request টি সফল হলে কাজ করে।

নিম্নোক্ত উদাহরণে $.post() পদ্ধতির সাহায্যে request এর সাথে নির্দিষ্ট কিছু data পাঠানো দেখানো হলো।

উদাহরণ:

$("button").click(function(){
    $.post("demo_test_post.asp",
    {
        name: "Donald Duck",
        city: "Duckburg"
    },
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

ফলাফল : $.post()

 

$.post() এর প্রথম parameter টি আপনার পাঠানো URL request কে নির্দেশ করে (“demo_test_post.asp”).

অতঃপর আমরা কিছু data (নাম ও শহর) request এর সাথে send করি।

“demo_test_post.asp” এর ASP script parameter গুলোকে read করে, process করে এবং একটি ফলাফল return করে।

তৃতীয় parameter টি একটি callback ফাংশন। প্রথম callback parameter টি request কৃত page এর content কে নির্দেশ করে এবং দ্বিতীয় callback parameter টি request এর status কে নির্দেশ করে।

টিপ: এখানে ASP file এর একটা উদাহরণ দেয়া হলো (“demo_test_post.asp”):

<%
 dim fname,city
 fname=Request.Form("name")
 city=Request.Form("city")
 Response.Write("Dear " & fname & ". ")
 Response.Write("Hope you live well in " & city & ".")
 %>

 

 

Mar 29

jQuery ইফেক্টস – স্লাইড ইফেক্ট। jQuery Effects – Sliding

আলামিন মনির

 

JQuery দিয়ে আপনি বিভিন্ন উপাদানের একটি স্লাইডার প্রভাব তৈরি করতে পারেন.

jQuery এর নিম্নলিখিত স্লাইড পদ্ধতি আছে:

jQuery slideDown()

JQuery এর slideDown () মেথড প্রদর্শন করে।

jQuery slideUp()

JQuery এর slideUp () মেথড প্রদর্শন করে।

jQuery slideToggle()

JQuery এর SlideToggle () মেথড প্রদর্শন করে।

তিনটি পদ্ধতি ধাপে ধাপে নিম্নে আলোচনা করা হলঃ

 

jQuery এর slidedown () পদ্ধতি

JQuery এর slidedown() মেথড এটি দিয়ে উপাদান নিচের দিকে স্লাইড করে।

Syntax

$(selector).slideDown(speed,callback);

বিভিন্ন প্যারামিটার দিয়ে গতির প্রভাবের সময়কাল নির্ধারণ করা হয়। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি স্লাইডিং সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।
নিম্নলিখিত উদাহরণে slidedown () মেথড দেখানো হল:

$("#flip").click(function(){
    $("#panel").slideDown();
});

ফলাফল :  slideDown()

 

jQuery এর slideUp () পদ্ধতি

JQuery এর slideUp () মেথডটি একটি উপাদানকে উপরের দিকে স্লাইড করে।
Syntax

$(selector).slideUp(speed,callback);

এটাও বিভিন্ন প্যারামিটার দিয়ে গতির প্রভাবের সময়কাল নির্ধারণ করা হয়। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি স্লাইডিং সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে slideUp () মেথড দেখানো হলঃ

$("#flip").click(function(){
    $("#panel").slideUp();
});

ফলাফল : slideUp()

 

slideToggle () পদ্ধতি

JQuery এর slideToggle () মেথড slidedown () এবং slideUp () পদ্ধতির মধ্যে toggles করে।

যে সকল উপাদানের স্লাইড নিচে slid হয়েছে, slideToggle () তাদের স্লাইড হবে

যে সকল উপাদানের স্লাইড আপ slid হয়েছে, slideToggle () তাদের নিচে স্লাইড হবে.

Syntax

$(selector).slideToggle(speed,callback);

এটাও বিভিন্ন প্যারামিটার দিয়ে গতির প্রভাবের সময়কাল নির্ধারণ করা হয়। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড.
নিম্নলিখিত উদাহরণে slideToggle () মেথড দেখানো হলঃ

$("#flip").click(function(){
    $("#panel").slideToggle();
});

ফলাফল : slideToggle()