(網頁學習) 利用jquery取值

因為常常會用到取值
所以把常見的都記錄在此
參考別人的文章

在此紀錄
(下列針對DOM的元素)
<p id="text">123</p>

.text() 設定內容   
$("#text").text("需要修改的內容");

.html() 設定內容和html的標記

$("#text").html("<b>123</b>") ;

能夠更改html的標籤屬性，其實就是直接取代整個html





(下列是針對input使用)
<input type="text" name="text1" value="text" test="測試用" /> 

取值
$('input[name="text1"]').val();
取自訂屬性
$('input[name="text1"]').attr("test");
設定值
$('input[name="text1"]').val("text123");
設定自訂屬性
$('input[name="text1"]').attr("test","測試用123");

Checkbox

Html定義
<label>
<input type="checkbox" name="check1" value="a" test="b" />Check
</label>

取值
$('input[name="check1"]').val()
取自訂屬性 (class 的類別)
$('input[name="check1"]').attr("test")
取得是否被勾選 (新版用prop取代attr 部分checkbox功能)
(補充如下:
將 checkbox 勾選時，若使用的是下列的語法
$('checkbox').attr('checked', true);
如果一開始沒有在 checkbox 裡定義 checked 的值，則會沒有反應
請改用 prop ，這樣讓屬性不存在的時候，就會先建立該屬性，再給定屬性值，如
$('checkbox').prop('checked', true);

}

$('input[name="check1"]').prop("checked");
設定值
$('input[name="check1"]').val("text123");
設定自訂屬性
$('input[name="check1"]').attr("test","測試用123");
設定勾選
$('input[name="check1"]').prop("checked",true);

RadioButton

Html定義
<label><input type="radio" name="radio1" value="0" text="test1" checked />測試</label>
<label><input type="radio" name="radio1" value="1" text="test2" />實作</label>

取得現在選取的值
$('input[name="radio1"]:checked').val()
取現在選取的自訂屬性
$('input[name="radio1"]:checked').attr("text")
設定測試為勾選狀態
$('input[name="radio1"][value="0"]').prop("checked",true);
取得此欄位是否為勾選狀態
$('input[name="radio1"][value="0"]').is(':checked')

Dropdownlist

Html定義
<select name="select1">
    <option value="val1" Text="text1" test="test1" >1</option>
    <option value="val2" Text="text2" test="test2" SELECTED>2</option>

</select>

取得現在選取的值
$('select[name="select1"]').val()
取得現在選取的自訂屬性 (兩種都可以)
$('option:selected', 'select[name="select1"]').attr('test');
$( 'select[name="select1"] :selected').attr('test');
設定現在選取的值 (兩種效果一樣)
$('select[name="select1"]').val("val1");
$('select[name="select1"]').val("1");
取得此選項是否為勾選狀態
$('select[name="select1"] option[value="val2"]').is(':selected');
取所有option 看是否為勾選
$('select[name="select1"] option').each(function(){
    alert($(this).is(':selected'));

});