មេរៀន jQuery មូលដ្ឋាននៃកូដ

a

jQuery គឺ​ជា​បណ្ណាល័យ​ការ​អនុញ្ញាតប្រើ JavaScript ។
jQuery មានកំលាំងខ្លាំង ប្រើជាមួយ JavaScript ដើម្បី​សរសេរ​កម្មវិធី​
jQuery មានភាព​ងាយ​ស្រួល​ក្នុង​ការ​សរសេរកូដ​។
ការណែនាំ jQuery
jQuery មានភាព​ងាយ​ស្រួល​ក្នុង​ការ​ប្រើ​ការ​អនុញ្ញាត JavaScript
ដើម្បីសរសេរបង្កើត​គេហទំព័រ​របស់​អ្នក​។
មុន​ពេល​អ្នក​ចាប់​ផ្តើ​ម​ការ​សិក្សា jQuery អ្នក​គួរ​តែ​មាន​ចំ​នេះ​ដឹង​ជា​មូលដ្ឋាន​គ្រឹះ​:
-យល់ពីកូដ HTML
-កម្មវិធី CSS
-កម្មវិធី JavaScript
jQuery គឺ​ជា​អ្វី​?
jQuery មានទំហំតូច​ស្រាល “ការ​សរសេរ​ដំណើរមានកំលាំង​” បង្កើតកូដ JavaScript​។
គោល​បំណង​នៃ jQuery គឺ​ដើម្បី​ធ្វើ​ឱ្យ​វា​កាន់​តែ​ងាយ​ស្រួល​ក្នុង​ការ​ប្រើ​ជាង JavaScript
ដើម្បីសរសេរបង្កើតលើ​គេហទំព័រ​របស់​អ្នក​។ jQuery ត្រូវ​ចំណាយ​ពេល​ជា​ច្រើន​ដើម្បីអភិវឌ្ឃន៍
​បន្ទាត់​នៃ​កូដ​ JavaScript។
ហេតុ​អ្វី​បាន​ជាប្រើ jQuery​?
ការសេសរកូដលើកម្មវិធី​ JavaScript​ភាគច្រើនប្រើកូដ jQuery បញ្ចូលលាយគ្នា បាន​ពេញ​និយម​បំផុត​ហើយ​ក៏​បាន​ពង្រីក​បំផុត​។
មនុស្ស​ជា​ច្រើន​លើពិភពលោក ប្រើកូដ ​ jQuery ដើម្បីអភីវឌ្ឃន៍ ការ​ប្រើ​ប្រាស់​ប​ណ្តា​ញ​, ដូច​ជា​:
-ក្រុមហ៊ុនGoogle បាន
-ក្រុមហ៊ុន Microsoft
-ក្រុមហ៊ុន IBM
-ក្រុមហ៊ុនNetflix
ដំឡើង​ jQuery
ការបន្ថែម jQuery ទៅ​ទំព័រ​ប​ណ្តា​ញ​របស់​អ្នក មាន​វិធី​ជាច្រើន​ដើម្បី​ចាប់ផ្ដើម​ដោយ​ប្រើ jQuery នៅ​លើ​តំបន់​បណ្ដាញ​របស់​អ្នក:
-លោកអ្នកដោ​ន​បណ្ណាល័យ jQuery ពីលើវ៉ិបសាយ www.jQuery.com
-រួម​បញ្ចូល jQuery ពី CDN មួយ​ដូចជា Google
ទាញ​យក jQuery
មាន​ពីរ​កំណែ​នៃ jQuery ដែល​អាច​រក​បាន​សម្រាប់​ទាញ​យក​គឺ​:
-កំណែ​ផលិតកម្ម – នេះ​គឺ​សម្រាប់​តំបន់​ប​ណ្តា​ញ​បន្ត​ផ្ទាល់​របស់​អ្នក​ដោយ​សារ​តែ​វា​ត្រូវ​បាន minified
-កំណែ​អភិ​វ​ឌ​ន៍ – នេះ​គឺ​សម្រាប់​ការ​សាកល្បង​និង​ការ​អភិវឌ្ឍ កូដ​ហើយ​អាច​អាន​បាន​។ លោកអ្នក​ដោនឡូត​ទាញ​យក​ពីទីនេះ jQuery
បណ្ណាល័យ jQuery គឺ​ជា​ឯកសារ​តែ​មួយ​ការ​អនុញ្ញាតប្រើជាមួយ JavaScript ហើយ​
វា​ជាមួយ​នឹង​ស្លាក HTML & <script> (ការ​ជូន​ដំណឹង​ថា​ស្លាក <script> គួរ​តែ​នៅ​
ខាង​ក្នុង​ផ្នែក <head>​)​:
<head>
<script src=”jquery-1.9.1.min.js”></script>
</head>
ជំនួស​ពីការ​ទាញ​យក
ប្រសិន​បើ​អ្នក​មិន​ចង់​ទាញ​យក​និង​ពីលើវ៉ិបសាយ jQuery ដោយ​ខ្លួន​អ្នក​ផ្ទាល់​, អ្នក​អាច​រួម​បញ្ចូល
​វា​ពី CDN (ប​ណ្តា​ញ​សេវា​ដឹកជញ្ជូន​មាតិកា​)​។ អាចទាញយកពី Google និង jQuery ចំពោះម៉ាស៊ីន​
កុំព្យូទ័រដែលដំឡើងកម្មវិធីប្រត្តិបត្តិកា Microsoft។ ដើម្បី​ប្រើ jQuery ពី Google ឬ​ក្រុមហ៊ុន Microsoft
ប្រើ​មួយ​ដូច​ខាង​ក្រោម​:
CDN របស់ Google​:
<head>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”>
</script>
</head>
CDN របស់ Microsoft​:
<head>
<script src=”//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js”>
</script>
</head>

មេរៀន jQuery Syntax

jQuery Syntax syntax jQuery គឺ​ជា​ជាងកាត់ដេរ​បាន​បង្កើត​ឡើង​សម្រាប់ ការ​ជ្រើស ធាតុ HTML និង​, សារា​វ៉ា​ន់​មួយ​ចំនួន សកម្មភាព នៅ​លើ​ធាតុ (s​) បាន​ទេ​។
syntax ជា​មូលដ្ឋាន​គឺ​: $(selector).action()
-សញ្ញា $  ដើម្បី​កំណត់ / ចូល​ដំណើរ​ការ jQuery
-(selector) ទៅ​ជា “សំណួរ (ឬ​ស្វែង​រក​)​” HTML ដែល​ធាតុ
-សកម្មភាព jQuery action() ត្រូវ​បាន​អនុវត្ត​នៅ​លើ​ធាតុ (s​)
ឧ​ទា​ហរ​ណ៏​:
$(this).hide() – លាក់​ធាតុ​កំពង់ប្រើ
$(“p”).hide() – លាក់ធាតុទាំងអស់ <p>
$(“.test”).hide() – លាក់ធាតុទាំងអស់ជាមួយ h
$(“#test”).hide() – លាក់ធាតុទាំងអស់ជាមួយ id=”test”
ឯកសារ​ព្រឹត្តិការណ៍​រួចរាល់
អ្នក​ប្រហែល​ជា​បាន​កត់​សម្គាល់​ឃើញ​ថា​គ្រប់​វិធី​សា​ស្រ្ត jQuery នៅ​ក្នុង​ឧទាហរណ៍​របស់​យើង​គឺ​មាន​​
ខាង​ក្នុង​ព្រឹត្តិការណ៍​ជា​ស្រេច​ក្នុងឯកសារ​:
$(document).ready(function(){

// jQuery methods go here…
});
jQuery ក៏​បាន​បង្កើត​វិធី​សា​ស្រ្ត​​ខ្លី​ជាង​នេះ​សម្រាប់​ព្រឹត្តិការណ៍​ត្រៀម​​ជា​ស្រេច​ឯកសារ​:
$(function(){
// jQuery methods go here…
});

មេរៀន jQuery Selectors

jQuery Selectors អនុញ្ញាត​ឱ្យ​អ្នក​ជ្រើស​និង​រៀបចំ​ធាតុ​របស់ HTMLបាន​។ ជា​មួយ​នឹង​កម្មវិធី​ជ្រើស jQuery ដែល​អ្នក​អាច​រក​ឃើញ​ធាតុ​ដែល​មាន​មូលដ្ឋាន​លើ​លេខ​សម្គាល់​ថ្នាក់​ របស់​វា​, ប្រភេទ​គុណលក្ខណៈ​និង​ជា​ច្រើន​ទៀត​។ ប្រភេទ​នៃ​កម្មវិធី​ជ្រើស​នៅ​ក្នុង jQuery ទាំង​អស់​ចាប់​ផ្តើ​ម​ជាមួយ​នឹង​ប្រាក់​ដុល្លារ​និង​សញ្ញា​វង់ក្រចក​: $ () ។
ធាតុ element Selector ធាតុ jQuery ជ្រើសរើស​ធាតុ​ដែល​មាន​មូលដ្ឋាន​លើ​ឈ្មោះ​ស្លាក​របស់​វា​។អ្នក​អាច​ជ្រើស​ ធាតុ <p> ទាំងអស់​នៅ​លើ​ទំព័រ​ដូច​នេះ​:
$(“p”)
ឧ​ទា​ហរ​ណ៏
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
.class Selector
jQuery class selector បាន​រក​ឃើញ​ថា​ធាតុ​ជាមួយ​នឹង​ class.ជាក់លាក់​

ដើម្បីរកធាតុជាមួយ លក្ខណ:ពិសេស   class ដោយសរសេរតាមឈ្មោះ  class:

$(“.test”)
ឧ​ទា​ហរ​ណ៏
$(document).ready(function(){
$(“button”).click(function(){
$(“.test”).hide();
});
});
ឧ​ទា​ហរ​ណ៏​បន្ថែម​ទៀត​នៃ​កម្មវិធី​ jQuery Selector

$(“*”) Selects all elements
$(this) Selects the current HTML element
$(“p.intro”) Selects all <p> elements with
$(“p:first”) Selects the first <p> element
$(“ul li:first”) Selects the first <li> element of the first <ul>
$(“ul li:first-child”) Selects the first <li> element of every <ul>
$(“[href]”) Selects all elements with an href attribute
$(“a[target=’_blank’]”) Selects all <a> elements with a target attribute value equal to “_blank”
$(“a[target!=’_blank’]”) Selects all <a> elements with a target attribute value NOT equal to “_blank”
$(“:button”) Selects all <button> elements and <input> elements of type=”button”
$(“tr:even”) Selects all even <tr> elements
$(“tr:odd”) Selects all odd <tr> elements

មេរៀន វិធីសាស្រ្ត jQuery Event Methods
អ្វីទៅជា Events?
សកម្មភាព​អ្នក​ទស្សនា​ផ្សេង​គ្នា​ដែល​ទំព័រ​បណ្ដាញ​មួយ​អាច​ត្រូវ​បាន​គេ​ហៅ​ថា​ឆ្លើយ​តប​ទៅ​នឹង​ព្រឹត្តិការណ៍​នោះ​។ នៅ​ទីនេះ​មួយ​ចំនួន​ព្រឹត្តិការណ៍​របស់ DOM ជា​ទូទៅ​គឺ​:

Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

 វិធីសាស្រ្ត jQuery Syntax For Event Methods ក្នុង jQuery​, ព្រឹត្តិការណ៍​របស់ DOM ភាគច្រើន​មាន​វិធី​សា​ស្រ្ត​មួយ jQuery សមមូល​។ ដើម្បី​ផ្ដល់​តម្លៃ​ព្រឹត្តិការណ៍​ចុច​លើ​កថាខណ្ឌ​ទាំង​អស់​នៅ​លើ​ទំព័រ​មួយ​ដែល​អ្នក​អាច​ធ្វើ​ដូច​នេះ​:

$(“p”).click();

ជំហាន​បន្ទាប់​គឺ​ដើម្បី​កំណត់​អ្វី​ដែល​គួរ​កើត​ឡើង​នៅ​ពេល​ដែល​ព្រឹត្តិការណ៍​ខូច។

$(“p”).click(function(){
// action goes here!!
});
dblclick()

ការ dbclick () វិធី​សាស្ត្រ​ភ្ជាប់​ជា​មួយ​មុខងារ handler ព្រឹត្តិការណ៍​មួយ​ទៅ​ជា​ធាតុ​របស់ HTML ។មុខងារ​ត្រូវ​បាន​ប្រតិបត្តិ​នៅ​ពេល​ដែល​អ្នក​ប្រើ​ចុច​ទ្វេ​រ​ដង​លើ​ធាតុ​របស់ HTML ថា​:
ឧ​ទា​ហរ​ណ៏
$(“p”).dblclick(function(){
$(this).hide();
});
វិធីសាស្ត្រ​ mouseenter ()
mouseenter នេះ () វិធី​សាស្ត្រ​ភ្ជាប់​ជា​មួយ​មុខងារ handler ព្រឹត្តិការណ៍​មួយ​ទៅ​ជា​ធាតុ​របស់ HTML ។មុខងារ​ត្រូវ​បាន​ប្រតិបត្តិ​នៅ​ពេល​ដែល​ទ​ស្ស​ន៍​ទ្រនិច​កណ្ដុរ​ចូល​ទៅ​ធាតុ​របស់ HTML​:
ឧ​ទា​ហរ​ណ៏
$(“#p1”).mouseenter(function(){
alert(“You entered p1!”);
});

វិធីសាស្ត្រ​ mouseleave () ការ mouseleave () វិធី​សាស្ត្រ​ភ្ជាប់​ជា​មួយ​មុខងារ handler ព្រឹត្តិការណ៍​មួយ​ទៅ​ជា​ធាតុ​របស់ HTML ។ មុខងារ​ត្រូវ​បាន​ប្រតិបត្តិ​នៅ​ពេល​ដែល​ទ​ស្ស​ន៍​ទ្រនិច​កណ្ដុរ​ទុក​ធាតុ​របស់ HTML​:
ឧ​ទា​ហរ​ណ៏
$(“#p1”).mouseleave(function(){
alert(“Bye! You now leave p1!”);
});

វិធីសាស្ត្រ​ mousedown () mousedown នេះ () វិធី​សាស្ត្រ​ភ្ជាប់​ជា​មួយ​មុខងារ handler ព្រឹត្តិការណ៍​មួយ​ទៅ​ជា​ធាតុ​របស់ HTML ។មុខងារ​ត្រូវ​បាន​ប្រតិបត្តិ​នៅពេល​ដែល​ចុច​ប៊ូតុង​កណ្ដុរ​ខាង​ឆ្វេង​ត្រូវ​បាន​ចុច​បាន​ធ្លាក់​ចុះ​ខណៈ​ពេល​ដែល​កណ្ដុរ​នៅ​លើ​ធាតុ​របស់ HTML ថា​:
ឧ​ទា​ហរ​ណ៏
$(“#p1”).mousedown(function(){
alert(“Mouse down over p1!”);
});

