-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
108 lines (98 loc) · 4.58 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/prettify.css">
<link href='http://fonts.googleapis.com/css?family=Quicksand|Chango' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" type="text/css" href="favicon.ico">
<title>Vanilla JavaScript FTW</title>
<script src="./js/prettify.js"></script>
</head>
<body onLoad="prettyPrint()">
<header>
<a href="http://vanillajsf.tw/" alt="VanillaJSFTW" title="Vanilla JavaScript FTW"><h1 class="logo"><img src="./css/images/logo.png" alt="VanillaJSLogo" title="Vanilla Js FTW" /> Vanilla JavaScript<span>FTW</span></h1></a>
<span>
<a href="https://plus.google.com/100166606583546284443/posts" target="blank" alt="Google+" title="Google+"><img src="./css/images/gplus.png" /></a>
<a href="https://github.com/beriberikix/vanillajsf.tw" target="blank" alt="GitHub" title="GitHub"><img src="./css/images/github.png" /></a>
</span>
</header>
<div class="container">
<p>JavaScript has gotten waaay better. Vanilla JavaScript is lightweight & task-oriented. For the win.</p>
<div role="main">
<h2>Selectors</h2>
<pre class="prettyprint">
<code>
document.querySelector("div");
document.querySelector("#id");
document.querySelector(".class");
document.querySelectorAll('#container li');
document.querySelectorAll("#large:nth-child(even)");
if ( e.target.matchesSelector('ul a') ) ? true : false;
</code>
</pre>
<h2>CSS</h2>
<pre class="prettyprint">
<code>
document.querySelector('#box').classList.add('wrap');
document.querySelector('#box').classList.remove('wrap');
document.querySelector('#box').classList.toggle('wrap');
</code>
</pre>
<h2>Events</h2>
<pre class="prettyprint">
<code>
document.addEventListener("DOMContentLoaded", function() {
// code…
});
[].forEach.call(document.querySelectorAll("a"), function(el) {
el.addEventListener("click", function() {
// code…
});
});
[].forEach.call(document.querySelectorAll("a"), function(el) {
el.removeEventListener("click", function() {
// code…
});
});
</code>
</pre>
<h2>Attributes</h2>
<pre class="prettyprint">
<code>
document.querySelector("#id").getAttribute('data-fruit');
document.querySelector('input').getAttribute('name');
</code>
</pre>
</div><!--end main -->
</div><!-- end container -->
<a href="https://plus.google.com/100166606583546284443" rel="publisher"></a>
<footer>
<h3>Contact</h3>
<h3>More Vanilla JS- FTW</h3>
<div>
<ul>
<li><a href="https://plus.google.com/100166606583546284443/posts" target="blank" alt="Google+" title="Google+"><img src="./css/images/gplus.png" /> Follow Us On Google+</a></li>
<li><a href="https://github.com/beriberikix/vanillajsf.tw" target="blank" alt="GitHub" title="GitHub"><img src="./css/images/github.png" /> Fork Us On GitHub</a></li>
<li>Put together by <a href="http://jonathanberi.com">Jonathan Beri</a></li>
</div>
<div>
<ul class="more">
<li><a href="http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/" target="blank" title="From jQuery to JavaScript: A Reference+">From jQuery to JavaScript: A Reference</a></li>
<li><a href="http://sharedfil.es/js-48hIfQE4XK.html" target="blank" title="Vanilla JS FTW: jQuery vs JavaScript">Vanilla JS FTW: jQuery vs JavaScript</a></li>
<li><a href="http://agentcooper.github.com/js-ruby-comparison/" target="blank" title="Ruby vs JavaScript: A Comparison">Ruby vs JavaScript: A Comparison</a></li>
<li><a href="http://blog.sethladd.com/2012/01/vanilla-dart-ftw.html" target="blank" title="Comparing Dart, jQuery, CoffeeScript, CoffeeScript+jQuery, and JavaScript">Comparing Dart, jQuery, CoffeeScript, CoffeeScript+jQuery, and JavaScript</a></li>
</div>
</footer>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30081566-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>
</body>
</html>