1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 7 <script> 8 $(function(){ 9 // 通過text()和html獲得內容 10 $("#btn1").click(function(){ 11 alert('Text:' + $('#text').text()); 12 }); 13 $('#btn2').click(function(){ 14 alert('HTML:' + $('#text').html()); 15 }); 16 // 通過val()獲得值 17 $('#btn3').click(function(){ 18 alert('值為：'+$('#txt1').val()); 19 }); 20 // 獲取屬性——attr(),prop() 21 $('#btn4').click(function(){ 22 alert('href屬性值：'+$('#a1').attr('href')); 23 // alert('href屬性值：'+$('#a1').prop('href')); 24 }); 25 // 設置內容——html(),text(),val() 26 $('#btn5').click(function(){ 27 $('#txt2').text('hello'); 28 }); 29 $('#btn6').click(function(){ 30 $('#txt2').html('<b>hello</b>'); 31 }); 32 $('#btn7').click(function(){ 33 $('#txt2').val('runoob'); 34 }); 35 // text(),val(),html()回調函數 36 $('#btn8').click(function(){ 37 $('#p3').text(function(i,origText){ 38 return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 39 }); 40 41 }); 42 $('#btn9').click(function(){ 43 $('#p4').html(function(i,origText){ 44 return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 45 }) 46 }); 47 // 修改href 48 $('#b1').click(function(){ 49 // attr()可以同時設置多個屬性 50 // $('#a2').attr("href",'http://www.runoob.com'); 51 // $('#a2').text('菜鳥教程'); 52 // $('#a2').attr({'href':'http://www.runoob.com','text':'菜鳥教程'}); 53 $("#a2").attr({ 54 "href" : "https://www.runoob.com/jquery", 55 "title" : "jQuery 教程" 56 }); 57 // 通過修改title值來修改鏈接名稱 58 title = $('#a2').attr('title'); 59 $('#a2').html(title); 60 }); 61 // attr()的回調函數,回調函數有兩個參數:被選中元素列表當前元素的下標,以及原始值,然后以函數新值返回你需要使用的字符串 62 $('#b2').click(function(){ 63 $('#a2').attr('href',function(i,origValue){ 64 alert(origValue); 65 return "http://www.runoob.com"; 66 }); 67 }); 68 // append(),在被選中的元素結尾插入內容 69 $('#btn10').click(function(){ 70 $('#p5').append('追加文本成功'); 71 $('#p5').css('background-color','yellow'); 72 }); 73 $('#btn11').click(function(){ 74 $('#o1').append('<li>追加列表項</li>'); 75 }); 76 // prepend()-在開頭插入內容 77 $('#btn12').click(function(){ 78 $('#p5').prepend('<b>添加成功</b>'); 79 }); 80 $('#btn13').click(function(){ 81 $('#o1').prepend('<li>在列表開頭添加</li>'); 82 }); 83 // append(),prepend()追加新元素 84 $('#btn14').click(function(){ 85 var txt1 = '<p>第一次創建文本</p>';//使用html標簽創建文本 86 var txt2 =$('<p></p>').text('第二次創建文本');//使用jQuery創建文本 87 var txt3 =document.createElement('p'); 88 txt3.innerHTML='第三次創建文本';//使用DOM對象創建文本 89 90 $('body').append(txt1,txt2,txt3); 91 }); 92 $('#btn15').click(function(){ 93 $('img').before('<b>之前</b>'); 94 $('img').after('<b>之后</b>'); 95 }); 96 // remove()刪除被選元素及其子元素,empty()刪除被選元素的子元素 97 $('#btn16').click(function(){ 98 $('#p7').remove(); 99 $('#d1').empty(); 100 }); 101 // 過濾被刪除的元素 102 $('#btn17').click(function(){ 103 $('p').remove('.aa'); 104 }); 105 106 107 108 }); 109 // function appendText(){ 110 // var txt1 = '<p>aaaa</p>'; 111 // } 112 </script> 113 114 </head> 115 <body> 116 <p id="text">這是段落中的<b>文本</b>文本</p> 117 <button id="btn1">顯示文本</button> 118 <button id="btn2">顯示 HTML</button> 119 <p>名稱：<input type="text" id="txt1" ></p> 120 <button id='btn3'>顯示值</button> 121 <p><a href="http://www.baidu.com" id="a1">百度一下</a></p> 122 <button id="btn4">顯示href屬性的值</button> 123 <p id='p1'>這是一個段落</p> 124 <p id='p2'>這是另一個段落</p> 125 <p>輸入框：<input type="text" id="txt2" value="菜鳥教程"></p> 126 <button id="btn5">設置文本</button> 127 <button id="btn6">設置HTML</button> 128 <button id='btn7'>設置值</button> 129 130 <p id='p3'>這是一個有<b>粗體</b></p> 131 <p id='p4'>這是有另一個<b>粗體</b></p> 132 <button id='btn8'>顯示新/舊文本</button> 133 <button id="btn9">顯示新/舊HTML</button> 134 135 <p><a id='a2' href="http://baidu.com">百度一下</a></p> 136 <button id="b1">修改href的值</button> 137 <p>點擊按鈕后，可以點擊鏈接查看鏈接地址是否變化</p> 138 <button id="b2">回調</button> 139 140 <p id='p5'>append（）——在被選元素的結尾插入內容</p> 141 <p id='p6'>仍然在元素內</p> 142 <ol id='o1'> 143 <li>列表第一項</li> 144 <li>列表第二項</li> 145 <li>列表第三項</li> 146 </ol> 147 <button id='btn10'>在結尾添加文本</button> 148 <button id='btn11'>在結尾添加列表項</button> 149 <button id='btn12'>在開頭添加文本</button> 150 <button id='btn13'>在開頭添加列表項</button> 151 152 <p>通過apprend(),prepend()方法添加若干新元素</p> 153 <button id='btn14'>追加文本</button> 154 <p>after（）和 before()</p> 155 <img src="img/10.jpg" /> 156 <button id='btn15'>插入</button> 157 158 <p id='p7'>remove()刪除元素及其被選元素的子元素 159 <input type="text" /> 160 </p> 161 <div id="d1" style="background-color: red; width: 300px; height: 300px;" > 162 <p>aaaa</p> 163 <p>bbbb</p> 164 </div> 165 <button id='btn16'>刪除</button> 166 <p class="aa">aaaa</p> 167 <p class="aa">dswww</p> 168 <button id="btn17">移除所有 class='aa' 的p 元素</button> 169 170 </body> 171 </html>