វិធីសាស្ត្រ​ mouseup () mouseup នេះ () វិធី​សាស្ត្រ​ភ្ជាប់​ជា​មួយ​មុខងារ handler ព្រឹត្តិការណ៍​មួយ​ទៅ​ជា​ធាតុ​របស់ HTML ។ មុខងារ​ត្រូវ​បាន​ប្រតិបត្តិ​នៅពេល​ដែល​ចុច​ប៊ូតុង​កណ្ដុរ​ខាង​ឆ្វេង​ត្រូវ​បាន​ចេញ​ផ្សាយ​ខណៈ​ពេល​ដែល​កណ្ដុរ​នៅ​លើ​ធាតុ​របស់ HTML ថា​:
ឧ​ទា​ហរ​ណ៏
$(“#p1”).mouseup(function(){
alert(“Mouse up over p1!”);
});
វិធីសាស្ត្រ​ hover() វិធីសាស្ត្រ​ត្រូវការ​មុខងារ​ពីរ​ហើយ​គឺ​ជា​ការ​រួម​បញ្ចូល​គ្នា​នៃ​ការ mouseenter នេះ () និង mouseleave (ក​) វិធី​សា​ស្រ្ត​។ មុខងារ​ជា​លើក​ដំបូង​ត្រូវ​បាន​ប្រតិបត្តិ​នៅ​ពេល​ដែល​កណ្ដុរ​ចូល​ទៅ​ធាតុ​របស់ HTML និង​មុខងារ​ទី​ពីរ​ត្រូវ​បាន​ប្រតិបត្តិ​នៅ​ពេល​ដែល​កណ្ដុរ​ទុក​ធាតុ​របស់ HTML​:
ឧ​ទា​ហរ​ណ៏
$(“#p1”).hover(function(){
alert(“You entered p1!”);
},
function(){
alert(“Bye! You now leave p1!”);
});

