jQuery Pagination Plugins ល្អបំផុត​

Web IT CAMBO-20-2-2014 copyjQuery Pagination Plugins ល្អបំផុត​ចំនួន២១

1

Pagination ត្រូវ​បានគេប្រើ​ដើម្បី​ចែក​មាតិកា​ជាទំព័រៗ នៅក្នុង​ការ​អភិវឌ្ឍ​គេហទំព័រ ដែល​នេះ​ជាចំណុច​សំខាន់​មួយ​​ ក្នុងការ​ផ្តល់​ភាព​ងាយស្រួល សម្រាប់​មិត្ត​អ្នកអាន ចូល​ទស្សនា​នៅ​ក្នុង​គេហទំព័រ ។ Pagination អាច​បង្កើត​បាន​តាម​របៀប​ផ្សេងៗគ្នា ដោយការ​សរសេរ​កូដ​ចាប់ពី​មួយ​បន្ទាត់ ឬ​បង្កើត​ដោយ​ស្វ័យ​ប្រវត្តិ​ជាដើម ។
ដើម្បី​បង្កើត Pagination សម្រាប់​ចែក​អត្ថបទ​ជាទំព័រៗ នោះគឺ jQuery Plugin ដែលជា Plugin ដ៏ពេញ​និយម និង​ងាយស្រួល​​ក្នុងការ​ប្រើប្រាស់ ដោយ​មិនសូវ​ចាំ​បាច់​សរសេរកូដ​ច្រើន​នោះទេ ។  ខាងក្រោម​នេះ គឺជា​ jQuery Pagination Plugin ទាំង ២១ ដែល​លោកអ្នក​អាច​មើលគំរូ និង​ទាញ​យក មកសាកល្បង​អនុវត្តន៍ ឬប្រើប្រាស់​លើ​គេហទំព័រ​របស់​លោកអ្នក​បាន ។

៤. WordPress Smart Pagination Plugin ទាញយក ]
៥. Smart Paginator ទាញយក ]
៦. jPaginator ទាញយក ]
៧. jPaginate – Fancy JQUERY PAGINATION PLUGIN ទាញយក ]
៨. ប្រើ jQuery ដើម្បី Generate Pagination ឲ្យ​រហ័ស ទាញយក ]
៩. jQuery Pajinate ទាញយក ]
១០. Simple Pagination ទាញយក ]
១១. Easy Paginate jQuery plugin
១២. jqPagination ទាញយក ]
១៣. Sweet Pages: jQuery Paginationទាញយក ]
១៤. jQuery Pagination Plugin ទាញយក ]
១៥. jPaginator ទាញយក ]
១៦. jPaginate – jQuery Pagination System Plugin ទាញយក ]
១៧. jQuery Pagination revised ទាញយក ]
១៨. jQuery, PHP and MySQL Pagination ទាញយក ]
១៩. Ajax JQuery based pagination ទាញយក ]
២០. Beautiful Data ទាញយក ]
២១. jPList ទាញយក ]

បង្កើតព្រិលធ្លាក់ប្រើ jquery

មានវ៉ិបសាយជាច្រើន បានសរសេរកូដព្រិលធ្លាក់
ITមើល Demo | Download
លោកអ្នកដោនឡូត កូដព្រិលធ្លាក់

var snowmax=120

// Set the colors for the snow. Add as many colors as you like

var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Times","Arial","Times","Verdana")

// Set the letter that creates your snowflake (recommended: * )
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximum-size of your snowflakes
var snowmaxsize=30

// Set the minimal-size of your snowflakes
var snowminsize=8

var snowingzone=1

// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {
        rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
        if (ie5 || opera) {
                marginbottom = document.body.scrollHeight
                marginright = document.body.clientWidth-15
        }
        else if (ns6) {
                marginbottom = document.body.scrollHeight
                marginright = window.innerWidth-15
        }
        var snowsizerange=snowmaxsize-snowminsize
        for (i=0;i<=snowmax;i++) {
                crds[i] = 0;
            lftrght[i] = Math.random()*15;
            x_mv[i] = 0.03 + Math.random()/10;
                snow[i]=document.getElementById("s"+i)
                snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
                snow[i].size=randommaker(snowsizerange)+snowminsize
                snow[i].style.fontSize=snow[i].size+'px';
                snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                snow[i].style.zIndex=1000
                snow[i].sink=sinkspeed*snow[i].size/5
                if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
                snow[i].style.left=snow[i].posx+'px';
                snow[i].style.top=snow[i].posy+'px';
        }
        movesnow()
}

function movesnow() {
        for (i=0;i<=snowmax;i++) {
                crds[i] += x_mv[i];
                snow[i].posy+=snow[i].sink
                snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
                snow[i].style.top=snow[i].posy+'px';

                if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
                        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                        snow[i].posy=0
                }
        }
        var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
        window.onload=initsnow
}

Hover 3D យ៉ាងល្អប្រើ CSS 3

បង្កើត  HTML như sau:

	<div id="grid" class="main">
	    <div class="view">
	        <div class="view-back">
	            <span data-icon="A">566</span>
	            <span data-icon="B">124</span>
	            <a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">→</a>
	        </div>

	        <img src="images/1.jpg" />

	    </div>

	    <div class="view">
	    <!-- ... -->
	    </div>
	    <!-- ... -->
	</div>

បង្កើតជាទម្រង់ jQuery ដូចខាងក្រោម:

	<div>
	    <div>
	        <!-- ... -->
	    </div>
	    <div style="background-image: url(images/1.jpg); ">
	        <span></span>  
	        <div style="background-image: url(images/1.jpg); ">
	            <span></span>
	            <div style="background-image: url(images/1.jpg); ">
	                <span></span>
	                <div style="background-image: url(images/1.jpg); ">
	                    <span></span>
	                    <div style="background-image: url(images/1.jpg); ">
	                        <span></span>
	                    </div><!-- /s5 -->
	                </div><!-- /s4 -->   
	            </div><!-- /s3 -->     
	        </div><!-- /s2 -->    
	    </div><!-- /s1 -->
	</div><!-- /view -->

សរសេរជាទម្រង់ JaveScript :

	$.fn.hoverfold = function( args ) {
	    this.each( function() {
	        $( this ).children( '.view' ).each( function() {
	            var $item   = $( this ),
	                img     = $item.children( 'img' ).attr( 'src' ),
	                struct  = '<div>';
	                    struct  +='<div>';
	                        struct  +='<div>';
	                            struct  +='<div>';
	                                struct  +='<div>';
	                                struct  +='</div>';
	                            struct  +='</div>';
	                        struct  +='</div>';
	                    struct  +='</div>';
	                struct  +='</div>';
	            var $struct = $( struct );
	            $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span ></span>' ) );
	        } );

	    });
	};

ប្រើកូដ CSS:

	.view {

	    width: 316px;

	    height: 216px;

	    margin: 10px;

	    float: left;

	    position: relative;

	    border: 8px solid #fff;

	    box-shadow: 1px 1px 2px rgba(0,0,0,0.05);

	    background: #333;

	    perspective: 500px;

	}

កាត់រូប :

	.view .slice{
	    width: 60px;
	    height: 100%;
	    z-index: 100;
	    transform-style: preserve-3d;
	    transform-origin: left center;
	    transition: transform 150ms ease-in-out;
 	}

	.view div.view-back{
	    width: 50%;
	    height: 100%;
	    position: absolute;
	    right: 0;
	    background: #666;
	    z-index: 0;
	}

	.view-back span {
	    display: block;
	    float: right;
	    padding: 5px 20px 5px;
	    width: 100%;
	    text-align: right;
	    font-size: 16px;
	    color: rgba(255,255,255,0.6);
	}

	.view-back span:first-child {
	    padding-top: 20px;
	}

	.view-back a {
	    display: bock;
	    font-size: 18px;
	    color: rgba(255,255,255,0.4);
	    position: absolute;
	    right: 15px;
	    bottom: 15px;
	    border: 2px solid rgba(255,255,255,0.3);
	    border-radius: 50%;
	    width: 30px;
	    height: 30px;
	    line-height: 22px;
	    text-align: center;
	    font-weight: 700;
	}

	.view-back a:hover {
	    color: #fff;
	    border-color: #fff;
	}

	.view-back span[data-icon]:before {
	    content: attr(data-icon);
	    font-family: 'icons';
	    color: #aaa;
	    color: rgba(255,255,255,0.2);
	    text-shadow: 0 0 1px rgba(255,255,255,0.2);
	    padding-right: 5px;
	}

	.view .s2,
	.view .s3,
	.view .s4,
	.view .s5 {
	    transform: translateX(60px);
	}

	.view .s1 {
	    background-position: 0px 0px;
	}

	.view .s2 {
            background-position: -60px 0px;
	}

	.view .s3 {
	    background-position: -120px 0px;
	}

	.view .s4 {
	    background-position: -180px 0px;
	}

	.view .s5 {
	    background-position: -240px 0px;
	}

	.view .overlay {
	    width: 60px;
	    height: 100%;
	    opacity: 0;
	    position: absolute;
	    transition: opacity 150ms ease-in-out;
	}

	.view:hover .overlay {
	    opacity: 1;
	}

	.view img {
	    position: absolute;
	    z-index: 0;
            transition: left 0.3s ease-in-out;
	}

	.view {
	    overflow: hidden;
	}

	.view:hover img {
	    left: -85px;
	}

	.view div.view-back {
	    background: #666;
	}

Demo | Download

 

 

មេរៀន សេចក្តីផ្តើម AJAX

aAJAX = Asynchronous JavaScript និង XML មាន​។ AJAX គឺ​មិន​មែន​ជា​ភាសា​សរសេរ​កម្មវិធី​មួយ​ថ្មី​ទេ​តែ​ជា​មធ្យោបាយ​ថ្មី​មួយ​ដើម្បី​ប្រើ​ស្តង់ដារ​ដែល​មាន​ស្រាប់​។ AJAX គឺជា​សិល្បៈ​នៃ​ការ​ផ្លាស់​ប្តូ​រ​ទិន្នន័យ​ជាមួយ​ម៉ាស៊ីន​បម្រើ​មួយ​និង​ការ​ធ្វើ​បច្ចុប្បន្នភាព​ផ្នែក​នៃ​ទំព័រ​តំបន់​បណ្ដាញ​មួយ – ដោយ​គ្មាន​ការ reloading ទំព័រ​ទាំងមូល​។
ការណែនាំពី AJAX
AJAX គឺ​អំពី​ការ​ធ្វើ​ឱ្យ​ទាន់​សម័យ​ផ្នែក​នៃ​ទំព័រ​តំបន់​បណ្ដាញ​មួយ​ដោយ​គ្មាន​ការ reloading ទំព័រ​ទាំងមូល​។ ចំណេះដឹង មូលដ្ឋានគ្រឹះ ដើម្បី រៀន បន្តទៅ AJAX។ មុន​ពេល​អ្នក​បន្ត​ជា​មួយ​អ្នក​គួរ​តែ​មាន​ការ​យល់​ដឹង​ជា​មូលដ្ឋាន​នៃ​ការ​ដូច​ខាង​ក្រោម​:
-យល់ពី HTML និង XHTML
-យល់ពីកូដ CSS
-និងចុងក្រោយយល់ច្បាស់ពី JavaScript

AJAX គឺ​ជា​អ្វី​?
AJAX = Asynchronous JavaScript and XML។
AJAX គឺ​ជា​ប​ច្ចេ​ក​ទេស​សម្រាប់​ការ​បង្កើត​ទំព័រ​បណ្ដាញ​ដែល​មាន​ល្បឿន​លឿន​និង​ថាមវន្ត​មួយ​។ AJAX អនុញ្ញាត​ឱ្យ​ទំព័រ​ប​ណ្តា​ញ​ត្រូវ​បាន​ធ្វើ​ឱ្យ​ទាន់​សម័យ asynchronously ដោយ​ការ​ផ្លាស់​ប្តូ​រ​បរិមាណ​តិចតួច​នៃ​ទិន្នន័យ​ជាមួយ​ម៉ាស៊ីន​បម្រើ​​។ នេះ​មាន​ន័យ​ថា​វា​អាច​ធ្វើ​ទៅ​បាន​ដើម្បី​ធ្វើ​ឱ្យ​ទាន់សម័យ​ផ្នែក​នៃ​ទំព័រ​តំបន់​បណ្ដាញ​មួយ​ដោយ​គ្មាន​ការ reloading ទំព័រ​ទាំងមូល​។ ទំព័រ​បណ្ដាញពីមុន​, (​មិន​បានប្រើ AJAX​) ត្រូវ​តែ​ផ្ទុក​ឡើងវិញ​ទំព័រ​ទាំងមូល​ប្រសិន​បើ​មាតិកា​គួរ​តែ​ផ្លាស់​ប្តូ​រ​។ ឧ​ទា​ហរ​ណ៏​នៃ​កម្មវិធី​ប្រើ​ប្រាស់ AJAX​: ផែនទី​របស់ Google, Gmail​, YouTube​, និង​ Facebook ដែលត្រូវបានសរសេរកូដ AJAX ជួយបង្កើនល្បឿននៃការរុករកបានឆាប់រហ័ស។

