Chapter 2 : Selector
Jquery မှာ CSS မှာ အသုံးပြုတဲ့ selector တွေကို အသုံးပြုထားပြီး CSS လို့ Doucment Object Model (DOM) တွေကို မြန်မြန်ဆန်ဆန် ထိထိရောက် ခေါှယူနိုင်အောင်ပေါ့။ ဒီ Chapter မှာတော့ Selector တွေအကြောင်းပြောပြပြီး Jquery ရဲ့ ကိုယ်ပိုင် selector အနည်းငယ်ကိုလည်း ပြောပြသွားမှာပါ။
The Document Object Model
Jquery မှာ အရမ်းကောင်းမွန်တဲ့ အပိုင်းတစ်ခုပါ။ DOM ထဲမှာ ရှိတဲ့ elements တွေကို လွယ်လွယ်ကူကူ selecting လုပ်လို့ရတယ်။ Document Object Model ဟာ အစီအစဉ်တကျ ရှိတဲ့ family-tree structure ပါ။ HTML ဟာ အခြား markup language တွေလိုပဲ DOM ကို အသုံးပြုထားပါတယ်။ ကျွန်တောှတို့ဟာ same terminology ကို အသုံးပြုပြီး family relastionship တွေကို ခေါှယူနိုင်ပါတယ်။ parents, childern , … စတာတွေမျိုးပေါ့။ HTML မှာ ရှိတဲ့ family tree code လေးကို ဥပမာအနေနဲ့ ကြည့်ရအောင်။
<html> <head> <title>the title</title> </head> <body> <div> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p>This is yet another paragraph.</p> </div> </body> </html>
အဲမှာဆိုရင် <html> မှာ elements အားလုံးရဲ့ ancestor ပါ။ တနည်းပြောရင် elements အားလုံးရဲ့ ထိပ်ဆုံးမှာ ရှိနေတာပေါ့။ အခြား elements တွေကတော့ descendants of <html> တွေပေါ့။ <html>ကနေ ဆင်းသက်လာတာပေါ့။ ပြီးတော့ <head> အောက်မှာ <body> ရှိတယ်။ ဒါပေမယ့်လည်း <head> က <html> ကနေ ဆင်းသက်လာတာပါ။ <p> elements တွေကတော့ <div> ရဲ့အောက်မှာရှိနေတာပေါ့။ <div> ရဲ့ parent တွေက <body> ပေါ့။ ဒါက သဘောရှင်းပြတာပါ။ အဲဒါကို နားလည်ရင် selector တွေကို ခေါှသုံးရတာ အဆင်ပြေမှာပါ။ ဒီသဘောတရားနဲ့ ကျွန်တောှတို့တွေဟာ လိုချင်တဲ့ dom ကိုခေါှပြီး event တွေထည့်သုံးပြီး ရေးမှာပါ။ အဲဒီအကြောင်း နောက်ပိုင်းမှာ ပါလာမှာပါ။
The $() factory function
ကျွန်တောှတို့ အစမှာတုန်းက ပြောခဲ့ဘူးပါတယ်။ $() ကနေ လိုချင်တဲ့ အပိုင်းကို ခေါှသွားတာပါ။ အဲဒီ $() ထဲမှာ ဘာတွေ ထည့်လို့ရလဲဆိုတော့ tag name, ID , class တွေထည့်ရေးလို့ရပါတယ်။ အောက်မှာ ဥပမာလေးနဲ့ ရှင်းပြထားပါတယ်။
| Select | CSS | Jquery | Description |
|---|---|---|---|
| Tag Name | p | $(‘p’) | paragraph အားလုံးကို select လုပ်သွားမှာပါ |
| ID | #some-id | $(“#some-id”) | some-id ဆိုတဲ့ id ကို select လုပ်မှာ ဖြစ်ပါတယ်။ |
| Class | .some-class | $(“.some-class”) | some-class ဆိုတဲ့ class ကို select လုပ်လိုက်မှာ ဖြစ်ပါတယ်။ |
CSS Selector
CSS selector ကို စလေ့လာဖို့ အောက်က code လေးကို ကြည့်လိုက်ပါအုံး။ level အဆင့်ဆင့်နဲ့ ခွဲထားတာလေးကို တွေ့နိုင်ပါတယ်။ ul,li တွေကိုတော့ HTML တုန်းက သိခဲ့ပြီးပါပြီ။ အခုလည်း ul li နဲ့ အဆင့်ဆင့် ဆင်းသက်သွားတာကို တွေ့နိုင်မှာပါ။ အဲဒီ code လေးကို file တစ်ခုနဲ့ သိမ်းထားလိုက်ပါ။
<ul id="selected-plays"> <li>Comedies <ul> <li><a href="/asyoulikeit/">As You Like It</a></li> <li>All's Well That Ends Well</li> <li>A Midsummer Night's Dream</li> <li>Twelfth Night</li> </ul> </li> <li>Tragedies <ul> <li><a href="hamlet.pdf">Hamlet</a></li> <li>Macbeth</li> <li>Romeo and Juliet</li> </ul> </li> <li>Histories <ul> <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>) <ul> <li>Part I</li> <li>Part II</li> </ul> <li><a href="http://www.shakespeare.co.uk/henryv.htm"> Henry V</a></li> <li>Richard II</li> </ul> </li> </ul>
အဲဒီ code လေးကို browser မှာ အောက်က လိုမြင်ရပါလိမ့်မယ်။
Styling list-item levels
ကျွန်တောှတို့ ပထမဆုံး list-item levels တွေကို style ပြင်ရအောင်။ အရင်ဆုံး html အတွက် CSS ကို အရင်ဆုံး အောက်ကလို ရေးမယ်။
.horizontal {
float: left;
list-style: none;
margin: 10px;
}
အဲဒါလေးကို style tag ထဲမှာ ရေးပြီးရင်တော့ jquery ရေးကြည့်ရအောင်။ jquery ကို အောက်က code အတိုင်း ရေးကြည့်လိုက်ပါ။
$(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');
});
အဲဒါလေးပြီးရင် code ကို run လိုက်ရင် အောက်ကလို မြင်ရမှာပါ။
အံဩဖို့ကောင်းတယ်မဟုတ်လား။ ဘယ်လို ဖြစ်သွားလဲဆိုတာကို ကျွန်တောှ ရှင်းပြပေးပါမယ်။ အရင်ဆုံး ကျွန်တောှတို့ horizontal ဆိုတဲ့ class လေးကို ဖန်တီးထားတယ်။ CSS ကို နားလည်ရင်တော့ အဲဒီ code လေးကို သဘောပေါက်မှာပါ။ အဲဒါပြီးတော့ ကျွန်တောှတို့ jquery ကို ဖန်တီးတယ်လေ။ jquery မှာ နားမလည်တဲ့အပိုင်းဆိုလို့ #selected-plays > li ပဲရှိမှာပါ။ child combinator (>) လေး ကျွန်တောှသုံးသွားတာပါ။ #selected-plays အောက်က child li လေးကို ခေါှလိုက်တာပါ။ #selected-play li လို့ သွားခေါှလို့မရဘူးနောှ။ အဲဒါဆိုရင် #selected-play အောက်က li တွေ အားလုံး သွားပြီး သက်ရောက်ကုန်မယ်။ ကျွန်တောှတို့က #selected-play ရဲ့ child ဖြစ်တဲ့ li ကိုပဲ သက်ရောက်စေချင်လို့ child combinator (>) လေးကို အသုံးပြုလိုက်တာပါ။
Example ကို ဒီမှာ သွားကြည့်နိုင်ပါတယ်။
ကဲ။ sub child တွေအတွက်တော့ ကျွန်တောှတို့ စိတ်ကြိုက် style တစ်ခု ဖန်တီးပြီးအောက်ကလို jquery နဲ့ ထည့်လိုက်ရအောင်။
$(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
});
အဲမှာ li:not ဆိုတာကို မသိပေမယ့် နားလည်သဘောပေါက်နိုင်ပါတယ်။ id selected-plays အောက်က li class တွေထဲက horizontal class မဟုတ်တာတွေကို sub-level class ထည့်လိုက်တာပါ။ ဒီတော့ ကျွန်တောှတို့ sub-level class တစ်ခု ဖန်တီးထားဖို့တော့ လိုပါတယ်။
Example ကို ဒီမှာ သွားကြည့်နိုင်ပါတယ်။
Attribute selectors
ကျွန်တော်တို့တွေ Jquery မှာလည်း class,id တွေကို ခေါှသုံးရုံသာမက attribute selectors တွေကိုလည်း ခေါှသုံးနိုင်ပါတယ်။ ဥပမာ
$('img[alt]')
ဆိုရင် img tag ရဲ့ alt attribute ကို ခေါှသုံးလိုက်တာပါ။ အဲဒီအကြောင်းကို အောက်မှာ ဖော်ပြပေးပါမယ်။
Styling links
ကျွန်တော်တို့တွေ jquery နဲ့ style တွေကို ဖန်တီးတဲ့အခါမှာ regular expression လေးတွေ သုံးပြီး ဖန်တီးသွားတာကို ဖော်ပြပေးသွားမှာပါ။ ^ ဆိုတာကတော့ အစအတွက် ဖြစ်ပြီးတော့ $ ကတော့ အဆုံးအတွက် ဖြစ်ပါတယ်။ * ကတော့ posting တနေရာရာကို ဖော်ညွှန်းတာပါ။ javascript ကိုလေ့လာထားတုန်းက ဒီအပိုင်းတွေကို သိခဲ့မှာပါ။
အရင်ဆုံး CSS ကို ဖန်တီးရအောင်။
a{ color: #00c;
} a.mailto {
background: url(images/mail.png) no-repeat right top; padding-right: 18px;
} a.pdflink {
background: url(images/pdf.png) no-repeat right top; padding-right: 18px;
} a.henrylink {
background-color: #fff; padding: 2px; border: 1px solid #000;
}
အဲဒီ CSS ထဲမှာ mailto , pdflink, henrylink ဆိုပြီး သုံးခုထည့်ထားတယ်။
ကျွန်တော်တို့တွေ mail to နဲ့ စတဲ့ဟာတွေကို mailto class ကို အသုံးပြုမယ်။ အဲဒီတော့ ဒီလိုရေးလိုက်တယ်။
$(document).ready(function() {
$('a[href^=mailto:]').addClass('mailto');
});
a tag ရဲ့ attribute က href ရဲ့ စတာက mailto: နဲ့တူတာတွေအားလုံးကို addClass နဲ့ mailto class ကိုထည့်လိုက်ပါတယ်။
$(document).ready(function() {
$('a[href^=mailto:]').addClass('mailto');
$('a[href$=.pdf]').addClass('pdflink');
});
ဒီ code ကို နားလည်မယ်လို့ ထင်ပါတယ်။ .pdf နဲ့ ဆုံးတဲ့ a href တွေအားလုံးကို pdflink ဆိုတဲ့ class လေးပြောင်းလိုက်ပါတယ်။ ကျွန်တော်တို့အနေနဲ့ henrylink လေးပဲ ကျန်တော့တယ်။ ဒီတော့ အားလုံးကို စုပြီးတော့ ဒီလိုရေးလိုက်ပါတယ်။
$(document).ready(function() {
$(‘a[href^=mailto:]’).addClass(‘mailto’);
$(‘a[href$=.pdf]’).addClass(‘pdflink’);
$(‘a[href^=http][href*=henry]’).addClass(‘henrylink’);
});
ကဲ.. အဲဒီ code လေးနဲ့ အပေါ်က css လေးနဲ့ ပေါင်းပြီးတော့ စမ်းကြည့်ရအောင်။ css မှာ image တွေ ခေါ်သုံးထားတာကို မမေ့ပါနဲ့။ သင့် အနေနဲ့ ဒါကို စမ်းဖို့ image file တွေ လိုအပ်ပါတယ်။ လက်တွေ့ စမ်းကြည့်လိုက်ရင် အောက်ပုံလို တွေ့ရမှာပါ။
ကျွန်တော်တို့တွေ အနေဲ့ တစ်ခုခြင်းဆီမှာ လုပ်ပြီး ထည့်နေစရာမလိုတော့ သလို ပုံတွေထည့်ရတာလည်း ခေါင်းမစားတော့ဘူးပေါ့။ pdf ဆိုရင် pdf icon နဲ့ဖြစ်ပြီး email ဆိုရင် email icon နဲ့ ဖော်ပြပေးတဲ့အတွက် user design ပိုင်းမှာလည်း ကောင်းမွန်လာတာကို တွေ့ရမှာပါ။
Example ကို ဒီမှာ သွားကြည့်နိုင်ပါတယ်။
Custom selectors
CSS selectors တွေကို jQuery မှာ အဓိက အသုံးပြုရုံသာမကပဲ jQuery မှာ custom selectors တွေကို ထည့်သွင်းနိုင်ပါတယ်။ Custom Selectos တွေဟာ colon (:) ပါဝင်ပြီး ရေးသားနိုင်ပါတယ်။ ဥပမာ div selectos ဟာ horizontal class ကို အသုံးပြုထားတာ ၂ ခုရှိပါတယ်။ ကျွန်တော်တို့က ပထမ တစ်ခုကိုပဲ အသုံးပြုမယ်ဆိုရင် ဒီလိုရေးရပါတယ်။
$('div.horizontal:eq(0)')
ပထမ တစ်ခုကို 0 နဲ့ အသုံးပြုပြီး ဒုတိယတစ်ခုကိုတော့ 1 နဲ့ ခေါ်လို့ရပါတယ်။ ဒါက javascript ကိုခေါ်သုံးလို့ 0 base ဖြစ်ရတာပါ။ CSS selector ဆိုရင်တော့ 1 base ပါ။ အပေါ်ကို 0 ခေါ်ထားတာကိုပဲ $(‘div:nth-child(1)’) ပြင်ရေးလို့ရပါတယ်။ အပေါ်ဆုံးက child ကို ခေါ်ချင်ရင်တော့ $(‘div:first-child’) နဲ့ ခေါ်လို့လည်းရပါတယ်။ second-child တော့ သွားမစမ်းနဲ့နော်။ အဲဒါက မရှိဘူး။ အဲဒီ first-child ဆိုတာက filter ပါ။ နောက်ပိုင်းသင်ပါမယ်။
Styling alternate rows
ဒီအပိုင်းက အရမ်းအသုံးဝင်တဲ့ jQuery library ဖြစ်တဲ့ :odd နဲ့ :even ကို အသုံးပြုသွားမှာပါ။ အရင်ဆုံး အောက်က html code လေး ရေးလိုက်ပါ။
<table> <tr> <td>As You Like It</td> <td>Comedy</td> <td></td> </tr> <tr> <td>All's Well that Ends Well</td> <td>Comedy</td> <td>1601</td> </tr> <tr> <td>Hamlet</td> <td>Tragedy</td> <td>1604</td> </tr> <tr> <td>Macbeth</td> <td>Tragedy</td> <td>1606</td> </tr> <tr> <td>Romeo and Juliet</td> <td>Tragedy</td> <td>1595</td> </tr> <tr> <td>Henry IV, Part I</td> <td>History</td> <td>1596</td> </tr> <tr> <td>Henry V</td> <td>History</td> <td>1599</td> </tr> </table>
ကျွန်တော်တို့တွေ table တစ်ခု ဆောက်လိုက်တာပါ။ ပြီးရင် အောက်က CSS လေးကိုလည်း ဖန်တီးလိုက်ပါ။
tr { background-color: #fff;
}
.alt {
background-color: #ccc;
}
ရှင်းလင်းသွားအောင် tr တွေအကုန်လုံးကို background အဖြူဖန်တီးလိုက်ပါတယ်။
$(document).ready(function() {
$('tr:odd').addClass('alt');
});
tr odd ဖြစ်တာတွေကို alt ဆိုတဲ့ class ထည့်လိုက်တာပါ။ result ကတော့ အောက်ကလို မြင်ရမှာပါ။ ကျွန်တော် အပေါ်မှာပြောခဲ့ဘူးသလို base 0 ဖြစ်တဲ့အတွက် ဒုတိယလိုင်း 1 ပါ။ ဒါကြောင့် မ ကိန်းတွေဖြစ်တဲ့ 1,3,5,… တွေကို alt class ထည့်သွားတာပါ။
ကျွန်တော် အပေါ်မှာ :nth-child() အကြောင်းပြောခဲ့ဘူးပါတယ်။ ဒါကြောင့် :nth-child() လေးနဲ့ ဒီမှာ အသုံးပြုကြည့်ရအောင်။ ကျွန်တော်တို့တွေ အနေနဲ့ လိုချင်တဲ့ row တစ်ခုထဲကိုပဲ လုပ်ချင်တယ်ဆိုရင်တော့ :nth-child() က ကူညီပေးနိုင်ပါတယ်။
$(document).ready(function() {
$('tr:nth-child(even)').addClass('alt');
});
ဒါကိုတော့ ကိုယ့်ဘာသာကိုယ် စမ်းကြည့်လိုက်ပါ။ ကျွန်တော် example ပြမနေတော့ပါဘူး။ ကျွန်တော်တို့တွေ ဆက်သွားရအောင်။ ကျွန်တော်တို့တွေ td ထဲမှာ Henry ပါတဲ့ td တွေကို bold လုပ်ချင်ပါတယ်။ အဲဒီအတွက် အရင်ဆုံး highlight class တစ်ခု ဖန်တီးပါမယ်။
.highlight {font-weight:bold; font-style: italics;}
ပြီးရင် jquery ကို အောက်ကလို ရေးလိုက်ပါမယ်။
$(document).ready(function() {
$('tr:nth-child(even)').addClass('alt');
$('td:contains(Henry)').addClass('highlight');
});
ကျွန်တော်တို့ :contains() ဆိုတာနဲ့ အသုံးပြုပြီး Henry ပါတဲ့ td တွေကိုပဲ highlight လုပ်သွားနိုင်ပါတယ်။
Example ကို ဒီမှာ သွားကြည့်နိုင်ပါတယ်။
:contains() ကို အသုံးပြုရင် သတိပြုရမှာက case sensitive ဖြစ်တယ်ဆိုတာပဲ။ တကယ်လို့ Henry ကို h အသေးနဲ့တာ ရေးလိုက်မယ်ဆိုင်တော့ အခုလို select လုပ်မှာ မဟုတ်ပါဘူး။ JQuery မှာ အခုလို လုပ်နေတာက client script နဲ့လုပ်နေတာပါ။ ဒါကြောင့် server side အသုံးပြုတာ ထက်မြန်ပါတယ်။ အရင်တုန်းကဆိုရင် ဒီလို odd ,even တွေကို server side ကနေ လုပ်ပေးရတာပါ။ ဒါကြောင့် JQuery ကို အသုံးပြုပြီး css,html တွေကို ပိုမိုလွယ်ကူ ထိရောက်စွာ အသုံးပြုနိုင်ပါတယ်။
Form selectors
ကျွန်တော်တို့တွေ Jquery မှာ form selector တွေကို သုံးပြီးတော့လည်း select လုပ်နိုင်ပါသေးတယ်။
| Selector | Match |
| :text, :checkbox, :radio, :image, :submit, :reset, : password,:file | input မှာ သုံးတဲ့ attribute type တွေကို select လုပ်တာပါ။ type=text ဆိုတဲ့ ဟာမျိုးလေးတွေပေါ့။ |
| :input | ဒါကတော့ input တွေအားလုံးကို ညွှန်းတာပါ။ |
| :button | ဒါကတော့ input type=”button” နဲ့ တူတာတွေကို ခေါ်တာပါ။ |
| :enabled | Form Element တွေ enable ဖြစ်နေတာတွေကို select လုပ်တာပါ။ |
| :disabled | Form Element တွေ disable ဖြစ်နေတာကို select လုပ်တာပါ။ |
| :checked | radio,checkbox စတာတွေ check ဖြစ်နေတာကို select လုပ်တာပါ။ |
| :selected | Option elements that are selected |
ကျွန်တော်တို့ ဒီ select တွေကို ပေါင်းစပ်ပြီးတော့လည်း အသုံးပြုလို့ရပါတယ်။ ဥပမာ radio buttons checked လုပ်ထားတာတွေကို အကုန်လုံး select လုပ်ချင်ရင် (checkbox select လုပ်ထားတာမပါဘူး) အဲဒါဆိုရင် $(‘:radio:checked) ဆိုပြီးအသုံးပြုလို့ရတယ်။ နောက်ပြီး password inputs အားလုံးနဲ့ disable လုပ်ထားတာတဲ့ text တွေကို select လုပ်ချင်ရင်တော့ $(‘:password, :text:disabled’) နဲ့လုပ်လို့ရပါတယ်။
DOM traversal methods