└── README.md
/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript Without jQuery
2 | Tips and practical examples, from the [CatsWhoCode post](http://www.catswhocode.com/blog/javascript-without-jquery-tips-and-practical-examples).
3 |
4 |
5 | ## Table of Contents
6 |
7 | 1. [Listening for Document Ready](#listening-for-document-ready)
8 | 1. [Adding Event Listeners](#adding-event-listeners)
9 | 1. [Selecting Elements](#selecting-elements)
10 | 1. [Using Ajax](#using-ajax)
11 | 1. [Adding and Removing Classes](#adding-and-removing-classes)
12 | 1. [Fade In](#fade-in)
13 | 1. [Hiding and Showing Elements](#hiding-and-showing-elements)
14 | 1. [DOM Manipulation](#dom-manipulation)
15 |
16 |
17 | ### Listening for Document Ready
18 |
19 | A page can't be manipulated safely until the document is "ready". For that reason, we developers have taken the habit to wrap all of our JS code inside the jQuery `$(document).ready()` function:
20 |
21 | ```javascript
22 | $(document).ready(function () {
23 | console.log('ready!');
24 | });
25 | ```
26 |
27 | The same result can be achieved easily using pure JavaScript:
28 |
29 | ```javascript
30 | document.addEventListener('DOMContentLoaded', function () {
31 | console.log('ready!');
32 | });
33 | ```
34 |
35 |
36 | ### Adding Event Listeners
37 |
38 | Event Listeners are a very important part of JavaScript development. jQuery has a very easy way to handle them:
39 |
40 | ```javascript
41 | $(someElement).on('click', function () {
42 | // TODO event handler logic
43 | });
44 | ```
45 |
46 | You don't need jQuery to create event listeners in JavaScript. Here's how to do so:
47 |
48 | ```javascript
49 | someElement.addEventListener('click', function () {
50 | // TODO event handler logic
51 | });
52 | ```
53 |
54 |
55 | ### Selecting Elements
56 |
57 | jQuery makes it super easy to select elements using an ID, a class name, tag name, etc:
58 |
59 | ```javascript
60 | // By ID
61 | $('#myElement');
62 |
63 | // By Class name
64 | $('.myElement');
65 |
66 | // By tag name
67 | $('div');
68 |
69 | // Children
70 | $('#myParent').children();
71 |
72 | // Complex selecting
73 | $('article#first p.summary');
74 | ```
75 |
76 | Pure JavaScript features various way to select elements. All of the methods below work on all modern browsers as well as IE8+.
77 |
78 | ```javascript
79 | // By ID
80 | document.querySelector('#myElement');
81 |
82 | // By Class name
83 | document.querySelectorAll('.myElement');
84 |
85 | // By tag name
86 | document.querySelectorAll('div');
87 |
88 | // Children
89 | document.querySelectorAll('myParent').childNodes;
90 |
91 | // Complex selecting
92 | document.querySelectorAll('article#first p.summary');
93 | ```
94 |
95 |
96 | ### Using Ajax
97 |
98 | As most of you know, Ajax is a set of technologies allowing you to create asynchronymous web applications. jQuery has a set of useful methods for Ajax, including `get()` as shown below:
99 |
100 | ```javascript
101 | $.get('ajax/test.html', function (data) {
102 | $('.result').html(data);
103 | alert('Load was performed.');
104 | });
105 | ```
106 |
107 | Although jQuery makes Ajax development easier and faster, it's a sure thing that you don't need the framework to use Ajax:
108 |
109 | ```javascript
110 | var request = new XMLHttpRequest();
111 | request.open('GET', 'ajax/test.html', true);
112 |
113 | request.onload = function (e) {
114 | if (request.readyState === 4) {
115 |
116 | // Check if the get was successful.
117 |
118 | if (request.status === 200) {
119 | console.log(request.responseText);
120 | } else {
121 | console.error(request.statusText);
122 | }
123 | }
124 | };
125 | ```
126 |
127 |
128 | ### Adding and Removing Classes
129 |
130 | If you need to add or remove an element's class, jQuery has two dedicated methods to do so:
131 |
132 | ```javascript
133 | // Adding a class
134 | $('#foo').addClass('bold');
135 |
136 | // Removing a class
137 | $('#foo').removeClass('bold');
138 | ```
139 |
140 | Without jQuery, adding a class to an element is pretty easy. To remove a class, you'll need to use the `replace()` method:
141 |
142 | ```javascript
143 | // Adding a class
144 | document.getElementById('foo').className += 'bold';
145 |
146 | // Removing a class
147 | document.getElementById('foo').className = document.getElementById('foo').className.replace(/^bold$/, '');
148 | ```
149 |
150 |
151 | ### Fade In
152 | Here's a practical example of why jQuery is so popular. Fading an element only takes a single line of code:
153 |
154 | ```javascript
155 | $(el).fadeIn();
156 | ```
157 |
158 | The exact same effect can be achieved in pure JavaScript, but the code is way longer and more complicated.
159 |
160 | ```javascript
161 | function fadeIn(el) {
162 | el.style.opacity = 0;
163 |
164 | var last = +new Date();
165 | var tick = function() {
166 | el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
167 | last = +new Date();
168 |
169 | if (+el.style.opacity < 1) {
170 | (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
171 | }
172 | };
173 |
174 | tick();
175 | }
176 |
177 | fadeIn(el);
178 | ```
179 |
180 |
181 | ### Hiding and Showing Elements
182 |
183 | Hiding and showing elements is a very common task. jQuery offers the `hide()` and `show()` methods for modifying the display of an element.
184 |
185 | ```javascript
186 | // Hiding element
187 | $(el).hide();
188 |
189 | // Showing element
190 | $(el).show();
191 | ```
192 |
193 | In pure JavaScript, showing or hiding elements isn't more complicated:
194 |
195 | ```javascript
196 | // Hiding element
197 | el.style.display = 'none';
198 |
199 | // Showing element
200 | el.style.display = 'block';
201 | ```
202 |
203 |
204 | ### DOM Manipulation
205 |
206 | Manipulating the DOM with jQuery is very easy. Let's say you would like to append a `` element to `#container`:
207 |
208 | ```javascript
209 | $('#container').append('
more content
');
210 | ```
211 |
212 | Doing so in pure JavaScript isn't much of a big deal either:
213 |
214 | ```javascript
215 | document.getElementById('container').innerHTML += 'more content
';
216 | ```
217 |
--------------------------------------------------------------------------------