About jQuery
jQuery Tutorial for set background color of p tag with class
Written by Zack Tuesday, 09 March 2010 06:22
ဒီ jQuery example ေလးကေတာ့ ဒီ post ရဲ႕အဆက္လို႕ေျပာနိုင္ပါတယ္။ ဘာလို႕လဲဆိုေတာ့ဒီ post မွာ CSS ရဲ႕ ID ေတြကို
Background color ထည့္မွာျဖစ္ပါတယ္။
<html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p#intro").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<h2>This Example will set yellow color to background of the paragraph that using id="intro"</h2>
<p id="intro">This paragraph'id is using intro.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
$("p#intro").css("background-color", "yellow");
Click me ကို click လုပ္လိုက္ရင္ေတာ့
<p id="intro"> </p> ေရးထားတာေတြအားလံုးကို Background ထည့္ေပးမွာျဖစ္ပါတယ္။ က်န္တဲ့ <p>tag ေတြကို Background
မထည့္ပဲ id="intro" လို႕ေရးထားတာေလးကိုပဲထည့္ေပးသြားမွာေတြ႕နိုင္ပါတယ္။ ဒီမွာ စမ္းၾကည့္ျပီးေတာ့ ဒီမွာ Download ရယူနိုင္ပါတယ္။
jQuery Tutorial for set background color of p tag with class
Last Updated on Tuesday, 09 March 2010 04:37 Written by Zack Tuesday, 09 March 2010 03:49
ဒီ example ေလးက jQuery မွာ selector ေတြမွာ CSS ေတြကိုဘယ္လိုသံုးတယ္ဆိုတာကိုုရွင္းျပမွာျဖစ္ပါတယ္။
<html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p.intro").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<h2>This Example will set yellow color to background of the paragraph that using class="intro"</h2>
<p class="intro">This paragraph'class is using intro.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
အဓိကေျပာခ်င္တာကေတာ့ဒီေနရာေလးပါ။
$("p.intro").css("background-color", "yellow");
Click me ဆိုတဲ့ Button ေလးကို click လိုက္ရင္ေတာ့
<p class=intro>
</p> ေရးထားတာေတြကို Background color ကိုေျပာင္းေပးလိုက္မွာျဖစ္ပါတယ္။
ဒီေနရာမွာသတိထားရမွာေလးက p.intro ဆိုကေတာ့ class=intro ျဖစ္တယ္ဆိုတာေလးပဲျဖစ္ပါတယ္။ ဒီမွာ စမ္းၾကည့္နိုင္ပါတယ္။
ဒီမွာ ရယူနိုင္ပါတယ္။
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 ေလးေတြကိုဆက္ေရးမယ္။
jQuery Tutorial for hide p tag
Last Updated on Sunday, 28 February 2010 15:29 Written by Zack Sunday, 28 February 2010 14:42
ဒီပထမဆံုး Tutorial ေလးမွာအလြယ္ဆံုးေသာဥပမာေလးနဲ႕ပဲစလိုက္ပါမယ္။ html ရဲ႕ <p> tag ထဲမွာေရးထားတဲ့ဟာေတြ
အားလံုးကို hide လုပ္မွာျဖစ္ပါတယ္။
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
ဒီ example ေလးမွာ click me ဆိုတဲ့ buttom ေလးကို click လိုက္ရင္
$("button").click(function(){
$("p").hide();
});
ဆိုတဲ့ code က RUN ျပီး <p>......</p> ႏွစ္ခုၾကားမွာရွိေသာ text ေတြအားလံုးကို hide လုပ္ေပးမွာျဖစ္ပါတယ္။
အရမ္းကိုရိုးစင္းျပီးလြယ္ကူတဲ့ example ေလးတစ္ခုပဲျဖစ္ပါတယ္။ ဒီမွာ test လုပ္ၾကည့္နိုင္ပါတယ္။ ဒီ example ေလးရဲ႕
source code ကို download လုပ္နိုင္ပါတယ္။ ဒီ example ကို w3school ကေနျပီး reference လုပ္ထားတာျဖစ္ပါတယ္။
Ref: http://www.w3schools.com/jquery/jquery_intro.asp
Page 1 of 2
«StartPrev12NextEnd»Latest Post
Login Form
Categories Table View
- Reader's Conner (103)
- PHP (45)
- Joomla CMS (36)
- Codeigniter (10)
- jQuery (6)
- PHP & AJAX (4)
- Apache (3)
- For Mac (3)
- mySQL (2)
