J-Query Tutoial Part-2 by Nullblogger
একটা এইচটিএমএল ডকুমেন্টের যেকোন এলিমেন্ট বা কোন এলিমেন্টের আইডি/ক্লাস দিয়ে যেমন আমরা সেই এলিমেন্ট সিলেক্ট করে সেটার জন্য সিএসএস রুল লিখে থাকি।জেকোয়েরিতেও হুবহু একইভাবে একটা এলিমেন্টকে সিলেক্ট করতে হয়।যেমন আমি যদি নিচের ডকুমেন্টের সব প্যারাগ্রাফ সিলেক্ট করতে চাই (জেকোয়েরিতে) তাহলে কোড লিখতে হবে এরকম-
.png)
আর্টিকেলটির বিশেষ কীওয়ার্ড
J-Query Bangla Tutorial
J-Query Skill DEV
Freelancing In J-Query
*index.html ফাইল
01.<html>
02.<head>
03.<link rel="stylesheet" type="text/css" href="/style.css"/>
04./jquery_latest.js
05.
06.$(document).ready(function(){
07.$('p').click(function(){
08.alert('You clicked on a paragraph');
09.});
10.});
11.
12.</head>
13.<body>
14.<h1 id="tutorial">JQuery Tutorials</h1>
15.<p id="first_para">Bangladesh is a country of natural beauty</p>
16.<p class="webcoachbd">Webcoachbd DOT com is the largest bengali tutorial site</p>
17.<p class="webcoachbd">There are 30 tutorial on JQuery in Webcoachbd</p>
18.</body>
19.</html>*style.css ফাইল
1.#tutorial{
2.color:green;
3.font-size:20px;
4.text-align:center;
5.font-family:Verdana;
6.}*index.html রান করান এবং যেকোন একটা প্যারাগ্রাফের উপর ক্লিক করুন তাহলে একটা এলার্ট দেখাবে নিচের মত-
JQuery Tutorials
Bangladesh is a country of natural beauty
Webcoachbd DOT com is the largest bengali tutorial site
There are 30 tutorial on JQuery in Webcoachbd
কারন $(‘p’) দ্বারা আমি এই ডকুমেন্টের সকল প্যারাগ্রাফকে সিলেক্ট করেছি এবং যেকোন প্যারাগ্রাফে ক্লিক করলে এলার্ট দিবে এই ফাংশন লিখে দিয়েছি।
যাইহোক এখন যদি হেডিং সিলেক্ট করতে চাই তাহলে তার আইডি ধরে নিচের মত সিলেক্ট করতে পারি যেমন
1.$(‘#tutorial’)
** এই টুকু কোড উপরের কোডের $(‘p’) এর জায়গায় প্রতিস্থাপন করে দিন তাহলে এবার হেডিংটির উপরে ক্লিক করলে এলার্ট আসবে।
যদি webcoachbd ক্লাস সম্বলিত প্যারাগ্রাফদুটি সিলেক্ট করতে চাই তাহলে
1.$(‘.webcoachbd’)
এভাবে দিতে হবে।
যদি first_para আইডি সম্বলিত প্যারাগ্রাফটি সিলেক্ট করতে চাই তাহলে
$(‘#first_para’) এভাবে দিতে হবে।
এই প্যারাগ্রাফটি $(‘#tutorial + p’) এভাবেও সিলেক্ট করা যাবে।
যদি হেডিং এবং webcoachbd ক্লাস সম্বলিত প্যারাগ্রাফদুটি সিলেক্ট করতে চাই তাহলে এভাবে
1.$(‘#tutorial,.webcoachbd’)
অর্থ্যাৎ সিএসএস এ যেভাবে এবং যেসব সিলেক্টর দিয়ে এইচটিএমএল এলিমেন্ট সিলেক্ট করে সেগুলিই।সিলেক্টর গুলি পরীক্ষা করার জন্য $(‘p’) এর জায়গায় আপনার তৈরী এই সিলেক্টর গুলি দিয়ে ক্লিক কর দেখুন।
**সিএসএস সিলেক্টর এ আপনি যত দক্ষ হবেন,জেকোয়েরির কোড তত ভাল লিখতে পারবেন।
*জেকোয়েরি দিয়ে সিএসএস প্রোপার্টিজ যেভাবে ধরতে হয়:
জেকোয়েরি দিয়ে এপ্লিকেশন তৈরী করার সময় সিএসএস এর প্রোপার্টিজ চেক করার প্রয়োজন হতে পারে।একটা এলিমেন্টের জন্য যেসব সিএসএস আছে তার থেকে আপনি চাইলে যেকোনটি পরীক্ষা করে দেখতে পারেন যেমন উপরের জেকোয়েরি কোডটুকু প্রতিস্থাপন করুন নিচের কোড দ্বারা।
<html>
<head>
<style>
#tutorial{
color:green;
font-size:20px;
text-align:center;
font-family:Verdana;
}
</style>
https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js$(document).ready(function(){
$('#tutorial').click(function(){
var align = $('#tutorial').css('textAlign');
alert(align);
});
});
</head>
<body>
<h1 id="tutorial">JQuery Tutorials</h1>
<p id="first_para">Bangladesh is a country of natural beauty</p>
<p class="webcoachbd">Webcoachbd DOT com is the largest bengali tutorial site</p>
<p class="webcoachbd">There are 30 tutorial on JQuery in Webcoachbd</p>
</body>
</html>
এবার হেডিং এ ক্লিক করুন তাহলে এলার্টে center লেখাটি দেখাবে
কারন #tutorial এর সিএসএস লিখেছি এভাবে
1.#tutorial{
2.color:green;
3.font-size:20px;
4.text-align:center;
5.font-family:Verdana;
6.}** css() হচ্ছে জেকোয়েরির একটা মেথড যেটা দিয়ে কোন এলিমেন্টে সিএসএস প্রোপার্টিজ চেক করা যায় (যেমন আমি করলাম) আবার নতুন সিএসএস প্রোপার্টিজও যোগ করা যায়।
**textAlign এর জায়গায় text-align এভাবে দিলেও কাজ হবে।
css() মেথড দিয়ে নতুন সিএসএস যোগ করা:
আপনার ডকুমেন্টটির জেকোয়েরি কোডটুকু এবার নিচের কোড দিয়ে প্রতিস্থাপন করুন
<html>
<head>
<style>
#tutorial{
color:green;
font-size:20px;
text-align:center;
font-family:Verdana;
}
</style>
https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js$(document).ready(function(){
$('#first_para,.webcoachbd').click(function(){
$(this).css('color', 'red');
});
});
</head>
<body>
<h1 id="tutorial">JQuery Tutorials</h1>
<p id="first_para">Bangladesh is a country of natural beauty</p>
<p class="webcoachbd">Webcoachbd DOT com is the largest bengali tutorial site</p>
<p class="webcoachbd">There are 30 tutorial on JQuery in Webcoachbd</p>
</body>
</html>
এবার পেজটি রিলোড করে যেকোন প্যারাগ্রাফে ক্লিক করুন সাথে সাথে তার রং লাল হয়ে যাবে।
**css মেথডে এভাবে আগে কোটেশনের ভিতর সিএসএস এর প্রোপার্টিজ এবং কমা দিয়ে আবার কোটেশনের ভিতর মান দিতে হয়।এই মেথড দিয়ে একসাথে একাধিক সিএসএস যোগ করতে পারেন এভাবে-
css({'color : red', 'backgroundColor : yellow'});
** যেহেতু first_para আইডি এবং webcoachbd ক্লাস সম্বলিত প্যারাগ্রাফে ক্লিক করলে শুধুমাত্র সেই প্যারাগ্রাফেরেই রং পরিবর্তন চাচ্ছি তাই $(this) দিয়েছি,আপনি এখানে this এর জায়গায় ‘#first_para,.webcoachbd’ এভাবে দিলেও একি কাজ হতো।
this এরপর বিভিন্ন জায়গায় ব্যবহার হবে।এটা বর্তমান সিলেকশনকে ধরে রাখে।
**যদি এই প্যারাগ্রাফগুলিতে ক্লিক করলে অন্য কোন এলিমেন্টের সিএসএস পরিবর্তন করতে চান তাহলে this এর জায়গায় সেই এলিমেন্টের সিলেক্টর দিলেই কাজ হবে।যেমন
<html>
<head>
<style>
#tutorial{
color:green;
font-size:20px;
text-align:center;
font-family:Verdana;
}
</style>
https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js$(document).ready(function(){
$('#first_para,.webcoachbd').click(function(){
$('#tutorial').css('color', 'red');
});
});
</head>
<body>
<h1 id="tutorial">JQuery Tutorials</h1>
<p id="first_para">Bangladesh is a country of natural beauty</p>
<p class="webcoachbd">Webcoachbd DOT com is the largest bengali tutorial site</p>
<p class="webcoachbd">There are 30 tutorial on JQuery in Webcoachbd</p>
</body>
</html>
এবার প্যারাগ্রাফগুলিতে ক্লিক করলে হেডিং এর রং পরিবর্তন হবে।
এভাবে একটা ডকুমেন্টে অনেক সিলেক্টর দিন,জেকোয়েরি দিয়ে সিলেক্ট করুন এবং সিএসএস পরিবর্তন করে অনুশীলন করুন।সামনের টিউটোরিয়ালে আরো অন্যন্য বিষয় নিয়ে আলোচনা হবে।
অর্ডিনারি আইটির নীতিমালা মেনে কমেন্ট করুন। প্রতিটি কমেন্ট রিভিউ করা হয়।
comment url