System

JQuery Basic Functions

မဂၤလာပါ။
ကၽြန္ေတာ္ကေတာ့ Spiceworks Myanmar Co.,Ltd ၏ System Team မွာ အလုပ္လုပ္ေနေသာ ေဌးမင္းေခါင္ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္ ယေန႔ ရွင္းျပမည့္ အေၾကာင္းအရာကေတာ့ JQuery Library မွာ အသံုးျပဳမည့္ အေျခခံ function မ်ားအေၾကာင္း ျဖစ္ပါတယ္။

JQuery CDN
JQuery အသံုးျပဳမယ္ဆိုရင္ ကၽြန္ေတာ္ကေတာ့ CDN (Content Delivery Network) နဲ႔ ခ်ိတ္ဆက္ၿပီး သံုးပါတယ္။

Google


Cloudflare


JQuery ခ်ိတ္တဲ့အခါ .min ပါတဲ့ ဖုိင္ကို ခ်ိတ္သင့္ပါတယ္။ ၎အဓိပၸါယ္က ၎ jquery ဖိုင္သည္ Minimize ( ဖိုင္အရြယ္အစား ေသးေအာင္ ခ်ံဳ႕ထားျခင္း ) ျဖစ္ပါသည္။

JQuery Events
JQuery Events မ်ားကို Binding လုပ္တဲ့ နည္းလမ္းမ်ားကို ကၽြန္ေတာ္သိသေလာက္ ေရးျပေပးပါ့မယ္။

HTML


JavaScript ( On Events )

	$('.btn').on('click', function(){

		alert("HELLO WORLD");

	});

On Binding Events ကေတာ့ Page ရိွ/Dynamically ထည့္မည့္ class အားလံုး အက်ံဳးဝင္ပါတယ္။ ၎၏ေကာင္းတဲ့ အခ်က္ကေတာ့ Page Loading မွာ မရိွေသးဘဲ Loading ၿပီးမွ ထြက္လာမယ့္ Class Elements အားလံုးအတြက္ အလုပ္လုပ္ေပးမွာ ျဖစ္ပါတယ္။

Dynamic အတြက္ စမ္းသပ္မည္ဆိုလွ်င္

	$('.btn').on('click', function(){

		alert("HELLO WORLD");
		$('body').append('button class="btn">Click Me');

	});

JavaScript ( One Time )

	$('.btn').click(function(){

		alert("HELLO WORLD");
		$('body').append('button class="btn">Click Me');

	});

၎ကေတာ့ JS Run တဲ့ အခ်ိန္ ရိွေနတဲ့ Class Element အေပၚမွာဘဲ အလုပ္လုပ္ပါတယ္။ ထပ္ append လုပ္မည့္ elements ေပၚမွာေတာ့ Effect သက္ေရာက္မႈ ရိွမွာ မဟုတ္ပါဘူး။ ခလုတ္ကို ႏိွပ္လိုက္ရင္ HELLO WORLD Alert ေပၚလာမွာ ျဖစ္ၿပီး ခလုတ္တစ္ခု Append လုပ္မွာ ျဖစ္ပါတယ္။ ၎ အသစ္ထြက္လာတဲ့ ခလုတ္ကို ႏိွပ္ရင္ .click function အလုပ္လုပ္မွာ မဟုတ္ပါဘူး။

ေနာက္တစ္ခုကေတာ့ binding click ျဖစ္ပါတယ္။

JavaScript ( Binding )

	$('.btn').binding('click', function(){

		alert("HELLO WORLD");

	});
 

Binding ကေတာ့ မိမိ ထည့္ခ်င္တဲ့ အေျခအေနက်မွ Events Action ကို ထည့္တာ ျဖစ္ပါတယ္။

Applying CSS Class

	.red{
		color: red;
	}
	$('#btn').click(function(){

		$(this).addClass('red');

	});

Click Action မွာ Class Name ကို ထည့္တာ ျဖစ္ပါတယ္။

	$('#btn').click(function(){

		$(this).removeClass('red');

	});

Click Action မွာ Class Name ကို ျပန္ျဖဳတ္မွာ ျဖစ္ပါတယ္။

ယခုလို အခ်ိန္ေပး ဖတ္ရႈေပးသည့္အတြက္ ေက်းဇူးတင္ပါတယ္။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *