jQuery 物件的基本控制

HTML & CSS 部份 【結果展示參考】

<body>
    <h1>jQuery控制物件：(1)內容(2)樣式(3)動畫行為</h1>

    <button>1. 以 text 方法取得 list-1 原有內容,再寫入新的內容"巨匠電腦"</button>
    <button>2. 以 html 方法取得 list-2 原有內容,再寫入新的內容"巨匠電腦"</button>
    <button>3. 重複新增 list-2 的內容</button><br>
    <button>4. 項目清單中隔列換色</button>
    <button>5. 清單第五列增加類別名稱sp,改變第五列的樣式</button>
    <button>6. 清單第五列移除類別名稱sp</button><br>
    <button>7. 滑鼠點選"隱藏"或"顯示"第二列(練習三個基本動畫效果)</button>
    <button>8. 滑鼠滑入滑出"隱藏"或"顯示"第二列(練習三個基本動畫效果)</button>
    <hr>

    <ul>
        <li><strong><em>清單項目111</em></strong></li>
        <li><strong><em>清單項目222</em></strong></li>
        <li>清單項目333</li>
        <li>清單項目444</li>
        <li>清單項目555</li>
        <li>清單項目666</li>
        <li>清單項目777</li>
        <li>清單項目888</li>
    </ul>
</body>

<style>
    button {margin:5px; padding:5px; font-size:16px; }
    li { font-size:18px; padding:5px; }
    .sp { background-color:#FFF06D; color:#B76C00; 
          font-size:36px; font-style:italic; font-weight:bold; }
</style>

JavaScript & jQuery 部份---PART1：內容的控制 

<script src="js/jquery-xxxx.min.js" > </script>

<script>

//jQuery 物件【內容】的控制 =============================================
//第一個按鈕
$('button:eq(0)').click(function(){    //當索引編號為0的第1個按鈕被按一下時
    var result = $('li:eq(0)').text(); //設定result變數記錄第1列的純文字內容
    alert(result);                     //顯示result變數的內容
    //改變第1列的內容為text()內指定的
    $('li:eq(0)').text('<h2>巨匠111</h2>');
});
    
//第二個按鈕
$('button:eq(1)').click(function(){
    //設定result變數記錄第2列含HTML的內容
    var result = $('li:eq(1)').html();
    alert(result);
    //以能呈現HTML格式的內容改變第2列的內容
    $('li:eq(1)').html('<h2>巨匠<img src="images/libg.png"></h2>');
});
    
//第三個按鈕
$('button:eq(2)').click(function(){
    var result = $('li:eq(1)').html();
    $('li:eq(1)').append(result);      //在第2列內新增result得到的結果
});

</script>

JavaScript & jQuery 部份---PART2：樣式的控制 

<script>

//jQuery 物件【樣式】的控制 ==============================================
//第四個按鈕
$('button:eq(3)').click(function(){
    //設定<li>奇數列的背景色與文字顏色(CSS語法結構一)
    $('li:odd').css('background-color','#76baeb')
               .css('color','#9f1bb7');
    
    //設定<li>偶數列的背景色與文字顏色(CSS語法結構二)
    $('li:even').css({'background-color':'#9cedc1','color':'#ff0000'});
});

//第五個按鈕
$('button:eq(4)').click(function(){
    $('li:eq(4)').addClass('sp');        //設定第5列增加class類別名稱
});

//第六個按鈕
$('button:eq(5)').click(function(){
    $('li:eq(4)').removeClass('sp');     //設定第5列移除class類別名稱
});

</script>

JavaScript & jQuery 部份---PART3：動畫的控制 

<script>

//jQuery 物件【基本動畫】的控制 ============================================
//第七個按鈕
    $('button:eq(6)').click(function(){
        //$('li:eq(1)').toggle(1000);       //show()與hide()的切換
        //$('li:eq(1)').fadeToggle(1000);   //faseIn()與fadeOut()的切換
        $('li:eq(1)').slideToggle(1000);    //slideDown()與slideUp()的切換
    });
    
//第八個按鈕
    $('button:eq(7)').hover(function(){
        //$('li:eq(1)').toggle(1000);       //show()與hide()的切換
        //$('li:eq(1)').fadeToggle(1000);   //faseIn()與fadeOut()的切換
        $('li:eq(1)').slideToggle(1000);    //slideDown()與slideUp()的切換
    });

</script>