基礎及常用的jQuery語法，極容易上手的事件綁定。

jQuery css設定

設定Selector id 的css

//隱藏物件
$("#id").css('display','none'); 

jQuery class設定

設定Selector id 的class

//隱藏 顯示物件
$("#id").addClass('hidden');
$("#id").removeClass('hidden');

jQuery input

1.取得input內容

var getVal=$('input[name="firstname"]').val();

2.設置input內容

$('input[name="firstname"]').val('something');

jQuery Radio

Radio

<div class="radio">
<input id="option_1" value="1" type="radio" name="option">選項一<br />
<input id="option_2" value="2" type="radio" name="option">選項二<br />
<input id="option_3" value="3" type="radio" name="option">選項三<br />
<input id="option_4" value="4" type="radio" name="option">選項四
div>

選項一
選項二
選項三
選項四

radio取值

var d =$('input:radio[name=option]:checked').val();

radio設值

$("#option_1").prop("checked", true);

Radio事件

radio改變事件

$('input[type=radio][name=option]').change(function() {
        if (this.value == '1') {
          dosomthing(1);
        }
        else if (this.value == '2') {
            dosomthing(2);
        }
        else if (this.value == '3') {
             dosomthing(3);
        }
        else if (this.value == '4') {
             dosomthing(4);
        }
    });

快速設置UX元件

input輸入

input class加入checkInteger或是checkDecimal，來限制input僅能輸入整數數字或是浮點數字。

//CheckInteger
$(".checkInteger").bind("keyup change",function () {
	$(this).val($(this).val().replace(/\D/g,''));
});

//CheckDecimal
$(".checkDecimal").bind("keyup change",function () {
	$(this).val($(this).val().replace(/[^0-9.]/g,''));
});

DEMO

<div class="input-group">
      <input id="inp1" type="text" class="form-control checkInteger" >
div>