Jan 30

jQuery মোবাইল ওরিয়েন্টেশন ইভেন্ট (jQuery Mobile Orientation Event)

jQuery মোবাইল ওরিয়েন্টেশন ইভেন্ট (jQuery Mobile Orientation Event)
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)

jQuery মোবাইল orientationchange ইভেন্ট

orientationchange ইভেন্ট ট্রিগার করে যখন ব্যবহারকারী উল্লম্বভাবে বা অনুভূমিকভাবে মোবাইল ডিভাইসকে ঘোরায় (rotates).

orientationchange ইভেন্ট ব্যবহার করার জন্য, উইন্ডো অবজেক্টে এটি এটাচ করতে হবে:

$(window).on(“orientationchange”,function(){
alert(“The orientation has changed!”);
});

কলব্যাক ফাংশন এ আরগুমেন্ট থাকতে পারে, ইভেন্ট অবজেক্ট, যেটি মোবাইল ডিভাইস এর অরিয়েন্টশনকে পূর্বে ফিরিয়ে নিয়ে আসে:”পোট্রেইট” (ডিভাইসটি উল্লম্ব অবস্থানে থাকে) বা “আড়াআড়ি( landscape )” (ডিভাইসটি অনুভূমিক অবস্থায় থাকে):

উদাহরণ:
$(window).on(“orientationchange”,function(event){
alert(“Orientation is: ” + event.orientation);
});

যেহেতু orientationchange ইভেন্ট window অবজেক্ট এ আবদ্ধ, আমরা window.orientation প্রোপার্টি ব্যবহার করতে পারি। উদাহরণস্বরুপ: পোট্রেইট ও ল্যান্ডস্ক্যাপ ভিউ এর জন্য আলাদা স্টাইল ব্যবহার করার জন্য:

উদাহরণ:
$(window).on(“orientationchange”,function(){
if(window.orientation == 0) // Portrait
{
$(“p”).css({“background-color”:”yellow”,”font-size”:”300%”});
}
else // Landscape
{
$(“p”).css({“background-color”:”pink”,”font-size”:”200%”});
}
});

window.orientation প্রোপার্টি রিটার্ন পোট্রোইট এর জন্য ০ এবং ল্যান্ডস্ক্যাপ এর জন্য 90 বা -90 ।

Jan 29

অ্যাঙ্গুলার জেএস (AngularJS) ইভেন্টস

অ্যাঙ্গুলার জেএস (AngularJS) ইভেন্টস
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)

AngularJS এর নিজস্ব এইচটিএমএল ইভেন্টস্ নির্দেশনা (directives) আছে.

ng-click ডিরেক্টিভ

ng-click ডিরেক্টিভ একটি AngularJS ক্লিক ইভেন্টকে সংজ্ঞায়িত করে.

AngularJS উদাহরণ:
<div ng-app=”” ng-controller=”myController”>

<button ng-click=”count = count + 1″>Click me!</button>

<p>{{ count }}</p>

</div>

HTML এর এলিমেন্ট হাইড (অদৃশ্য) করা

ng-hide ডিরেক্টিভ ব্যবহার করা যেতে পারে এপ্লিকেশন এর কোন একটি অংশের দৃশ্যমানতা নির্ধারণের জন্য।
ng-hide=”true” ভ্যালু একটি HTML এলিমেন্টকে অদৃশ্য করে।
ng-hide=”false” ভ্যালু একটি HTML এলিমেন্টকে দৃশ্যমান করে।

AngularJS উদাহরণ:
<div ng-app=”” ng-controller=”personController”>

<button ng-click=”toggle()”>Toggle</button>

myVar”>
First Name: <input type=”text” ng-model=”firstName”>

Last Name: <input type=”text” ng-model=”lastName”>

<br>
Full Name: {{firstName + ” ” + lastName}}
</p>

</div>

