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; 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>