forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1053-css-4.html
443 lines (362 loc) · 15.1 KB
/
1053-css-4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? './css/reveal/print/pdf.css' : './css/reveal/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<style type="text/css">
h3 {
font-family: 'Microsoft Yahei';
}
p {
font-size: 30px !important;
letter-spacing: 2px;
line-height: 50px !important;
text-align: left;
}
B {
color: rgb(195, 255, 219);
font-size: 40px !important;
font-weight: 500 !important;
}
a {
color: #fff !important;
}
</style>
</head>
<body>
<img src="./img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
<div class="slides">
<section>
<h2>常见Dom操作有哪些？</h2>
<h3>小课堂</h3>
分享人：万登胜
</section>
<section>
<p style="text-align: center;">DOM常用操作</p>
<p style="text-align: center;">1.查找节点</p>
<p style="text-align: center;">2.添加新节点</p>
<p style="text-align: center;">3.删除节点</p>
<p style="text-align: center;">4.修改节点</p>
<!--<p style="text-align: center;">4.浮动</p>-->
<!--<p style="text-align: center;">5.编码实战</p>-->
<!--<p style="text-align: center;">6.扩展思考</p>-->
<!--<p style="text-align: center;">7.参考文献</p>-->
<!--<p style="text-align: center;">8.更多讨论</p>-->
</section>
<!--1.背景介绍-->
<section>
<section>
<h3>1.查找节点</h3>
</section>
<section>
<p>1、document.getElementById('id属性值');<br>
返回拥有指定id的第一个对象的引用<br>
<br>
<br>
2、document/element.getElementsByClassName('class属性值');
<br>返回拥有指定class的对象集合<br>
<br>
3、document/element.getElementsByTagName('标签名');
<br>
返回拥有指定标签名的对象集合
<br>
<br>4、document.getElementsByName('name属性值');<br>
返回拥有指定名称的对象结合<br>
</p>
<p>
</p>
<p>
</p>
</section>
<section>
<p>
5、document/element.querySelector('CSS选择器');<br>
仅返回第一个匹配的元素<br>
<br>6、document/element.querySelectorAll('CSS选择器');<br>
返回所有匹配的元素<br>
<br>7、document.documentElement<br>
获取页面中的HTML标签<br>
<br>8、document.body<br>
获取页面中的BODY标签
</p>
</section>
</section>
<!--2.知识剖析-->
<section>
<h3>2.添加新节点</h3>
<section>
<p>1、parent.appendChild( element/txt/comment/fragment );<br>
向父节点的最后一个子节点后追加新节点<br>
<br>
2、parent.insertBefore( newChild, existingChild );
<br>向父节点的某个特定子节点之前插入新节点<br>
<br>
3、element.setAttributeNode( attributeName );
<br>
给元素增加属性节点
<br>
<br>4、element.setAttribute( attributeName, attributeValue );<br>
给元素增加指定属性，并设定属性值<br>
</p>
<p>
</p>
<p>
</p>
</section>
</section>
<!--2.1 JS有哪些数据类型？-->
<section>
<section><B>3.删除节点</B></section>
<section>
<p>1、parentNode.removeChild( existingChild );<br>
删除已有的子节点，返回值为删除节点<br>
<br>
2、element.removeAttribute('属性名');
<br>删除具有指定属性名称的属性，无返回值<br>
<br>
3、element.removeAttributeNode( attrNode );
<br>
删除指定属性，返回值为删除的属性
<br>
</p>
<p>
</p>
</section>
<section>
<div style="text-indent:2em">
<p style="text-align: left">
</p>
<p style="text-align: left">
<p style="text-align: left">
</p>
<p>
</p>
</div>
</section>
<section>
<div style="text-indent:2em">
<p style="text-align: left">
<p style="text-align: left">
</p>
<!--<pre>-->
<!--<code>-->
<!--</code>-->
<!--</pre>-->
</div>
</section>
<section><B></B></section>
<section>
<div style="text-indent:2em">
</div>
</section>
<section>
<!--<p style="text-align: center;">用户信息</p>-->
<!--<p>scope: scope.userInfo <br/> 对应接口 wx.getUserInfo</p>-->
</section>
<section>
<!--<p style="text-align: center;">地理位置</p>-->
<!--<p>scope:scope.userLocation <br/> 对应接口wx.getLocation, wx.chooseLocation </p>-->
</section>
<section>
<!--<p>通讯地址</p>-->
<!--<p>scope: scope.address <br/> 对应接口wx.chooseAddress</p>-->
</section>
<section>
<!--<p>发票抬头</p>-->
<!--<p>scope:scope.invoiceTitle <br/> 对应接口wx.chooseInvoiceTitle</p>-->
</section>
<section>
<!--<p>微信运动步数</p>-->
<!--<p>scope:scope.werun <br/> 对应接口wx.getWeRunData</p>-->
</section>
<section>
<!--<p>录音功能</p>-->
<!--<p>scope:scope.record<br/> 对应接口 wx.startRecord</p>-->
<!--<p>保存到相册</p>-->
<!--<p>scope.writePhotosAlbum<br>wx.saveImageToPhotosAlbum, wx.saveVideoToPhotosAlbum</p>-->
<!--<p> 摄像头</p>-->
<!--<p>scope.camera</p>-->
</section>
</section>
<!--3.常见问题-->
<section>
<h3>4.修改节点</h3>
<p>1、parentNode.replaceChild( newChild, existingChild );<br>
用新节点替换父节点中已有的子节点<br>
<br>
2、element.setAttributeNode( attributeName );
<br>若原元素已有该节点，此操作能达到修改该属性值的目的<br>
<br>
3、element.setAttribute( attributeName, attributeValue );
<br>
若原元素已有该节点，此操作能达到修改该属性值的目的
<br>
</p>
<p>
</p>
<!--<pre>-->
<!--<code>-->
<!--position: absolute;-->
<!--left: 50%;-->
<!--top: 50%;-->
<!--width:200px;-->
<!--height:100px;-->
<!--margin-left:-100px;-->
<!--margin-top:-50px;-->
<!--</code>-->
<!--</pre>-->
<section>
<p>
</p>
</section>
</section>
<!--<section>-->
<!--<B>不固定高宽div垂直居中的方法</B>-->
<!--<p>-->
<!--不固定高宽div垂直居中的方法-->
<!--方法一：-->
<!--用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。-->
<!--代码如下-->
<!--</p>-->
<!--<pre>-->
<!--</pre>-->
<!--</section>-->
<!--4.解决方案-->
<!--<section>-->
<!--<p>-->
<!--<pre>-->
<!--<code>-->
<!--/* This parent can be any width and height */-->
<!--.block {-->
<!--text-align: center;-->
<!--}-->
<!--/* The ghost, nudged to maintain perfect centering */-->
<!--.block:before {-->
<!--content: '';-->
<!--display: inline-block;-->
<!--height: 100%;-->
<!--vertical-align: middle;-->
<!--margin-right: -0.25em; /* Adjusts for spacing */-->
<!--}-->
<!--/* The element to be centered, can-->
<!--also be of any width and height */-->
<!--.centered {-->
<!--display: inline-block;-->
<!--vertical-align: middle;-->
<!--width: 50%;-->
<!--}-->
<!--</code>-->
<!--</pre>-->
<!--</p>-->
<!--</section>-->
<section>
<!--<p>方法三，终极解决方法：<br>-->
<!--以上2中方法可能都有其局限性，我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法！但是方法是css3的写法，想兼容IE8的童鞋们，建议用上面的方法！-->
<!--方法和我们固定高宽的差不多，但是不用margin我们用的是 translate()-->
<!--demo如下：</p>-->
</section>
<!--<section>-->
<!--<pre>-->
<!--<code>-->
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">-->
<!--<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">-->
<!--<head>-->
<!--<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">-->
<!--<title>haorooms不固定高度div写法</title>-->
<!--<style>-->
<!--.center {-->
<!--position: fixed;-->
<!--top: 50%;-->
<!--left: 50%;-->
<!--background-color: #000;-->
<!--width:50%;-->
<!--height: 50%;-->
<!-- -webkit-transform: translateX(-50%) translateY(-50%);-->
<!--}-->
<!--</style>-->
<!--</head>-->
<!--<body>-->
<!--<div> "center"></div>-->
<!--</body>-->
<!--</html>-->
<!--</code>-->
<!--</pre>-->
<!--</section>-->
<!--6.拓展思考-->
<!--<section>-->
<!--<h3>6.拓展思考</h3>-->
<!--</section>-->
<!--<section>-->
<!--<p>可以在什么地方安置获取授权的按钮？</p>-->
<!--<p>比如在直播小程序中，可以设置当用户发表评论时，获取用户的头像信息和名称，然后调用发表。</p>-->
<!--</section>-->
<!--<section>-->
<!--<h3>7.参考文献</h3>-->
<!--<p>微信公共平台——授权：https://developers.weixin.qq.com/miniprogram/dev/api/authorize-index.html</p>-->
<!--<P>用户拒绝授权CSDN：https://blog.csdn.net/qq_28189091/article/details/75417073</P>-->
<!--</section>-->
<section>
<h3>4.更多讨论</h3>
</section>
<section>
<p style="text-align: center">感谢大家观看
<p style="text-align: center">
<small>BY : 万登胜</small>
</section>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
</div>
</div>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{src: './plugin/markdown/marked.js'},
{src: './plugin/markdown/markdown.js'},
{src: './plugin/notes/notes.js', async: true},
{src: './plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
</script>
</body>
</html>