តើ​ AJAX ដំណើការយ៉ាងដូចម្តេច?
aAJAX គឺ​ផ្អែក​លើ​ស្តង់ដារ​អ៊ី​ន​ធឺ​ណេ​និង​ប្រើ​ការ​បន្សំ​នៃ​:

-XMLHttpRequest វត្ថុ (ដើម្បី​ផ្លាស់​ប្តូ​រ​ទិន្នន័យ asynchronously ជាមួយ​នឹង​ម៉ាស៊ីន​បម្រើ​)
-JavaScript /DOM (ដើម្បី​បង្ហាញ / ធ្វើ​អន្តរកម្ម​ជាមួយ​ព​ត៌​មាន​)
– CSS (ទៅ​រចនាប័ទ្ម​ទិន្នន័យ​)
-XML មាន (ត្រូវ​បាន​ប្រើ​ជា​ញឹកញាប់​ដូច​ជា​ទ្រង់ទ្រាយ​សម្រាប់​ផ្ទេរ​ទិន្នន័យ​)
AJAX ត្រូវ​បាន​ធ្វើ​ការ​ពេញ​និយម​នៅ​ក្នុង​ឆ្នាំ 2005។ AJAX ត្រូវ​បាន​ផ្អែក​លើ​ស្តង់​ដា​រ​ដែល​មាន​ស្រាប់​។ ​ទាំងនេះ​ត្រូវ​បាន​ត្រូវ​បាន​ប្រើ​ដោយ​អ្នក​អភិវឌ្ឍន៍​ជាច្រើន​ឆ្នាំ​មក​ហើយ​។
ឧ​ទា​ហរ​ណ៏ នៃការប្រើកូដ AJAX
កម្មវិធី AJAX ខាង​លើ div ដែល​មាន​ផ្នែក​មួយ​និង​ប៊ូតុង​តែ​មួយ​។ div ដែល​ផ្នែក​នឹង​ត្រូវ​បាន​ប្រើ​ដើម្បី​បង្ហាញ​ព័ត៌មាន​ត្រឡប់​មក​ពី​ម៉ាស៊ីន​បម្រើ​។ ប៊ូតុង​អំពាវនាវ​មុខងារ​ដែល​មាន​ឈ្មោះ​ថា loadXMLDoc () មួយ​ប្រសិន​បើ​វា​ត្រូវ​បាន​ចុច​:

<!DOCTYPE html>
<html>
<body>

<div id=”myDiv”><h2>Let AJAX change this text</h2></div>
<button type=”button” onclick=”loadXMLDoc()”>Change Content</button>

</body>
</html>

បន្ទាប់​បន្ថែម​ស្លាក <script> មួយ​ទៅ​ផ្នែក​ក្បាល​ទំព័រ​នេះ​។ ផ្នែក​ស្គ្រីប​មាន​មុខងារ loadXMLDoc នេះ ()​:
<head>
<script>
function loadXMLDoc()
{
…. AJAX script goes here …
}
</script>
</head>

 

មេរៀន AJAX XMLHttpRequest

aAJAX – បង្កើត​ XMLHttpRequest ទាំងអស់​សម័យ​ទំនើប​គាំទ្រ​កម្មវិធី​រុករក​វត្ថុ XMLHttpRequest (IE5 និង IE6 ប្រើ ActiveXObject មួយ​) ។ វត្ថុ XMLHttpRequest ត្រូវ​បាន​ប្រើ​ដើម្បី​ផ្លាស់​ប្តូ​រ​ទិន្នន័យ​ជាមួយ​ម៉ាស៊ីន​បម្រើ​ដែល​នៅ​ពីក្រោយ​ឆាក​មួយ​។ នេះ​មាន​ន័យ​ថា​វា​អាច​ធ្វើ​ទៅ​បាន​ដើម្បី​ធ្វើ​ឱ្យ​ទាន់សម័យ​ផ្នែក​នៃ​ទំព័រ​តំបន់​បណ្ដាញ​មួយ​ដោយ​គ្មាន​ការ reloading ទំព័រ​ទាំងមូល​។
បង្កើត​វត្ថុ XMLHttpRequest មួយ ទាំងអស់​កម្មវិធី​រុករក​សម័យ​ទំនើប (IE7 + របស់ Firefox​, Chrome​, Safari និង​របស់ Opera​) មាន​វត្ថុ XMLHttpRequest មាន​ស្រាប់​នៅ​ក្នុង​។
Syntax សម្រាប់ XMLHttpRequest object:

variable=new XMLHttpRequest();

កំណែ​ចាស់​នៃ​ការ​រុករក​អ៊ិ​ន​ធឺ​ណិ (IE5 និង IE6​) ប្រើ​ជា​វត្ថុ ActiveX​:

variable=new ActiveXObject(“Microsoft.XMLHTTP”);

ដើម្បី​គ្រប់គ្រង​កម្មវិធី​រុករក​សម័យ​ទំនើប​ទាំង​អស់​រួម​ទាំង IE5 និង IE6​, ពិនិត្យ​មើល​ប្រសិន​បើ​កម្មវិធី​រុករក​ដែល​គាំទ្រ​ដល់​វត្ថុ XMLHttpRequest នេះ​។ ប្រសិន​បើ​វា​មិន​បាន​បង្កើត​វត្ថុ XMLHttpRequest មួយ​ប្រសិន​បើ​មិន​បង្កើត ActiveXObject មួយ​:

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

AJAX – ផ្ញើសំនូមពរ Request ទៅ  Server ផ្ញើ​ស្នើ​សុំ​មួយ​ទៅ​កាន់​ម៉ាស៊ីន​បម្រើ​មួយ ដើម្បី​ផ្ញើ​សំណើ​រ​មួយ​ទៅ​កាន់​ម៉ាស៊ីន​បម្រើ​មួយ​ដែល​យើង​ប្រើ​ការ​បើក​ចំហនិង​ វិធី​នៃ​វត្ថុ XMLHttpRequest​

xmlhttp.open(“GET”,”ajax_info.txt”,true);
xmlhttp.send();

ethod Description
open(method,url,async) Specifies the type of request, the URL, and if the request should be handled asynchronously or not.method: the type of request: GET or POST
url: the location of the file on the server
async: true (asynchronous) or false (synchronous)
send(string) Sends the request off to the server.string: Only used for POST requests

ប្រើ GET ឬ POST
ទទួល​បាន​គឺ​ងាយ​ស្រួល​និង​លឿន​ជាង POST បាន​, និង​អាច​ត្រូវ​បាន​ប្រើ​នៅ​ក្នុង​ករណី​ជា​ច្រើន​។
ទោះ​ជា​យ៉ាង​ណា​តែងតែ​ប្រើ​សំណើ POST បាន​នៅ​ពេល​ដែល​:

– ឯកសារ​ឃ្លាំង​សម្ងាត់​មិន​មែន​ជា​ជម្រើស​មួយ (ធ្វើ​បច្ចុប្បន្នភាព​ឯកសារ​ឬ​មូលដ្ឋាន​ទិន្នន័យ​នៅ​លើ​ម៉ាស៊ីន​បម្រើ​)
– ផ្ញើ​មួយ​ចំនួន​ទឹកប្រាក់​ដ៏​ធំ​នៃ​ទិន្នន័យ​ទៅ​កាន់​ម៉ាស៊ីន​បម្រើ (POST បាន​មាន​ដែន​កំណត់​ទំហំ​ទេ​)
– ការ​ផ្ញើ​ការ​បញ្ចូល​របស់​អ្នក​ប្រើ (ដែល​អាច​មាន​តួ​អក្សរ​ដែល​មិន​ស្គាល់​) POST បាន​គឺ​កាន់​តែ​រឹងមាំ​និង​មាន​សុវត្ថិភាព​ជាង GET
សំណើ GET Requests

សំណើ​ទទួល​បាន​សាមញ្ញ​:
ឧ​ទា​ហរ​ណ៏
xmlhttp.open(“GET”,”demo_get.asp”,true);
xmlhttp.send();
នៅ​ក្នុង​ឧទាហរណ៍​ខាង​លើ​អ្នក​អាច​ទទួល​បាន​លទ្ធផល​ទុក​ក្នុង​ឃ្លាំង​សម្ងាត់​។

ដើម្បី​ជៀសវាង​នេះ​បន្ថែម​លេខ​សម្គាល់​តែ​មួយ​គត់​ដើម្បី URL របស់​នេះ​:
ឧ​ទា​ហរ​ណ៏
xmlhttp.open(“GET”,”demo_get.asp?t=” + Math.random(),true);
xmlhttp.send();
ប្រសិន​បើ​អ្នក​ចង់​ផ្ញើ​ព​ត៌​មាន​ជាមួយ​នឹង​វិធីសាស្ត្រ​ទទួល​បាន​បន្ថែម​ព​ត៌​មាន​ទៅ​ជា URL នេះ​:
ឧ​ទា​ហរ​ណ៏
xmlhttp.open(“GET”,”demo_get2.asp?fname=Henry&lname=Ford”,true);
xmlhttp.send();
សំណើ POST បាន

សំណើ​របស់ POST បាន​ធម្មតា​:
ឧ​ទា​ហរ​ណ៏
xmlhttp.open(“POST”,”demo_post.asp”,true);
xmlhttp.send();
ដើម្បី POST ទិន្នន័យ​សំណុំ​បែបបទ​ដូចជា HTML ដែល​មួយ​បន្ថែម​បឋមកថា HTTP ជាមួយ setRequestHeader () ។ បញ្ជាក់​ទិន្នន័យ​ដែល​អ្នក​ចង់​ផ្ញើ​នៅ​ក្នុង​ការ​ផ្ញើ () វិធី​សា​ស្ដ្រ​:
ឧ​ទា​ហរ​ណ៏
xmlhttp.open(“POST”,”ajax_test.asp”,true);
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Henry&lname=Ford”);

Method Description
setRequestHeader(header,value) Adds HTTP headers to the request.header: specifies the header name
value: specifies the header value

url – ដែលឯកសារ​ File លើ   Server
ប៉ារ៉ាម៉ែត្រ URL នៃ​វិធីសាស្ត្រ​បើក​ចំហ () នេះ​គឺ​ជា​អាសយដ្ឋាន​ទៅ​ឯកសារ​នៅ​លើ​ម៉ាស៊ីន​បម្រើ​មួយ​មាន​:

xmlhttp.open(“GET”,”ajax_test.asp”,true);

Asynchronous – True ឬ False?

AJAX ឈរ​សម្រាប់ Asynchronous JavaScript និង XML មាន​និង​សម្រាប់​វត្ថុ XMLHttpRequest ដើម្បី​មាន​ឥរិយា​បទ​ជា​អ្នក AJAX ដែល​ជា​ប៉ារ៉ាម៉ែត្រ async វិធីសាស្ត្រ​នៃ​ការ​បើក​ចំហ () ត្រូវ​បាន​កំណត់​ទៅ true​:
xmlhttp.open(“GET”,”ajax_test.asp”,true);

ការ​ផ្ញើ​សំណើ asynchronous គឺ​ជា​ការ​ធ្វើ​ឱ្យ​ប្រសើរ​ឡើង​ដ៏​ធំ​មួយ​សម្រាប់​អ្នក​អភិវឌ្ឍន៍​បណ្ដាញ​។ មនុស្ស​ជា​ច្រើន​នៃ​ភារកិច្ច​ដែល​បាន​អនុវត្ត​នៅ​លើ​ម៉ាស៊ីន​បម្រើ​គឺ​ប្រើ​ប្រាស់​ពេល​វេលា​យ៉ាង​ខ្លាំង​។ មុន​ពេល AJAX​, ប្រតិបត្តិការ​នេះ​អាច​ប​ណ្តា​ល​ឱ្យ​កម្មវិធី​ដើម្បី​ព្យួរ​ឬ​បញ្ឈប់​។
ជា​មួយ​នឹង​ការ AJAX​, ការ​អនុញ្ញាត JavaScript មិន​ត្រូវ​តែ​រង់ចាំ​សម្រាប់​ការ​ឆ្លើយ​តប​របស់​ម៉ាស៊ីន​បម្រើ​នោះ​ទេ​តែ​អាច​ជំនួស​:
-ប្រតិបត្តិ​ស្គ្រីប​ផ្សេង​ទៀត​ខណៈ​ពេល​ដែល​កំពុង​រង់ចាំ​សម្រាប់​ការ​ឆ្លើយ​តប​របស់​ម៉ាស៊ីន​បម្រើ
-ការ​ដោះ​ស្រាយ​ជា​មួយ​នឹង​ការ​ឆ្លើយ​តប​នៅ​ពេល​ដែល​ការ​ឆ្លើយតប​ត្រៀមខ្លួន​រួចរាល់​ហើយ
Async=true
នៅពេល​ដែល​ប្រើ async = ពិត​បញ្ជាក់​មុខងារ​ដើម្បី​ប្រតិបត្តិ​នៅពេល​ដែល​ការ​ឆ្លើយតប​គឺ​មាន​រួចរាល់​ហើយ​នៅ​ក្នុង​ព្រឹត្តិការណ៍ onreadystatechange ថា​:

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”ajax_info.txt”,true);
xmlhttp.send();

Async=false

ដើម្បី​ប្រើ async = មិន​ពិត​, ផ្លាស់​ប្តូ​រ​ប៉ារ៉ាម៉ែត្រ​ទី​បី​នៅ​ក្នុង​វិធី​សា​ស្ដ្រ​បើក​ចំហ open() ទៅ​ជា​មិន​ពិត false:

xmlhttp.open(“GET”,”ajax_info.txt”,false);

ការ​ប្រើ async = មិន​ពិត​មិន​ត្រូវ​បាន​ផ្ដល់​អនុសាសន៍​ទេ​ប៉ុន្តែ​សម្រាប់​សំណើ​តូច​មួយ​ចំនួន​នេះ​អាច​ត្រូវ​បាន​យល់​ព្រម​។
ចូរ​ចងចាំ​ថា​ការ​អនុញ្ញាត JavaScript នឹង​មិន​បន្ត​ដើម្បី​ប្រតិបត្តិ​រហូត​ដល់​ការ​ឆ្លើយតប​របស់​ម៉ាស៊ីន​បម្រើ​គឺ​ត្រូវ​បាន​រួចរាល់​។ ប្រសិន​បើ​ម៉ាស៊ីន​បម្រើ​គឺ​រវល់​ឬ​យឺត​, កម្មវិធី​នឹង​ព្យួរ​ឬ​បញ្ឈប់​។

ឧ​ទា​ហរ​ណ៏
xmlhttp.open(“GET”,”ajax_info.txt”,false);
xmlhttp.send();
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

មេរៀន AJAX កំរិតខ្ពស់

aឧ​ទា​ហរ​ណ៏ AJAX ASP / PHP  ឧទាហរណ៍​ដូច​ខាង​ក្រោម​នឹង​បង្ហាញ​ពី​របៀប​ដែល​ទំព័រ​បណ្ដាញ​អាច​ទាក់ទង​ជាមួយ​ម៉ាស៊ីន​បម្រើ​បណ្ដាញ​មួយ​ខណៈ​ពេល​ដែល​តួ​អក្សរ​មួយ​ប្រភេទ​ដែល​អ្នក​ប្រើ​នៅ​ក្នុង​វាល​បញ្ចូល​ជា​: នៅ​ពេល​ដែល​អ្នក​ប្រើ​ប្រភេទ​តួអក្សរ​នៅ​ក្នុង​វាល​បញ្ចូល​ខាង​លើ​មួយ​អនុគមន៍ “showHint ()​” ​​ត្រូវ​បាន​ប្រតិបត្តិ​។ មុខងារ​នេះ​ត្រូវ​បាន​កេះ​ដោយ​ព្រឹត្តិការណ៍ “onkeyup​”​:

function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById(“txtHint”).innerHTML=””;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”gethint.asp?q=”+str,true);
xmlhttp.send();
}

ការ​ពន្យល់​ប្រភពកូដ​​: ប្រសិន​បើ​វាល​បញ្ចូល​នេះ​គឺ​ទទេ (str.length == 0​) អនុគមន៍​ជម្រះ​មាតិកា​នៃ​កន្លែង​ដាក​​់ txtHint និង​ចេញ​ពី​អនុគមន៍​នោះ​។ ប្រសិន​បើ​វាល​បញ្ចូល​នេះ​គឺ​មិន​ទទេ​, showHint នេះ () មុខងារ​ប្រតិបត្តិ​ដូច​ខាង​ក្រោម​:
-បង្កើត​វត្ថុ XMLHttpRequest មួយ
-បង្កើត​មុខងារ​ដែល​ត្រូវ​បាន​ប្រតិបត្តិ​នៅពេល​ដែល​ការ​ឆ្លើយតប​របស់​ម៉ាស៊ីន​បម្រើ​គឺ​ត្រូវ​បាន​រួចរាល់​ជា
-ផ្ញើ​រ​សំណូមពរ​ក្រៅ​ទៅ​ឯកសារ​នៅ​លើ​ម៉ាស៊ីន​បម្រើ​មួយ
-ចូរ​កត់​សំគាល់​ថា​ប៉ារ៉ាម៉ែត្រ (Q​) ត្រូវ​បាន​បន្ថែម​ទៅ​ជា URL នេះ (ដោយ​មាតិកា​របស់​វាល​បញ្ចូល​នេះ​)

AJAX Server Page – ASP និង PHP ទំព័រ​នៅ​លើ​ម៉ាស៊ីន​បម្រើ​បាន​ហៅ​ដោយ​ការ​អនុញ្ញាត JavaScript ខាង​លើ​នេះ​គឺ​ជា​ឯកសារ ASP ហៅ​ថា “gethint.asp​” ។ ខាង​ក្រោម​នេះ​យើង​បាន​បង្កើត​ឡើង​ពីរ​កំណែ​នៃ​ឯកសារ​ម៉ាស៊ីន​បម្រើ​មួយ​បាន​សរសេរ​នៅ​ក្នុង ASP និង​មួយ​នៅ​ក្នុង PHP ។
ឯកសារសរសេរកូដតាម ASP

<%
response.expires=-1
dim a(30)
‘Fill up array with names
a(1)=”Anna”
a(2)=”Brittany”
a(3)=”Cinderella”
a(4)=”Diana”
a(5)=”Eva”
a(6)=”Fiona”
a(7)=”Gunda”
a(8)=”Hege”
a(9)=”Inga”
a(10)=”Johanna”
a(11)=”Kitty”
a(12)=”Linda”
a(13)=”Nina”
a(14)=”Ophelia”
a(15)=”Petunia”
a(16)=”Amanda”
a(17)=”Raquel”
a(18)=”Cindy”
a(19)=”Doris”
a(20)=”Eve”
a(21)=”Evita”
a(22)=”Sunniva”
a(23)=”Tove”
a(24)=”Unni”
a(25)=”Violet”
a(26)=”Liza”
a(27)=”Elizabeth”
a(28)=”Ellen”
a(29)=”Wenche”
a(30)=”Vicky”

‘get the q parameter from URL
q=ucase(request.querystring(“q”))

‘lookup all hints from array if length of q>0
if len(q)>0 then
hint=””
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint=”” then
hint=a(i)
else
hint=hint & ” , ” & a(i)
end if
end if
next
end if

‘Output “no suggestion” if no hint were found
‘or output the correct values
if hint=”” then
response.write(“no suggestion”)
else
response.write(hint)
end if
%>
ឯកសារសរសេរកូដតាម PHP នៅ​ទីនេះ​លេខ​កូដ​ខាង​លើ​បាន​សរសេរ​ឡើង​វិញ​នៅ​ក្នុង PHP គឺ​:

<?php
// Fill up array with names
$a[]=”Anna”;
$a[]=”Brittany”;
$a[]=”Cinderella”;
$a[]=”Diana”;
$a[]=”Eva”;
$a[]=”Fiona”;
$a[]=”Gunda”;
$a[]=”Hege”;
$a[]=”Inga”;
$a[]=”Johanna”;
$a[]=”Kitty”;
$a[]=”Linda”;
$a[]=”Nina”;
$a[]=”Ophelia”;
$a[]=”Petunia”;
$a[]=”Amanda”;
$a[]=”Raquel”;
$a[]=”Cindy”;
$a[]=”Doris”;
$a[]=”Eve”;
$a[]=”Evita”;
$a[]=”Sunniva”;
$a[]=”Tove”;
$a[]=”Unni”;
$a[]=”Violet”;
$a[]=”Liza”;
$a[]=”Elizabeth”;
$a[]=”Ellen”;
$a[]=”Wenche”;
$a[]=”Vicky”;

//get the q parameter from URL
$q=$_GET[“q”];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint=””;
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint==””)
{
$hint=$a[$i];
}
else
{
$hint=$hint.” , “.$a[$i];
}
}
}
}

// Set output to “no suggestion” if no hint were found
// or to the correct values
if ($hint == “”)
{
$response=”no suggestion”;
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>
មូលដ្ឋាន​ទិន្នន័យ​ AJAX Database គំរូ មូលដ្ឋាន​ទិន្នន័យ​ AJAX Database AJAX អាច​ត្រូវ​បាន​ប្រើ​សម្រាប់​ការ​ទំនាក់​ទំនង​អន្តរកម្ម​ជាមួយ​នឹង​មូលដ្ឋាន​ទិន្នន័យ​។ ឧទាហរណ៍​ដូច​ខាង​ក្រោម​នឹង​បង្ហាញ​ពី​របៀប​ដែល​ទំព័រ​បណ្ដាញ​អាច​ទៅ​យក​ព័ត៌មាន​ពី​មូលដ្ឋាន​ទិន្នន័យ​មួយ​ជាមួយ AJAX​: នៅ​ពេល ​ដែល​អ្នក​ប្រើ​ជ្រើស​អតិថិជន​មួយ​នៅ​ក្នុង​បញ្ជី​ទម្លាក់​ចុះ​នៅ​ខាងលើ​មុខងារ​ហៅ​ថា “showCustomer ()​” ​​មួយ​ត្រូវ​បាន​ប្រតិបត្តិ​។ មុខងារ​នេះ​ត្រូវ​បាន​កេះ​ដោយ​ព្រឹត្តិការណ៍ “onchange​”​:

function showCustomer(str)
{
var xmlhttp;
if (str==””)
{
document.getElementById(“txtHint”).innerHTML=””;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”getcustomer.asp?q=”+str,true);
xmlhttp.send();
}
អនុគមន៍​ showCustomer()​ដូច​ខាងក្រោម​:

-ពិនិត្យ​មើល​ប្រសិន​បើ​អតិថិជន​ត្រូវ​បាន​ជ្រើស
-បង្កើត​វត្ថុ XMLHttpRequest មួយ
-បង្កើត​មុខងារ​ដែល​ត្រូវ​បាន​ប្រតិបត្តិ​នៅពេល​ដែល​ការ​ឆ្លើយតប​របស់​ម៉ាស៊ីន​បម្រើ​គឺ​ត្រូវ​បាន​រួចរាល់​ជា
-ផ្ញើ​រ​សំណូមពរ​ក្រៅ​ទៅ​ឯកសារ​នៅ​លើ​ម៉ាស៊ីន​បម្រើ​មួយ
-ចូរ​កត់​សំគាល់​ថា​ប៉ារ៉ាម៉ែត្រ (Q​) ត្រូវ​បាន​បន្ថែម​ទៅ​ជា URL នេះ (ដោយ​មាតិកា​នៃ​បញ្ជី​ទម្លាក់​ចុះ​នេះ​)

ទំព័រ AJAX Serve ទំព័រ​នៅ​លើ​ម៉ាស៊ីន​បម្រើ​បាន​ហៅ​ដោយ​ការ​អនុញ្ញាត JavaScript ខាង​លើ​នេះ​គឺ​ជា​ឯកសារ ASP ហៅ​ថា “getcustomer.asp​” ។ កូដ​ប្រភព​ក្នុង “getcustomer.asp​” រត់​សំណួរ​ប្រឆាំង​នឹង​មូលដ្ឋាន​ទិន្នន័យ​មួយ​ហើយ​ត្រឡប់​លទ្ធផល​ក្នុង​តារាង HTML ដែល​មួយ​:

<%
response.expires=-1
sql=”SELECT * FROM CUSTOMERS WHERE CUSTOMERID=”
sql=sql & “‘” & request.querystring(“q”) & “‘”

set conn=Server.CreateObject(“ADODB.Connection”)
conn.Provider=”Microsoft.Jet.OLEDB.4.0″
conn.Open(Server.Mappath(“/db/northwind.mdb”))
set rs=Server.CreateObject(“ADODB.recordset”)
rs.Open sql,conn

response.write(“<table>”)
do until rs.EOF
for each x in rs.Fields
response.write(“<tr><td><b>” & x.name & “</b></td>”)
response.write(“<td>” & x.value & “</td></tr>”)
next
rs.MoveNext
loop
response.write(“</table>”)
%>

AJAX XML  AJAX can be used for interactive communication with an XML file។
ឧ​ទា​ហរ​ណ៏ AJAX XML ​ ឧទាហរណ៍​ដូច​ខាង​ក្រោម​នឹង​បង្ហាញ​ពី​របៀប​ដែល​ទំព័រ​បណ្ដាញ​អាច​ទៅ​យក​ព័ត៌មាន​ពី​ឯកសារ XML មួយ​ជាមួយ AJAX​:
អនុគមន៍ stateChange() Function ពេល​ដែល​អ្នក​ប្រើ​ការ​ចុច​លើ “យក​ស៊ីឌី​ព័ត៌មាន​” ប៊ូតុង​ខាង​លើ loadXMLDoc “Get CD info” ទាញអនុគមន៍ loadXMLDoc() ត្រូវ​បាន​ប្រតិបត្តិ​ត្រូវបានប្រើ
ទាញអនុគមន៍ loadXMLDoc() function បង្កើត​  XMLHttpRequest មួយ បន្ថែមអនុគមន៍ ដើម្បីប្រតិ្តប​ត្តិពេល  server ឆ្លើយតប រួចហើផ្ញើ request off ទៅ server។ កាលណា  server response​ រួចចប់ សព្វគ្រប់  តារាង HTML table ត្រូវបានដំឡើង   (elements)ធាតុ ត្រូវ​បាន​ដក​ស្រង់​ចេញ​ពី​ឯកសារ XML ហើយ​វា​ ចុង​ក្រោយ​នៅ ​កន្លែង​ដាក​​់ txtCDInfo ជាមួយ HTML & # តារាង​ដែល​ពេញ​ទៅ​ដោយ​ទិន្នន័យ XML មាន​:

function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt=”<table border=’1′><tr><th>Title</th><th>Artist</th></tr>”;
x=xmlhttp.responseXML.documentElement.getElementsByTagName(“CD”);
for (i=0;i<x.length;i++)
{
txt=txt + “<tr>”;
xx=x[i].getElementsByTagName(“TITLE”);
{
try
{
txt=txt + “<td>” + xx[0].firstChild.nodeValue + “</td>”;
}
catch (er)
{
txt=txt + “<td>&nbsp;</td>”;
}
}
xx=x[i].getElementsByTagName(“ARTIST”);
{
try
{
txt=txt + “<td>” + xx[0].firstChild.nodeValue + “</td>”;
}
catch (er)
{
txt=txt + “<td>&nbsp;</td>”;
}
}
txt=txt + “</tr>”;
}
txt=txt + “</table>”;
document.getElementById(‘txtCDInfo’).innerHTML=txt;
}
}
xmlhttp.open(“GET”,url,true);
xmlhttp.send();
}

