新增刪除元素，addClass, removeClass, css
阿新 • • 發佈：2019-01-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function () { $('#but').click(function (event) { //append prepend 內部新增 // $('.container').append('<b>粗體</b>')// 測試文字粗體測試文字 粗體粗體粗體 // $('.container').prepend('<b>粗體</b>')//粗體粗體粗體粗體 測試文字粗體測試文字 // before after 外面新增 // $('img').before('<b>粗體</b>')// // $('img').after('<b>粗體</b>')// // remove() - 刪除被選元素（及其子元素） // $('.container').remove() // empty() - 從被選元素中刪除子元素 // $('.container').empty() // 刪除 class="italic" 的所有 <p> 元素 // $("p").remove(".italic"); // $("p,div").addClass("blue"); // $("p,div").removeClass("blue"); // $("p,div").toggleClass("blue"); // background-color等不用駝峰式寫法 // $("p").css( // { // "background-color":"yellow", // "font-size":"200%" // } // ); }) }); </script> </head> <body> <button id="but"> 按鈕 </button> <div class="container"> <img src="http://img3.redocn.com/tupian/20151016/mengchongxiaotuzi_5102602.jpg" > </div> <p>這是一個段落。</p> <p class="italic"><i>這是另外一個段落。</i></p> <p class="italic"><i>這是另外一個段落。</i></p> <div>div...</div> </body> <style> .container { background-color: gray; width: 200px; height: 140px; display: flex; flex-direction: row; background-color: gray; } .blue { color:blue; } </style> </html>