-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
446 lines (318 loc) · 17.5 KB
/
index.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
444
445
446
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>KXLF | 快乐是心灵无言的歌唱</title>
<meta name="renderer" content="webkit">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="上课的路上&nbsp;&nbsp;撑一把伞<br />踏着被雨水淋湿的黄叶<br />感受着入冬的雨雪">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="KXLF | 快乐是心灵无言的歌唱">
<meta name="twitter:description" content="上课的路上&nbsp;&nbsp;撑一把伞<br />踏着被雨水淋湿的黄叶<br />感受着入冬的雨雪"">
<meta property="og:type" content="article">
<meta property="og:title" content="KXLF | 快乐是心灵无言的歌唱">
<meta property="og:description" content="上课的路上&nbsp;&nbsp;撑一把伞<br />踏着被雨水淋湿的黄叶<br />感受着入冬的雨雪"">
<meta name="author" content="KXLF">
<link rel="stylesheet" type="text/css" href="/css/vno.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/tomorrow.css">
<!-- <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet"> -->
<link rel="icon" type="image/png" href="//favicon.ico" />
<link href="//favicon.ico" rel="shortcut icon" type="image/png">
<link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon">
<meta name="generator" content="hexo" />
<link rel="canonical" href="http://kxlf.co" />
</head>
<body class="home-template no-js">
<span class="mobile btn-mobile-menu">
<i class="fa fa-list btn-mobile-menu__icon"></i>
<i class="fa fa-angle-up btn-mobile-close__icon hidden"></i>
</span>
<header class="panel-cover panel-cover--collapsed" style="background-image: url(http://7xi48c.com1.z0.glb.clouddn.com/background-cover_s.jpg)">
<div class="panel-main">
<div class="panel-main__inner panel-inverted">
<div class="panel-main__content">
<a href="/" title="前往 KXLF 的主页"><img src="/images/logo2.jpg" width="80" alt="KXLF logo" class="panel-cover__logo logo" /></a>
<h1 class="panel-cover__title panel-title"><a href="/" title="link to homepage for KXLF">KXLF</a></h1>
<span class="panel-cover__subtitle panel-subtitle">快乐是心灵无言的歌唱</span>
<hr class="panel-cover__divider" />
<p class="panel-cover__description">上课的路上 撑一把伞<br />踏着被雨水淋湿的黄叶<br />感受着入冬的雨雪</p>
<hr class="panel-cover__divider panel-cover__divider--secondary" />
<div class="navigation-wrapper">
<div>
<nav class="cover-navigation cover-navigation--primary">
<ul class="navigation">
<li class="navigation__item"><a href="/#blog" title="访问博客" class="blog-button">博客</a></li>
</ul>
</nav>
</div>
<div>
<nav class="cover-navigation navigation--social">
<ul class="navigation">
<!-- Weibo-->
<li class="navigation__item">
<a href="http://weibo.com/kxlf/" title="我的微博" target="_blank">
<i class='social fa fa-weibo'></i>
<span class="label">Weibo</span>
</a>
</li>
<!-- Github -->
<li class="navigation__item">
<a href="https://github.com/kxlf/" title="查看我的GitHub主页" target="_blank">
<i class='social fa fa-github'></i>
<span class="label">Github</span>
</a>
</li>
<!-- Google Plus -->
<!-- Twitter -->
<li class="navigation__item">
<a href="https://twitter.com/KXLF1220" title="上Twitter找我" target="_blank">
<i class='social fa fa-twitter'></i>
<span class="label">Twitter</span>
</a>
</li>
<li class="navigation__item">
<a href="mailto:[email protected]" title="邮件联系我" target="_blank">
<i class='social fa fa-envelope'></i>
<span class="label">Email</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="panel-cover--overlay cover-blue"></div>
</div>
</header>
<div class="content-wrapper">
<div class="content-wrapper__inner">
<div class="main-post-list">
<ol class="post-list">
<li>
<h2 class="post-list__post-title post-title"><a href="/2015/03/25/相对论/" title="link to post.title">推荐一个公开课《爱因斯坦与物理学的革命》</a></h2>
<p class="excerpt">
本课程由北京师范大学赵峥教授用通俗的语言定性介绍爱因斯坦的狭义与广义相对论，以及建立在此基础上的黑洞理论和现代宇宙学。有没有黑洞，它有什么特点；什么是弯曲的时空。膨胀的宇宙；可不可能有时空隧道和时间机器。介绍爱因斯坦和霍金的创新经历，他们对科学的贡献。
讲得很有意思，课程列表点这里。
…
</p>
<div class="post-list__meta"><time datetime="2015-03-25T13:10:57.000Z" class="post-list__meta--date date">2015-03-25</time> • <span class="post-list__meta--tags tags">于
<a class="tag-link" href="/tags/video/">video</a>
</span><a class="btn-border-small" href="/2015/03/25/相对论/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2015/03/24/jQuery管理包装集/" title="link to post.title">jQuery管理包装集</a></h2>
<p class="excerpt">
确定包装集的大小
使用length属性
使用size()方法
从包装集中获取元素
使用索引，例如$(‘img’)[0]
使用get()方法，例如$(‘img’).get(0)
get()方法接受负值的下标作为参数，get(-1)返回包装集中的最后一个元素
get()方法不指定参数，则返回元素数组，但更推荐使用toArray()方法
使用索引、get()、toArray()方法都是返回DOM元素，如果想返回包含一个元素的包装集，可以使用下面的方法：
eq(index)
first()
las
…
</p>
<div class="post-list__meta"><time datetime="2015-03-24T13:27:59.000Z" class="post-list__meta--date date">2015-03-24</time> • <span class="post-list__meta--tags tags">于
<a class="tag-link" href="/tags/jQuery/">jQuery</a>
</span><a class="btn-border-small" href="/2015/03/24/jQuery管理包装集/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2015/03/24/辩护人/" title="link to post.title">视频嵌入测试，加影片推荐《辩护人》</a></h2>
<p class="excerpt">
岩石再坚硬也是死的，鸡蛋再脆弱也是有生命的。石头最终会化为沙土，而鸡蛋孕育的生命总有一天会飞越石头。
豆瓣电影的介绍，点这里
…
</p>
<div class="post-list__meta"><time datetime="2015-03-24T05:21:57.000Z" class="post-list__meta--date date">2015-03-24</time> • <span class="post-list__meta--tags tags">于
<a class="tag-link" href="/tags/test-video/">test video</a>
</span><a class="btn-border-small" href="/2015/03/24/辩护人/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2015/03/23/向日葵的约定/" title="link to post.title">向日葵的约定</a></h2>
<p class="excerpt">
どうして君が泣くの まだ僕も泣いていないのに为何你要落泪 明明我都还没有哭泣
自分より 悲しむから つらいのがどっちか わからなくなるよ这样我会比自己还难过 分不清 到底哪边更难受
ガラクタだったはずの今日が ふたりなら 宝物になる原本一文不值的日子 只因二个人 成了至宝
そばにいたいよ 君のために出来ることが 僕にあるかな只想留在你的身边 为了你 我能做些什么呢
いつも君に ずっと君に 笑っていてほしくて无论何时 我都希望你能 一直笑颜常在
ひまわりのような まっすぐなその優しさを 温もりを
…
</p>
<div class="post-list__meta"><time datetime="2015-03-23T12:08:48.000Z" class="post-list__meta--date date">2015-03-23</time> • <span class="post-list__meta--tags tags">于
<a class="tag-link" href="/tags/music/">music</a>
</span><a class="btn-border-small" href="/2015/03/23/向日葵的约定/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2015/03/23/jQuery选择器/" title="link to post.title">jQuery选择器</a></h2>
<p class="excerpt">
$()函数最常用的功能
使用选择器选择DOM元素
创建新的DOM元素
控制上下文
$()函数第一个参数是选择器，第二个参数是上下文。
默认把DOM树的所有元素作为该选择器的上下文。
上下文参数可以是DOM元素的引用，也可以是包含jQuery选择器的字符串，也可以是DOM元素包装集。
调用某个$()函数的结果传递给另一个$()，即：$($(&quot;.hide&quot;)).hide();
将选择器的应用范围限制在DOM树指定部分：$(selector,&#39;div#sampleDO
…
</p>
<div class="post-list__meta"><time datetime="2015-03-23T10:02:06.000Z" class="post-list__meta--date date">2015-03-23</time> • <span class="post-list__meta--tags tags">于
<a class="tag-link" href="/tags/jQuery/">jQuery</a>
</span><a class="btn-border-small" href="/2015/03/23/jQuery选择器/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2015/03/23/BFC与haslayout的特性和触发方法/" title="link to post.title">BFC与haslayout的特性和触发方法</a></h2>
<p class="excerpt">
1.BFC特性
不与浮动元素重叠
清除内部浮动
解决垂直margin问题
2.BFC触发
float：不为none
overflow：auto | scroll | hidden
display：table-cell | table-caption | inline-block
position：relative | static
*zoom：1（IE6 | IE7）
3.haslayout特性
不与浮动元素重叠
清楚内部浮动
解决垂直margin问题
只有haslayout元素支持滤镜
块
…
</p>
<div class="post-list__meta"><time datetime="2015-03-23T09:03:04.000Z" class="post-list__meta--date date">2015-03-23</time> • <span class="post-list__meta--tags tags">于
<a class="tag-link" href="/tags/CSS/">CSS</a>
</span><a class="btn-border-small" href="/2015/03/23/BFC与haslayout的特性和触发方法/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2015/03/23/jQuery基础/" title="link to post.title">jQuery基础</a></h2>
<p class="excerpt">
核心是从HTML页面上获取元素，并对他们进行操作。
首要目标是确保在所有主要浏览器下都能流畅的运行代码。
支持插件的机制，而且不难编写。
$()是jQuery()函数的别名。
jQuery包装器（wrapper）
$()函数返回的特殊JavaScript对象，它包含与选择器相匹配的DOM元素数组.
这些元素按照在文档中的顺序排列。这个对象拥有大量预定义方法，用于操作这些元素集合。
简单来说，就是包装收集到元素，并添加了扩展功能。
jQuery作用链
包装器方法执行完毕后，会返回相同的一组元素
…
</p>
<div class="post-list__meta"><time datetime="2015-03-23T06:43:43.000Z" class="post-list__meta--date date">2015-03-23</time> • <span class="post-list__meta--tags tags">于
<a class="tag-link" href="/tags/jQuery/">jQuery</a>
</span><a class="btn-border-small" href="/2015/03/23/jQuery基础/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2015/03/22/jQuery事件模型/" title="link to post.title">jQuery事件模型</a></h2>
<p class="excerpt">
创建监听器
示例$(&#39;img&#39;).bind(&#39;click&#39;, function(event){ alert(&#39;Hi there! ;&#39;); });
语法：
bind( eventType, data, hanlder )
参数eventType
标准事件名称，例如click、mouseover、keydown等。
可以使用空格分隔的列表指定多个事件类型。
可以在事件名称后添加圆点字符后缀来添加命名空间。
参数data
调用者提供的数据，给处
…
</p>
<div class="post-list__meta"><time datetime="2015-03-22T12:44:39.000Z" class="post-list__meta--date date">2015-03-22</time> • <span class="post-list__meta--tags tags">于
<a class="tag-link" href="/tags/jQuery/">jQuery</a>
</span><a class="btn-border-small" href="/2015/03/22/jQuery事件模型/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2015/03/22/DOM第2级事件模型/" title="link to post.title">DOM第2级事件模型</a></h2>
<p class="excerpt">
创建监听器
调用元素上的addEventListener()方法。
语法：addEventListener(eventType, listener, userCapture);
参数eventType：要监听的事件类型。
与DOM第0级事件模型中不带on前缀的事件名称相同，例如click、mouseover、keydown等。
参数listener：函数引用或内联函数，Event实例是传入这个函数的第一个参数。
在一个元素上创建的多个处理器，可能会以随机顺序触发，标准并不保证事件的执行顺
…
</p>
<div class="post-list__meta"><time datetime="2015-03-22T12:13:46.000Z" class="post-list__meta--date date">2015-03-22</time> • <span class="post-list__meta--tags tags">于
<a class="tag-link" href="/tags/javascript/">javascript</a>
</span><a class="btn-border-small" href="/2015/03/22/DOM第2级事件模型/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
<li>
<h2 class="post-list__post-title post-title"><a href="/2015/03/22/DOM第0级事件模型/" title="link to post.title">DOM第0级事件模型</a></h2>
<p class="excerpt">
DOM第0级规范是在DOM Level 1提出之前的各浏览器厂商已经比较通用的规范。它还有以下几个其他的名字：
网景事件模型：Netscape Event Model
基本事件模型：Basic Event Model
浏览器事件模型：Browser Event Model
DOM 第0级事件模型：DOM Level 0 Event Model
如何使用将一个函数实例的引用赋值给DOM元素的属性。
在标记特性中声明&lt;input type=&quot;text&quot; click
…
</p>
<div class="post-list__meta"><time datetime="2015-03-22T11:36:13.000Z" class="post-list__meta--date date">2015-03-22</time> • <span class="post-list__meta--tags tags">于
<a class="tag-link" href="/tags/javascript/">javascript</a>
</span><a class="btn-border-small" href="/2015/03/22/DOM第0级事件模型/">继续阅读</a></div>
<hr class="post-list__divider" />
</li>
</ol>
<nav class="pagination" role="navigation">
<a class="older-posts pagination__older btn btn-small btn-tertiary" href="/page/2/">Next</a>
</nav>
</div>
<footer class="footer">
<span class="footer__copyright"> 本站由 <a href="http://kxlf.co" rel="author">@KXLF</a> 使用<a href="http://hexo.io">Hexo</a> 创建，主题修改自<a href="https://github.com/lenbo-ma/hexo-theme-vno" target="_blank">Vno</a>. </span>
<span class="footer__copyright">采用<a href="http://creativecommons.org/licenses/by-nc/3.0/deed.zh" target="_blank">知识共享署名-非商业性使用 3.0 国际版本许可协议进行许可</a> </span>
<span class="footer__copyright">© 2014-2015 All rights reserved. </span>
</footer>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
$(function(){
var resizeVideo = function(){
$("#refVideo").attr("width",$(".post-container").width()-10).attr("height",$("#refVideo").attr("width") * 0.60482846);
}
resizeVideo();
window.onresize = function() {
resizeVideo();
}
$(document).ready(function($) {
resizeVideo();
});
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-61038985-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>