jQuery - 设置内容和属性 添加元素 

  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>

 

posted on 2018-08-15 11:41  一颗豆豆  阅读(2109)  评论(0)    收藏  举报

导航