1. 程式人生 > >jQuery DOM 操作(基本操作、內部插入、外部插入、包裹操作)

jQuery DOM 操作(基本操作、內部插入、外部插入、包裹操作)

複製程式碼
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
 6     <title>內部插入應用示例</title
> 7 <script language="javascript" type="text/javascript"> 8 $(document).ready(function(){ 9 $("#btn").click(function(){ 10 //方法1 用 eq() 選擇器找到指定節點 11 //$("div:eq(1)").append("<b>jQuery內部插入測試</b>"); 12 //方法2 用函式的引數index索引值找到指定節點
13 $("div").append(function(index, html){ 14 if(index == 1){ 15 return "<b>jQuery內部插入測試</b>" + " " + html; 16 } 17 }); 18 }); 19 }); 20 </script> 21 </head> 22
<body bgcolor="#EEEEEE"> 23 <h1>內部插入應用例項</h1> 24 <div> 25 <button id="btn">測試</button> 26 <div id="div1">1.水果</div> 27 <div id="div2">2.蔬菜</div> 28 <div id="div3">3.肉類</div> 29 </div> 30 </body> 31 </html>
複製程式碼