jQuery Selectors

Last Updated on Monday, 01 March 2010 15:53 Written by Zack Monday, 01 March 2010 15:50

ျပီးခဲ့တဲ့  post မွာဆိုရင္ HTML elements ေတြကိုဘယ္လို select  လုပ္တယ္ဆိုတာကိုျပခဲ့ပါတယ္။ အဲဒီ concept  ဟာ jQuery

မွာတကယ္ကိုအေရးၾကီးတဲ့အခ်က္ပဲျဖစ္ပါတယ္။ ဒီ post ကေတာ့ jQuery Selector ေလးေတြကိုဆက္ေရးမွာျဖစ္ပါတယ္။ ဒီ selector

ေတြဟာ HTML element  ေတြကို Group  လိုက္ေတြျဖစ္သြားေအာင္ (သို႕)  single node ေတြျဖစ္သြားေအာင္

လိုသလိုလုပ္ေပးနိုင္တာကိုေတြ႕ရပါလိမ့္မယ္။ Selectors   ေတြကိုၾကည့္မယ္ဆိုရင္ (၂)မ်ိဳးရွိပါတယ္။  Element selectors နဲ႕

Attribute ပဲျဖစ္ပါတယ္။ ဒီေနရာမွာ  html ရဲ႕ element  နဲ႕ attribute  ရဲ႕  concept ေလးကိုသိထားမယ္ဆိုရင္ေတာ့လြယ္ကူပါလိမ့္မယ္။

jQuery Element Selectors

HTML element  ေတြကို select  လုပ္တာကိုေတြ႕နိုင္တဲ့အျပင္အဲဒီ element ေတြထဲမွာရွိေနတဲ့ CSS  ရဲ႕ class ေတြ၊ ID ေတြကိုလည္း

select လုပ္နိုင္တာကိုေတြ႕ရပါတယ္။

$(“p”).selects all <p> elements

<p> tag ထဲမွာရွိေသာအရာအားလံုးကိုဆိုလိုပါတယ္။

$(“p.intro”)selects all<p> elements with class

<p> tag  ထဲမွာရွိေသာ css ရဲ႕ class intro ေတြအားလံုးကို select လုပ္ပါလိမ့္မယ္။

$(“p#demo”)selects the <p> element with id=”demo”

<p>tag ထဲမွာ css ရဲ႕ ID demo ကိုေခၚသံုးထားေသာ <p> element ေတြအားလံုးကိုဆိုလိုပါတယ္။

jQuery Attribute Selectors

Element ေတြရဲ႕ Attribute ေတြကို select လုပ္တာကိုဆက္သြားၾကရေအာင္ဗ်ာ။

$(“[href]”) select all elements with an href attribute

href  ဆိုတာကေတာ့ <a> tag ထဲမွာရွိပါတယ္။  <a> tagရဲ႕  href's value equal "#" ျဖစ္ေနတာေတြအားလံုး

ကိုဆိုလိုတဲ့သေဘာျဖစ္ပါတယ္။

$("[href!='#']") select all elements with an href attribute<>"#"

ကြ်န္ေတာ္တို႕ေတြ <a> tag ကိုေရးတဲ့အခါမွာ <a href=”#”>here</a>  ဆိုျပီးေရးပါတယ္။ အဲဒီ href values က not equal “#”

ျဖစ္ေနတာေတြအားလံုးကိုဆိုလိုပါတယ္။

$("[href$='.jpg']") select all elements with an href attribute containing ".jpg"

$(“[href $=’.jpg’]”) select all elements with an href attribute containing “.jpg”

href ေရးထားတဲ့အထဲမွာ “.jpg” ပါေနတာေတြအားလံုးကိုဆိုလိုပါတယ္။

$("ul li:first") The first <li> element of each <ul>

<ul> ေတြတိုင္းရဲ႕ပထမဆံုးေသာ <Li>  ေတြကိုေျပာတာျဖစ္ပါတယ္။

$("div#intro .head") All elements with class="head" inside a <div> element with id="intro"

ဒါကနည္းနည္း႐ႈပ္သြားသလိုပဲ။ ရပါတယ္ရွင္းေအာင္ၾကည့္ရင္ရွင္းပါတယ္။ အဲဒီ  element ေတြကေတာ့  <div> တစ္ခုထဲမွာရွိေနျပီး

id=”intro” ဆိုျပီးေရးထားတဲ့ element  ေတြထဲမွာ class=”head” ဆိုျပီးထပ္ရွိေနေသးတဲ့အရာေတြအားလံုးကိုဆိုလိုပါတယ္။

ဟုတ္ျပီဗ်ာ ဒီ jQuery selector ေတြကို  exemple ေတြနဲ႕ၾကည့္မွပိုျပီးမ်က္စိထဲျမင္မယ့္သေဘာရွိတယ္။

ကြ်န္ေတာ္ Selector example ေလးေတြကိုဆက္ေရးမယ္။

• Add New
• Search

Comments (0)

Write comment

Your Contact Details:

Name:

Email: do not notifynotify

Website:

Comment:

Title:

UBBCode:         -color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge

Message:

Security

Please input the anti-spam code that you can read in the image.

Joomla components by Compojoom