-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
454 lines (271 loc) · 16.7 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
447
448
449
450
451
452
453
454
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>[jQuery]jquery使用筆記(一)-開始*出發*起航 - apa</title>
<meta name="author" content="阿帕">
<meta name="description" content="從08年那時候剛接觸到jquery,到現在每天都在使用他,總覺得好像不為自己寫一下筆記,也有點不踏實,而且重點是,我好像沒什麼”材料”,可以貢獻在廣大的技術社群裡面,只能從我會一點皮毛的地方(Jquery),開始寫起真正的程式筆記心得,希望我的Blog就從這開始發芽&# …">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://blog.rx836.tw/blog/jquery-notes-1/">
<link href="/favicon.png" rel="icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="/javascripts/ender.js"></script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<link href="/atom.xml" rel="alternate" title="apa" type="application/atom+xml">
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<meta property="fb:admins" content="100000102681259"/>
<meta property="fb:app_id" content="416172151763823" />
<meta property="og:title" content="[jQuery]jquery使用筆記(一)-開始*出發*起航 - apa" />
<meta property="og:description" content="從08年那時候剛接觸到jquery,到現在每天都在使用他,總覺得好像不為自己寫一下筆記,也有點不踏實,而且重點是,我好像沒什麼”材料”,可以貢獻在廣大的技術社群裡面,只能從我會一點皮毛的地方(Jquery),開始寫起真正的程式筆記心得,希望我的Blog就從這開始發芽&# …" />
<meta property="og:url" content="http://blog.rx836.tw/blog/jquery-notes-1/" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31245620-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body >
<header role="banner"><hgroup>
<h1><a href="/">apa</a></h1>
<h2>Stay Hungry, Stay Foolish</h2>
</hgroup>
</header>
<nav role="navigation"><ul class="subscription" data-subscription="rss">
<li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
</ul>
<form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:blog.rx836.tw" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<ul class="main-navigation">
<li><a href="/">Blog</a></li>
<li><a href="/blog/archives">Archives</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<div id="main">
<div id="content">
<div>
<article class="hentry" role="article">
<header>
<h1 class="entry-title">[jQuery]jquery使用筆記(一)-開始*出發*起航</h1>
<p class="meta">
<time datetime="2012-05-18T12:17:00+08:00" pubdate data-updated="true">May 18<span>th</span>, 2012</time>
| <a href="#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>從08年那時候剛接觸到jquery,到現在每天都在使用他,總覺得好像不為自己寫一下筆記,也有點不踏實,而且重點是,我好像沒什麼”材料”,可以貢獻在廣大的技術社群裡面,只能從我會一點皮毛的地方(Jquery),開始寫起真正的程式筆記心得,希望我的Blog就從這開始發芽….,最後長成大樹(疑?)</p>
<!--more-->
<p>近一兩年來,網站越來越重視所謂互動效果,隨著瀏覽器的執行速度越來越快,就也越來越多的特效與動畫,出現在網際網路的世界裡,這邊就直接舉幾個大家可能常看到的</p>
<p><a href="http://jquery.malsup.com/cycle/" target="_blank">jQuery Cycle Plugin</a></p>
<p><a href="http://jquery.malsup.com/block/#page" target="_blank">jQuery BlockUI Plugin (v2)</a></p>
<p>在以前,可能會覺得這非常的酷炫,可是現在似乎已經變成習以為常,剛所貼的都可以用原生的javascript撰寫出來,但在現代凡事求快的情況底下,一個案子可能沒那麼多時間慢慢寫這些東西,更何況還有令人聞之喪膽的跨瀏覽器問題</p>
<p>所以在這個情況下,Jquery就這麼誕生了,不僅解決了跨瀏覽器的問題,更重要的是,他運用了很多HTML與CSS的原理,使的設計人員可以在會一點點的JS情況下,完成這些效果</p>
<p>而對於許多開發人員來說,強大的plugin社群,更是縮減了不少開發時間,就如同剛剛那兩個範例plugin,當然,還有其他更多更好的優點如下</p>
<h4>強大的選擇器、輕鬆找到你要的元素 例:尋找class名稱為myName,底下所有的a標籤</h4>
<pre><code>$('.myName').find(a);
</code></pre>
<h4>改變頁面的呈現樣式 例:替所有div增加一個名為myStyle的class</h4>
<pre><code>$(div).addClass('myStyle');
</code></pre>
<h4>改變網頁內容 例:在body底下額外增加html標籤</h4>
<pre><code>$(body).append('<div>my html</div>');
</code></pre>
<h4>與使用者做互動 例:點擊button後alert出一個視窗</h4>
<pre><code>$(button).click(function(){
alert('good!');
});
</code></pre>
<h4>簡單的動畫增加良好的使用者經驗 例:簡單在div做fading效果</h4>
<pre><code>$(div).fadeIn();
</code></pre>
<h4>支援AJAX效果 例:載入article.html</h4>
<pre><code>$('#a').load('article.html');
</code></pre>
<h4>利用迭代的特性簡化javascript 例:分別alert出a,b,c</h4>
<pre><code>var a1=["a","b","c"];
$.each(a1,function(){
alert(this);
});
</code></pre>
<p>可能有些人會覺得,現在市面上的library 這麼多,為什麼一定要選Jquery?當然,你也可以選擇別的library沒錯,那這篇筆記我們就到這邊吧…ㄟ!當然不是呀,為什麼Jquery能有這麼廣泛的使用者,一定是有他的原因的是吧?</p>
<h4>利用css的知識原理架構</h4>
<p>Jquery繼承了CSS強大的選擇器,這讓許多網頁設計者,可以利用自有本身的CSS知識來撰寫Jquery,而不用擔心因為程式的門檻關係,而降低使用特效的學習曲線</p>
<h4>支援擴充</h4>
<p>你可以修改別人的plugin,也可以自己撰寫一個plugin,甚至將好幾個plugin合在一起來個大雜燴也可以,減少重造輪子</p>
<h4>解決跨瀏覽器的問題</h4>
<p>我想這不用說了,一切都是IE造就了Jquery的蓬勃發展(誤)</p>
<h4>超方便的隱式迭代(implicit iteration)</h4>
<p>如果要將所有的div做隱藏,在以前我們可能要先將div都找出來,然後再用for迴圈一個一個隱藏,但Jquery說:不用! 只要這樣寫就好了!</p>
<pre><code>$(div).hide();
</code></pre>
<p>這裡的div其實是所有的div集合,利用這種特性,就可以減少很多程式碼的撰寫</p>
<h4>鍊式(Chaining)語法的魔力</h4>
<p>Jquery可以跟串香腸一樣,把許多動作串成一行程式,增加程式的效率,也不用再定義一堆變數</p>
<pre><code>$(div).show().addClass('a');
</code></pre>
<h4>富爸爸和全世界強大的社群力量</h4>
<p>這當然是最重要的一部份啦,除了微軟支援他以外,全世界有這麼多人在使用,還怕找不到教學與範例可以直接複製貼上嗎?(誤)</p>
<p>好了,講了那麼概念,還是要動手開始實做一次</p>
<h3>首先下載Jquery</h3>
<p>你可以到<a href="http://docs.jquery.com/Downloading_jQuery" target="_bland">Jquery Download</a>下載Jquery回來,或是使用Google CDN或Microsoft CDN,他有分壓縮過後的版本和沒壓縮過後的版本,一般來說開發階段可以使用沒壓縮過的開發版本</p>
<h3>引入Jquery文件</h3>
<p>將jquery引入到你的web頁面,一般是放在head裡面,底下是引入Google API CDN</p>
<pre><code><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
</code></pre>
<p>接著在body裡面加上簡單的HTML</p>
<pre><code><div class="btnClass">點我</div>
<div class="showClass">
<p>one</p>
<p>two</p>
<p>there</p>
</div>
</code></pre>
<p>然後在script標籤裡面加上這段語法</p>
<pre><code>$(document).ready(function() {
$('.btnClass').click(function(){
$('.showClass>p').eq(0).hide();
});
});
</code></pre>
<p>這裡我們做簡單的程式解說,目的是想讓讀者了解如何使用Jquery,詳細的部分都會在未來的筆記多做介紹,首先是Jquery的選擇器$(),你可以在選擇器裡面利用CSS語法字串,來選取你想要的元素,例如選取class名稱為a的元素</p>
<pre><code>$('.a')
</code></pre>
<p>或是選取ID名為b底下的a標籤</p>
<pre><code>$('#b a')
</code></pre>
<p>這裡我們所選擇的是class名為btnClass的元素,接著$()會將選取的元素$(‘.btnClass’)封裝成一個Jquery物件,並且回傳,接著就利用剛剛所講的<strong>鍊式Chaining</strong>,給予他一個click事件,而我們這邊可以綁定一個函式在這個click事件裡面,當點擊btnClass時就可以執行這個function</p>
<pre><code>$('.btnClass').click(function(){
//綁定的函式
});
</code></pre>
<p>我們在函式裡面加了$(‘.showClass>p’).eq(0).hide();這行程式碼,這裡會看到有一個比較特別的方法<strong>eq()</strong>,我們前面曾經提過,$()裡面是包含所選取的元素集合,而eq()這個方法可以透過索引值(index)來指定我們想選取的元素,這裡我們指定的是第一個,但記住JS的索引都是從0開始,接著在Chaining一個hide()的方法,我們就完成基本的程式語法結構</p>
<pre><code>$('.btnClass').click(function(){
$('.showClass>p').eq(0).hide();
});
</code></pre>
<h1>等等!</h1>
<p>$(document).ready()是什麼東西?!</p>
<p>說到<strong>$(document).ready()</strong>這個語法常會拿<strong>window.onload</strong>這個語法一起比較,簡單的來說onload是JS的原生事件,是在整個網頁都載下來(包含圖片)時所觸發,而ready()是在DOM元素下載完全之後就先行觸發,他是使用DOM標準的DOMContentLoaded事件,意思就是不需要等圖片載完,好處就是觸發時間比較早,而DOMContentLoaded其實是firefox的DOM事件,IE則是要用其他特殊處理才能達到一樣的效果</p>
<h2>但! Jquery的好處就在這裡,它已經幫你把跨流覽器的問題處理好了!!</h2>
<p>接著我們就可以開啟瀏覽器執行,當你點擊<strong>點我</strong>時,<strong>one</strong>就會消失不見</p>
<p><a href="http://jsfiddle.net/RNCVB/1/" target="_blank">線上範例</a></p>
<p>神奇吧!!只需要這幾行程式碼!</p>
</div>
<div>如果你覺得這篇文章有幫助,請幫我讚聲一下:)</div>
<div class="sharing">
<div class="fb-like" data-send="true" data-width="450" data-show-faces="false"></div>
</div>
<footer>
<p class="meta">
<span class="byline author vcard">Posted by <span class="fn">阿帕</span></span>
<time datetime="2012-05-18T12:17:00+08:00" pubdate data-updated="true">May 18<span>th</span>, 2012</time>
<span class="categories">
<a class='category' href='/blog/categories/jquery/'>jQuery</a>
</span>
</p>
<p class="meta">
<a class="basic-alignment left" href="/blog/facebook-expired-access-tokens/" title="Previous Post: [Facebook]關於FB access tokens過期的處理">« [Facebook]關於FB access tokens過期的處理</a>
<a class="basic-alignment right" href="/blog/octopress-notes-2/" title="Next Post: [Octopress]如何設定自己的Domain與異地編輯設定">[Octopress]如何設定自己的Domain與異地編輯設定 »</a>
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<section>
<h1>FB Comments</h1>
<div id="facebook_comments" aria-live="polite">
<noscript>Please enable JavaScript to view the comments powered by facebook</noscript>
<div class="fb-comments"
data-href="http://blog.rx836.tw/blog/jquery-notes-1/"
data-num-posts="5"
data-width="570">
</div>
</div>
</section>
</div>
<aside class="sidebar">
<section>
<h1>Categories</h1>
<ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
<a href="/blog/jquery-plugin-for-pinterest/">[jQ-Plugin] 自製 Pinterest 分享圖片 plugin </a>
</li>
<li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
<li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
<li class="post">
<a href="/blog/alert-confirm-prompt/">[jQ-Plugin] 用jQuery打造alert、confirm和prompt dialogs</a>
</li>
<li class="post">
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
</ul>
</section>
</aside>
</div>
</div>
<footer role="contentinfo"><p>
Copyright © 2013 - 阿帕 -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'rx836';
// var disqus_developer = 1;
//var disqus_identifier = 'http://blog.rx836.tw/blog/jquery-notes-1/';
var disqus_identifier = 'http://blog.rx836.tw/blog/jquery-notes-1/';
var disqus_url = 'http://blog.rx836.tw/blog/jquery-notes-1/';
var disqus_script = 'embed.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=416172151763823";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
</body>
</html>