មេរៀន 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

មេរៀន មូលដ្ឋាននៃ 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

មេរៀន jQuery Effects

មេរៀន  jQuery Effects – Hide and Show
jQuery hide() និង show()
ជា​មួយ​នឹង​ការ jQuery អ្នក​អាច​លាក់​និង​បង្ហាញ​ធាតុ​របស់ HTML ដែល​មាន ​hide() និង show()វិធី​សា​ស្រ្ត​:
ឧ​ទា​ហរ​ណ៏
$(“#hide”).click(function(){
$(“p”).hide();
});
$(“#show”).click(function(){
$(“p”).show();
});
Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
ល្បឿន​ប៉ារ៉ាម៉ែត្រ​ជម្រើស​បញ្ជាក់​ពី​ល្បឿន​នៃ​ការ​លាក់ / បង្ហាញ​ហើយ​អាច​យក​តម្លៃ​ដូច​ខាងក្រោម​: “យឺត​”​, “លឿន​”​, ឬ​គិត​ជា​មិល្លី​វិនាទី​។
callback ប៉ារ៉ាម៉ែត្រ​ជម្រើស​គឺ​ជា​មុខងារ​ដែល​ត្រូវ​បាន​ប្រតិបត្តិ​បន្ទាប់​ពី hide() និង show() វិធី​សា​ស្ដ្រ​បញ្ចប់ (អ្នក​នឹង​រៀន​បន្ថែម​អំពី​មុខងារ callback នៅ​ក្នុង​ជំពូក​ក្រោយ​) ។ ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ប៉ារ៉ាម៉ែត្រ​មាន​ល្បឿន​លឿន​ជាមួយ​នឹង​ការ​លាក់ ()​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“p”).hide(1000);
});

jQuery toggle() With jQuery, you can toggle between the hide() and show() methods with the toggle() method.
Shown elements are hidden and hidden elements are shown:
Example
$(“button”).click(function(){
$(“p”).toggle();
});
Syntax:

$(selector).toggle(speed,callback);

មេរៀន jQuery Effects – Fading
វិធី​សា​ស្ដ្រ ​jQuery Fading Methods
ជា​មួយ​នឹង​ការ jQuery អ្នក​អាច​បន្ថយ​ធាតុ​នៅ​ក្នុង​និង​ក្រៅ​នៃ​ភាព​មើល​ឃើញ​។
ជា​មួយ​នឹង​ការ jQuery អ្នក​អាច​បន្ថយ​ធាតុ​នៅ​ក្នុង​និង​ក្រៅ​នៃ​ភាព​មើល​ឃើញ​មួយ​។
jQuery មាន​វិធី​សា​ស្រ្ត​ការ​បន្ថយ​មាន​ដូច​ខាង​ក្រោម​:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
វិធី​សា​ស្ដ្រ​ jQuery fadeIn() Method ការ fadeIn jQuery () វិធី​សា​ស្រ្ត​ត្រូវ​បាន​ប្រើ​ដើម្បី​បន្ថយ​នៅ​ក្នុង​ធាតុ​ដែល​បាន​លាក់​មួយ​។
Syntax:

$(selector).fadeIn(speed,callback);

ល្បឿន​ប៉ារ៉ាម៉ែត្រ​ជម្រើស​បញ្ជាក់​ថិ​រ​វេលា​នៃ​បែបផែន​នេះ​។ វា​អាច​យក​តម្លៃ​ដូច​ខាងក្រោម​: “យឺត​”​, “លឿន​”​, ឬ​គិត​ជា​មិល្លី​វិនាទី​។
callback ប៉ារ៉ាម៉ែត្រ​ជម្រើស​គឺ​ជា​មុខងារ​ដែល​ត្រូវ​បាន​ប្រតិបត្តិ​បន្ទាប់​ពី​បញ្ចប់​ការ​បន្ថយ​មួយ​។ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ពី​វិធីសាស្ត្រ fadeIn () ជា​មួយ​នឹង​ប៉ារ៉ាម៉ែត្រ​ផ្សេង​គ្នា​:owing example demonstrates the fadeIn() method with different parameters:

$(“button”).click(function(){
$(“#div1”).fadeIn();
$(“#div2”).fadeIn(“slow”);
$(“#div3”).fadeIn(3000);
});

វិធី​សា​ស្ដ្រ​ jQuery fadeOut() Method
ការ fadeOut jQuery () វិធី​សា​ស្រ្ត​ត្រូវ​បាន​ប្រើ​ដើម្បី​បន្ថយ​ចេញ​ជា​ធាតុ​ដែល​អាច​មើល​ឃើញ​។
Syntax:

$(selector).fadeOut(speed,callback);

ល្បឿន​ប៉ារ៉ាម៉ែត្រ​ជម្រើស​បញ្ជាក់​ថិ​រ​វេលា​នៃ​បែបផែន​នេះ​។ វា​អាច​យក​តម្លៃ​ដូច​ខាងក្រោម​: “យឺត​”​, “លឿន​”​, ឬ​គិត​ជា​មិល្លី​វិនាទី​។
callback ប៉ារ៉ាម៉ែត្រ​ជម្រើស​គឺ​ជា​មុខងារ​ដែល​ត្រូវ​បាន​ប្រតិបត្តិ​បន្ទាប់​ពី​បញ្ចប់​ការ​បន្ថយ​មួយ​។ ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ fadeOut នេះ () វិធី​សា​ស្ដ្រ​ដែល​មាន​ប៉ារ៉ាម៉ែត្រ​ផ្សេង​គ្នា​:
ឧ​ទា​ហរ​ណ៏

$(“button”).click(function(){
$(“#div1”).fadeOut();
$(“#div2”).fadeOut(“slow”);
$(“#div3”).fadeOut(3000);
});

វិធី​សា​ស្ដ្រ​ jQuery fadeToggle() Method ការ fadeToggle jQuery () វិធី​សា​ស្រ្ត​បិទ​បើក​រវាង fadeIn នេះ () និង fadeOut () វិធី​សា​ស្រ្ត​។ ប្រសិន​បើ​ធាតុផ្សំ​ដែល​ត្រូវ​បាន​រសាត់​ចេញ fadeToggle () នឹង​បន្ថយ​ឱ្យ​ពួក​គេ​ចូល ប្រសិន​បើ​ធាតុផ្សំ​ដែល​ត្រូវ​បាន​រសាត់​ក្នុង fadeToggle () នឹង​បន្ថយ​ឱ្យ​ពួក​គេ​ចេញ​។

Syntax:
$(selector).fadeToggle(speed,callback);

ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“#div1”).fadeToggle();
$(“#div2”).fadeToggle(“slow”);
$(“#div3”).fadeToggle(3000);
});

វិធី​សា​ស្ដ្រ jQuery fadeTo() Method ការ fadeTo jQuery () វិធី​សា​ស្ដ្រ​អនុញ្ញាត​ឱ្យ​ទៅ​ជា​ការ​បន្ថយ​ភាព​ស្រអាប់​ដែល​បាន​ផ្ដល់ (តម្លៃ​ចន្លោះ 0 និង 1​) ។
Syntax:

$(selector).fadeTo(speed,opacity,callback);

ប៉ារ៉ាម៉ែត្រ​ល្បឿន​ដែល​បាន​ទាមទារ​បញ្ជាក់​ថិ​រ​វេលា​នៃ​បែបផែន​នេះ​។ វា​អាច​យក​តម្លៃ​ដូច​ខាងក្រោម​: “យឺត​”​, “លឿន​”​, ឬ​គិត​ជា​មិល្លី​វិនាទី​។
ភាព​ស្រអាប់​ប៉ារ៉ាម៉ែត្រ​ដែល​ត្រូវការ​នៅ​ក្នុង fadeTo នេះ () វិធី​សា​ស្ដ្រ​បញ្ជាក់​ការ​បន្ថយ​ភាព​ស្រអាប់​មួយ​ដែល​បាន​ផ្តល់​ឱ្យ (តម្លៃ​ចន្លោះ 0 និង 1​) ។ callback ប៉ារ៉ាម៉ែត្រ​ជម្រើស​គឺ​ជា​មុខងារ​ដែល​ត្រូវ​បាន​ប្រតិបត្តិ​បន្ទាប់​ពី​បញ្ចប់​មុខងារ​មួយ​។ ឧទាហរណ៍​ដូច​ខាង​ក្រោម​នឹង​បង្ហាញ fadeTo () វិធី​សា​ស្ដ្រ​ដែល​មាន​ប៉ារ៉ាម៉ែត្រ​ផ្សេង​គ្នា​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“#div1”).fadeTo(“slow”,0.15);
$(“#div2”).fadeTo(“slow”,0.4);
$(“#div3”).fadeTo(“slow”,0.7);
});
មេរៀន jQuery Effects – Sliding

វិធី​សា​ស្រ្ត​នេះ​ការ​បញ្ចាំង​ស្លាយ jQuery slides ធាតុ​ឡើង​លើ​និង​ចុះក្រោម​។
Click to slide down/up the panel
jQuery slideDown()
Demonstrates the jQuery slideDown() method.

វិធី​សា​ស្រ្ត Sliding jQuery ជា​មួយ​នឹង​ការ jQuery អ្នក​អាច​បង្កើត​មួយ​មាន​ប្រសិទ្ធិ​ភាព sliding នៅ​លើ​ធាតុ​។
jQuery មាន​ការ​បញ្ចាំង​ស្លាយ​​​វិធី​សា​ស្រ្ត​ដូច​ខាងក្រោម​:
slideDown ()
slideUp ()
slideToggle ()

វិធី​សា​ស្រ្ត jQuery slideDown() Method ការ slideDown jQuery () វិធី​សា​ស្រ្ត​ត្រូវ​បាន​ប្រើ​ដើម្បី​រុញ​ចុះក្រោម​ធាតុ​មួយ​។
Syntax:

$(selector).slideDown(speed,callback);

ល្បឿន​ប៉ារ៉ាម៉ែត្រ​ជម្រើស​បញ្ជាក់​ថិ​រ​វេលា​នៃ​បែបផែន​នេះ​។ វា​អាច​យក​តម្លៃ​ដូច​ខាងក្រោម​: “យឺត​”​, “លឿន​”​, ឬ​គិត​ជា​មិល្លី​វិនាទី​។ callback ប៉ារ៉ាម៉ែត្រ​ជម្រើស​គឺ​ជា​មុខងារ​ដែល​ត្រូវ​បាន​ប្រតិបត្តិ​បន្ទាប់​ពី​បញ្ចប់​ការ​បញ្ចាំង​ស្លាយ​​​មួយ​។ ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ slideDown នេះ () វិធី​សា​ស្ដ្រ​:
ឧ​ទា​ហរ​ណ៏
$(“#flip”).click(function(){
$(“#panel”).slideDown();
});

វិធី​សា​ស្រ្ត jQuery slideUp() Method ការ slideUp jQuery () វិធី​សា​ស្រ្ត​ត្រូវ​បាន​ប្រើ​ដើម្បី​រុញ​ឡើង​ជា​ធាតុ​មួយ​។
Syntax:

$(selector).slideUp(speed,callback);

ល្បឿន​ប៉ារ៉ាម៉ែត្រ​ជម្រើស​បញ្ជាក់​ថិ​រ​វេលា​នៃ​បែបផែន​នេះ​។ វា​អាច​យក​តម្លៃ​ដូច​ខាងក្រោម​: “យឺត​”​, “លឿន​”​, ឬ​គិត​ជា​មិល្លី​វិនាទី​។
callback ប៉ារ៉ាម៉ែត្រ​ជម្រើស​គឺ​ជា​មុខងារ​ដែល​ត្រូវ​បាន​ប្រតិបត្តិ​បន្ទាប់​ពី​បញ្ចប់​ការ​បញ្ចាំង​ស្លាយ​​​មួយ​។
ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ slideUp នេះ () វិធី​សា​ស្ដ្រ​:
ឧ​ទា​ហរ​ណ៏
$(“#flip”).click(function(){
$(“#panel”).slideUp();
});

វិធី​សា​ស្រ្ត jQuery slideToggle() Method ការ slideToggle jQuery () បិទ​បើក​រវាង​វិធីសាស្ត្រ slideDown () និង slideUp () វិធី​សា​ស្រ្ត​។ ប្រសិន​បើ​ធាតុ​នេះ​ត្រូវ​បាន slid ចុះ slideToggle () នឹង​រុញ​ពួក​វា​ឡើង​។ ប្រសិន​បើ​ធាតុ​នេះ​ត្រូវ​បាន​គេ slid ឡើង slideToggle () នឹង​រុញ​ឱ្យ​ពួក​គេ​ចុះ​។
$(selector).slideToggle(speed,callback);

ប៉ារ៉ាម៉ែត្រ​ជម្រើស​ដែល​មាន​ល្បឿន​លឿន​អាច​យក​តម្លៃ​ដូច​ខាងក្រោម​: “យឺត​”​, “លឿន​” គិត​ជា​មិល្លី​វិនាទី​។ callback ប៉ារ៉ាម៉ែត្រ​ជម្រើស​គឺ​ជា​មុខងារ​ដែល​ត្រូវ​បាន​ប្រតិបត្តិ​បន្ទាប់​ពី​បញ្ចប់​ការ​បញ្ចាំង​ស្លាយ​​​មួយ​។
ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ពី​វិធីសាស្ត្រ slideToggle ()​:
ឧ​ទា​ហរ​ណ៏
$(“#flip”).click(function(){
$(“#panel”).slideToggle();
});

មេរៀន  jQuery Effects – Animation

jQuery animate() វិធី​សា​ស្រ្ត​ត្រូវ​បាន​ប្រើ​ដើម្បី​បង្កើត​ចលនា​ផ្ទាល់​ខ្លួន​។  jQuery Animations – The animate() Method
jQuery animate() វិធី​សា​ស្រ្ត​ត្រូវ​បាន​ប្រើ​ដើម្បី​បង្កើត​ចលនា​ផ្ទាល់​ខ្លួន​។
Syntax:

$(selector).animate({params},speed,callback);

ប៉ារ៉ាម៉ែត្រ params ដែល​បាន​ទាមទារ​កំណត់​លក្ខណៈ​សម្បត្តិ​ជា CSS ដែល​ត្រូវ​មាន​ចលនា​។ ល្បឿន​ប៉ារ៉ាម៉ែត្រ​ជម្រើស​បញ្ជាក់​ថិ​រ​វេលា​នៃ​បែបផែន​នេះ​។ វា​អាច​យក​តម្លៃ​ដូច​ខាងក្រោម​: “យឺត​”​, “លឿន​”​, ឬ​គិត​ជា​មិល្លី​វិនាទី​។ callback ប៉ារ៉ាម៉ែត្រ​ជម្រើស​គឺ​ជា​មុខងារ​ដែល​ត្រូវ​បាន​ប្រតិបត្តិ​បន្ទាប់​ពី​ជីវចល​ដែល​បាន​បញ្ចប់​នោះ​ទេ​។ ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ពី​ការ​ប្រើ​ប្រាស់​សាមញ្ញ​មួយ​នៃ​វិធី​សា​ស្ដ្រ​មាន​ចលនា ()​; វា​ផ្លាស់ទី​ធាតុ​មួយ <div> ទៅ​ខាង​ឆ្វេង​រហូត​ដល់​វា​បាន​ឈាន​ដល់​មួយ​លក្ខណៈ​សម្បត្តិ​ខាង​ឆ្វេង​នៃ 250px​:
$(“button”).click(function(){
$(“div”).animate({left:’250px’});
});
jQuery animate() – Manipulate Multiple Properties
ចំណាំ​ថា​លក្ខណៈ​សម្បត្តិ​ជា​ច្រើន​អាច​ត្រូវ​បាន animated នៅ​ពេល​ជា​មួយ​គ្នា​:
$(“button”).click(function(){
$(“div”).animate({
left:’250px’,
opacity:’0.5′,
height:’150px’,
width:’150px’
});
});
jQuery animate() – Using Relative Values
វា​ក៏​អាច​ធ្វើ​ទៅ​បាន​ដើម្បី​កំណត់​តម្លៃ​ដែល​ទាក់ទង (តម្លៃ​គឺ​បន្ទាប់​មក​ទាក់ទង​ទៅ​នឹង​តម្លៃ​បច្ចុប្បន្ន​របស់​ធាតុ​) ។ វា​ត្រូវ​បាន​ធ្វើ​ដោយ​ដាក់ + + = ឬ – = នៅ​ក្នុង​ផ្នែក​ខាង​មុខ​នៃ​តម្លៃ​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“div”).animate({
left:’250px’,
height:’+=150px’,
width:’+=150px’
});
});
jQuery animate() – Using Pre-defined Values
អ្នក​អាច​បញ្ជាក់​តម្លៃ​អចលន​ទ្រព្យ​របស់​ចលនា​ជា “បង្ហាញ​” “លាក់​”​, ឬ “បិទ​បើក​ការ​”​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“div”).animate({
height:’toggle’
});
});

