Class屬性操作、複製操作 (jQuery 17)

※Class屬性操作

官網連結

目前有4個：
.addClass()：增加class
.hasClass()：判斷有沒有class
.removeClass()：移除class
.toggleClass()：增加／移除class

※.addClass()、.removeClass()單個class

<style>
    .xxx{color:red;}
    .ooo{background-color:yellow;}
</style>
    
$(function() {
    $('#b1').click(function(){
        $('span').addClass('xxx');
    });
    
    $('#b2').click(function(){
        $('span').addClass('ooo');
    });
    
    $('#b3').click(function(){
        $('span').removeClass('xxx');
    });
    
    $('#b4').click(function(){
        $('span').removeClass('ooo');
    });
});
----------
<span>span</span>
<button id="b1">addClassXXX</button>
<button id="b2">addClassOOO</button>
<button id="b3">removeXXX</button>
<button id="b4">removeOOO</button>

※.addClass()、.removeClass()多個class

<style>
    .xxx{color:red;}
    .ooo{background-color:yellow;}
</style>
    
$(function() {
    $('#b1').click(function(){
        $('span').addClass('xxx ooo');
    });
    
    $('#b2').click(function(){
        $('span').removeClass('xxx ooo');
    });
});
----------
<span>span</span>
<button id="b1">addClassXXXOOO</button>
<button id="b2">removeXXXOOO</button>

※.addClass()、removeClass()的function用法

<style>
    .xxx0{color:red;}
</style>
    
$(function() {    
    $('#b1').click(function(){
        $('span').addClass(function(i){
            return 'xxx' + i;
        });
    });
    
    $('#b2').click(function(){
        $('span').removeClass(function(i){
            return 'xxx' + i;
        });
    });
});
----------
<span>span</span>
<button id="b1">addClassXXX</button>
<button id="b2">removeXXX</button>

※.hasClass()

$(function() {
    $('#b1').click(function(){
        $('span').addClass('xxx');
    });
    
    $('#b2').click(function(){
        alert($('span').hasClass('xxx'));
    });
});
----------
<span>span</span>
<button id="b1">addClassXXX</button>
<button id="b2">hasClass</button>

※.toggleClass()

<style>
    .xxx{color:red;}
    .ooo0{background-color:yellow;}
</style>
    
$(function() {
    $('#b1').click(function(){
        $('span').toggleClass('xxx');
    });
    
    $('#b2').click(function(){
        $('span').toggleClass(function(i, c){
            alert('class=' + c);
            return 'ooo' + i;
        });
    });
    
    $('#b3').each(function(){
        var i=0;
        $(this).click(function(){
            i++;
            $('span').toggleClass('xxx', i%2==0);
        });
    });
    
    $('#b4').each(function(){
        var i=0;
        $(this).click(function(){
            i++;
            $('span').toggleClass(function(i, c){
                alert('class=' + c);
                return 'ooo' + i;
            }, i%2==0);
        });
    });
});
----------
<span>span</span>
<button id="b1">origin</button>
<button id="b2">origin function</button>
<button id="b3">odd even</button>
<button id="b4">origin function + odd even</button>

※複製操作

官網連結

目前就一個：
.clone()：就是複製，第一個參數表示要不要複製事件(指的是動態給的)，預設是false

$(function(){
    $('p').css('background-color', 'yellow');
    $('span').eq(1).click(function(){
        alert('xxx');
    });
    $('div').clone().insertAfter('div');
});
----------
<div>
    div
    <p>
        p1
        <span onclick="alert('span1')">span1</span>
        <span>span2</span>
    </p>
    <p>
        p2
        <span>span3</span>
        <span>span4</span>
    </p>
</div>

※寫在HTML上的onclick一定會複製，但動態給的xxx預設是false，所以不會複製，改成clone(true)就會複製了

※要注意id的屬性也會複製，但只會抓到第一筆，所以如果有id要removeProp，或改成class或name