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()
វិធីសាស្រ្ត 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);
});
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()
វិធីសាស្រ្ត 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);
});
0 comments