jQuery animate() – Uses Queue Functionality
តាម​លំនាំ​ដើម jQuery បាន​ភ្ជាប់​មក​ជាមួយ​មុខងារ​ជួរ​សម្រាប់​សត្វ​។ នេះ​មាន​ន័យ​ថា​ប្រសិន​បើ​អ្នក​សរសេរ​ជា​ច្រើន​មាន​ចលនា () បន្ទាប់​ពី​ការ​អំពាវនាវ​ឱ្យ​គ្នា​ទៅវិញទៅមក​, jQuery បាន​បង្កើត​នូវ​ជួរ “ផ្ទៃក្នុង​” ទាំង​នេះ​ជា​មួយ​នឹង​ការ​ហៅ​ទូរស័ព្ទ​វិធី​សា​ស្ដ្រ​។ បន្ទាប់​មក​វា​រត់​ការ​ហៅ​ទូរស័ព្ទ​សត្វ​ម្ដង​មួយ​។ ដូច្នេះ​ប្រសិន​បើ​អ្នក​ចង់​អនុវត្ត​ការ​ចលនា​ផ្សេង​គ្នា​បន្ទាប់​ពី​បាន​គ្នា​យើង​ទាញ​យក​អត្ថប្រយោជន៍​នៃ​មុខងារ​ជួរ​:
ឧ​ទា​ហរ​ណ៏ 1
$(“button”).click(function(){
var div=$(“div”);
div.animate({height:’300px’,opacity:’0.4′},”slow”);
div.animate({width:’300px’,opacity:’0.8′},”slow”);
div.animate({height:’100px’,opacity:’0.4′},”slow”);
div.animate({width:’100px’,opacity:’0.8′},”slow”);
});
ឧ​ទ​ហរ​ណ៍​ដូច​ខាង​ក្រោម​ផ្លាស់ទី​ធាតុ​ដំបូង <div> ទៅ​ខាង​ស្ដាំ​និង​បន្ទាប់​មក​បាន​បង្កើន​ទំហំ​ពុម្ព​អក្សរ​នៃ​អត្ថបទ​:
ឧ​ទា​ហរ​ណ៏ 2
$(“button”).click(function(){
var div=$(“div”);
div.animate({left:’100px’},”slow”);
div.animate({fontSize:’3em’},”slow”);
});

មេរៀន jQuery Stop Animations

បញ្ឈប់​ការ jQuery () វិធី​សា​ស្រ្ត​ត្រូវ​បាន​ប្រើ​ដើម្បី​បញ្ឈប់​ចលនា​ឬ​ផល​ប៉ះពាល់​មុន​ពេល​វា​ត្រូវ​បាន​បញ្ចប់​។
វិធី​សា​ស្រ្ត​ jQuery stop() Method បញ្ឈប់​ការ jQuery () វិធី​សា​ស្រ្ត​ត្រូវ​បាន​ប្រើ​ដើម្បី​បញ្ឈប់​ចលនា​មួយ​ដែល​មាន​ប្រសិទ្ធិ​ភាព​ឬ​មុន​ពេល​វា​ត្រូវ​បាន​បញ្ចប់​។ បញ្ឈប់ () វិធី​សា​ស្ដ្រ​សម្រាប់​ធ្វើការ​ទាំងអស់​មុខងារ​ប្រសិទ្ធិ​ភាព jQuery រួម​ទាំង​ការ​បញ្ចាំង​ស្លាយ​​​, រូបភាព​ចលនា​បន្ថយ​និង​ផ្ទាល់​ខ្លួន​។
Syntax:
$(selector).stop(stopAll,goToEnd);

stopAll ប៉ារ៉ាម៉ែត្រ​ជម្រើស​ដែល​បញ្ជាក់​ថា​តើ​ផង​ដែរ​ជួរ​ជីវចល​ដែល​បាន​គួរ​តែ​ត្រូវ​បាន​ជម្រះ​ឬ​នៅ​នោះ​ទេ​។ លំនាំ​ដើម​គឺ​មិន​ពិត​, ដែល​មាន​ន័យ​ថា​ត្រឹម​តែ​ចលនា​សកម្ម​នឹង​ត្រូវ​បាន​បញ្ឈប់​, ដែល​អនុញ្ញាត​ឱ្យ​ចលនា​ណា​មួយ​ដើម្បី​រៀប​ជាជួរ​ត្រូវ​បាន​អនុវត្ត​នៅ​ពេលក្រោយ​ទៀត​។
goToEnd ប៉ារ៉ាម៉ែត្រ​ជម្រើស​ដែល​បញ្ជាក់​ថា​តើ​ឬ​មិន​បំពេញ​គំនូរ​ជីវចល​បច្ចុប្បន្ន​ភ្លាម​។ លំនាំ​ដើម​គឺ​មិន​ពិត​។ ដូច្នេះ​ដោយ​លំនាំ​ដើម​បញ្ឈប់ () វិធី​សា​ស្ដ្រ​ដែល​បាន​សម្លាប់​គំនូរ​ជីវចល​បច្ចុប្បន្ន​កំពុង​ត្រូវ​បាន​អនុវត្ត​នៅ​លើ​ធាតុ​ដែល​បាន​ជ្រើស​។ ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ពី​ការ​បញ្ឈប់​នេះ () វិធី​សា​ស្ដ្រ​ជាមួយ​នឹង​ប៉ារ៉ាម៉ែត្រ​គ្មាន​:
ឧ​ទា​ហរ​ណ៏
$(“#stop”).click(function(){
$(“#panel”).stop();
});

មេរៀន អនុគមន៍ jQuery Callback Functions

អនុគមន៍ callback function ត្រូវ​បាន​ប្រតិបត្តិ​បន្ទាប់​ពី​មាន​ប្រសិទ្ធិ​ភាព​បច្ចុប្បន្ន​គឺ 100​% បាន​បញ្ចប់​។
អនុគមន៍ Callback jQuery សេចក្តី​ថ្លែង​ការ​អនុញ្ញាត JavaScript ត្រូវ​បាន​ប្រតិបត្តិ​ដោយ​បន្ទាត់​បន្ទាត់​។ ទោះ​ជា​យ៉ាង​ណា​ជាមួយ​នឹង​បែបផែន​បន្ទាត់​នៃ​កូដ​បន្ទាប់​អាច​ត្រូវ​បាន​រត់​ទោះ​បី​ជា​មាន​ប្រសិទ្ធិ​ភាព​នោះ​គឺ​មិន​ត្រូវ​បាន​បញ្ចប់​។ នេះ​អាច​បង្កើត​កំហុស​។
Typical syntax: $(selector).hide(speed,callback);
ឧ​ទា​ហរ​ណ៏​ជាមួយ Callback
$(“button”).click(function(){
$(“p”).hide(“slow”,function(){
alert(“The paragraph is now hidden”);
});
});
ឧ​ទា​ហរ​ណ៏​ដូច​ខាងក្រោម​នេះ​មាន​ប៉ារ៉ាម៉ែត្រ callback ទេ​ហើយ​ប្រអប់​ជូន​ដំណឹង​នឹង​ត្រូវ​បាន​បង្ហាញ​មុន​ពេល​មាន​ប្រសិទ្ធិ​ភាព hide ការ​ត្រូវ​បាន​បញ្ចប់​:
ឩ​ទា​ហរ​ណ៍​ដោយ​គ្មាន​ការ Callback