វិធីសាស្ត្រ​ focus() វិធី​សា​ស្រ្ត​មួយ​ដែល​ភ្ជាប់​ទៅ​នឹង​មុខងារ handler ព្រឹត្តិការណ៍​វាល​សំណុំ​បែបបទ​មួយ​ពី HTML ។មុខងារ​ត្រូវ​បាន​ប្រតិបត្តិ​នៅពេល​ដែល​វាល​សំណុំ​បែបបទ​ដែល​ទទួល​បាន​ការ​ផ្តោ​ត​អារម្មណ៍​:
ឧ​ទា​ហរ​ណ៏
$(“input”).focus(function(){
$(this).css(“background-color”,”#cccccc”);
});

វិធីសាស្ត្រ​ blur()  វិធី​សាស្ត្រ​ភ្ជាប់​ជា​មួយ​មុខងារ handler ព្រឹត្តិការណ៍​ទៅ​ក្នុង​វាល​សំណុំ​បែបបទ​មួយ​ពី HTML ។ មុខងារ​ត្រូវ​បាន​ប្រតិបត្តិ​នៅពេល​ដែល​វាល​សំណុំ​បែបបទ​ដែល​បាន​បាត់​បង់​ការ​ផ្តោ​ត​អារម្មណ៍​:
ឧ​ទា​ហរ​ណ៏
$(“input”).blur(function(){
$(this).css(“background-color”,”#ffffff”);
});

IT ads

មជ្ឈមណ្ឌល អាយធី ខេប៊ូ

មានទទួលរចនាវ៉ិបសាយ កម្មវិធីគ្រប់គ្រងក្រុមហ៊ុន…
មានបើកវគ្គខ្លី:
–  វគ្គរចនាវ៉ិបសាយ HTML,CSS, Javascript, PHP, ASP.NET
–  វគ្គដំឡើងកុំព្យូទ័រណែតវឺក Networking
–   វគ្គជួសជុលកុំព្យូទ័រ Computer Repairing
–   វគ្គសរសេរកម្មវិធីលើ iOS (កម្មវិធី iPhone, iPAD)
ទំនាក់ទំ​នង 0977778647-077778647-070778647
Email: chhunnan@gmail.com
Chat: yahoo, skype: chhunnan
www.itcambo.com