一般屬性操作 (jQuery 16)

官網連結

目前有5個：
.attr()：塞屬性
.prop()：塞屬性
.removeAttr()：移除attr，官網說 IE 6~8 移除oncick會有問題，要用removeProp
.removeProp()：移除prop設定的屬性，且不能移除內鍵的屬性
.val()：塞value、取value

1.6版後，attr和prop對特定的方法，回傳的不一樣，prop回傳的大部分都是布林值；attr回傳的是屬性

※.attr()、.prop()基本用法

$(function() {
    $('input').prop('readonly', 'readonly');
    var $prop = $('input').prop('readonly');
    alert('prop=' + $prop); // true
       
    $('input').attr('readonly', 'readonly');
    var $attr = $('input').attr('readonly');
    alert('attr=' + $attr); //readonly
    
    // $('input').attr('value', 'xxx').attr('disabled', 'disabled');
    // $('input').attr({value:'xxx', disabled:'disabled'});
----------
<input />

※使用兩個參數是設定，attr和prop在設定時都一樣

※使用一個參數是取值，這時attr和prop回傳結果不同，prop回傳的是boolean值

※.attr()、.prop()的function用法

$(function() {
    $('p').attr('id', function(i, j) {
        alert(j);
        return "xxx" + i;
    }).each(function () {
        $('span', this).text($(this).attr('id'));
    });
});
----------
<p>p1 <span></span></p>
<p>p2 <span></span></p>
<p>p3 <span></span></p>

※j取到的是id值，看第一個參數是什麼決定的

※.attr()、.prop()差異一

$(function() {
    $('#b1').click(function() {
        $('#ooo').attr('readonly', true);
        alert($('#ooo').attr('readonly'));
    });
    
    $('#b2').click(function() {
        $('#ooo').prop('readonly', true);
        alert($('#ooo').prop('readonly'));
    });
    
    $('#b3').click(function() {
        var $checkbox = $('input[name="xxx"]').eq(0);
        alert($checkbox.attr('checked'));
        alert($checkbox.prop('checked'));
    });
});
----------
<input id="ooo" />
<button id="b1">B1</button>
<button id="b2">B2</button>
<br />
<input type="checkbox" name="xxx" id="c1" checked="checked"/>
<label for="c1">a</label>
<input type="checkbox" name="xxx" id="c2" />
<label for="c2">b</label>
<input type="checkbox" name="xxx" id="c3" />
<label for="c3">c</label>
<button id="b3">B3</button>

※B1回傳的是「readonly」，是屬性名稱；B2回傳的是true，是布林值

※B3用attr回傳的是「checked」，用prop回傳的是true

※.attr()、.prop()差異二

$(function() {
    $('select').prop('selectedIndex', 1);
    alert($('select').prop('selectedIndex'));
    
    $('input[type="checkbox"]').prop('defaultChecked', true);
    alert($('input[type="checkbox"]').prop('defaultChecked'));
});
----------
<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>E</option>
</select>
    
<input type="checkbox" name="xxx" />
<input type="checkbox" name="xxx" />
<input type="checkbox" name="xxx" />

※用attr和prop回傳的都是1和true，但是用prop真的有選到B，checkbox也都有勾；而attr就是個初始值而已

※官方還有說 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, or defaultSelected 都要用prop，我這裡示範兩個而已

※總之使用prop有以下兩個的，就用prop比較好
1.屬性值是true／false
2.只增加屬性名稱，而不增加屬性值就可以的


個人經驗：
「$('xxx').attr('disabled', true);」有些瀏覽器不行，
但用「$('xxx').attr('disabled', 'disabled');」就可以；readonly也是一樣

※.removeAttr()、.removeProp()

$(function() {
    $('input').removeAttr('readonly');
    // $('input').removeProp('readonly');
});
----------
<input readonly="readonly"/>

※使用removeProp無效

※remove範例二

$(function() {
    $('input').prop('readonly', 'readonly');
    $('input').removeAttr('readonly');
    // $('input').removeProp('readonly');
});
----------
<input />

※這次用jQuery的prop塞屬性，removeAttr是有用的，但removeProp還是無效

※官網有說不要用prop移除內鍵的屬性，所以無效是很正常的

※remove範例三

$(function() {
    $('span').prop('xxx', 'x');
    alert($('span').prop('xxx'));
    $('span').removeProp('xxx');
    alert($('span').prop('xxx'));
});
----------
<span>span</span>

※此時xxx不是內鍵的屬性，所以運作正常，全部改成attr也是ok的，但如果是將removeProp改成removeAttr是不行的

※兩個最好不要混用，因為很少人會去記哪些可以混用；都不混用一定可以就對了

※.val()基本用法

$(function() {
    $('input').val('xxx');
    alert($('input').val());
    $('input').val('');
    alert($('input').val());
});
----------
<input />

※取的是value，不是text

※.val()的function用法

$(function() {
    $('input').change(function() {
        $(this).val(function(i, v) {
            return v.toUpperCase() + ' success!';
        });
    });
});
----------
<input />

※i是index；v就是打字的內容了