visible selector
:visible selector သည် စာမျက်နှာပေါ်ရှိ မြင်နေရသော
အစိတ်အပိုင်းအားလုံးကို ရွေးချယ်ပေးသည်။
visibility: hidden သို့မဟုတ်
opacity: 0 ရှိသော အစိတ်အပိုင်းများကို မြင်နေရသည်ဟု သတ်မှတ်သည်၊
အဘယ်ကြောင့်ဆိုသော် ၎င်းတို့သည် အနေအထား၏ နေရာတစ်ခုကို ယူထားသောကြောင့်ဖြစ်သည်။
အစိတ်အပိုင်းများသည် ၎င်းတို့သည် စာတမ်းထဲတွင် နေရာယူထားပါက မြင်နေရသည်ဟု သတ်မှတ်သည်။
မြင်နေရသော အစိတ်အပိုင်းများတွင် အမြင့်
နှင့် အနံသည် 0 နှင့် ကွာခြားသည်။
:visible သည် CSS သတ်မှတ်ချက်၏ အစိတ်အပိုင်း မဟုတ်သောကြောင့်၊
ခေတ်သစ်ဘရောက်ဇာများတွင် စွမ်းဆောင်ရည်ကို မြှင့်တင်ရန်
အရင်ဆုံး CSS selector ကို အသုံးပြု၍ အစိတ်အပိုင်းများကို
စစ်ထုတ်ပြီးနောက်
.filter(':visible') ကို အသုံးပြုရန် ပိုကောင်းပါသည်။
အခြားနည်းလမ်းများဖြင့် အစိတ်အပိုင်းများ၏ မြင်နိုင်မှုကို ခြေရာခံခြင်း၊
ဥပမာအားဖြင့်၊ class တစ်ခုကို အသုံးပြု၍
ပိုမိုကောင်းမွန်သော စွမ်းဆောင်ရည်ကို ပေးစွမ်းနိုင်သည်။
ဝါကျဖွဲ့ပုံ
ဤနည်းအတိုင်း မြင်နေရသော အစိတ်အပိုင်းများကို ကျွန်ုပ်တို့ ရွေးချယ်သည်။
$(':visible');
ဥပမာ
ခလုတ်ကို နှိပ်လိုက်သည်နှင့် မြင်မရသော စတုရန်းကလေးများကို ပြသပါစို့။ "မြင်နေရသော" စတုရန်းများကို နှိပ်လိုက်သောအခါ ၎င်းတို့၏ နောက်ခံအရောင်သည် အဝါရောင်သို့ ပြောင်းသွားမည်။
<button id="show">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
div {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}
$('div:visible').click(function() {
$(this).css('background', 'yellow');
});
$('#show').click(function() {
$('div:hidden').show('slow');
});
