jQuery ရွေးချယ်မှုများ
jQuery ရွေးချယ်သူများသည် jQuery စာကြည့်တိုက်၏ အရေးကြီးဆုံး အစိတ်အပိုင်းများထဲမှ တစ်ခုဖြစ်သည်။
jQuery ရွေးချယ်မှုများ
jQuery ရွေးချယ်သူများသည် သင့်အား HTML ဒြပ်စင်(များ) ကို ရွေးချယ်ပြီး စီမံခန့်ခွဲနိုင်စေပါသည်။
jQuery ရွေးချယ်မှုများအား ၎င်းတို့၏အမည်၊ အိုင်ဒီ၊ အတန်းများ၊ အမျိုးအစားများ၊ ရည်ညွှန်းချက်များ၊ ရည်ညွှန်းချက်တန်ဖိုးများနှင့် အခြားအရာများအပေါ် အခြေခံ၍ "ရှာရန်" (သို့မဟုတ်) ရွေးချယ်ရန် အသုံးပြုသည်။ ၎င်းသည် ရှိပြီးသား CSS Selectors များကို အခြေခံထားပြီး ၎င်းအပြင်၊ ၎င်းတွင် ကိုယ်ပိုင်ရွေးချယ်မှုအချို့ပါရှိသည်။
jQuery ရှိ ရွေးချယ်သူအားလုံးသည် ဒေါ်လာဈေး သင်္ကေတနှင့် ကွင်းစဥ်များဖြင့် စတင်သည်- $()။
ဒြပ်စင် Selector
jQuery ဒြပ်စင်ရွေးချယ်သူသည် ဒြပ်စင်အမည်ကို အခြေခံ၍ အစိတ်အပိုင်းများကို ရွေးချယ်သည်။
<p>ဤကဲ့သို့သော စာမျက်နှာရှိ အစိတ်အပိုင်း အားလုံးကို သင်ရွေးချယ်နိုင်သည် -
$("p")
ဥပမာ
အသုံးပြုသူတစ်ဦးက ခလုတ်တစ်ခုကို နှိပ်သောအခါ၊ <p>အစိတ်အပိုင်းအားလုံးကို ဝှက်ထားလိမ့်မည်-
ဥပမာ
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
#id ရွေးချယ်မှု
jQuery ရွေးပေးသူသည် တိကျသောဒြပ်စင်ကိုရှာဖွေရန် HTML tag တစ်ခု၏ id attribute ကိုအသုံးပြုသည်။#id
id သည် စာမျက်နှာတစ်ခုအတွင်း တစ်မူထူးခြားနေသင့်သည်၊ ထို့ကြောင့် တစ်ခုတည်းသော၊ ထူးခြားသည့်ဒြပ်စင်တစ်ခုကို သင်ရှာလိုသောအခါတွင် #id ရွေးချယ်မှုစနစ်ကို အသုံးပြုသင့်သည်။
တိကျသော id ပါရှိသော ဒြပ်စင်တစ်ခုကို ရှာရန်၊ HTML ဒြပ်စင်၏ ID ဖြင့် hash စာလုံးကို ရေးပါ-
$("#test")
ဥပမာ
အသုံးပြုသူတစ်ဦးက ခလုတ်တစ်ခုကို နှိပ်သောအခါ၊ id="test" ပါရှိသည့် အစိတ်အပိုင်းကို ဝှက်ထားမည်-
ဥပမာ
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
.class Selector
jQuery .classရွေးချယ်မှုစနစ်သည် သီးခြားအတန်းတစ်ခုဖြင့် အစိတ်အပိုင်းများကို ရှာဖွေသည်။
သီးခြားအတန်းတစ်ခုရှိ အစိတ်အပိုင်းများကို ရှာရန်၊ အတန်း၏အမည်ဖြင့် နောက်တွင် ကာလအက္ခရာတစ်ခုရေးပါ-
$(".test")
ဥပမာ
အသုံးပြုသူတစ်ဦးက ခလုတ်တစ်ခုကို နှိပ်သောအခါ၊ class="test" ပါရှိသည့် အစိတ်အပိုင်းများကို ဝှက်ထားမည်-
ဥပမာ
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
jQuery Selectors ၏ နောက်ထပ်ဥပမာများ
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("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 Selector Tester ကို အသုံးပြု ပါ။
jQuery ရွေးပေးသူများအားလုံး၏ အပြည့်အစုံကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ jQuery Selectors Reference သို့ သွားပါ ။
သီးခြားဖိုင်တစ်ခုတွင် လုပ်ဆောင်ချက်များ
သင့်ဝဘ်ဆိုဒ်တွင် စာမျက်နှာများစွာပါရှိပြီး သင့် jQuery လုပ်ဆောင်ချက်များကို ထိန်းသိမ်းရလွယ်ကူစေလိုပါက၊ သင်၏ jQuery လုပ်ဆောင်ချက်များကို သီးခြား .js ဖိုင်တစ်ခုတွင် ထည့်သွင်းနိုင်သည်။
ဤသင်ခန်းစာတွင် jQuery ကိုကျွန်ုပ်တို့သရုပ်ပြသောအခါ၊ လုပ်ဆောင်ချက်များကို <head>
ကဏ္ဍထဲသို့တိုက်ရိုက်ထည့်သည်။ သို့သော်၊ တစ်ခါတစ်ရံတွင် ၎င်းတို့ကို ဤကဲ့သို့သော သီးခြားဖိုင်တစ်ခုတွင် ထားရှိခြင်းက ပိုကောင်းသည် (.js ဖိုင်ကိုရည်ညွှန်းရန် src attribute ကိုသုံးပါ)
ဥပမာ
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>