JQuery Element Selection in JQuery Tutorials

একটা HTML ডকুমেন্টের যেকোন Element বা কোন এলিমেন্টের ID/Class দিয়ে যেমন আমরা সেই element select করে সেটার জন্য css রুল লিখে থাকি।জেকোয়েরিতেও হুবহু একইভাবে একটা এলিমেন্টকে সিলেক্ট করতে হয়।যেমন আমি যদি নিচের ডকুমেন্টের সব paragraph সিলেক্ট করতে চাই (জেকোয়েরিতে) তাহলে code লিখতে হবে এরকম-

index.html ফাইল

01.<html>

02.<head>

03.<link rel="stylesheet" type="text/css" href="/style.css"/>

04.<script src="/jquery_latest.js" type="text/javascript"></script>

05.<script type="text/javascript">

06.$(document).ready(function(){

07.$('p').click(function(){

08.alert('You clicked on a paragraph');

09.});

10.});

11.</script>

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="spfoundationbd"> spfoundationbd DOT com is the largest bengali tutorial site</p>

17.<p class=" spfoundationbd ">There are 30 tutorial on JQuery in spfoundationbd </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 রান করান এবং যেকোন একটা প্যারাগ্রাফের উপর click করুন তাহলে একটা alert দেখাবে নিচের মত-

JQuery Tutorials

Bangladesh is a country of natural beauty

spfoundationbd DOT com is the largest bengali tutorial site

There are 30 tutorial on JQuery in spfoundationbd

কারন $(‘p’) দ্বারা আমি এই ডকুমেন্টের সকল প্যারাগ্রাফকে  সিলেক্ট করেছি এবং যেকোন প্যারাগ্রাফে ক্লিক করলে এলার্ট দিবে এই ফাংশন লিখে দিয়েছি।

যাইহোক এখন যদি হেডিং সিলেক্ট করতে চাই তাহলে তার আইডি ধরে নিচের মত সিলেক্ট করতে পারি যেমন

1.$(‘#tutorial’)

** এই টুকু কোড উপরের কোডের $(‘p’) এর জায়গায় প্রতিস্থাপন করে দিন তাহলে এবার হেডিংটির উপরে ক্লিক করলে এলার্ট আসবে।

যদি spfoundationbd ক্লাস সম্বলিত প্যারাগ্রাফদুটি সিলেক্ট করতে চাই তাহলে

1.$(‘. spfoundationbd)

এভাবে দিতে হবে।

যদি first_para আইডি সম্বলিত প্যারাগ্রাফটি সিলেক্ট করতে চাই তাহলে

$(‘#first_para’) এভাবে দিতে হবে।

এই প্যারাগ্রাফটি $(‘#tutorial + p’) এভাবেও সিলেক্ট করা যাবে।

যদি heading এবং spfoundationbd ক্লাস সম্বলিত প্যারাগ্রাফদুটি সিলেক্ট করতে চাই তাহলে এভাবে

1.$(‘#tutorial,. spfoundationbd)

অর্থ্যাৎ সিএসএস যেভাবে এবং যেসব সিলেক্টর দিয়ে এইচটিএমএল এলিমেন্ট সিলেক্ট করে সেগুলিই।সিলেক্টর গুলি পরীক্ষা করার জন্য $(‘p’) এর জায়গায় আপনার তৈরী এই সিলেক্টর গুলি দিয়ে ক্লিক কর দেখুন।

**সিএসএস সিলেক্টর আপনি যত দক্ষ হবেন,জেকোয়েরির কোড তত ভাল লিখতে পারবেন।

jquery দিয়ে css প্রোপার্টিজ যেভাবে ধরতে হয়:

jquery দিয়ে এপ্লিকেশন তৈরী করার সময় css এর প্রোপার্টিজ চেক করার প্রয়োজন হতে পারে।একটা এলিমেন্টের জন্য যেসব css আছে তার থেকে আপনি চাইলে যেকোনটি পরীক্ষা করে দেখতে পারেন যেমন উপরের জেকোয়েরি code টুকু প্রতিস্থাপন করুন নিচের কোড দ্বারা।

1.$(document).ready(function(){

2.$('#tutorial').click(function(){

3.var align = $('#tutorial').css('textAlign');

4.alert(align);

5.});

6.});

এবার Heading Click করুন তাহলে এলার্টে center লেখাটি দেখাবে

প্রয়োগ দেখুন

কারন #tutorial এর সিএসএস লিখেছি এভাবে

1.#tutorial{

2.color:green;

3.font-size:20px;

4.text-align:center;

5.font-family:Verdana;

6.}

** css() হচ্ছে জেকোয়েরির একটা method যেটা দিয়ে কোন এলিমেন্টে সিএসএস প্রোপার্টিজ check করা যায় (যেমন আমি করলাম) আবার নতুন সিএসএস প্রোপার্টিজও যোগ করা যায়।

**textAlign এর জায়গায় text-align এভাবে দিলেও কাজ হবে।

css() মেথড দিয়ে নতুন সিএসএস যোগ করা:

আপনার ডকুমেন্টটির জেকোয়েরি কোডটুকু এবার নিচের code দিয়ে প্রতিস্থাপন করুন

1.$(document).ready(function(){

2.$('#first_para,. spfoundationbd).click(function(){

3.$(this).css('color', 'red');

4.});

5.});

এবার পেজটি reload করে যেকোন প্যারাগ্রাফে click করুন সাথে সাথে তার রং লাল হয়ে যাবে।

**css মেথডে এভাবে আগে কোটেশনের ভিতর সিএসএস এর প্রোপার্টিজ এবং কমা দিয়ে আবার কোটেশনের ভিতর মান দিতে হয়।এই মেথড দিয়ে একসাথে একাধিক সিএসএস যোগ করতে পারেন এভাবে-

css({'color : red', 'backgroundColor : yellow'});

** যেহেতু first_para আইডি এবং spfoundationbd ক্লাস সম্বলিত প্যারাগ্রাফে ক্লিক করলে শুধুমাত্র সেই প্যারাগ্রাফেরেই রং পরিবর্তন চাচ্ছি তাই $(this) দিয়েছি,আপনি এখানে this এর জায়গায়  '#first_para,. spfoundationbd এভাবে দিলেও একি কাজ হতো।

this এরপর বিভিন্ন জায়গায় ব্যবহার হবে।এটা বর্তমান সিলেকশনকে ধরে রাখে।

**যদি এই প্যারাগ্রাফগুলিতে ক্লিক করলে অন্য কোন এলিমেন্টের সিএসএস পরিবর্তন করতে চান তাহলে this এর জায়গায় সেই এলিমেন্টের সিলেক্টর দিলেই কাজ হবে।যেমন

1.$(document).ready(function(){

2.$('#first_para,. spfoundationbd).click(function(){

3.$('#tutorial').css('color', 'red');

4.});

5.});

এবার প্যারাগ্রাফগুলিতে ক্লিক করলে heading এর রং পরিবর্তন হবে।

 

 

এভাবে একটা ডকুমেন্টে অনেক সিলেক্টর দিন,jqueyr দিয়ে select করুন এবং css পরিবর্তন করে অনুশীলন করুন।সামনের টিউটোরিয়ালে আরো অন্যন্য বিষয় নিয়ে আলোচনা