記錄一些常用的前端與法
jQuery:
Register event
$(document).ready(function () {
$('#select').change(function () { chageSelect(this.id); });
$('input[type=radio][name="radio.button.name"]').change(function () { changePayTo(); });
$('#pt_bill').click(function () { $("#PaymentType").val('Bill'); });
$('#bill_next').click(function () { $('#inputForm').submit(); });
$('#card-num-check').on('click', function (e) {
// todo
});
})
If radio button is checked
if($('#radio_button').is(':checked')) {
alert("it's checked");
}
If has class
if($('#id').hasClass('class-name')) {
alert("has class");
}
trigger click event
// 執行此行會對此item觸發click事件
$('#id').trigger("click");
trigger select change with value
$('#id').val(value).change();
change select by index reference
<select id="selector">
<option>No 1</option>
<option>No 2</option>
</select>
<select id="selected">
<option>ONE</option>
<option>TWO</option>
</select>
// the second select follows the first one by index
$('#selector').change(function() {
var idx = this.selectedIndex;
$("select#selected").prop('selectedIndex', idx);
});
Check if input is empty or not
var input = $('#inputId');
if (!input.val()) {
}
Get items by containing id
// get items which id is end as "_errmsg"
$('[id$=_errmsg]').text('');
$('[id$=_errmsg]').hide();
針對動態產生的元件在$(document).ready()中無法listen時 使用此方法
// the second parameter is added dynamically element
$('#trigger').on('click', 'dynamic', function() {
//do something
});
is visible (顯示/隱藏 切換)
if ($('#id').is(":visible")) {
$('#id').hide();
} else {
$('#id').show();
}