$(“button”).click(function(){
$(“p”).hide(1000);
alert(“The paragraph is now hidden”);
});

មេរៀន jQuery HTML

jQuery ការ​រៀបចំ​របស់ DOM
DOM = Document Object Model ម៉ូដែល​វត្ថុ​ឯកសារ
មួយ​ផ្នែក​មួយ​ដ៏​សំខាន់​ណាស់​នៃ jQuery គឺ​ជា​លទ្ធភាព​ដែល​អាច​ធ្វើ​ដើ​​ម្បី​រៀបចំ​របស់ DOM បាន​។
jQuery ​វិធី​សា​ស្រ្ត​ដែល​ទាក់ទង​នឹង​របស់ DOM ថា​ធ្វើ​ឱ្យ​វា​ងាយ​ស្រួល​ក្នុង​ការ​ចូល​ដំណើរការ​និង​ការ​រៀបចំ​ធាតុ​និង​គុណលក្ខណៈ​មួយ​។

jQuery – Get Content និង​ Attributes
Get Content – text(), html(), and val()
​វិធី​សា​ស្រ្តបីសាមញ្ញារបស់ jQuery សម្រាប់​ស្រស់​ត្រកាល​របស់ DOM គឺ​:
Text () – កំណត់​ឬ​ត្រឡប់​មក​វិញ​មាតិកា​អត្ថបទ​នៃ​ធាតុ​ដែល​បាន​ជ្រើស
HTML () – កំណត់​ឬ​ត្រឡប់​មក​វិញ​មាតិកា​នៃ​ធាតុ​ដែល​បាន​ជ្រើស (រួម​បញ្ចូល​ទាំង markup ដែល​បាន HTML ដែល​)
val () – កំណត់​ឬ​ត្រឡប់​មក​វិញ​តម្លៃ​នៃ​វាល​សំណុំ​បែបបទ​នេះ

ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ពី​របៀប​ដើម្បី​ទទួល​មាតិកា​ដែល​មាន​អត្ថបទ jQuery (ការ​) និង​វិធី​សា​ស្រ្ត HTML ()​:

$(“#btn1”).click(function(){
alert(“Text: ” + $(“#test”).text());
});
$(“#btn2”).click(function(){
alert(“HTML: ” + $(“#test”).html());
});
ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ពី​របៀប​ដើម្បី​ទទួល​បាន​តម្លៃ​នៃ​វាល​បញ្ចូល​មួយ​ជាមួយ val jQuery (ការ​) វិធីសាស្ត្រ​:

$(“#btn1”).click(function(){
alert(“Value: ” + $(“#test”).val());
});
Get Attributes – attr()
The jQuery attr() method is used to get attribute values.
ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ពី​របៀប​ដើម្បី​ទទួល​បាន​តម្លៃ​គុណលក្ខណៈ href ក្នុង​តំណ​ភ្ជាប់​មួយ​នេះ​:

$(“button”).click(function(){
alert($(“#w3s”).attr(“href”));
});
Set Content – text(), html(), and val()
យើង​នឹង​ប្រើ​វិធី​សា​ស្រ្ត​ដូច​គ្នា​បី​ពី​ទំព័រ​មុន​ដើម្បី កំណត់​មាតិកា :

text () – កំណត់​ឬ​ត្រឡប់​មក​វិញ​មាតិកា​អត្ថបទ​នៃ​ធាតុ​ដែល​បាន​ជ្រើស
HTML () – កំណត់​ឬ​ត្រឡប់​មក​វិញ​មាតិកា​នៃ​ធាតុ​ដែល​បាន​ជ្រើស (រួម​បញ្ចូល​ទាំង markup ដែល​បាន HTML ដែល​)
val () – កំណត់​ឬ​ត្រឡប់​មក​វិញ​តម្លៃ​នៃ​វាល​សំណុំ​បែបបទ​នេះ

ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ពី​របៀប​កំណត់​មាតិកា​ដែល​មាន​អត្ថបទ jQuery (ការ​) HTML () និង val () វិធី​សា​ស្រ្ត​:
ឧ​ទា​ហរ​ណ៏
$(“#btn1”).click(function(){
$(“#test1”).text(“Hello world!”);
});
$(“#btn2”).click(function(){
$(“#test2”).html(“<b>Hello world!</b>”);
});
$(“#btn3”).click(function(){
$(“#test3”).val(“Dolly Duck”);
});

អនុគមន៍ Callback text(), html(), and val() ទាំងអស់​នៃ​វិធីសាស្ត្រ​បី jQuery ខាង​លើ​: text () HTML () និង val () មក​ផង​ដែរ​ជាមួយ នឹង​មុខងារ callback មួយ​។ មុខងារ callback នេះ​មាន​ប៉ារ៉ាម៉ែត្រ​ពីរ​: សន្ទស្សន៍​នៃ​ធាតុ​បច្ចុប្បន្ន​នៅ​ក្នុង​បញ្ជី​នៃ​ធាតុ​ដែល​បាន​ជ្រើស​និង​តម្លៃដើម​។ បន្ទាប់មក​លោកអ្នក​ត្រឡប់​ខ្សែ​អក្សរ​ដែល​អ្នក​ចង់​ប្រើ​ជា​តម្លៃ​ថ្មី​ពី​អនុគមន៍​នោះ​។
ឧ​ទា​ហរ​ណ៏

$(“#btn1”).click(function(){
$(“#test1”).text(function(i,origText){
return “Old text: ” + origText + ” New text: Hello world!
(index: ” + i + “)”;
});
});

$(“#btn2”).click(function(){
$(“#test2”).html(function(i,origText){
return “Old html: ” + origText + ” New html: Hello <b>world!</b>
(index: ” + i + “)”;
});
});

Set Attributes – attr() វិធីសាស្រ្ត jQuery attr() method វិធី​សា​ស្ដ្រ​ក៏​ត្រូវ​បាន​ប្រើ​ដើម្បី​កំណត់ / ផ្លាស់​ប្តូ​រ​តម្លៃ​គុណលក្ខណៈ​។
ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ពី​របៀប​ដើម្បី​ផ្លាស់​ប្តូ​រ (SET​) តម្លៃ​គុណលក្ខណៈ href នៅ​ក្នុង​តំណ​:
ឧ​ទា​ហរ​ណ៏

$(“button”).click(function(){
$(“#w3s”).attr(“href”,”http://www.w3schools.com/jquery”);
});

វិធីសាស្ត្រ attr () ក៏​អនុញ្ញាត​ឱ្យ​អ្នក​កំណត់​គុណលក្ខណៈ​ច្រើន​ក្នុង​ពេល​តែមួយ​។ ឧទាហរណ៍​ដូច​ ខាង​ក្រោម​បង្ហាញ ​ពី​របៀប​កំណត់​ទាំង​ពីរ href និង​គុណលក្ខណៈ​ចំណង​ជើង​នៅ​ពេល​ជា​មួយ​គ្នា​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“#w3s”).attr({
“href” : “http://www.w3schools.com/jquery”,
“title” : “W3Schools jQuery Tutorial”
});
});

អនុគមន៍ Callback សម្រាប់ attr ()

attr វិធីសាស្ត្រ jQuery () មក​ផង​ដែរ​ជាមួយ​នឹង​មុខងារ callback មួយ​។ មុខងារ callback នេះ​មាន​ប៉ារ៉ាម៉ែត្រ​ពីរ​: សន្ទស្សន៍​នៃ​ធាតុ​បច្ចុប្បន្ន​នៅ​ក្នុង​បញ្ជី​នៃ​ធាតុ​ដែល​បាន​ជ្រើស​និង​ដើម​តម្លៃ​គុណលក្ខណៈ (ចាស់​) ផង​ដែរ​។ បន្ទាប់មក​លោកអ្នក​ត្រឡប់​ខ្សែ​អក្សរ​ដែល​អ្នក​ចង់​ប្រើ​ជា​តម្លៃ​គុណលក្ខណៈ​ថ្មី​ពី​អនុគមន៍​នេះ​។
ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ attr () ជាមួយ​នឹង​អនុគមន៍ callback មួយ​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“#w3s”).attr(“href”, function(i,origValue){
return origValue + “/jquery”;
});
});
jQuery – Add Elements ធាតុ​បន្ថែម
ជា​មួយ​នឹង​ការ jQuery វា​ជា​ការ​ងាយ​ស្រួល​ក្នុង​ការ​បន្ថែម​ធាតុ​ថ្មី / មាតិកា​។
បញ្ចូល​មាតិកា HTML ថ្មី
យើង​នឹង​សម្លឹង​មើល​ទៅ​លើ​វិធី​សា​ស្រ្ត​បួន jQuery ដែល​ត្រូវ​បាន​ប្រើ​ដើម្បី​បន្ថែម​មាតិកា​ថ្មី​:

append() – មាតិកា​បញ្ចូល​នៅ​ចុង​បញ្ចប់​នៃ​ធាតុ​ដែល​បាន​ជ្រើស
prepend() – មាតិកា​បញ្ចូល​នៅ​ដើម​នៃ​ធាតុ​ដែល​បាន​ជ្រើសរើស​នេះ
​​ after() – បន្ទាប់​ពី​ធាតុ​មាតិកា​បញ្ចូល​ដែល​បាន​ជ្រើស
before() – មាតិកា​មុន​ពេល​បញ្ចូល​ធាតុ​ដែល​បាន​ជ្រើស

វិធី​សា​ស្ដ្រ​ jQuery append() Method
បន្ថែម​ខាង​ចុង​បាន jQuery () វិធី​សា​ស្ដ្រ​បញ្ចូល​មាតិកា​នៅ​ចុង​បញ្ចប់​នៃ​ធាតុ​របស់ HTML ដែល​បាន​ជ្រើស​។
ឧ​ទា​ហរ​ណ៏
$(“p”).append(“Some appended text.”);

វិធី​សា​ស្ដ្រ​ jQuery prepend() Method
ការ​បន្ថែម​ទៅ​ខាងដើម jQuery () វិធី​សា​ស្ដ្រ​បញ្ចូល​មាតិកា​នៅ​ដើម​នៃ​ធាតុ​របស់ HTML ដែល​បាន​ជ្រើស​។
ឧ​ទា​ហរ​ណ៏
$(“p”).prepend(“Some prepended text.”);
បន្ថែម​ធាតុ​ថ្មី​ជា​ច្រើន​ជា​មួយ​ append() and prepend()
ឧ​ទា​ហរ​ណ៏
function appendText()
{
var txt1=”<p>Text.</p>”;               // Create element with HTML
var txt2=$(“<p></p>”).text(“Text.”);   // Create with jQuery
var txt3=document.createElement(“p”);  // Create with DOM
txt3.innerHTML=”Text.”;
$(“p”).append(txt1,txt2,txt3);         // Append the new elements
}