<script>
function personController($scope) {
$scope.firstName = “John”,
$scope.lastName = “Doe”
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>

উপরোক্ত এপ্লিকেশন ব্যাখ্যা:

PersonController এর ব্যবহার কন্ট্রোলার সম্পর্কে অধ্যায়ে আলোচনার অনুরুপ।

অ্যাপ্লিকেশনে একটি ডিফল্ট প্রোপার্টি (একটি ভেরিয়েবল) আছে: $scope.myVar = false;

ng-hide ডিরেক্টিভ <p> এলিমেন্ট সহ দুইটি ইনপুট ফিল্ড এর দৃশ্যমানতা নির্ধারণ করে, myVar এর (true or false) মান অনুযায়ী।

toggle() ফাংশন, myVar এর টগল করে true এবং false এর মধ্যে।
ng-hide=”true” ভ্যালু একটি HTML এলিমেন্টকে অদৃশ্য করে।

HTML এলিমেন্টসমূহ দেখানো

ng-show ডিরেক্টিভ ও ব্যবহার করা যেতে পারে এপ্লিকেশন এর কোন একটি অংশের দৃশ্যমানতা নির্ধারণের জন্য।
ng-show =”false” ভ্যালু একটি HTML এলিমেন্টকে অদৃশ্য করে।
ng-show =”true” ভ্যালু একটি HTML এলিমেন্টকে দৃশ্যমান করে।
এখানে উপরের মতো একই উদাহরণ ng-hide এর পরিবর্তে ng-show ব্যবহার করে দেখানো হলো:

AngularJS উদাহরণ:
<div ng-app=”” ng-controller=”personController”>

<button ng-click=”toggle()”>Toggle</button>

<p ng-show=”myVar”>
First Name: <input type=”text” ng-model=”firstName”>

Last Name: <input type=”text” ng-model=”lastName”>

<br>
Full Name: {{firstName + ” ” + lastName}}
</p>

</div>

<script>
function personController($scope) {
$scope.firstName = “John”,
$scope.lastName = “Doe”
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>

Jan 29

অ্যাঙ্গুলার জাভাস্ক্রিপ্ট কন্ট্রোলারস . AngularJS Controllers

1. লিখেছেন সুদীপ্ত সাহা

অ্যাঙ্গুলার জাভাস্ক্রিপ্ট কন্ট্রোলারস

অ্যাঙ্গুলার জাভাস্ক্রিপ্ট কন্ট্রোলারস অ্যাঙ্গুলার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনের ডাটাগুলো কন্ট্রোল করে। এগুলো জাভাস্ক্রিপ্টের রেগুলার অবজেক্ট।

অ্যাঙ্গুলার জাভাস্ক্রিপ্টের অ্যাপ্লিকেশনগুলো কন্ট্রোলার দ্বারা নিয়ন্ত্রণ করা হয়। ng-controller ডিরেকটিভ অ্যাপ্লিকেশন কন্ট্রোলকে নির্দেশ করে। কন্ট্রোলার হল জাভাস্ক্রিপ্টের অবজেক্ট যা অবজেক্ট কন্সট্রাক্টর গঠনের মাধ্যমে তৈরি করা হয়।

personController”>
First Name: <input type=”text” ng-model=”firstName”>

Last Name: <input type=”text” ng-model=”lastName”>

<br>
Full Name: {{firstName + ” ” + lastName}}
</div>

<script>
function personController($scope) {
$scope.firstName=”John”,
$scope.lastName=”Doe”
}
</script>

অ্যাপ্লিকেশনের বর্ণনাঃ
অ্যাঙ্গুলার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন ng-app দ্বারা নির্দেশ করা হয়। এটি <div> এর ভেতরে রান হয়। ng-controller কন্ট্রোলার অবজেক্টের নাম নির্দেশ করে।
personController ফাংশন হচ্ছে জাভাস্ক্রিপ্টের একটি ষ্ট্যাণ্ডার্ড অবজেক্ট কন্সট্রাক্টর। অ্যাঙ্গুলার জাভাস্ক্রিপ্টে personControllerকে $scope অবজেক্ট দ্বারা কল করা হয়। এখানে $scope হল একটি অ্যাপ্লিকেশন অবজেক্ট (অ্যাপ্লিকেশনের ভ্যারিয়েবল এবং ফাংশনের ধারক)। personController, $scope অবজেক্টে দুইটি প্রপার্টি (ভ্যারিয়েবল) তৈরি করে, firstName এবং lastName।
ng-model ইনপুট ফিল্ডের কন্ট্রোলার প্রপার্টি (firstName এবং lastName) কে নির্দিষ্ট করে দেয়।

কন্ট্রোলার মেথডসঃ
এই উদাহরণটিতে কন্ট্রোলার অবজেক্টের দুইটি প্রপার্টিসহ কার্যপদ্ধতি দেখানো হয়েছেঃ lastName এবং firstName। একটি কন্ট্রোলারের মেথডও থাকতে পারে (ফাংশন অবজেক্ট প্রপার্টি হিসেবে)

<div ng-app=”” ng-controller=”personController”>
First Name: <input type=”text” ng-model=”firstName”>

Last Name: <input type=”text” ng-model=”lastName”>

<br>
Full Name: {{fullName()}}
</div>

<script>
function personController($scope) {
$scope.firstName = “John”,
$scope.lastName = “Doe”,
$scope.fullName = function() {
return $scope.firstName + ” ” + $scope.lastName;
}
}
</script>

এক্সটারনাল ফাইলের কন্ট্রোলারঃ
বড় ধরনের অ্যাপ্লিকেশনে কন্ট্রোলারগুলো সাধারনত এক্সটারনাল ফাইলে রাখা হয়। নিচের কোডটি personController.js নামের একটি এক্সটারনাল ফাইলে <script> ট্যাগের মধ্যে কপি করে রাখতে হবে।

অ্যাঙ্গুলার জাভাস্ক্রিপ্ট উদাহরনঃ

<div ng-app=”” ng-controller=”personController”>
First Name: <input type=”text” ng-model=”firstName”>

Last Name: <input type=”text” ng-model=”lastName”>

<br>
Full Name: {{firstName + ” ” + lastName}}
</div>

<script src=”personController.js”></script>

আরেকটি উদাহরণঃ
এই উদাহরণটির জন্য আমরা প্রথমে একটি নতুন কন্ট্রোলার ফাইল তৈরি করবঃ

function namesController($scope) {
$scope.names = [
{name:’Jani’,country:’Norway’},
{name:’Hege’,country:’Sweden’},
{name:’Kai’,country:’Denmark’}
];
}

এবং তারপর এই কন্ট্রোলার ফাইলটি অ্যাপ্লিকেশনে ব্যবহার করবঃ

<div ng-app=”” ng-controller=”namesController”>
<ul>
<li ng-repeat=”x in names”>
{{ x.name + ‘, ‘ + x.country }}
</li>
</ul>
</div>

<script src=”namesController.js”></script>

Jan 29

jQuery Traversing পদ্ধতি . JQuery – Traversing Methods

jQuery Traversing পদ্ধতি
ইন্দ্র ভূষণ শুভ

jQuery Traversing পদ্ধতি
পদ্ধতি বর্ণনা
add() একই রকম উপাদানের সেটে উপাদান যোগ করা
addBack() বর্তমান সেটের সাথে পুর্বের সেটের উপাদান যোগ করা
andSelf() ১.৮ সংস্করণ বাদে। addBack() এর অন্য নাম
children() বাছাইকৃত উপাদানের সব direct children ফিরে আসে
closest() বাছাইকৃত উপাদানের প্রথম ancestor ফিরে আসে
contents() বাছাইকৃত উপাদানের সব direct children ফিরে আসে ( টেক্সট এবং মন্তব্য
নোড সহ)
each() একই রকম প্রত্যেকটি উপাদান একটি ফাংশন সঞ্চালন করে
end() বর্তমান চেইনের সাম্প্রতিক ফিল্টারিং অপারেশন শেষ হয়, এবং একই রকম
উপাদানের সেট তার পূর্বের অবস্থাই ফিরে যায়।
eq() একটি উপাদান নির্দিষ্ট সংখ্যক সূচক সহ বাছাইকৃত উপাদানে ফিরে আসে
filter() একই রকম উপাদানের সংখ্যা এমনভাবে কমানো হয় যাতে বাছাইকৃত
উপাদানের সাথে মিলে যায় অথবা ফাংশন টেস্ট অতিক্রম করতে পারে
find() বাছাইকৃত উপাদানের Descendant উপাদান ফিরে আসে
first() বাছাইকৃত উপাদানের প্রথম উপাদান ফিরে আসে
has() যেসব উপাদানের ভিতর এক বা ততোধিক উপাদান রয়েছে তারা সবাই ফিরে
আসে
is() নির্বাচক / উপাদান / jQuery বস্তুর বিরুদ্ধে একই রকম উপাদানের সেট
পরীক্ষা করা হয়, এবং যদি একটি উপাদান প্রদত্ত আর্গুমেন্টের সাথে মিলে
যায় তাহলে সত্যি ফিরে আসে
last() বাছাইকৃত উপাদেনের শেষ উপাদান ফিরে আসে
map() একই রকম সেটের প্রতিটি উপাদান একটি ফাংশনের মধ্য দিয়ে যায়, ফিরে
আসা মান ধারনকারী jQuery বস্তু তৈরি করে
next() বাছাইকৃত উপাদেনের পরবর্তি sibling উপাদান ফিরে আসে
nextAll() বাছাইকৃত উপাদেনের সব পরবর্তি sibling উপাদান ফিরে আসে
nextUntil() সব পরবর্তি sibling উপাদান প্রদত্ত দুইটি আর্গুমেন্টের মধ্যে ফিরে আসে
not() বাছাইকৃত উপাদান সেট থেকে উপাদান বাদ দেওয়া হয়
offsetParent() প্রথম অবস্থার parent উপাদানে ফিরে আসে
parent() বাছাইকৃত উপাদানের সরাসরি parent উপাদান ফিরে আসে
parents() বাছাইকৃত উপাদানের সব ancestor উপাদান ফিরে আসে
parentsUntil() প্রদত্ত দুইটি আর্গুমেন্টের মধ্যে সব ancestor উপাদান ফিরে আসে
prev() বাছাইকৃত উপাদানে পূর্বের sibling উপাদান ফিরে আসে
prevAll() বাছাইকৃত উপাদানে পূর্বের সব sibling উপাদান ফিরে আসে
prevUntil() প্রদত্ত দুইটি আর্গুমেন্টের মধ্যে পূর্বের সব sibling উপাদান ফিরে আসে
siblings() বাছাইকৃত উপাদেনের সব sibling উপাদান ফিরে আসে
slice() একই রকম উপাদানের সেটকে একটি পরিসীমা সূচকের উপসেটে কমানো
হয়

Jan 29

জেক্যুয়েরি এজাক্স মেথডস . JQuery – AJAX Methods

1. লিখেছেন সুদীপ্ত সাহা

জেক্যুয়েরি এজাক্স মেথডস

এজাক্স হল কোন ওয়েব পেজকে সম্পূর্ণ রিলোড না করে সার্ভারের মধ্যে থেকে ডাটার আদান-প্রদানের মাধ্যমে ওয়েব পেজের কোন অংশের আপডেট করার একটি কৌশল।

নিচের টেবিলে জেক্যুয়েরিতে ব্যবহৃত এজাক্স মেথডগুলো তালিকাভুক্ত করা হয়েছেঃ

মেথড বর্ণনা
$.ajax() এজাক্সের async রিকোয়েস্ট সম্পাদন করা
$.ajaxPrefilter() $.ajax() মেথডে কোন রিকোয়েস্ট প্রেরণের আগে কাস্টম অপশনগুলো পরিচালনা করা অথবা বিদ্যমান অপশনগুলোকে পরিবর্তন করা
$.ajaxSetup() ভবিষ্যতে কোন AJAX রিকোয়েস্টের জন্য ডিফল্ট ভ্যালু সেট করা
$.ajaxTransport() AJAX ডাটা পরিচালনার জন্য অবজেক্ট তৈরি করা
$.get() সার্ভার থেকে AJAX HTTP GET রিকোয়েস্টের মাধ্যমে ডাটা লোড করা
$.getJSON() সার্ভার থেকে HTTP GET রিকোয়েস্টের মাধ্যমে JSON-encoded ডাটা লোড করা
$.getScript() AJAX HTTP GET রিকোয়েস্টের মাধ্যমে সার্ভার থেকে JavaScript লোড করা এবং চালু করা
$.param() ধারাবাহিকভাবে কোন অ্যারে বা অবজেক্টকে প্রদর্শন করা
$.post() AJAX HTTP POST রিকোয়েস্টের মাধ্যমে সার্ভার থেকে ডাটা লোড করা
ajaxComplete() AJAX রিকোয়েস্ট কমপ্লিটের পর কোন ফাংশনকে রান করা
ajaxError() AJAX রিকোয়েস্ট ইররসহ কমপ্লিটের পর কোন ফাংশনকে রান করা
ajaxSend() AJAX রিকোয়েস্ট প্রেরণের পূর্বে কোন ফাংশনকে রান করা
ajaxStart() AJAX রিকোয়েস্ট প্রথম শুরু হবার সময় কোন ফাংশনকে রান করা
ajaxStop() সকল AJAX রিকোয়েস্ট কমপ্লিটের পর কোন ফাংশনকে রান করা
ajaxSuccess() AJAX রিকোয়েস্ট সঠিকভাবে কমপ্লিটের পর কোন ফাংশনকে রান করা
load() সার্ভার থেকে ডাটা লোড করা এবং সিলেক্টেড ইলিমেন্টে ডাটা রিটার্ন করা
serialize() সাবমিশনের জন্য ফর্মের উপাদানগুলোকে স্ট্রিংএ এনকোডিং করা
serializeArray() ফর্মের উপাদানগুলোকে নেম এবং ভ্যালু অনুযায়ী অ্যারেতে এনকোডিং করা

 

Jan 29

jQuery ট্রাভার্সিং-ফিল্টারিং । JQuery Traversing – Filtering

লিখেছেন সুদীপ্ত সাহা

 

জেক্যুয়েরি ট্রাভার্সিং – ফিল্টারিং

ইলিমেন্টের ন্যারো-ডাউন সার্চ

বহুল ব্যবহৃত তিনটি প্রাথমিক ফিল্টারিং মেথড হল first(), last() এবং eq()। এগুলো ব্যবহার করে অনেক ইলিমেন্ট থেকে কোন নির্দিষ্ট ইলিমেন্টকে অবস্থান অনুযায়ী খুঁজে বের করা সম্ভব।

অন্যান্য ফিল্টারিং মেথড যেমন filter() এবং not() এগুলো ব্যবহার করে ইলিমেন্টকে খুঁজে বের করে যায় যা কখনো নির্দিষ্ট বৈশিষ্ট্যের সাথে ঠিকভাবে মিলে আবার কখনো মিলে না।

 

জেক্যুয়েরি first() মেথড

first() মেথড কোন নির্দিষ্ট ইলিমেন্টের প্রথম উপাদানকে (এলিমেন্টকে) রিটার্ন করে।
নিচের উদাহরণটি কোন <div> এর প্রথম <p> ইলিমেন্টকে সিলেক্ট করেঃ

$(document).ready(function(){
    $("div p").first();
});

ফলাফল : first()

জেক্যুয়েরি last() মেথড

last() মেথড কোন নির্দিষ্ট ইলিমেন্টের শেষ উপাদানকে (এলিমেন্টকে) রিটার্ন করে।
নিচের উদাহরণটি কোন <div> এর শেষ <p> ইলিমেন্টকে সিলেক্ট করেঃ

$(document).ready(function(){
    $("div p").last();
});

ফলাফল : last()

 

জেক্যুয়েরি eq() মেথড

eq() মেথড কোন নির্দিষ্ট ইলিমেন্টের নির্দিষ্ট ইনডেক্স নাম্বার অনুযায়ী উপাদানকে রিটার্ন করে।

ইনডেক্স নাম্বার সবসময় ০ থেকে শুরু হয়, তাই প্রথম উপাদানের ইনডেক্স নাম্বার হবে ০, ১ নয়।

নিচের উদাহরণটি <p> এর দ্বিতীয় ইলিমেন্টকে সিলেক্ট করে (ইনডেক্স নাম্বার ১)

$(document).ready(function(){
    $("p").eq(1);
});

ফলাফল : eq()

 

জেক্যুয়েরি filter() মেথড

filter() মেথডের সাহায্যে আপনি একটি নির্দিষ্ট বৈশিষ্ট্য ঠিক করে দিতে পারবেন। যেই উপাদানগুলো বৈশিষ্ট্যের সাথে মিলবে না সেগুলো সিলেকশন থেকে বাদ পড়বে এবং যেগুলো মিলবে সেগুলো রিটার্ন করবে।

নিচের উদাহরণটি <p> এর যেসকল উপাদান “intro” ক্লাসের অন্তর্ভুক্ত সেগুলো রিটার্ন করেঃ

$(document).ready(function(){
    $("p").filter(".intro");
});

ফলাফল : filter()

 

জেক্যুয়েরি not() মেথড

not() মেথড সেই উপাদানগুলো রিটার্ন করবে যেগুলো বৈশিষ্ট্যের সাথে মিলবে না।

ইঙ্গিতঃ not() মেথড হল filter() মেথডের বিপরীত

নিচের উদাহরণটি <p> এর যেসকল উপাদান “intro” ক্লাসের অন্তর্ভুক্ত নয় সেগুলো রিটার্ন করেঃ

$(document).ready(function(){
    $("p").not(".intro");
});

ফলাফল : not()

 

Jan 29

jQuery তে Siblings খোঁজা

jQuery তে Siblings খোঁজা
ইন্দ্র ভূষণ শুভ

Siblings একই parent ভাগাভাগি করে।
আপনি jQuery দিয়ে একটি উপাদানের Siblings গুলো DOM ট্রির পার্শ্বাভিমুখে খুঁজতে পারেন।

DOM ট্রির আশেপাশে খোঁজা
DOM ট্রির আশেপাশে খোঁজার জন্য অনেক ধরনের jQuery পদ্ধতি আছেঃ
• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

jQuery তে siblings() পদ্ধতি
siblings() পদ্ধতিতে বাছাইকৃত উপাদানে সকল siblings উপাদান ফিরে আসে।
নিচের উদাহরণটি <h2> সকল siblings উপাদান ফিরিয়ে আনেঃ
উদাহরণ
$(document).ready(function(){
$(“h2”).siblings();
});
নিজে চেষ্টা করুন >>
আপনি আপনার ইচ্ছা মত পরিমাপক ব্যবহার করতে পারেন siblings অনুসন্ধানকে ফিল্টার করার জন্য।
নিচের উদাহরণটি <h2> সকল siblings উপাদান ফিরিয়ে আনে যা

উপাদানঃ
উদাহরণ
$(document).ready(function(){
$(“h2”).siblings(“p”);
});
নিজে চেষ্টা করুন >>

jQuery তে next () পদ্ধতি
next () পদ্ধতি বাছাইকৃত উপাদানে পরবর্তী siblings উপাদান ফিরিয়ে আনে।
নিচের উদাহরণটি <h2> পরবর্তী siblings উপাদান ফিরিয়ে আনেঃ
উদাহরণ
$(document).ready(function(){
$(“h2”).next();
});
নিজে চেষ্টা করুন >>

jQuery তে nextAll () পদ্ধতি
nextAll () পদ্ধতি বাছাইকৃত উপাদানে পরবর্তী সকল siblings উপাদান ফিরিয়ে আনে।
নিচের উদাহরণটি <h2> পরবর্তী সকল siblings উপাদান ফিরিয়ে আনেঃ
উদাহরণ
$(document).ready(function(){
$(“h2”).nextAll();
});
নিজে চেষ্টা করুন >>

jQuery তে nextUntil() পদ্ধতি
nextUntil() পদ্ধতি দুইটি আর্গুমেন্টের মধ্যে পরবর্তী সকল siblings উপাদান ফিরিয়ে আনে।
নিচের উদাহরণটি

এবং <h6> উপাদানের মধ্যে পরবর্তী সকল siblings উপাদান ফিরিয়ে আনেঃ

উদাহরণ
$(document).ready(function(){
$(“h2”).nextUntil(“h6”);
});
নিজে চেষ্টা করুন >>

jQuery তে prev(), prevAll() এবং prevUntil() পদ্ধতিঃ
prev(), prevAll() এবং prevUntil() পদ্ধতি উপরে বর্ণিত পদ্ধতির মতই কাজ কওরে কিন্তু কার্যকারিতা বিপরীতঃ তারা পুর্বের siblings উপাদান ফিরিয়ে আনে (DOM ট্রির সামনে খোঁজার বদলে পেছনের দিকে খুজতে থাকে )।

jQuery তে খোঁজার রেফারেন্সঃ
jQuery Traversing পদ্ধতির উপর পরোপুরি ধারনা লাভের জন্য, jQuery Traversing Reference পেইজটিতে যান।

Jan 29

জেকুয়্যেরি ট্রাভেসিং-ডিসেন্ডেন্টস . জেকুয়্যেরির সাহায্যে আপনি DOMট্রি কে ট্রাভার্স ডাউনের মাধ্যমে কোন ইলিমেন্ট্র ডিসেন্ডন্টগুলো খুজে দেখতে পারবেন।

1. লিখেছেন সুদীপ্ত সাহা

জেকুয়্যেরি ট্রাভেসিং-ডিসেন্ডেন্টস
ডিসেন্ডেন্টস হল চাইল্ড, গ্র্যান্ডচাইন্ড, গ্রেট-গ্র্যান্ডচাইন্ড এবং একইভাবে আরও… অর্থাৎ উত্তরসূত্রি। জেকুয়্যেরির সাহায্যে আপনি DOMট্রি কে ট্রাভার্স ডাউনের মাধ্যমে কোন ইলিমেন্ট্র ডিসেন্ডন্টগুলো খুজে দেখতে পারবেন।
DOMট্রি এর ট্রাভাসিং ডাউন
DOMট্রি কে ট্রাভাসিং ডাউনের জন্য দুটি উপযোগী জেকুয়্যেরি মেথড হলঃ
▪children()
▪ find()

জেকুয়্যেরি children() মেথড
children() মেথড কোন সিলেক্টেড ইলিমেন্টের সকল ডিরেক্ট চিলড্রেনকে রিটার্ন করে। এই মেথড DOMট্রি কে শুধুমাত্র একটি লেভেলে ট্রাভাসি ডাউন করে। নিচের উদাহরনটি প্রত্যেক <div> এর সকল ডিরেক্ট চিলড্রেন ইলিমেন্টকে রিটার্ন করেঃ
$(document).ready(function(){
$(“div”).children();
});

সার্চ রেজাল্টের জন্য চিলড্রেন ইলিমেন্টকে ফিল্টার করতে আপনি অপশনাল একটি প্যারামিটার ব্যবহার করতে পারেন। নিচের উদাহরনটি প্রত্যেক <div> এর <p> ইলিমেন্ট এবং ক্লাসনেম “1” এরকম সকল ডিরেক্ট চিলড্রেনকে রিটার্ন করেঃ
$(document).ready(function(){
$(“div”).children(“p.1”);
});

জেকুয়্যেরি find()মেথড
find() মেথড ফেরত আনে ডিসেন্ডেন্ট ইলিমেন্ট সমূহের নির্ধারিত ইলিমেন্ট। নিচের উদাহরনটি প্রত্যেক <span> ইলিমেন্ট এরকম ডিসেন্ডেন্টকে <div>: রিটার্ন করেঃ
$(document).ready(function(){
$(“div”).find(“span”);
});

নিচের উদাহরনটি রিটার্ন করে প্রত্যেক ডিসেন্ডেন্টকে <div>:
$(document).ready(function(){
$(“div”).find(“*”);
});

Jan 29

jQuery ট্র্যাভার্সিং – অ্যানসেস্টরস

শেখ মাহফুজুর রহমান

 

jQuery ট্র্যাভার্সিং – অ্যানসেস্টরস

অ্যানসেস্টর (Ancestors) এর বাংলা হলো পূর্বপুরুষ অর্থাৎ পিতা, পিতামহ, প্রপিতামহ ইত্যাদি। যারা এইচটিএমএল বা এক্সএইচটিএমএল( HTML এবং XHTML) নিয়ে কাজ করেন তারা নিশ্চয়ই জানেন যে এই দু’টো ডকুমেন্ট ল্যাঙ্গুয়েজের এলিমেন্ট বা ট্যাগগুলোও ঠিক একই ধরণের সম্পর্ক রীতি মেনে চলে! তো, জেকোয়ারির মাধ্যমে আমরা এই দুটো ল্যাঙ্গুয়েজের ডম ট্রি(DOM tree) ট্র্যাভার্স বা আরোহন করে কোন এলিমেন্টের পূর্বপুরুষদের খুঁজে পেতে পারি।

 

ডম ট্রি আরোহন (Traversing)

ডম ট্রি আরোহন করার তিনটি কার্যকর জেকোয়ারি মেথড বা পদ্ধতি হলোঃ

  • parent()
  • parents()
  • parentsUntil()

 

জেকোয়ারি parent() মেথড

parent() মেথড কোন নির্বাচিত এলিমেন্টের ডাইরেক্ট প্যারেন্ট এলিমেন্ট অর্থাৎ নির্বাচিত এলিমেন্টটি ঠিক পূর্বের যে এলিমেন্টের সন্তান সেই এলিমেন্টকে (পিতাকে) ফেরত (Return) দেয়। এই পদ্ধতি ডম ট্রি’র শুধুমাত্র একটি ধাপকে আরোহন করতে পারে।

নিচের উদাহরণটি প্রত্যেকটি <span> এলিমেন্টের ডাইরেক্ট প্যারেন্ট বা পিতাকে ফেরত দেয়ঃ

$(document).ready(function(){
    $("span").parent();
});

ফলাফল : parent()

 

জেকোয়ারি parents() মেথড

এই পদ্ধতিটি কোন নির্বাচিত এলিমেন্টের সবগুলো অ্যানসেস্টরকে ফেরত দেয়, একেবারে ডকুমেন্টের রুট অর্থাৎ <html> এলিমেন্ট পর্যন্ত যতগুলো এলিমেন্ট বা ট্যাগের সাথে ঐ নির্বাচিত এলিমেন্টের সম্পর্ক আছে সেই সবগুলো এলিমেন্টকে খুঁজে পাওয়া যায়।

নিচের উদাহরণে, parents() মেথড সবগুলো <span> এলিমেন্টের সমস্ত পূর্বপুরুষকে ফেরত দেয়ঃ

$(document).ready(function(){
    $("span").parents();
});

ফলাফল : parents()

 

আনসেস্টর বা পূর্বপুরুষ খুঁজে পাওয়ার ক্ষেত্রে আপনি কিছু অপশনাল-প্যারামিটার ব্যবহার করতে পারেন যার ফলে আপনি আপনার সার্চকে ফিল্টার করতে পারবেন।

লক্ষ্য করুন, নিচের উদাহরণটি সব এলিমেন্টের সবগুলো <ul> অ্যানসেস্টর এলিমেন্ট কে ফেরত দেয়ঃ

$(document).ready(function(){
    $("span").parents("ul");
});

ফলাফল : আনসেস্টর

 

জেকোয়ারি parentsUntil() মেথড

parentsUntil() মেথড দুটো নির্দিষ্ট এলিমেন্টের মধ্যকার সবগুলো অ্যানসেস্টর এলিমেন্টকে ফেরত দেয়।

নিচের উদাহরণে, <span> এবং <div> এলিমেন্টের মধ্যকার সবগুলো অ্যানসেস্টর এলিমেন্টকে খুঁজে পাওয়া গেছেঃ

$(document).ready(function(){
    $("span").parentsUntil("div");
});

ফলাফল : parentsUntil()

Jan 29

jQuery আরোহন । jQuery traversing

jQuery আরোহন কি?

jQuery অভিমুখ যার অর্থ “মধ্য দিয়ে অগ্রসর“, এইচটিএমএল এলিমেন্ট কে অন্য এলিমেন্ট এর সাথে সম্পর্কের ভিত্তিতে খুজে বের করা বা সিলেক্ট করার জন্য ব্যবহৃত হয়। একটি নির্বাচিত এলিমেন্ট থেকে শুরু হয় এবং আপনার কাঙ্খিত এলিমেন্ট পর্যন্ত সিলেকশন চালিয়ে যায়।

নীচের ছবিটি একটি ফ্যামিলি ট্রি প্রকাশ করে। jQuery traversing এর মাধ্যমে, আপনি সহজেই ফ্যামিলি ট্রির উপর (ancestors), নীচে (descendants), আশেপাশে (siblings) ঘুরতে পারেন, যেটা শুরু হবে আপনার বাছাইকৃত (current) উপাদান দিয়ে। এই গতিবিধিকে Traversing অথবা moving through বলে।

অভিমুখ

চিত্রের ব্যখ্যা

  • <div> হলো <ul> এর পিতা এবং এর ভেতরের সবকিছুর পূর্বপুরুষ
  • <ul> হলো উভয় <li> উপাদানের পিতা, এবং <div> এর সন্তান
  • বামের <li> উপাদান <span> এর পিতা, <ul> এর সন্তান এবং <div> এর বংশধর
  • <span> উপদান বামের <li> এর সন্তান, এবং <ul> ও <div> এর বংশধর
  • দুইটা <li> হলো ভাইবোন ( তারা একই parent ভাগাভাগি করে )
  • ডানের <li> উপাদান <b> এর পিতা, <ul> এর সন্তান এবং <div> এর বংশধর
  • <b> উপাদান ডানের <li> এর সন্তান এবং <ul> ও <div> এর বংশধর

পূর্বপুরুষ হলো একাধারে পিতা, পিতামহ, মহান পিতামহ এবং আরও।

বংশধর হলো একাধারে সন্তান, নাতি, নাতির সন্তান এবং আরও।

ভাইবোন একই parent ভাগাভাগি করে।

 

Traversing the DOM

jQuery বিভিন্ন ধরনের মেথড প্রদান করে, যা DOM কে traverse করার অনুমতি দেয়।

Traversal পদ্ধতির মধ্যে tree-traversal হল সবচেয়ে বড় পদ্ধতি।

পরবর্তি অধ্যায় দেখাবে কিভাবে DOM ট্রির উপরে, নীচে এবং আশেপাশে যাওয়া যায়।