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