<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; } ul h1 { font-size: 1.5rem; display: inline-block; margin: 0; } </style> </head>
<body> <h1>jQuery控制物件：(1)內容(2)樣式(3)動畫行為</h1> <button>1. 以 text 方法取得 list-1 原有內容,再寫入新的內容"TSuiling"</button> <button>2. 以 html 方法取得 list-2 原有內容,再寫入新的內容"TSuiling"</button> <button>3. 重複新增 list-2 的內容</button><br> <button>4. 項目清單中隔列換色</button> <button>5. 清單第五列增加類別名稱sp,改變第五列的樣式</button> <button>6. 清單第五列移除類別名稱sp</button><br> <button>7. 滑鼠點選"隱藏"或"顯示"第二列(練習三個基本動畫效果)</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> </ul> </body>
※ 撰寫 jQuery 前得先載入 jQuery 函式庫主程式
<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('<h1>TSuiling111</h1>'); }); //第二個按鈕 $('button:eq(1)').click(function(){ //設定result變數記錄第2列含HTML的內容 var result = $('li:eq(1)').html(); alert(result); //以能呈現HTML格式的內容改變第2列的內容 $('li:eq(1)').html('<h1>TSuiling<img src="images/libg.png"></h1>'); }); //第三個按鈕 $('button:eq(2)').click(function(){ var result = $('li:eq(1)').html(); $('li:eq(1)').append(result); //在第2列內新增result得到的結果 }); </script>
<script> //jQuery 物件【樣式】的控制 ============================================= //第四個按鈕 $('button:eq(3)').click(function(){ //設定 li 奇數列的背景色與文字顏色(CSS語法結構一) $('li:odd').css('background-color','#a1d7ff') .css('color','#170e7b'); //設定 li 偶數列的背景色與文字顏色(CSS語法結構二) $('li:even').css({'background-color':'#170e7b','color':'#a1d7ff'}); }); //第五個按鈕 $('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>
<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()的切換 }); </script>