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>