JQuery – (Write less, Do more)


ဒီေန႔ေတာ့ JQuery အေၾကာင္းေလး ေလ့လာရင္း ေလ့လာမိသေလာက္ ျပန္လည္ေ၀မွ်ဖို႔အတြက္ ကိုယ္တိုင္လည္း စမ္းၾကည့္ရင္း Reference ေလးေတြ လိုက္စုလိုက္တယ္။

jQuery ဆိုတာ DOM Manipulation နဲ႔ Ajax ကို ရိုးရွင္း လြယ္ကူသြားေအာင္ ဖန္တီးထားတဲ့ Framework တစ္ခုျဖစ္ပါတယ္။ Plain JavaScript နဲ႔ ေရးတဲ့အခါမွာ လုပ္ေဆာင္ခ်က္ေတြကိုရဖို႔ Function တစ္ခုသီးသန္႔ ေရးရ ပါတယ္။  (ဥပမာ- html tag element ကို class attribute နဲ႔ ယူခ်င္တာမ်ိဳး)။ jQuery မွာေတာ့ ဒီလိုမ်ိဳး ကိစၥေတြအတြက္ ႀကိဳတင္ေရးသား ေပးထားပါတယ္။

ေကာင္းက်ိဳးကေတာ့ JQuery FrameWork ကိုအသံုးျပဳတဲ့အတြက္ ေလ့လာခ်ိန္ကို သက္သာေစသလို Browser Compatible ျဖစ္စဥ္မွာလဲ ပိုမို ေကာင္းမြန္လာေစပါတယ္။ “Write Less, Do more” ဆိုတဲ့ JQuery ရဲ႕ ေဆာင္ပုဒ္အတိုင္း နဲနဲေရးယံုနဲ႔ ရလာဒ္မ်ားမ်ားထြက္တဲ့အတြက္ ပိုလြယ္သြားပါတယ္။ ဆိုးက်ိဳးအေနနဲ႔က စတင္ေလ့လာမယ့္သူေတြအတြက္ အေျခခံကစမေလ့လာပဲ ဒီလို Framework ေတြကို တခါတည္းသံုးခ် လိုက္တာဟာ  ပိုၿပီး ခက္ခဲသြားေစႏိုင္ပါတယ္။ ျဖတ္လမ္းနည္းကေတာ့ ေရရွည္အတြက္သိပ္မေကာင္းပါဘူး။

အခုေနာက္ပိုင္း Website ေတြမွာ JQuery ေတြကို ေတာ္ေတာ္မ်ားမ်ား အသံုးျပဳလာၾကတာ ေတြ႔ရပါတယ္။ ေနာက္ၿပီး Form Validate, Image Gallery, Slideshow, Navigation Menu, Text Editor အစရွိတဲ့ Plugin ေတြ အမ်ိဳးမ်ိဳးရွိတဲ့အတြက္ ကိုယ္တိုင္ဖန္တီးစရာေတာင္ မလိုေတာ့ဘဲ အသင့္အသံုးျပဳႏိုင္မွာ ျဖစ္ပါတယ္။

JQuery ကို သံုးၾကည့္မယ္ဆိုရင္ေတာ့ https://jquery.com ကိုသြားၿပီး ေဒါင္းလုပ္ လုပ္ႏိုင္ပါတယ္။ Html Document နဲ႔ JQuery.js တို႔ ခ်ိတ္ဆက္ၿပီးအသံုးျပဳပံုကို နမူနာ စမ္းသပ္ၾကည့္ႏိုင္ပါတယ္။ ေဒါင္းလုပ္ထားတဲ့ Jquery.js file နဲ႔ Html document ၂ ခုလံုးကို Folder တစ္ခုတည္းအတြင္းမွာပဲ ထည့္ထားပါ။ Path မွားတဲ့ Error မ်ိဳးေတြ မျဖစ္ေအာင္လို႔ပါ။ ၿပီးရင္ ေအာက္က ကုဒ္ေလးကို ေရးၿပီး Browser မွာ ဖြင့္ၾကည့္လိုက္ပါ။


<!doctype html>
<html>
<head>
          <title>Hello jQuery</title>
</head>
<body>
          <p id="note">Hello, World!</p>

          <script src="jquery.js"></script>
          <script>
                   $("#note").html( "Hello from jQuery!" );
                   $("#note").css({
                             "color": "red",
                             "background-color": "yellow",
                             "padding": "10px"
                   });
          </script>
</body>
</html>





Post a Comment

0 Comments