វិធី​សា​ស្ដ្រ​ jQuery after() និង  before() Methods
វិធី​សា​ស្ដ្រ​ jQuery after() method វិធី​សា​ស្រ្ត​មាតិកា​បញ្ចូល​បន្ទាប់​ពី​ធាតុ​របស់ HTML ដែល​បាន​ជ្រើស​។
jQuery before() បាន​មុន​ពេល​ដែល () វិធី​សា​ស្រ្ត​មាតិកា​បញ្ចូល​មុន​ធាតុ​របស់ HTML ដែល​បាន​ជ្រើស​។
ឧ​ទា​ហរ​ណ៏
$(“img”).after(“Some text after”);
$(“img”).before(“Some text before”);
បន្ថែម​ធាតុ after() and before()
ឧ​ទា​ហរ​ណ៏
function afterText()
{
var txt1=”<b>I </b>”;     // Create element with HTML
var txt2=$(“<i></i>”).text(“love “);     // Create with jQuery
var txt3=document.createElement(“big”);  // Create with DOM
txt3.innerHTML=”jQuery!”;
$(“img”).after(txt1,txt2,txt3);          // Insert new elements after img
}
jQuery – Remove Elements
ជាមួយ jQuery វា​ជា​ការ​ងាយ​ស្រួល​ក្នុង​ការ​យក​ធាតុ​របស់ HTML ដែល​មាន​ស្រាប់​។
Remove Elements/Content
ដើម្បី​យក​ធាតុ​មាតិកា​និង​មាន​ជា​ចម្បង​ពីរ​វិធី​សា​ស្រ្ត jQuery​:
remove() – យក​ធាតុ​ដែល​បាន​ជ្រើស (និង​ធាតុ​កូន​របស់​វា​)
empty() – យក​ធាតុ​កូន​ពី​ធាតុ​ដែល​បាន​ជ្រើស
វិធី​សា​ស្រ្ត jQuery remove() Method
វិធី​សា​ស្រ្ត jQuery remove() method យក​ធាតុ​ដែល​បាន​ជ្រើស (s​) បាន​និង​ធាតុ​កូន​របស់​ខ្លួន​។
$(“#div1”).remove();
វិធី​សា​ស្រ្ត jQuery empty() Method
វិធី​សា​ស្រ្ត jQuery empty() method jQuery យក​ធាតុ​កុមារ​នៃ​ធាតុ​ដែល​បាន​ជ្រើស (s​)​។
ឧ​ទា​ហរ​ណ៏
$(“#div1”).empty();
ច្រោះត្រង​ធាតុ​ដែល​ត្រូវ​យក​ចេញ
វិធី​សា​ស្រ្ត​មួយ​ក៏​ទទួល​យក​ប៉ារ៉ាម៉ែត្រ​ដែល​អនុញ្ញាត​ឱ្យ​អ្នក​ដើម្បី​ត្រង​ធាតុ​ដែល​នឹង​ត្រូវ​បាន​យក​ចេញ​។
ប៉ារ៉ាម៉ែត្រ​នេះ​អាច​ធ្វើ​បាន​ណា​មួយ​នៃ​វាក្យ​សម្ព័ន្ធ​ឧបករណ៍​ជ្រើស​របស់ jQuery ។ឧទាហរណ៍​ដូច​ខាង​ក្រោម​យក​ធាតុ​ទាំងអស់ <p> ជាមួយ​ថ្នាក់ = “italic​”​:
ឧ​ទា​ហរ​ណ៏
$(“p”).remove(“.italic”);

jQuery – Get and Set CSS Classes

ជាមួយ jQuery ​ជា​ការ​ងាយ​ស្រួល​ក្នុង​ការ​រៀបចំ​ជា CSS របស់​ធាតុ​។
ការរៀបចំ​ជា CSS jQuery
jQuery មាន​វិធី​សា​ស្រ្ត​ជា​ច្រើន​សម្រាប់​ការ​រៀបចំ​ជា CSS ។ យើង​នឹង​សម្លឹង​មើល​ទៅ​លើ​វិធី​សា​ស្រ្ត​ដូច​ខាង​ក្រោម​:
addClass () – បន្ថែម​មួយ​ឬ​ច្រើន​ថ្នាក់រៀន​ដើម្បី​ធាតុ​ដែល​បាន​ជ្រើស
removeClass () – យក​មួយ​ឬ​ច្រើន​ថ្នាក់​សិក្សា​ពី​ធាតុ​ដែល​បាន​ជ្រើស
toggleClass () – បិទ​បើក​រវាង​ការ​បន្ថែម / យក​ចេញ​ថ្នាក់រៀន​ពី​ធាតុ​ដែល​បាន​ជ្រើស
CSS () – កំណត់​ឬ​ត្រឡប់​គុណលក្ខណៈ​រចនាប័ទ្ម

សន្លឹក​រចនាប័ទ្ម​ដូច​ខាង​ក្រោម​នេះ​នឹង​ត្រូវ​បាន​ប្រើ​សម្រាប់​គ្រប់​ឧ​ទ​ហរ​ណ៍​នៅ​លើ​ទំព័រ​នេះ​:
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
jQuery addClass() Method

ឧទាហរណ៍​ខាងក្រោម​បង្ហាញ​ពី​របៀប​បន្ថែម​គុណលក្ខណៈ​ថ្នាក់​ទៅ​ធាតុ​ផ្សេង​គ្នា​។ ជា​ការ​ពិត​ណាស់​អ្នក​អាច​ជ្រើស​ធាតុ​ច្រើន​នៅពេល​បន្ថែម​ថ្នាក់រៀន​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“h1,h2,p”).addClass(“blue”);
$(“div”).addClass(“important”);
});

អ្នក​ក៏​អាច​បញ្ជាក់​នៅ​ក្នុង​ថ្នាក់​រៀន​ច្រើន addClass នេះ () វិធី​សា​ស្ដ្រ​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“#div1”).addClass(“important blue”);
});

jQuery removeClass() Method

ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ថា​តើ​ការ​យក​គុណលក្ខណៈ​ថ្នាក់​មួយ​ជាក់លាក់​ពី​ធាតុ​ផ្សេង​គ្នា​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“h1,h2,p”).removeClass(“blue”);
});

jQuery toggleClass() Method

ឧទាហរណ៍​ដូច​ខាង​ក្រោម​នឹង​បង្ហាញ​ពី​របៀប​ប្រើ toggleClass jQuery () វិធី​សា​ស្ដ្រ​។ វិធីសាស្ត្រ​នេះ​បិទ​បើក​រវាង​ការ​បន្ថែម / យក​ចេញ​ពី​ថ្នាក់​រៀន​ធាតុ​ដែល​បាន​ជ្រើស​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“h1,h2,p”).toggleClass(“blue”);
});
វិធីសាស្ត្រ jQuery – css() Method វិធីសាស្ត្រ css() method សំណុំ​វិធីសាស្ត្រ​ឬ​ត្រឡប់​មក​វិញ​មួយ​ឬ​ច្រើន​លក្ខណៈ​សម្បត្តិ​រចនាប័ទ្ម​សម្រាប់​ធាតុ​ដែល​បាន​ជ្រើស​។
ត្រឡប់ CSS Property To return the value of a specified CSS property, use the following syntax:
css(“propertyname”);
ឧទាហរណ៍​ដូច​ខាង​ក្រោម​នឹង​ត្រឡប់​តម្លៃ​ពណ៌​ផ្ទៃ​ខាង​ក្រោយ​នៃ​ធាតុ​ដែល​ផ្គូផ្គង​ដំបូង​:
ឧ​ទា​ហរ​ណ៏
$(“p”).css(“background-color”);

ដើម្បី​កំណត់​លក្ខណៈ​សម្បត្តិ​បាន​បញ្ជាក់​ជា CSS ប្រើ​វាក្យ​សម្ព័ន្ធ​ដូច​ខាង​ក្រោម​:
css(“propertyname”,”value”);
ឧទាហរណ៍​ដូច​ខាង​ក្រោម​នឹង​ត្រូវ​កំណត់​តម្លៃ​របស់​ផ្ទៃ​ខាង​ក្រោយ​ពណ៌​សម្រាប់​ធាតុ​ផ្គូផ្គង​ទំ​ង​អស់​:
ឧ​ទា​ហរ​ណ៏
$(“p”).css(“background-color”,”yellow”);

 កំណត់​លក្ខណៈ​សម្បត្តិ​ជា CSS ច្រើន Multiple CSS Properties  ដើម្បី​កំណត់​លក្ខណៈ​សម្បត្តិ​ជា CSS ច្រើន​ប្រើ​វាក្យ​សម្ព័ន្ធ​ដូច​ខាង​ក្រោម​:
css({“propertyname”:”value”,”propertyname”:”value”,…});

