常用到的前端語法

記錄一些常用的前端與法

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();
}