জে-কোয়েরী (jQuery)

Dynamically add/remove textbox : জে-কোয়েরী -(পর্ব-২২)

নিচের project টি মূলত jQuery দিয়ে কিভাবে dynamic কাজ করা হয় তার একটি ধারনা মাত্র। এতে লক্ষ্য করে দেখুন Add, Remove Button এ click করার সাথে সাথে counter এর মান বৃদ্ধি পাচ্ছে এবং নতুন object Add অথবা Remove হচ্ছে। এখানে text input box এর html code concate করে text input box এর group তৈরী করা …

Dynamically add/remove textbox : জে-কোয়েরী -(পর্ব-২২) Read More »

jQuery form selectors উদাহরন : জে-কোয়েরী -(পর্ব-২১)

jQuery তে ফর্ম element গুলি সহজে এবং দক্ষতার সাথে select করার জন্য অনেক selector রয়েছে, ক্লায়েন্ট সাইটে কাজ করার জন্য এই ফর্ম element গুলি select করা অত্যান্ত জরুরী। নিম্নে এদের বেশ কিছু তুলে ধরা হল- 1. TextBox – $(‘input:text’) //To select a textbox $(‘input:text’); //To get the textbox value $(‘input:text’).val(); //To set the textbox value …

jQuery form selectors উদাহরন : জে-কোয়েরী -(পর্ব-২১) Read More »

:ভিজিবল সিলেক্টর (:visible Selector) : জে-কোয়েরী -(পর্ব-২০)