ឧទាហរណ៍​ដូច​ខាង​ក្រោម​នឹង​ត្រូវ​បាន​កំណត់​ជា​ផ្ទៃ​ខាង​ក្រោយ​ពណ៌​និង​ពុម្ព​អក្សរ​ទំហំ​សម្រាប់​ធាតុ​ផ្គូផ្គង​ទំ​ង​អស់​:
ឧ​ទា​ហរ​ណ៏
$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});
jQuery – Dimensions
jQuery Dimension Methods
jQuery has several important methods for working with dimensions:

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
aវិធី​សា​ស្រ្ត jQuery width() and height() Methods
វិធី​សា​ស្រ្ត​កំណត់​ឬ​ត្រឡប់​ទទឹង​នៃ​ធាតុ​មួយ (រួម​បញ្ចូល​ទាំង​ការ​ចន្លោះ​គ្មាន​ព្រំដែន​ឬ​រឹម​) ។
height() វិធី​សា​ស្រ្ត​កំណត់​ឬ​ត្រឡប់​កម្ពស់​នៃ​ធាតុ​មួយ (រួម​បញ្ចូល​ទាំង​ការ​ចន្លោះ​គ្មាន​ព្រំដែន​ឬ​រឹម​) ។
ឧទាហរណ៍​ដូច​ខាង​ក្រោម​ត្រឡប់​ទទឹង​និង​កម្ពស់​នៃ​ធាតុ​ដែល​បាន​បញ្ជាក់​មួយ <div>​:
$(“button”).click(function(){
var txt=””;
txt+=”Width: ” + $(“#div1”).width() + “</br>”;
txt+=”Height: ” + $(“#div1”).height();
$(“#div1”).html(txt);
});
វិធី​សា​ស្រ្ត jQuery innerWidth() and innerHeight() Methods
innerWidth() វិធី​សា​ស្រ្ត​ត្រឡប់​ទទឹង​នៃ​ធាតុ (រួម​បញ្ចូល​ទាំង​ការ​ចន្លោះ​) មួយ​។ innerHeight() វិធី​សា​ស្រ្ត​ត្រឡប់​កម្ពស់​នៃ​ធាតុ (រួម​បញ្ចូល​ទាំង​ការ​ចន្លោះ​) មួយ​។ ឧទាហរណ៍​ដូច​ខាង​ក្រោម inner-width/height ត្រឡប់​នៃ​ធាតុ​ដែល​បាន​បញ្ជាក់​មួយ <div>​:
$(“button”).click(function(){
var txt=””;
txt+=”Inner width: ” + $(“#div1”).innerWidth() + “</br>”;
txt+=”Inner height: ” + $(“#div1”).innerHeight();
$(“#div1”).html(txt);
});
វិធី​សា​ស្រ្ត jQuery outerWidth() and outerHeight() Methods
outerWidth () វិធី​សា​ស្រ្ត​ត្រឡប់​ទទឹង​នៃ​ធាតុ (រួម​បញ្ចូល​ទាំង​ចន្លោះ​និង​នៅ​តាម​ព្រំដែន​) មួយ​។ outerHeight() វិធី​សា​ស្រ្ត​ត្រឡប់​កម្ពស់​នៃ​ធាតុ (រួម​បញ្ចូល​ទាំង​ចន្លោះ​និង​នៅ​តាម​ព្រំដែន​) មួយ​។ ឧទាហរណ៍​ដូច​ខាង​ក្រោម outer-width/height ត្រឡប់​នៃ​ធាតុ​ដែល​បាន​បញ្ជាក់​មួយ <div>​:
$(“button”).click(function(){
var txt=””;
txt+=”Outer width: ” + $(“#div1”).outerWidth() + “</br>”;
txt+=”Outer height: ” + $(“#div1”).outerHeight();
$(“#div1”).html(txt);
});
វិធីសាស្ត្រ outerWidth(​) ត្រឡប់​ទទឹង​នៃ​ធាតុ (រួម​បញ្ចូល​ទាំង​ការ​ចន្លោះ​ព្រំដែន​, រឹម​និង​ការ​) មួយ​។
វិធីសាស្ត្រ outerHeight ត្រឡប់​កម្ពស់​នៃ​ធាតុ (រួម​បញ្ចូល​ទាំង​ការ​ចន្លោះ​ព្រំដែន​, រឹម​និង​ការ​) មួយ​។
វិធី​សា​ស្រ្ត jQuery More width() and height()
ឧទាហរណ៍​ដូច​ខាង​ក្រោម​ត្រឡប់​ទទឹង​និង​កម្ពស់​នៃ​ឯកសារ​នេះ (ឯកសារ HTML ដែល​) និង​បង្អួច (កម្មវិធី​រុករក​ច្រក​ទិដ្ឋភាព​របស់​ថ្នាក់​)​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
var txt=””;
txt+=”Document width/height: ” + $(document).width();
txt+=”x” + $(document).height() + “\n”;
txt+=”Window width/height: ” + $(window).width();
txt+=”x” + $(window).height();
alert(txt);
});

មេរៀន AJAX jQuery

សេចក្តី​ផ្តើ​ម AJAX
AJAX គឺជា​សិល្បៈ​នៃ​ការ​ផ្លាស់​ប្តូ​រ​ទិន្នន័យ​ជាមួយ​ម៉ាស៊ីន​បម្រើ​ និង​ការ​ធ្វើ​បច្ចុប្បន្នភាព​ផ្នែក​នៃ​ទំព័រ​តំបន់​បណ្ដាញ​ដោយ​គ្មាន​ការ reloading ទំព័រ​ទាំងមូលឡើងវិញ​។
AJAX គឺ​ជា​អ្វី​?
ពាក្ស AJAX មានន័យថា Asynchronous JavaScript និង XML មាន​
AJAX គឺ​​ការ​ផ្ទុក​ទិន្នន័យ​នៅ​ក្នុង​ផ្ទៃ​ខាងក្រោយ​ហើយ​បង្ហាញ​វា​នៅ​លើ​ទំព័រ​ប​ណ្តា​ញ​ដោយ​គ្មាន​ការ reloading ទំព័រ​ទាំងមូល​។ ឧ​ទា​ហរ​ណ៏​នៃ​កម្មវិធី​ប្រើ​ប្រាស់ AJAX​: ការសរសេរកូដ Google ផែនទី​, YouTube​, និង​ទំព័រ Facebook​។
តើ​អ្វី​ទៅ jQuery និង AJAX​?
jQuery ផ្តល់​នូវ​វិធី​សា​ស្រ្ត​មួយ​ចំនួន​សម្រាប់​មុខងារ AJAX ។ នឹង​ វិធី​សា​ស្រ្ត AJAX jQuery អ្នក​អាច​ស្នើ​អត្ថបទ HTML & #​, XML មាន​ឬ JSON ពី​ម៉ាស៊ីន​បម្រើ​ ពី​ចម្ងាយ​ដោយ​ប្រើ​ការ​បាន​ទាំង HTTP ដែល​ទទួល​បាន​​  HTTP & ហើយ​អ្នក​អាច​ផ្ទុក​ទិន្នន័យ​ខាង​ក្រៅ​ដោយ​ផ្ទាល់​ទៅ​ក្នុង​ធាតុ​ដែល​បាន​ជ្រើស​របស់ HTML នៃ​ទំព័រ​បណ្ដាញ​របស់​អ្នកដោយប្រើ jQuery។
ប្រសិនបើ​មិនប្រើ jQuery​, AJAX អាច​ត្រូវ​បាន​សរសេរ​កូដ​បន្តិច​ដូចម្តេច​ខ្លះ?
សរសេរ​កូដ AJAX ធម្មតា​អាច​ត្រូវ​បាន​បន្តិចទេ​ពីព្រោះ​កម្មវិធី​រុករក​បណ្ដាញ​ផ្សេង​គ្នា​មាន​វាក្យ​សម្ព័ន្ធ​ ផ្សេង​គ្នា​សម្រាប់​ការ​អនុវត្ដ​ន៍ AJAX ។ នេះ​មាន​ន័យ​ថា​អ្នក​នឹង​ត្រូវ​តែ​សរសេរ​កូដ​បន្ថែម​ដើម្បី​សាកល្បង​
សម្រាប់​កម្មវិធី​រុករក​បណ្ដាញ​ផ្សេង​គ្នា​។ ទោះ​ជា​យ៉ាង​ណា​ក្រុម jQuery បាន​នាំ​យក​ថែរក្សា​នេះ​សម្រាប់​យើង​ ដូច្នេះ​យើង​អាច​សរសេរ​ជា​មុខងារ AJAX ជាមួយ​បន្ទាត់​តែ​មួយ​​​កូដតែមួយបាន​។
វិធីសាស្រ្តនៃ AJAX load() Method

វិធីសាស្រ្តនៃ jQuery load() method គឺ​ជា​វិធីសាស្ត្រ​វិធីសាស្ត្រ AJAX សាមញ្ញ​ប៉ុន្តែ​មាន​កំលាំងខ្លាំង​។
ផ្ទុក​ទិន្នន័យ​ពី​ម៉ាស៊ីន​បម្រើ​វិធីសាស្ត្រ​មួយ​ហើយ​ដាក់​ទិន្នន័យ​បាន​ត្រឡប់​ចូល​ទៅ​ក្នុង​ធាតុ​ដែល​បាន​ជ្រើស​។
Syntax:

$(selector).load(URL,data,callback);

ប៉ារ៉ាម៉ែត្រ​ទិន្នន័យ​ស្រេច​បញ្ជាក់​សំណុំ​នៃ querystring គន្លឹះ / តម្លៃ​ដើម្បី​ផ្ញើ​រួម​ជា​មួយ​នឹង​ការ​ស្នើសុំ​នេះ​។ callback ប៉ារ៉ាម៉ែត្រ​ជម្រើស​គឺ​ជា​ឈ្មោះ​នៃ​អនុគមន៍​ជា​មួយ​នឹង​ត្រូវ​បាន​ប្រតិបត្តិ​បន្ទាប់​ពី​វិធីសាស្ត្រ​នៃ​ការ​ផ្ទុក () គឺ​ត្រូវ​បាន​បញ្ចប់​។ “demo_test.txt​”​: នៅ​ទីនេះ​មាតិកា​របស់​ឯកសារ​ឧទាហរណ៍​របស់​ពួក​យើង​គឺ​:
<h2>jQuery and AJAX is FUN!!!</h2>
<p id=”p1”>This is some text in a paragraph.</p>
ឧ​ទា​ហរ​ណ៏​ដូច​ខាង​ក្រោម​ផ្ទុក​មាតិកា​នៃ​ឯកសារ “demo_test.txt​” ទៅ​ក្នុង​ធាតុ <div> មួយ​ជាក់លាក់​:
ឧ​ទា​ហរ​ណ៏
$(“#div1”).load(“demo_test.txt”);
វា​ក៏​អាច​ធ្វើ​ទៅ​បាន​ដើម្បី​បន្ថែម​ឧបករណ៍​ជ្រើស jQuery ដើម្បី​ប៉ារ៉ាម៉ែត្រ URL ។

ឧ​ទា​ហរ​ណ៏​ដូច​ខាង​ក្រោម​ផ្ទុក​មាតិកា​នៃ​ធាតុ​ដែល​មាន​លេខ​សម្គាល់ = “p1​” នៅ​ខាង​ក្នុង​ឯកសារ “demo_test.txt​” នោះ​ចូល​ទៅ​ក្នុង​ធាតុ <div> ជាក់លាក់​:
ឧ​ទា​ហរ​ណ៏
$(“#div1”).load(“demo_test.txt #p1”);
ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ប្រអប់​ជូន​ដំណឹង​មួយ​បន្ទាប់​ពី​ការ​ផ្ទុក () វិធី​សា​ស្ដ្រ​បញ្ចប់​។ ប្រសិន​បើ​វិធីសាស្ត្រ​នៃ​ការ​ផ្ទុក () បាន​ទទួល​បាន​ជោគជ័យ​វា​បង្ហាញ “មាតិកា​ខាងក្រៅ​ត្រូវ​បាន​ផ្ទុក​ដោយ​ជោគជ័យ​!​” ហើយ​បើ​សិន​ជា​វា​បាន​បរាជ័យ​វា​បង្ហាញ​សារ​កំហុស​មួយ​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“#div1”).load(“demo_test.txt”,function(responseTxt,statusTxt,xhr){
if(statusTxt==”success”)
alert(“External content loaded successfully!”);
if(statusTxt==”error”)
alert(“Error: “+xhr.status+”: “+xhr.statusText);
});
});

jQuery – AJAX get() និង post() Methods
jQuery get() និង  post() methods ត្រូវ​បាន​ប្រើ​ដើម្បី​ស្នើ​សុំ​ទិន្នន័យ​ពី​ម៉ាស៊ីន​បម្រើ HTTP & ជាមួយ GET ឬ POST សំណើ​រ​មួយ​។

HTTP Request: GET vs. POST
វិធី​សា​ស្រ្ត​ពីរ​ដែល​ជាទូទៅ​ត្រូវ​បាន​ប្រើ​សម្រាប់​សំណើ​រ​សុំ​ការ​ឆ្លើយ​តប​រវាង​ម៉ាស៊ីន​ភ្ញៀវ​និង​ម៉ាស៊ីន​បម្រើ​គឺ​: GET និង POST ។
GET – សំណើ​រ​ពី​ធនធាន​ដែល​បាន​បញ្ជាក់​ទិន្នន័យ
POST បាន – ទិន្នន័យ Submits ត្រូវ​បាន​ដំណើរ​ការ​ទៅ​ធនធាន​ដែល​បាន​បញ្ជាក់

វិធី​សា​ស្រ្ត  jQuery $.get() Method

The $.get() method ទិន្នន័យ​ពី​ម៉ាស៊ីន​បម្រើ​សំណើ​វិធីសាស្ត្រ​ជាមួយ HTTP ដែល​មួយ GET សុំ​។

Syntax:
$.get(URL,callback);
ឧទាហរណ៍​ខាងក្រោម​ប្រើ $ វិធីសាស្ត្រ​ទទួល​បាន () ដើម្បី​ទាញ​យក​ទិន្នន័យ​ពី​ឯកសារ​នៅ​លើ​ម៉ាស៊ីន​បម្រើ​នេះ​។ :
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$.get(“demo_test.asp”,function(data,status){
alert(“Data: ” + data + “\nStatus: ” + status);
});
});

ប៉ារ៉ាម៉ែត្រ​ដំបូង​នៃ $ ។ ទទួល​បាន ជា URL ដែល​យើង​ចង់​ស្នើ​សុំ (“demo_test.asp​”​) ផង​ដែរ​។ប៉ារ៉ាម៉ែត្រ​ទីពីរ​គឺ​មុខងារ callback មួយ​។ ប៉ារ៉ាម៉ែត្រ callback ដំបូង​ទទួល​មាតិកា​របស់​ទំព័រ​ដែល​បាន​ស្នើ​ហើយ​ប៉ារ៉ាម៉ែត្រ callback ទី​ពីរ​ទទួល​បាន​ស្ថានភាព​នៃ​ការ​ស្នើ​រ​សុំ​នេះ​។

<%
response.write(“This is some text from an external ASP file.”)
%>

jQuery $.post() Method

$.post() method ទិន្នន័យ​ពី​ម៉ាស៊ីន​បម្រើ​សំណើ​វិធីសាស្ត្រ​ដោយ​ប្រើ​សំណើ HTTP ដែល POST បាន​នោះ​ទេ​។

Syntax:

$.post(URL,data,callback);

ប៉ារ៉ាម៉ែត្រ​ដែល​ត្រូវការ URLដែល​បាន​បញ្ជាក់​ពី URLដែល​អ្នក​ចង់​ស្នើសុំ​។ប៉ារ៉ាម៉ែត្រ​ទិន្នន័យ​ស្រេច​បញ្ជាក់​ទិន្នន័យ​មួយ​ចំនួន​ដើម្បី​ផ្ញើ​តាម​ស្រប​ជាមួយ​នឹង​សំណើ​រ​នេះ​។callback ប៉ារ៉ាម៉ែត្រ​ជម្រើស​គឺ​ជា​ឈ្មោះ​នៃ​អនុគមន៍​ជា​មួយ​នឹង​ត្រូវ​បាន​ប្រតិបត្តិ​ប្រសិន​បើ​សំណើ​ជោគជ័យ​។
ឧទាហរណ៍​ខាងក្រោម​ប្រើ $ វិធីសាស្ត្រ​ប៉ុស្តិ៍ (ការ​) ដើម្បី​ផ្ញើ​ទិន្នន័យ​មួយ​ចំនួន​រួម​ជាមួយ​នឹង​ការ​ស្នើសុំ​នេះ​។ :

$(“button”).click(function(){
$.post(“demo_test_post.asp”,
{
name:”Donald Duck”,
city:”Duckburg”
},
function(data,status){
alert(“Data: ” + data + “\nStatus: ” + status);
});
});

ប៉ារ៉ាម៉ែត្រ​ដំបូង​នៃ $ គឺ​ជា URLដែល​យើង​ចង់​ស្នើ​សុំ (“demo_test_post.asp​”​) ផង​ដែរ​។ បន្ទាប់​មក​យើង​ហុច​ក្នុង​ទិន្នន័យ​មួយ​ចំនួន​ដើម្បី​ផ្ញើ​រួម​ជាមួយ​សំណើ​រ​សុំ (ឈ្មោះ​និង​ទីក្រុង​) ផង​ដែរ​។ ស្គ្រីប ASP នៅ​ក្នុង “demo_test_post.asp​” អាន​ប៉ារ៉ាម៉ែត្រ​ដែល​ដំណើរ​ការ​ពួក​វា​ហើយ​ត្រឡប់​លទ្ធផល​។ ប៉ារ៉ាម៉ែត្រ​ទី​បី​គឺ​ជា​មុខងារ​មួយ​ដែល callback ។ ប៉ារ៉ាម៉ែត្រ callback ដំបូង​ទទួល​មាតិកា​របស់​ទំព័រ​ដែល​បាន​ស្នើ​ហើយ​ប៉ារ៉ាម៉ែត្រ callback ទី​ពីរ​ទទួល​បាន​ស្ថានភាព​នៃ​ការ​ស្នើ​រ​សុំ​នេះ​។ ព័ត៌មាន​ជំនួយ​: នេះ​គឺ​ជា​របៀប​ឯកសារ ASP មើល​ទៅ​ដូច​ជា (“demo_test_post.asp​”​)​:
<%
dim fname,city
fname=Request.Form(“name”)
city=Request.Form(“city”)
Response.Write(“Dear ” & fname & “. “)
Response.Write(“Hope you live well in ” & city & “.”)
%>