Skip to content

Instantly share code, notes, and snippets.

@Rplus

Rplus/jQuery-presentation.html

Last active December 16, 2015 11:58
Show Gist options
  • Save Rplus/5430811 to your computer and use it in GitHub Desktop.
Save Rplus/5430811 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jQuery-presentation.html
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title></title>
<style>
@media projection, screen, print{
body{
margin: 0;
font: 2em/1.3 Palatino, 'Palatino Linotype';
color: #000;
background: #333
}
section{
page-break-after: always;
border-bottom:10px double #999;
padding-left: 50px;
background-color: #FFF;
}
h3,h4,h2{margin: 0;padding: 0;}
li{
margin-left: 30px;
padding-left: 10px;
list-style-type: square;
}
pre{
font-family: Consolas, monospace;
}
.ps{
color:#669;
}
.notice{
color:red;
font-weight: bold;
}
a,
a:link,
a:visited,
a:active{
background-color: #DDD;
color:#00F;
text-decoration: none;
}
a:hover{
background-color: #CCF;
text-decoration: underline;
}
.hidden,
.bear3{
display: none;
}
#nav,
#nav ol{
display: none;
}
}
@media projection, print{
h3{
background-color: #B00;
height: 80px;
margin-left: -50px;
font-size: 2em;
text-indent: 1em;
line-height: 80px;
color:#FFF;
font-weight: bold;
margin-bottom: 30px;
}
.bear3{
display: block;
}
.bear3 pre{
background-color: #000;
color:#FFF;
margin-left: -50px;
}
#nav,
#nav:hover ol{
display:block;
}
#nav{
width: 20px;
height: 80px;
background: #900;
position: fixed;
top: 0;
left: 0;
}
#nav ol{
background: rgba(255,100,100,.9);
font-size: .7em;
margin:0;
padding: 0;
width: 400px;
list-style-type: none;
}
#nav li{
margin:0;
padding: 0;
overflow: hidden;
list-style-type: none;
}
#nav a{
background-color: transparent;
color: #000;
display:block;
padding-left: 10px;
}
#nav a:hover{
background: rgba(255,0,0,.6);
}
}
</style>
</head>
<body>
<section>
<h3>jQuery intro</h3>
<p>Raven @ 研 A 前端, 2013-04 </p>
</section>
<section>
<h3>jQuery intro</h3>
<ul>
<li>從舊web時代單方資料 > 互動 <br>
we need more interaction! </li>
<li>server-side function > client-side script</li>
</ul>
<br>
how we can start? > javascript
</section>
<section class="bear3">
<h3>webpage
</h3>
<ul>
<li>.</li>
<li>.</li>
<li>.</li>
</ul>
<pre><code>
你媽知道你在這op廢文嗎? 紅的明顯~
　　　∩＿＿＿∩　　 　　　　　　 　∩＿＿＿∩
|ˊ ︵ ︵ˋ科 ╴--一- ╴ー 科/︵　︵ ˋ|
∕ (⊙)(⊙) 科 (／" " )". 科(⊙)(⊙) ˋ
| 　( _●_) ≡ :/　 :::: ≡ (_<span class="notice">●</span>_ )　 | (扭)
╴╴╴≡　 |∪| ミ :i ─":| ミ﹑|∪|　 ≡╴╴╴
ˋ＿＿＿ ﹨ˊ ＼ ˋ..::: ij(_● ／﹨ˊ ノ　 ＿＿＿ˊ
/ <span class="ps">HTML</span> ／( ( r" <span class="ps">F2E</span> | ( ／＼ <span class="ps">CSS</span> \
/ 　 　╱ ﹀ :|| |' i。 ﹀ ＼ \
(扭) / ╴／ :|:|　 |　|: ╲ ╴ \
（＿ ˋ :ˋ| ::| | : ˊ ＿） (探頭)
| / ╲ } :, ::( ::} { ／\ | ∩＿＿＿∩
∪ () ::|' ::ˋ_ˊ () ∪ /︵　︵ ˋ|
(⊙)(⊙) ˋ
≡ (_●_ )@ |
哈哈哈哈～你看看你 ミ﹑|∪| <span class="ps">JS</span> ≡
</code></pre>
</section>
<section>
<h3>webpage
</h3>
<ul>
<li>html: content</li>
<li>css: style</li>
<li>javascript: behavior</li>
</ul>
</section>
<section>
<h3>why jQuery?
</h3>
<ul>
<li><abbr title="document object model">DOM</abbr> 在各瀏覽器的不同 > jQuery fix!</li>
<li>成型早，前端功能完備 > plugin(s) support!</li>
</ul>
</section>
<section>
<h3>jQuery: write less, do more.
</h3>
<ul>
<li>find element in DOM</li>
<li>change HTML content</li>
<li>listen to what user does &amp; react accordingly</li>
<li>animate content</li>
<li>talk over the network to fetch new content</li>
</ul>
</section>
<section>
<h3>jQuery operate
</h3>
<ul>
<li>Seletor</li>
<li>DOM modify</li>
<li>Event</li>
</ul>
</section>
<section>
<h3>jQuery: selector
</h3>
<blockquote>
<a href="http://sizzlejs.com/">Sizzle.js</a>
</blockquote>
<ul>
<li>CSS-likes selector</li>
<li><p>left &lt; right(key selector) </p></li>
</ul>
</section>
<section>
<h3>jQuery: selector
</h3>
<h4><a href="http://jsperf.com/">效率:</a></h4>
<p>ID > <br>　tag > <br>　　.class > <br>　　　:hover, :checked</p>
<p>native JS method is better:</p>
<pre>
document.getElementById
document.getElementsByTagName
document.getElementsByName
document.getElementsByClassName <span class="ps">// gte IE9</span>
document.querySelectorAll(selectors) <span class="ps">// gte IE8</span>
<span class="ps">/*ps: W3 querySelector 實作與 jQuery API 不同*/</span>
</pre>
</section>
<section>
<h3>jQuery: selector
</h3>
<h4><span class="notice">anti-pattern</span>
</h4>
<ul>
<li> $('div#someID') </li>
<li> $('#table tr #someID') </li>
</ul>
<h4>class is good?</h4>
$('.someClass') <span class="notice">?</span> $('div.someClass')
</section>
<section>
<h3>jQuery: selector - CSS-likes
</h3>
<h4><a href="http://api.jquery.com/category/selectors/">selector</a></h4>
<ul>
<li>E > F</li>
<li>E + F</li>
<li>E ~ F</li>
<li>E:has(F)</li>
<li>E:not(F)</li>
<li><a href="http://api.jquery.com/category/selectors/attribute-selectors/">E[A=V]</a>: *^$~|!</li>
<li>:first, :last</li>
<li>:first-child, last-children, only-child</li>
<li><a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">:nth-child(an+b)</a>, nth-of-type <a href="http://www.qianduan.net/useful-nth-child-recipies.html" title="有用的:nth-child秘方">圖例</a><br>
　　 前6個: -n+6 <br>
　　 6之後: n+6 <br>
　　 第5個: 5 <br>
　　 even|odd <br>
</li>
<li>eq == get, gt, lt</li>
<li>:visible</li>
<li>input
:checked, :selected, :enabled, :disabled
:button, :text, :password, :radio, :checkbox, :reset, :image, :file,</li>
</ul>
</section>
<section>
<h3>jQuery: selector - collection set - 1:
</h3>
<ul>
<li>find 子集搜尋</li>
<li>contains(text)</li>
<li><p>is, hasClass <span class="ps">!return boolean</span></p></li>
<li><p>add</p></li>
<li>not <span class="ps">操作原collection</span></li>
<li>filter <span class="ps">操作原collection</span></li>
<li>size</li>
<li><p>slice</p></li>
</ul>
</section>
<section>
<h3>jQuery: selector - collection set - 2:
</h3>
<ul>
<li><p>closest <span class="ps">向上最近</span></p></li>
<li><p>relation-ship</p>
<pre>
parents,
└┴parent
└siblings
├prevAll, perv
├this
│ └children
└next. nextAll
</pre>
</li>
<li><p>end</p></li>
<li><p>addBack</p>
<pre>$('li:first').nextAll().addBack()
</pre>
</li>
<li>clone</li>
</ul>
</section>
<section>
<h3>DOM modify
</h3>
<pre>
attr, removeAttr
prop, removeProp <span class="ps">// valueless attribute: return boolean</span>
addClass, removeClass, toogleClass, hasClass
css, width, height
val, serialize, serializeArray
html, text
before, prepend, append, after
remove, empty, clone
wrapper, wrapperAll, wrapperInner
</pre>
</section>
<section>
<h3>DOM modify
</h3>
<h4><a href="http://api.jquery.com/category/Manipulation/">limit DOM Manipulation</a></h4>
<h4>DOM injection</h4>
<ul>
<li>array.puch(xxx)</li>
<li>string += xxx <span class="ps">// gte IE8 已有改善</span><br><br></li>
<li>document.createfragment</li>
</ul>
</section>
<section>
<h3>DOM modify
</h3>
<ul>
<li><p>html is quick<br />
少用: prepend, append, after, before</p>
</li>
<li><p>data: 自訂屬性 > <a href="http://api.jquery.com/jQuery.data/">$.data/.data</a></p></li>
<li><p>style:<br />
prefer class! <br><br>
<a href="http://jonraasch.com/blog/10-advanced-jquery-performance-tuning-tips-from-paul-irish">Append style tags when styling 15 or more elements</a>
<br>
<span class="notice">be careful at style numbers limit (32) at old IE</span>
</p>
</li></ul>
</section>
<section>
<h3>Event -0, list
</h3>
<pre>
click, dbclick, toggle
hover, mouse[enter, down, up, leaver]
key[down, press, up]
blur, focus, change, select, submit, reset
on, off, one
ready, load, scroll, resize, unload
triggle, triggerHandler
</pre>
</section>
<section>
<h3>Event -1, on
</h3>
<pre>
.on( events [, selector ] [, data ], handler(eventObject) );
</pre>
</section>
<section>
<h3>Event -2, one
</h3>
<pre>
function fire() {
alert('fire in hole~');
}
----------------------------------------------
.one('click', fire);
===
.on('click', function() {
fire();
$(this).off(event);
});
</pre>
<a href="http://jsfiddle.net/ekBLa/">fiddle - on/one</a>
</section>
<section>
<h3>Event -3, delegate
</h3>
<pre>
$(document).on('click', 'div.fire', fire);
$('span.fire').one('click', fire);
</pre>
<a href="http://jsfiddle.net/ekBLa/2/">fiddle - anti-delegate</a><br />
<a href="http://jsfiddle.net/ekBLa/3/">fiddle - delegate</a><br />
<a href="http://api.jquery.com/on/#event-performance">bind on document: event-performance</a>
</section>
<section>
<h3>Event -4, namespace
</h3>
<pre>
.on('click.fire', fire);
.on('click.hi', changeTxt);
.off('click.hi');
.off('.hi');
</pre>
<a href="http://jsfiddle.net/ekBLa/4/">fiddle - namespace</a>
<a href="http://jsfiddle.net/ekBLa/5/">fiddle - namespace/diff event</a>
<a href="http://jsfiddle.net/ekBLa/6/">fiddle - on: object structure</a>
</section>
<section>
<h3>Event -5, <a href="http://api.jquery.com/event.data/">event.data</a>
</h3>
<pre>
function greet(event) {
alert("Hello "+event.data.name);
}
$("button").on("click", { name: "Karl" }, greet);
$("button").on("click", { name: "Addy" }, greet);
</pre>
<a href="http://jsfiddle.net/ekBLa/8/">fiddle - namespace/diff event</a>
</section>
<section>
<h3>Event -6, others
</h3>
<ul>
<li>.triggerHandler()</li>
<li>.trigger()</li>
<li>.ready() , .load()</li>
<li>.error()</li>
</ul>
<ul>
<li>event.currentTarget === this</li>
<li>event.preventDefault() , event.isDefaultPrevented() </li>
<li>event.stopPropagation() , event.isPropagationStopped() <a href="http://jsfiddle.net/ekBLa/9/">fiddle</a></li>
<li>event.stopImmediatePropagation() , event.isImmediatePropagationStopped() <a href="http://jsfiddle.net/ekBLa/10/">fiddle</a></li>
<li>event.delegateTarget</li>
<li>event.which</li>
<li>event.type</li>
<li><a href="http://api.jquery.com/event.result/">event.result</a></li>
<li>event.pageX, event.pageY</li>
<li>event.target</li>
<li><a href="http://api.jquery.com/event.timeStamp/">event.timeStamp 時間戳</a></li>
</ul>
<pre>
</pre>
</section>
<section>
<h3>other - load from CDN
</h3>
<pre>
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;<span class="notice">window.jQuery || document.write</span>('&lt;script src="mydomin/jquery-1.9.0.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
</pre>
</section>
<section>
<h3>other - protect $
</h3>
<ol>
<li><p>noConflict</p>
<pre>var <span class="notice">j</span> = jQuery.noConflict();
// Now, instead of $, we use j.
<span class="notice">j</span>('#someDiv').hide();
</pre>
</li>
<li>Passing jQuery(scope protect)
<pre>(function(<span class="notice">$</span>) {
// Within this function, $ will always refer to jQuery
})(<span class="notice">jQuery</span>);
</pre>
</li>
<li>Passing $ via the Ready Method
<pre><span class="notice">jQuery</span>(document).ready(function(<span class="notice">$</span>) {
// $ refers to jQuery
});
</pre></li>
</ol>
</section>
<section>
<h3>other - speedly load, delay function
</h3>
<ul>
<li> $(document).ready </li>
<li> $(window).load </li>
</ul>
</section>
<section>
<h3>other - speedly load, delay function
</h3>
<h4>少用jQuery</h4>
<ul>
<li>for ? $.each </li>
<li> $('#anID') ? document.getElementById('someAnchor') </li>
<li>$.addClass ? $.css
<ul>
<li>class: <span class="ps">most state</span></li>
<li>css: <span class="ps">dynamic number</span></li>
</ul>
</li>
</ul>
適用，不濫用。
<div class="ps">時間、效能、品質 是三項無法同時最佳化的</div>
況且還有<span class="notice">維護</span>... <br> <br>
</section>
<section>
<h3>Q&A</h3>
<a href="http://jsfiddle.net/Rplus/msvrJ/5/">demo</a>
</section>
<h3>GG</h3>
<nav id="nav">
<ol>
</ol>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="mydomin/jquery-1.9.0.min.js"><\/script>')</script>
<script>
jQuery(document).ready(function($) {
var $title =$('section').find('h3'),
nav = $('#nav').find('ol'),
navC = '';
$.each($title, function(index){
var _this = $(this);
_this.attr('id', 'title-'+index);
navC += '<li><a href="#title-'+index+'">' + _this.text() + '</a></li>'
});
nav.html(navC);
});
</script>
</body>
</html>
@Rplus
Copy link
Author

Rplus commented Jul 1, 2014

view online, by raw git
https://cdn.rawgit.com/Rplus/5430811/raw/1a3237d77dcb1117af383af0cda5f1dd7bce70fd/jQuery-presentation.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment