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

ajQuery គឺ​ជា​បណ្ណាល័យ​ការ​អនុញ្ញាតប្រើ 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 class=”test”
$(“#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