এটি document এর দৃশ্যমান(visible) element কে select করবে। ইহা hidden selector এর ঠিক বিপরীত। যদি কোন element document এ জায়গা দখল করে তবে সেটি vilible হিসেবে বিবেচ্য হবে। vilible element এর height অথবা width অবশ্যই 0(zero) থেকে বড় হবে। [বি:দ্র: যদি কোন element এর visibility :hidden অথবা opacity :0 থাকে তবে ঐ element টি যতক্ষন …

:ভিজিবল সিলেক্টর (:visible Selector) : জে-কোয়েরী -(পর্ব-২০) Read More »

:হিডেন সিলেক্টর(:hidden Selector) : জে-কোয়েরী -(পর্ব-১৯)

এটি লুকায়িত (hidden) element কে select করবে। নিম্নক্ত কারন গুলির জন্য কোন element কে hidden বলে বিবেচনা করা হয় – যদি কোন element এর CSS display value none থাকে (display:none)। যদি কোন form element এর type=”hidden” থাকে। যদি কোন element এর width এরং hidth 0(zero) set করা হয় (width=”0″ height=”0″)। যদি কোন element এর ancestor …

:হিডেন সিলেক্টর(:hidden Selector) : জে-কোয়েরী -(পর্ব-১৯) Read More »

এট্রিবিউট সিলেক্টর গুলি নিয়ে একটি ছোট project : জে-কোয়েরী -(পর্ব-১৮)

নিচের project টি মূলত এট্রিবিউট সিলেক্টর গুলি ভালবাবে বুঝার সহায়তা করবে। এতে লক্ষ্য করে দেখুন, যে Button টিতে click করা হচ্ছে ঐ Button সংস্লিষ্ট element টিতে লাল রঙের একটি border সৃষ্টি হচ্ছে। Project এর বর্ননা : যখন button element এ ক্লিক করা হচ্ছে তখন ঐ button এর উপরে যে text আছে তা str নামক veriable …

এট্রিবিউট সিলেক্টর গুলি নিয়ে একটি ছোট project : জে-কোয়েরী -(পর্ব-১৮) Read More »

মাল্টিপাল এট্রিবিউট সিলেক্টর(Multiple attribute selector): জে-কোয়েরী -(পর্ব-১৭)

এ পর্যন্ত আমরা যেসকল সিলেক্টর নিয়ে কথা বলেছিলাম তা প্রায় সবই single attribute selector (যে selector একটি মাত্র attribute এর মাধ্যমে element কে detect করে )। এখন আমরা যে selector নিয়ে আলোচনা করবো সেটি একাধিক attribute support করে , একাধিক attribute support করে বলে একে Multiple attribute selector বলা হয়। একে logical selector ও বলা …

মাল্টিপাল এট্রিবিউট সিলেক্টর(Multiple attribute selector): জে-কোয়েরী -(পর্ব-১৭) Read More »

স্টার্ট ওয়িথ এবং হ্যাজ সিলেক্টর(start with and has selector):জে-কোয়েরী -(পর্ব-১৬)

স্টার্ট ওয়িথ সিলেক্টর (start with selector) : যেসকল উপাদানের attribute এর value searching value দ্বরা শুরু হয়েছে তাদেরকে select করবে। অর্থাৎ, এটি attribute এর value এর প্রথম অংশের দিকে নজর রাখে। এক্ষেত্রে প্রথম অংশের পরে space থাকা বাঞ্চনিয় নয়। start with selector Syntax : $(‘[A^=”B”]’) Description : ঐ সকল element কে select কর যাদের A …

স্টার্ট ওয়িথ এবং হ্যাজ সিলেক্টর(start with and has selector):জে-কোয়েরী -(পর্ব-১৬) Read More »

ইকুয়াল এবং নট ইকুয়াল সিলেক্টর(Equal & not equal Selector):জে-কোয়েরী -(পর্ব-১৫)

ইকুয়াল সিলেক্টর(Equal Selector) ঐ সকল উপাদানকে খুঁজে বের করবে যাদের attribute এর value ঠিক searching value এর মত। অপরদিকে not equal Selector টি, যাদের attribute এর value searching value না তাদেরকে খুঁজে বের করবে। অর্থাৎ, not equal Selector টি equal Selector টির ঠিক বিপরীত। Equal selector Syntax : $(‘[A =”B”]’) Description : ঐ সকল element …

ইকুয়াল এবং নট ইকুয়াল সিলেক্টর(Equal & not equal Selector):জে-কোয়েরী -(পর্ব-১৫) Read More »

কন্টেইন্ডস্ ওয়ার্ড এবং এন্ড সিলেক্টর(Contains word & end Selector):জে-কোয়েরী -(পর্ব-১৪)

কন্টেইন্ডস্ ওয়ার্ড সিলেক্টর(Contains word Selector) : এটি attribute এর value এর মধ্যে নির্দিষ্ট কোন word কে খোঁজ করবে যার পরে অবশ্যই একটি space থাকতে হবে। অর্থাৎ, ঠিক word টিকে খোঁজ করবে। Contains word selector Syntax : $(‘[A~=”B”]’) Description : ঐ সকল element কে select কর যাদের A attribute এর value এর মধ্যে ‘B’ একটি space …

কন্টেইন্ডস্ ওয়ার্ড এবং এন্ড সিলেক্টর(Contains word & end Selector):জে-কোয়েরী -(পর্ব-১৪) Read More »

কন্টেইন্ডস্ সিলেক্টর(Contains Selector):জে-কোয়েরী -(পর্ব-১৩)

কন্টেইন্ডস্ সিলেক্টর(Contains Selector) attribute এর value এর মধ্যে নির্দিষ্ট কোন word কে খোঁজ করে, যদি পায় তবে ঐ attribute টিকে select করে। এ ক্ষেত্রে নির্দিষ্ট word টি attribute value এর প্রথম, মাঝে এবং শেষে(substring) যেকোন অবস্থানে হতে পারে। Contains selector Syntax : $(‘[A*=”B”]’) Description : ঐ সকল element কে select কর যাদের A attribute এর …

কন্টেইন্ডস্ সিলেক্টর(Contains Selector):জে-কোয়েরী -(পর্ব-১৩) Read More »

প্রিফিস্ক সিলেক্টর(Prefix Selector):জে-কোয়েরী -(পর্ব-১২)

Prefix selector Syntax : $(‘[A|=”B”]’) Description : ঐ সকল element কে select কর যাদের A attribute এর value ‘B’ অথবা ‘B-‘। Example : $(‘a[lang|=en]’) – anchor(<a></a>) element এ যাদের lang = ‘en’ অথবা lang = ‘en-‘ তাদের সকলকে select কর। আমরা সবাই HTML এর built-in attribute ব্যবহার করেছি ; built-in attribute বলতে ঐ সকল attribute …

প্রিফিস্ক সিলেক্টর(Prefix Selector):জে-কোয়েরী -(পর্ব-১২) Read More »

এট্রিবিউট সিলেক্টর(Attribute Selector): জে-কোয়েরী -(পর্ব-১১)

jQuery এর অন্যতম একটি গুরুত্বপূর্ন বিষয় হল Attribute Selector। কারন আমরা যারা php platform এ কাজ করছি তারা হয়তো লক্ষ্য করেছি যে php তে event(click, change, focus, keypress ইত্যাদি) handle করার তেমন ব্যাবস্তা নেই(ফ্রেমওয়ার্ক ছাড়া)। তাই client site event handling এর জন্য jQuery ব্যবহার করা হয়। যখন আমরা কোণ উপাদানের উপর event handle করবো, তখন …

এট্রিবিউট সিলেক্টর(Attribute Selector): জে-কোয়েরী -(পর্ব-১১) Read More »

ইলিমেন্ট এবং মাল্টিপাল সিলেক্টর(Element & Multiple Selector): জে-কোয়েরী -(পর্ব-১০)

এবার আমরা দেখব কিভাবে কোণ document (DOM tree) এ এক বা একাধিক উপাদানের উপর action সম্পন্ন করা যায়। jQuery element selector এর মাধ্যমে কোণ নির্দিষ্ট DOM tree একটি উপাদানকে খুঁজে বের করে তার উপর action সম্পন্ন করা হয়।এখানে উপাদান বলতে tag name কে নির্দেশ করা হয়েছে।কোণ উপাদানকে খুঁজার জন্য jQuery, জাভাস্ক্রিপ্টের getElementByTagName() ফাংশন ব্যবহার করে। …

ইলিমেন্ট এবং মাল্টিপাল সিলেক্টর(Element & Multiple Selector): জে-কোয়েরী -(পর্ব-১০) Read More »

ক্লাস এবং আইডি সিলেক্টর (Class & ID Selector): জে-কোয়েরী -(পর্ব-৯)

একই class যুক্ত html element কে খুজেঁ বের করার জন্য class selector ব্যবহার করা হয়। ধরুন অপনি চাচ্ছেন .square class যুক্ত যেসকল html element আছে তাদেরকে click করলে কোন message দেখাবেন অথবা শর্ত-সাপেক্ষে ঐ class যুক্ত element এ নতুন কোন content যুক্ত করবেন, এ ক্ষেত্রে আপনি .square class কে reference হিসেবে ব্যবহার করতে পারেন। অপরদিকে …

ক্লাস এবং আইডি সিলেক্টর (Class & ID Selector): জে-কোয়েরী -(পর্ব-৯) Read More »

অল সিলেক্টর (All Selector): জে-কোয়েরী -(পর্ব-৮)

অল সিলেক্টর কে * প্রতীক দ্বারা প্রকাশ করা হয়। ইহা DOM এর সকল উপাদান কে select করে (Selects all elements available in a DOM)।একে universal selector ও বলা হয়।যদি ইহা কোন HTML element এর সাথে ব্যবহার করা হয় তবে ইহা ঐ specified element এর সকল child element সিলেক্ট করবে। Syntax : $("*") Example : $(‘*’) …

অল সিলেক্টর (All Selector): জে-কোয়েরী -(পর্ব-৮) Read More »

জে-কোয়েরী সিলেক্টর সমূহ (jQuery Selectors): জে-কোয়েরী -(পর্ব-৭)

jQuery সিলেক্টর দ্বারা এইচটিএমএল এলিমেন্ট কে গ্রুপ হিসাবে অথবা একটি একক উপাদান হিসাবে নির্বাচন করার পর, তা manipulate করা যায়। সিলেক্টর দ্বারা পছন্দ অনুযায়ী HTML document থেকে element/attribute কে ধরা(grub) যায়।jQuery বিদ্যমান(existing) সিএসএস Selectors সমর্থন করে, এবং এ ছাড়াও, এর কিছু নিজস্ব selectors রয়েছে। সব ধরনের jQuery সিলেক্টর dollar sign and parentheses: $() এর মাধ্যমে …

জে-কোয়েরী সিলেক্টর সমূহ (jQuery Selectors): জে-কোয়েরী -(পর্ব-৭) Read More »

জে-কোয়েরী অবজেক্ট এ্যাস্কেসর(jQuery Object Accessors): জে-কোয়েরী -(পর্ব-৬)

আমি jQuery Object Accessors সর্ম্পকে বলব,এর অর্থ থেকেই হয়ত বুজে গিয়েছেন এদের কাজ হল document এর object গুলোকে access করা। নিচের কোডটুকুতে আমি নামের একটা link খুজছি যেটাতে click করলে পুরো document-এ যতগুলো div element আছে তাদের সবার color red না থাকলে red কর,আর red থাকলে এদের আগে যে color ছিল তা কর। এখন আপনার …

জে-কোয়েরী অবজেক্ট এ্যাস্কেসর(jQuery Object Accessors): জে-কোয়েরী -(পর্ব-৬) Read More »

জে-কোয়েরী সেল্ফ এ্যাক্সিউটিং ফাংশন(jQuery self executing function) : জে-কোয়েরী -(পর্ব-৫)

Javascript এ যারা window.onload() function নিয়ে কাজ করেছেন তারা হয়ত খেয়াল করেছেন, এর মাধ্যমে কল করা কোন ফাংশন তখনই execute হয় যখন page এর সব object ও content load হয় ।মানে করুন কোন image যদি কোন কারণে লোড না হতে পারে তাহলে আপনার onload() এর দ্বারা যে ফাংশন কল করা হয়েছে তা আর execute হবে …

জে-কোয়েরী সেল্ফ এ্যাক্সিউটিং ফাংশন(jQuery self executing function) : জে-কোয়েরী -(পর্ব-৫) Read More »

জে-কোয়েরী সিনট্যাক্স(jQuery Syntax) : জে-কোয়েরী -(পর্ব-৪)

jQuery syntax দ্বরা html উপাদান(element) কে select করা হয় এবং ঐ উপাদান গুলির(elements) উপর কিছু কার্য(action) সম্পাদন করা হয়। jQuery কে প্রকাশের জন্য নিম্নের প্রতীক গুলি ব্যবহার করা হয়। যেমন: jQuery, window.jQuery, $( dollar sign), window.jQuery.$ । তবে আমরা $ প্রতীকটি বেশী ব্যবহার করবো, কারন $ প্রতীকটি সবচেয়ে ছোট এবং সহজ। jQuery লেখার Basic syntax …

জে-কোয়েরী সিনট্যাক্স(jQuery Syntax) : জে-কোয়েরী -(পর্ব-৪) Read More »

জে-কোয়েরী কোডিং পদ্ধতি(Coding Process of jQuery): জে-কোয়েরী -(পর্ব-৩)

jQuery তে code লেখার পূর্বে অমাদের স্বরন রাখতে হবে যে ব্রাউজারে JavaScript সচল(active) আছে কিনা; যদি সচল না থাকে তবে অবশ্যই সচল করতে হবে।সাধারনত (default) ব্রাউজারে JavaScript সচল থাকে। এখন আপনারা দেখবেন কিভাবে  JavaScript ইন্টারনেট এক্সপ্লোরার,ফায়ারফক্স, এবং অপেরা তে সচল করতে হয়। Internet Explorer –এ সচল করারপদ্ধতি: প্রথমে Tools menu তে Click করতে হবে তারপর …

জে-কোয়েরী কোডিং পদ্ধতি(Coding Process of jQuery): জে-কোয়েরী -(পর্ব-৩) Read More »