365 Days of jQuery2014-11-12T08:41:39+00:00http://365daysofjquery.github.com365 Days of jQueryDemo 040 - Toggle Class2013-02-09T00:00:00+00:00http://365daysofjquery.github.com/Demo-040<style>
.clickMe {
cursor: pointer;
}
.on {
color: red;
}
</style>
<div class="clickMe">Click me to toggle!</div>
<script>
$('div.clickMe').click(function(){
$('div.clickMe').toggleClass('on');
});
</script>Day 040 - Toggle Class2013-02-09T00:00:00+00:00http://365daysofjquery.github.com/Day-040<p>In <a href="/Day-039">Day 039</a>, we learnt about <code>.click</code> and how it's possible to change CSS once. If you'd like to toggle an effect we can use <code>.toggleClass</code>. Rather than in the previous demo where we added the CSS within the JavaScript, this time we'll toggle a class and then apply those styles using CSS. It's usually best practice to use this method as it helps to keep the code maintainable.</p>
<p>Here's an example, in our CSS we have:</p>
<pre><code>.clickMe {
cursor: pointer;
}
.on {
color: red;
}
</code></pre>
<p>In our HTML we have:</p>
<pre><code><div class="clickMe">Click me to toggle!</div>
</code></pre>
<p>Then with jQuery we add:</p>
<pre><code>$('div.clickMe').click(function(){
$('div.clickMe').toggleClass('on');
});
</code></pre>
<p>Check out the <a href="/Demo-040">Demo</a> to see it in action.</p>
Demo 039 - Click2013-02-08T00:00:00+00:00http://365daysofjquery.github.com/Demo-039<style>
.clickMe {
cursor: pointer;
}
</style>
<div class="clickMe">Click me to make me red!</div>
<script>
$('div.clickMe').click(function(){
$('div.clickMe').css('color','red');
});
</script>Day 039 - Click2013-02-08T00:00:00+00:00http://365daysofjquery.github.com/Day-039<p>In <a href="/Day-012">Day 012</a>, we used <code>.css</code> to manipulate elements when the page loads, in order to have the changes made when a user clicks an element, it's possible to use <code>.click</code>.</p>
<p><code>.click</code> is triggered when the mouse button is depressed and then released whilst inside the element.</p>
<p>Here's an example, in our HTML if we have:</p>
<pre><code><div class="clickMe">Click me to make me red!</div>
</code></pre>
<p>Then with jQuery we add:</p>
<pre><code>$('div.clickMe').click(function(){
$('div.clickMe').css('color','red');
});
</code></pre>
<p>Check out the <a href="/Demo-039">Demo</a> to see it in action.</p>
Demo 038 - Append and Prepend2013-02-07T00:00:00+00:00http://365daysofjquery.github.com/Demo-038<ul>
<li class="one">List Item One</li>
<li class="three">List Item Three</li>
<li class="five">List Item Five</li>
</ul>
<script>
$('ul li.one').append('<span class="two">"List Item Two"</span>');
$('ul li.five').prepend('<span class="four">"List Item Four"</span>');
</script>Day 038 - Append and Prepend2013-02-07T00:00:00+00:00http://365daysofjquery.github.com/Day-038<p>As well as using <code>.after</code> and <code>.before</code>, it's possible to <code>.append</code> and <code>.prepend</code>.</p>
<p>Here's an example, in our HTML if we have:</p>
<pre><code><ul>
<li class="one">List Item One</li>
<li class="three">List Item Three</li>
<li class="five">List Item Five</li>
</ul>
</code></pre>
<p>Then with jQuery we add:</p>
<pre><code>$('ul li.one').append('<span class="two">"List Item Two"</span>');
$('ul li.five').prepend('<span class="four">"List Item Four"</span>');
</code></pre>
<p>The first line appends a span element to the list item with a class of <code>one</code>.</p>
<p>The second line prepends a span element to the list item with a class <code>five</code>.</p>
<p>Check out the <a href="/Demo-038">Demo</a> and inspect the elements to see exactly where the span elements lie.</p>
Demo 037 - After and Before2013-02-06T00:00:00+00:00http://365daysofjquery.github.com/Demo-037<ul>
<li class="one">List Item One</li>
<li class="three">List Item Three</li>
<li class="five">List Item Five</li>
</ul>
<script>
$('ul li.one').after('<li class="two">List Item Two</li>');
$('ul li.five').before('<li class="four">List Item Four</li>');
</script>Day 037 - After and Before2013-02-06T00:00:00+00:00http://365daysofjquery.github.com/Day-037<p>To add content after or before, you can simply use <code>.after</code> and <code>.before</code>.</p>
<p>In our HTML if we have:</p>
<pre><code><ul>
<li class="one">List Item One</li>
<li class="three">List Item Three</li>
<li class="five">List Item Five</li>
</ul>
</code></pre>
<p>Then with jQuery we add:</p>
<pre><code>$('ul li.one').after('<li class="two">List Item Two</li>');
$('ul li.five').before('<li class="four">List Item Four</li>');
</code></pre>
<p>The first line adds a list item with a class of <code>two</code> after the list item with a class of <code>one</code>.</p>
<p>The second line adds a list item with a class of <code>four</code> before the list item with a class <code>five</code>.</p>
<p>Here's the results <a href="/Demo-037">Demo</a>.</p>
Demo 036 - Arrays2013-02-05T00:00:00+00:00http://365daysofjquery.github.com/Demo-036<p>var myArray = ['Array element one', 'Array element two', 'Array element three'];</p>
<p>View the console to see the results for the following:</p>
<ul>
<li>console.log(myArray[0]);</li>
<li>console.log(myArray[1]);</li>
<li>console.log(myArray[2]);</li>
</ul>
<script>
var myArray = ['Array element one', 'Array element two', 'Array element three'];
console.log(myArray[0]);
console.log(myArray[1]);
console.log(myArray[2]);
</script>Day 036 - Arrays2013-02-05T00:00:00+00:00http://365daysofjquery.github.com/Day-036<p>Arrays look a bit like this:</p>
<pre><code>var myArray = ['Array element one', 'Array element two', 'Array element three'];
</code></pre>
<p>They are zero-indexed, meaning that in this case <code>Array element one</code> = <code>0</code>.</p>
<p>In the <a href="/Demo-036">Demo</a>, if you inspect the console it's possible to call the array using:</p>
<pre><code>console.log(myArray[0]);
</code></pre>
Day 035 - The Times They Are a-Changin'2013-02-04T00:00:00+00:00http://365daysofjquery.github.com/Day-035<p>Sorry for the lack of updates recently.</p>
<p>This has been due to two things, firstly I've not been well and secondly at <a href="http://twitter.com/edgeconf">@edgeconf</a> I was chatting to <a href="http://twitter.com/rem">@rem</a> regarding his thoughts on 365 Days of jQuery.</p>
<p>Remy mentioned it's a long time to devote solely to one JavaScript library. He suggested calling it '365 Days of Anything'. Being somewhat of a web hero of mine I'm inclined to agree with him.</p>
<p>It's my intention to keep 365 Days of jQuery going, but to concentrate on other areas as well, I'm currently looking at starting up an event <a href="http://www.simonowendesign.co.uk/manchester-front-end-web-development-meetup/">#McrFRED</a> and hope to have more information on this soon.</p>
<p>As always, any contributions and pull requests via GitHub would be great.</p>
Day 034 - Performance Testing2013-02-03T00:00:00+00:00http://365daysofjquery.github.com/Day-034<p><a href="http://jsperf.com/">http://jsperf.com/</a></p>
<p>This site is awesome. It allows you to easily setup and run benchmark tests.</p>
<p>Here's difference in performance for <a href="/Day-033">Day-33</a>.</p>
<p><a href="http://jsperf.com/number-vs-operator">http://jsperf.com/number-vs-operator</a></p>
<p>Test1 has the code using <code>number</code>.</p>
<p>Test2 has the code using <code>operator</code>.</p>
<pre><code>number 5 + Number('5') 24,572,246 ±0.86% 10% slower
operator 5 + +'5' 27,193,087 ±0.62% fastest
</code></pre>
Demo 033 - Unary Plus Operator2013-02-02T00:00:00+00:00http://365daysofjquery.github.com/Demo-033<h2>String</h2>
<p>5 + '5' = <span class="string"></span></p>
<h2>Number</h2>
<p>5 + Number('5') = <span class="number"></span></p>
<h2>Unary Plus Operator</h2>
<p>5 + +'5' = <span class="unary-plus"></span></p>
<script>
$('.string').html(
5 + '5'
)
$('.number').html(
5 + Number('5')
)
$('.unary-plus').html(
5 + +'5'
)
</script>Day 033 - Unary Plus Operator2013-02-02T00:00:00+00:00http://365daysofjquery.github.com/Day-033<p>In the <a href="/Day-032">previous day</a> you looked at how it's possible to concatenate strings, but what if you want a string to work as a number?</p>
<pre><code>5 + '5'
</code></pre>
<p>Will give you the number 5, then concatenate 5, giving you 55.</p>
<pre><code>5 + Number('5')
</code></pre>
<p>In this case the string will be converted to a number, giving you 10.</p>
<p>It's also possible to do the same thing using the 'Unary Plus Operator' like so:</p>
<pre><code>5 + +'5'
</code></pre>
<p>Although <code>+'5'</code> is less code, you might want to use <code>Number('5')</code> if you're still new to the 'Unary Plus Operator' as it's more descriptive.</p>
<p><a href="/Demo-033">Demo</a>.</p>
<p>Hey... wouldn't it be awesome if there was some sort of site that would all you to work out the performance between using the <code>number</code> and <code>operator</code> methods and anything JavaScript related for that matter... Head on over to <a href="/Day-034">Day-34</a>.</p>
Day 032 - String Operators2013-02-01T00:00:00+00:00http://365daysofjquery.github.com/Day-032<p>As well as the <a href="/Day-024">Arithmetic Operator</a> '+' it's also possible to use as a string operator to concatenate strings together.</p>
<p>Inspecting the code for various demos, you'll see code such as:</p>
<pre><code>'true && true' + ' = ' + and1 + '<br/>'
</code></pre>
<p>In this instance, the result concatenates the strings, so everything wrapped in <code>''</code> will be output, notice that <code>and1</code> isn't wrapped in <code>''</code> therefore it's not a string, in this case it will return the value of the variable.</p>
<p>Inspect this <a href="/Demo-031">demo</a> for <a href="/Day-031">Day-031</a> for a closer look.</p>
Demo 031 - Comparison Operators2013-01-31T00:00:00+00:00http://365daysofjquery.github.com/Demo-031<p>'Logical AND' &&</p>
<p>'Logical OR' ||</p>
<p>'Logical NOT' !</p>
<div class="results"></div>
<script>
var and1 = true && true; // true
var and2 = true && false; // false
var and3 = false && true; // false
var and4 = false && false; // false
var and5 = 1 && 1; // 1
var and6 = 1 && 2; // 2
var and7 = 2 && 1; // 1
var and8 = 2 && 2; // 2
var or1 = true || true; // true
var or2 = true || false; // true
var or3 = false || true; // true
var or4 = false || false; // false
var or5 = 1 || 1; // 1
var or6 = 1 || 2; // 1
var or7 = 2 || 1; // 2
var or8 = 2 || 2; // 2
var not1 = !true; // false
var not2 = !false; // true
var not3 = !1; // false
var not4 = !2; // false
$('.results').html(
'true && true' + ' = ' + and1 + '<br/>' +
'true && false' + ' = ' + and2 + '<br/>' +
'false && true' + ' = ' + and3 + '<br/>' +
'false && false' + ' = ' + and4 + '<br/>' +
'1 && 1' + ' = ' + and5 + '<br/>' +
'1 && 2' + ' = ' + and6 + '<br/>' +
'2 && 1' + ' = ' + and7 + '<br/>' +
'2 && 2' + ' = ' + and8 + '<br/>' +
'true || true' + ' = ' + or1 + '<br/>' +
'true || false' + ' = ' + or2 + '<br/>' +
'false || true' + ' = ' + or3 + '<br/>' +
'false || false' + ' = ' + or4 + '<br/>' +
'1 || 1' + ' = ' + or5 + '<br/>' +
'1 || 2' + ' = ' + or6 + '<br/>' +
'2 || 1' + ' = ' + or7 + '<br/>' +
'2 || 2' + ' = ' + or8 + '<br/>' +
'!true' + ' = ' + not1 + '<br/>' +
'!false' + ' = ' + not2 + '<br/>' +
'!1' + ' = ' + not3 + '<br/>' +
'!2' + ' = ' + not4
)
</script>Day 031 - Logical Operators2013-01-31T00:00:00+00:00http://365daysofjquery.github.com/Day-031<p>Logical Operators can be used with <a href="/Day-029">'boolean values'</a>.</p>
<p>Here they are:</p>
<pre><code>'Logical AND' &&
'Logical OR' ||
'Logical NOT' !
</code></pre>
<p>Check out some examples in the <a href="/Demo-031">demo</a>.</p>
Day 030 - Operand, Operator and Operation2013-01-30T00:00:00+00:00http://365daysofjquery.github.com/Day-030<p>Here's a simple arithmetic expression:</p>
<pre><code>2 + 3 = 5
</code></pre>
<p>In this instance <code>2</code> is one of the inputs (quantities), this is an <code>operand</code>.</p>
<p>The <code>+</code> is an addition <code>operator</code>, followed by another <code>operand</code> 3.</p>
<p>The <code>operand</code>, <code>operator</code> and final <code>operand</code> make up an <code>operation</code>.</p>
<p>The result, also known as sum or value of the <code>operation</code> is 5.</p>
Day 029 - Boolean2013-01-29T00:00:00+00:00http://365daysofjquery.github.com/Day-029<p>Simply put a <code>boolean</code> returns either a <code>true</code> or <code>false</code> value.</p>
<p>You'll find it very handy if you want to action code dependent on whether a value is <code>true</code> or <code>false</code>.</p>
<p>For example if you had a site where users could log in, you could write some conditional code to check if the user was logged in.</p>
<p>If the statement came back <code>true</code> you could display their name, if it came back <code>false</code>, you could prompt them to log in or sign up.</p>
Demo 028 - Comparison Operators2013-01-28T00:00:00+00:00http://365daysofjquery.github.com/Demo-028<p>'Equal' ==</p>
<p>'Not Equal' !=</p>
<p>'Strict Equal' ===</p>
<p>'Strict Not Equal' !==</p>
<p>'Greater Than' ></p>
<p>'Greater Than or Equal' >=</p>
<p>'Less Than' <</p>
<p>'Less Than or Equal' <=</p>
<span></span>
<script>
var oneNumber = 1 == 1; // true
var oneString = 1 == '1'; // true
var twoNumber = 1 != 1; // false
var twoString = 1 != '1'; // false
var threeNumber = 1 === 1; // true
var threeString = 1 === '1'; // true
var fourNumber = 1 !== 1; // false
var fourString = 1 !== '1'; // false
var fiveNumber = 1 < 1; // false
var fiveString = 1 < '1'; // false
var sixNumber = 1 <= 1; // true
var sixString = 1 <= '1'; // true
var sevenNumber = 1 > 1; // false
var sevenString = 1 > '1'; // false
var eightNumber = 1 >= 1; // true
var eightString = 1 >= '1'; // true
$('span').html(
'1 == 1' + ' ' + oneNumber + '<br/>' +
'1 == \'1\'' + ' ' + oneString + '<br/>' +
'1 != 1' + ' ' + twoNumber + '<br/>' +
'1 != \'1\'' + ' ' + twoString + '<br/>' +
'1 === 1' + ' ' + threeNumber + '<br/>' +
'1 === \'1\'' + ' ' + threeString + '<br/>' +
'1 !== 1' + ' ' + fourNumber + '<br/>' +
'1 !== \'1\'' + ' ' + fourString + '<br/>' +
'1 < 1' + ' ' + fiveNumber + '<br/>' +
'1 < \'1\'' + ' ' + fiveString + '<br/>' +
'1 <= 1' + ' ' + sixNumber + '<br/>' +
'1 <= \'1\'' + ' ' + sixString + '<br/>' +
'1 > 1' + ' ' + sevenNumber + '<br/>' +
'1 > \'1\'' + ' ' + sevenString + '<br/>' +
'1 >= 1' + ' ' + eightNumber + '<br/>' +
'1 >= \'1\'' + ' ' + eightString
)
</script>Day 028 - Comparison Operators2013-01-28T00:00:00+00:00http://365daysofjquery.github.com/Day-028<p>As well as <a href="/Day-024">'Arithmetic Operators'</a>, there's 'Comparison Operators'.</p>
<p>As the name suggests, these are used to make comparisons.</p>
<p>Here's some examples:</p>
<pre><code>'Equal' ==
'Not Equal' !=
'Strict Equal' ===
'Strict Not Equal' !==
'Greater Than' >
'Greater Than or Equal' >=
'Less Than' <
'Less Than or Equal' <=
</code></pre>
<p>This <a href="/Demo-028">demo</a> shows them in action.</p>
<p>Pay careful attention to the difference between using 'Strict'.</p>
<pre><code>1 == '1' true
1 === '1' false
</code></pre>
<p>Here <code>==</code> using a number and a string will return <code>true</code> whilst using <code>===</code> will return false.</p>
Demo 027 - Numbers and Strings2013-01-27T00:00:00+00:00http://365daysofjquery.github.com/Demo-027<h2>Concatenate</h2>
<p class="concatenate"></p>
<h2>Addition</h2>
<p class="addition"></p>
<script>
var a = '10';
var b = 10;
$('p.concatenate').text(a + b);
$('p.addition').text(Number(a) + b);
</script>Day 027 - Numbers and Strings2013-01-27T00:00:00+00:00http://365daysofjquery.github.com/Day-027<p>In <a href="/Day-021">Day 021</a>, we used the following code.</p>
<pre><code>$('ul li').eq(3).css('color', 'green');
</code></pre>
<p>And in the <a href="/Demo-025">demo for Day 025</a>.</p>
<pre><code>console.log('14 % 5 = ' + 14 % 5);
</code></pre>
<p>Notice what's going on with <code>'</code>. Wrapping a number in <code>'</code> will convert it to a <code>string</code>.</p>
<p>Have look a at this <a href="/Demo-027">demo</a>.</p>
<pre><code>var a = '10';
var b = 10;
$('p.concatenate').text(a + b);
</code></pre>
<p>Here you're setting two variables:</p>
<p><code>a</code> as a <code>string</code>.</p>
<p><code>b</code> as a <code>number</code>.</p>
<p>Then calling jQuery, searching the DOM for a <code>p</code> tag, with a class of <code>Number</code> and applying some text which is the value of <code>a + b</code>.</p>
<p>In this instance as <code>a</code> is a <code>string</code> and <code>b</code> a <code>Number</code>, rather than the expected 10 + 10 value being added together to give us <code>20</code> it will concatenate the values together to give us <code>1010</code>.</p>
<p>So, what if you did want to add these values rather than concatenating them? It's possible to convert the <code>string</code> to a <code>Number</code> by adding <code>Number</code> and wrapping the variable in <code>(</code> <code>)</code>.</p>
<pre><code>$('p.addition').text(Number(a) + b);
</code></pre>
<p>Call jQuery, search for a <code>p</code> tag with a class of <code>addition</code> add the text of the value of the variable <code>a</code> as a <code>Number</code>, now add that to the value of the variable <code>b</code> giving you <code>20</code>.</p>
<p>Hey presto!</p>
Demo 026 - Arithmetic Operators (Part 3)2013-01-26T00:00:00+00:00http://365daysofjquery.github.com/Demo-026<div class="maths"></div>
<script>
var i = 10;
a = ++i;
b = i++;
c = --i;
d = i--;
console.log(a,b,c,d,i);
$('.maths').html('<p> a = ' + a + ', b = ' + b + ', c = ' + c + ', d = ' + d + ', i = ' + i + '</p>');
</script>Day 026 - Arithmetic Operators (Part 3)2013-01-26T00:00:00+00:00http://365daysofjquery.github.com/Day-026<p>You can also increment and decrement values.</p>
<p>You can use either of these as a prefix or postfix operator.</p>
<pre><code>var i = 10;
var a = ++i;
var b = i++;
var c = --i;
var d = i--;
</code></pre>
<p>Increment prefix: <code>a</code> would be equal to <code>11</code> and <code>i</code> equal to <code>11</code>.</p>
<p>Increment postfix: <code>b</code> would be equal to <code>11</code> and <code>i</code> equal to <code>12</code>.</p>
<p>Decrement prefix: <code>c</code> would be equal to <code>9</code> and <code>i</code> equal to <code>9</code>.</p>
<p>Decrement postfix: <code>d</code> would be equal to <code>9</code> and <code>i</code> equal to <code>8</code>.</p>
<p><a href="/Demo-026">Demo</a>.</p>
Demo 025 - Arithmetic Operators (Part 2)2013-01-25T00:00:00+00:00http://365daysofjquery.github.com/Demo-025<p>14 % 5 = <span class="modulusOne"></span></p>
<p>20 % 5 = <span class="modulusTwo"></span></p>
<p>200 % 5 = <span class="modulusThree"></span></p>
<script>
var modulusOne = 14 % 5;
console.log('14 % 5 = ' + 14 % 5);
$('span.modulusOne').text(modulusOne);
var modulusTwo = 20 % 5;
console.log('20 % 5 = ' + 20 % 5);
$('span.modulusTwo').text(modulusTwo);
var modulusThree = 200 % 5;
console.log('200 % 5 = ' + 200 % 5);
$('span.modulusThree').text(modulusThree);
</script>Day 025 - Arithmetic Operators (Part 2)2013-01-25T00:00:00+00:00http://365daysofjquery.github.com/Day-025<p>As well as standard addition, subtraction, multiplication and division, there's also a few others that are a bit more complicated.</p>
<p><code>%</code> known as 'modulus', will return the value remainder as an integer of the diving two operands.</p>
<p>Eh!? You what?</p>
<p>Yeah :p</p>
<p>Let's look at a few examples, it's actually a lot easier than it sounds.</p>
<pre><code>14 % 5 = 4
20 % 5 = 0
200 % 5 = 0
</code></pre>
<p>5, goes into 10 two times, with a remainder of 4.</p>
<p>5, goes into 20 four times, with a remainder of 0.</p>
<p>5, goes into 200 forty times, with a remainder of 0.</p>
<p>Check out this <a href="/Demo-025">demo</a> for more examples.</p>
Demo 024 - Arithmetic Operators2013-01-24T00:00:00+00:00http://365daysofjquery.github.com/Demo-024<p>5 + 5 = <span class="addition"></span></p>
<p>5 - 5 = <span class="subtraction"></span></p>
<p>5 * 5 = <span class="multiplication"></span></p>
<p>5 / 5 = <span class="division"></span></p>
<script>
var addition = 5 + 5;
$('span.addition').text(addition);
var subtraction = 5 - 5;
$('span.subtraction').text(subtraction);
var multiplication = 5 * 5;
$('span.multiplication').text(multiplication);
var division = 5 / 5;
$('span.division').text(division);
</script>Day 024 - Arithmetic Operators2013-01-24T00:00:00+00:00http://365daysofjquery.github.com/Day-024<p>In <a href="/Day-021">Day 021</a>, you used an <code>integer</code> to select a specific <code>li</code>.</p>
<p>With an <code>integer</code> it's possible to use 'Arithmetic Operators'.</p>
<pre><code>var addition = 5 + 5;
$('span.addition').text(addition);
</code></pre>
<p>In the above code, you set a <code>variable</code> (I'll cover this in more depth in a further day).</p>
<p>The <code>variable</code> will be equal to the result of the 5 + 5. You then call jQuery, look for a <code>.span</code> element in the DOM with a class of <code>addition</code>. Then use the <code>.text</code> method to add the variable answer to that element.</p>
<p>Similarly it's possible to do subtraction, multiplication and division.</p>
<p>Check out this <a href="/Demo-024">demo</a> for more examples.</p>
Demo 023 - Next and Previous2013-01-23T00:00:00+00:00http://365daysofjquery.github.com/Demo-023<ul class="one">
<li>One</li>
<li>Two</li>
<li>Three</li>
<ul class="two">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<li>Four</li>
<li>Five</li>
</ul>
<script>
$('ul li:first-child').next().css('color', 'crimson');
$('ul li:last-child').prev().css('color', 'blue');
</script>Day 023 - Next and Previous2013-01-23T00:00:00+00:00http://365daysofjquery.github.com/Day-023<p>Here you'll learn how it's possible to use <code>.next</code> and <code>.prev</code> to select elements.</p>
<p>Take the following example:</p>
<pre><code>$('ul li:first-child').next().css('color', 'crimson');
</code></pre>
<p>Here you look for the first <code>li</code> element then using the <code>.next</code> method, select the next element.</p>
<p>Similarly, it's possible to use <code>.prev</code> to select the previous element.</p>
<p>Take a look at this <a href="/Demo-023">demo</a> and inspect the elements for a closer look.</p>
Demo 022 - Selecting with CSS2013-01-22T00:00:00+00:00http://365daysofjquery.github.com/Demo-022<ul class="one">
<li>One</li>
<li>Two</li>
<li>Three</li>
<ul class="two">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<li>Four</li>
<li>Five</li>
</ul>
<script>
$('ul li:first-child').css('color', 'crimson');
</script>Day 022 - Selecting with CSS2013-01-22T00:00:00+00:00http://365daysofjquery.github.com/Day-022<p>This example shows how you can take advantage of using CSS3 selectors.</p>
<pre><code>$('ul li:first-child').css('color', 'crimson');
</code></pre>
<p>Although it's possible to do this in JavaScript using:</p>
<pre><code>$('ul li:first').css('color', 'crimson');
</code></pre>
<p>This will be slower, however it will also work in older browsers such as IE6 if this is a requirement.</p>
<p><a href="/Demo-022">Demo</a>.</p>
Demo 021 - Ground Zero2013-01-21T00:00:00+00:00http://365daysofjquery.github.com/Demo-021<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<script>
$('ul li').eq(0).css('color', 'red');
$('ul li').eq(3).css('color', 'green');
</script>Day 021 - Ground Zero2013-01-21T00:00:00+00:00http://365daysofjquery.github.com/Day-021<p>JavaScript is a 'zero based language'.</p>
<p>This means that if you have 5 elements, JavaScript counts them as 0, 1, 2, 3, 4.</p>
<p>So, if you wanted to select the first <code>li</code> in a <code>ul</code> you could do the following:</p>
<pre><code>$('ul li').eq(0).css('color', 'red');
</code></pre>
<p>This will search for the first <code>li</code> and apply a CSS colour value of red.</p>
<p>To select 'four' you'd do:</p>
<pre><code>$('ul li').eq(3).css('color', 'green');
</code></pre>
<p>Notice here, you don't wrap the number in <code>'</code>.</p>
<p>This is something that can take a while to get to grips with. In this instance the number added to the <code>.eq</code> method is an <code>integer</code>. Rather than passing a <code>selector</code> as a <code>string</code> that jQuery can search the DOM for, here the <code>.eq</code> method requires an integer as a 'plain Number type'. More about <a href="/Day-027">numbers and strings in Day 027</a>.</p>
<p><a href="/Demo-021">Demo</a>.</p>
Demo 020 - Find2013-01-20T00:00:00+00:00http://365daysofjquery.github.com/Demo-020<h2>Children</h2>
<ul class="one">
<li>One</li>
<li>Two</li>
<li>Three</li>
<ul class="two">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<li>Four</li>
<li>Five</li>
</ul>
<h2>Find</h2>
<ul class="three">
<li>One</li>
<li>Two</li>
<li>Three</li>
<ul class="four">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<li>Four</li>
<li>Five</li>
</ul>
<script>
$('ul.one').children('li').css('color', 'blue');
$('ul.three').find('li').css('color', 'fuchsia');
</script>Day 020 - Find2013-01-20T00:00:00+00:00http://365daysofjquery.github.com/Day-020<p>In <a href="/Day-018">Day 018</a>, you looked at how to select children, but what if you wanted to select all specific elements?</p>
<p>In this instance the <code>.find</code> method comes in handy.</p>
<p>Take this example:</p>
<pre><code>$('ul.three').find('li').css('color', 'fuchsia');
</code></pre>
<p>Here, you'll call jQuery, search for a <code>ul</code> with a class of <code>three</code>, then find all the <code>li</code> elements and apply a CSS colour value.</p>
<p>If you take a look at this <a href="/Demo-020">demo</a>.
Using the <code>children</code> method, CSS only gets applied to the children.
Using <code>find</code>, the CSS gets applied to all the <code>li</code>.</p>
<p>Hoorar!</p>
Day 019 - jQuery 1.92013-01-19T00:00:00+00:00http://365daysofjquery.github.com/Day-019<p>Hold the page! <a href="http://code.jquery.com/jquery-1.9.0.js">jQuery 1.9.0</a> has been released!</p>
<h2>What Does This Mean?</h2>
<p>It means lots of awesome people have done lots of awesome work and made jQuery even more awesome.</p>
<h2>Should I Upgrade?</h2>
<p>Yup! But be careful!</p>
<h2>Why Should I Be Careful?</h2>
<p>Check out the upgrade guide on the jQuery site <a href="http://jquery.com/upgrade-guide/1.9/#changes-of-note-in-jquery-1-9">http://jquery.com/upgrade-guide/1.9/#changes-of-note-in-jquery-1-9</a>.</p>
<p>If you're a beginner don't worry too much if none of that seems to make sense. We'll go over it in later days.</p>
<p>There's been quite a few significant changes in this release and it's important to note that certain things have been deprecated. This means upgrading could potentially break you previous code.</p>
<p>As well as the upgrade to jQuery itself, there's also a 'jQuery Migrate' project <a href="https://github.com/jquery/jquery-migrate">https://github.com/jquery/jquery-migrate</a>. The project is great for testing.</p>
<p>"This project can be used to detect and restore APIs, features or functionality that have been deprecated in jQuery and removed as of version 1.9." - taken from <a href="https://github.com/jquery/jquery-migrate">https://github.com/jquery/jquery-migrate</a></p>
<p>If you now test over your code and keep an eye on your console logs any code that has been deprecated will be logged. You can then reevaluate your code and change accordingly to be fully jQuery 1.9.0 compatible.</p>
<p>Of course after you've done this, I'd always recommend checking over everything again locally before pushing live.</p>
Demo 018 - Children2013-01-18T00:00:00+00:00http://365daysofjquery.github.com/Demo-018<ul class="one">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<ul class="two">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<script>
$('ul.one').children('li').css('color', 'blue');
</script>Day 018 - Children2013-01-18T00:00:00+00:00http://365daysofjquery.github.com/Day-018<p>In previous days you've added some text to a h1.</p>
<pre><code>$('h1').text('here is some text');
</code></pre>
<p>You've also added HTML content to the body.</p>
<pre><code>$('body').html('<h1>Here Is Some HTML</h1>);
</code></pre>
<p>This is great, but what if things are a little more complicated? You've got two <code>ul</code>, but you only want to manipulate one of the lists.</p>
<p>Take a look at this code.</p>
<pre><code>$('ul.one').children('li').css('color', 'blue');
</code></pre>
<p>This will search for a <code>ul</code> which has a class of <code>one</code>, then any <code>li</code> that are direct children, will have the CSS value changed to blue.</p>
<p>For a closer look, you can open up this <a href="/Demo-018">demo</a> and inspect the code.</p>
Demo 017 - Adding HTML2013-01-17T00:00:00+00:00http://365daysofjquery.github.com/Demo-017<div class="html-code"></div>
<script>
$('.html-code').html('<h1>Here Is Some HTML</h1>');
</script>Day 017 - Adding HTML2013-01-17T00:00:00+00:00http://365daysofjquery.github.com/Day-017<p>Much the same as adding text in jQuery you can also add HTML like this:</p>
<pre><code>$('body').html('<h1>Here Is Some HTML</h1>);
</code></pre>
<p>Similarly when using <code>'</code> you'll need to add a <code>\</code> before it.</p>
<pre><code>$('body').html('<h1>Here\'s Some HTML<h1>');
</code></pre>
<p><a href="/Demo-017">Demo</a></p>
Demo 016 - Adding Text - Apostrophe2013-01-16T00:00:00+00:00http://365daysofjquery.github.com/Demo-016<h2></h2>
<script>
$('h2').text('here\'s some text');
</script>Day 016 - Adding Text - Apostrophe2013-01-16T00:00:00+00:00http://365daysofjquery.github.com/Day-016<p>Notice in the <a href="/Day-015">previous day</a> we wrapped the text we wanted to display in <code>'</code>, but what if you need to use <code>'</code> to be displayed in your text?</p>
<p>This code won't work:</p>
<pre><code>$('h1').text('here's some text');
</code></pre>
<p>Because the jQuery will look for the first <code>'</code> to start and <code>'</code> to end, viewing this code in the console you'll get:</p>
<pre><code>Uncaught SyntaxError: Unexpected identifier
</code></pre>
<p>To rectify this and display the <code>'</code> as text you can add <code>\</code> before like so:</p>
<pre><code>$('h1').text('here\'s some text');
</code></pre>
<p><a href="/Demo-016">Demo</a></p>
Demo 015 - Adding Text2013-01-15T00:00:00+00:00http://365daysofjquery.github.com/Demo-015<h2></h2>
<script>
$('h2').text('here is some text');
</script>Day 015 - Adding Text2013-01-15T00:00:00+00:00http://365daysofjquery.github.com/Day-015<p>Most of the time text will come from HTML content, but on some occassions you might find it handy to write something in jQuery.</p>
<p>Here, we call jQuery, search for a h1 tag and add some text into it.</p>
<pre><code>$('h1').text('here is some text');
</code></pre>
<p><a href="/Demo-015">Demo</a></p>
Day 014 - camelCase2013-01-14T00:00:00+00:00http://365daysofjquery.github.com/Day-014<p><code>camelCase</code> is a consistent naming convention used throughout jQuery.</p>
<p>Starting with a lowercase letter and adding a capital to each word thereafter makes things a lot easier to read.</p>
<p>Here's some examples without camel case:</p>
<ul>
<li>getsetattribute</li>
<li>inlineblockneedslayout</li>
<li>shrinkwrapblocks</li>
<li>setattributenode</li>
<li>scrollleft</li>
</ul>
<p>Now again with camel case:</p>
<ul>
<li>getSetAttribute</li>
<li>inlineBlockNeedsLayout</li>
<li>shrinkWrapBlocks</li>
<li>setAttributeNode</li>
<li>scrollLeft</li>
</ul>
<p>Much easier to read :D</p>
Demo 013 - Adding a Class2013-01-13T00:00:00+00:00http://365daysofjquery.github.com/Demo-013<style type="text/css">
h2 {
background: yellow;
border: 5px solid orange;
color: red;
font-size: 30px;
padding: 10px;
margin: 10px;
}
</style>
<h2>
Here's some text in a h2 tag
</h2>
<h3>
Here's some text in a h3 tag
</h3>
<script>
$('h2').addClass('this-is-a-h2');
</script>Day 013 - Adding a Class2013-01-13T00:00:00+00:00http://365daysofjquery.github.com/Day-013<p>In <a href="/Day-012">Day 012</a> you looked at how to manipulate CSS using jQuery, although it's possible to do, it's not always the best way to go about things.</p>
<p>So let's look at how we can add a class to an element.</p>
<pre><code>$('h1').addClass('this-is-a-h1');
</code></pre>
<p>Here, the code, again calls jQuery, it then looks for a <code>h1</code>, then tells jQuery you'd like to add a class and lastly tells jQuery what you'd like that class to be called, in this case <code>this-is-a-h1</code>.</p>
<p>Viewing the <a href="/Demo-013">demo</a> and inspecting the h1, you'll see that although there's no class on the h1 in the original source code, jQuery adds the class name.</p>
<p>You can now keep apply all the required styles in CSS by referencing the class name.</p>
Demo 012 - Manipulating CSS2013-01-12T00:00:00+00:00http://365daysofjquery.github.com/Demo-012<style type="text/css">
.manipulating-css div {
margin: 0 0 20px;
}
</style>
<div class="manipulating-css">
<div class="red">
This text is red.
</div>
<div class="blue">
This text is blue.
</div>
<div class="small-text">
This text has a font-size of 11px.
</div>
<div class="big-text">
This text has a font-size of 30px.
</div>
<div class="red-big-text">
This text is red and has a font-size of 30px.
</div>
<div class="blue-big-text-margin">
This text is blue, has a font-size of 30px and a margin of 10px.
</div>
</div>
<script>
$('div.red').css('color', 'red');
$('div.blue').css('color', 'blue');
$('div.small-text').css('font-size', '11px');
$('div.big-text').css('font-size', '30px');
$('div.red-big-text').css({
'color': 'red',
'font-size': 30
});
$('div.blue-big-text-margin').css({
'color': 'blue',
'font-size': 30,
'margin': 10
});
</script>Day 012 - Manipulating CSS2013-01-12T00:00:00+00:00http://365daysofjquery.github.com/Day-012<p>Ok, coding time!</p>
<p>Here you'll take some text in divs and learn how to manipulate these via CSS. Although it's possible to do this, sometimes it can be better to add or change a class name, we'll look at this in <a href="/Day-013">Day 013</a>.</p>
<p>But for now take a look at this <a href="/Demo-012">demo</a>.</p>
<p>Take the code:</p>
<pre><code>$('div.red').css('color', 'red');
</code></pre>
<p>Or you could also do:</p>
<pre><code>$('.red').css('color', 'red');
</code></pre>
<p>Although this is less code, so may seem like a good idea, performance can be improved upon by being more specific when it comes to telling jQuery what it's looking for. I'll cover this in more detail going forward, but for now let's break down the code above.</p>
<p>First the <code>$</code> calls to jQuery, it then tells jQuery to look for a <code>div</code> element with a <code>class</code> of <code>red</code>.
When it's found that, we want to do something with the CSS, then tell it what it needs to do to the CSS, in this case change the CSS property to red.</p>
<p>But what if you want to change more than one property?</p>
<p>Sure, you could do:</p>
<pre><code>$('div.red').css('color', 'red');
$('div.red').css('font-size', '30');
</code></pre>
<p>But rather than telling jQuery to keep searching for the same element and writing more code, there's a better way:</p>
<pre><code>$('div.red-big-text').css({
'color': 'red',
'font-size': 30
});
</code></pre>
<p>A few things important to note when declaring multiple properties;</p>
<ol>
<li>The addition of <code>{</code>, <code>}</code>.</li>
<li>The <code>,</code> goes to the end of the line and CSS property is split with <code>:</code>.</li>
<li>No longer need to wrap numbered values in <code>''</code>.</li>
</ol>
Day 011 - Recap2013-01-11T00:00:00+00:00http://365daysofjquery.github.com/Day-011<p>Right! You still with me?!</p>
<p>Let's have a quick recap to remind yourself (myself) what you've done so far.</p>
<p>So now, you should know how to download jQuery, how Google's CDN can help load jQuery, the difference between using <code>$</code> and <code>jQuery</code>, how to avoid conflicts with other libraries and have some idea of tools that can help you out.</p>
<p>Ok, so now you've covered the basics, now let's get stuck into some code in <a href="/Day-012">Day 012</a>.</p>
Day 010 - Tools - Libraries2013-01-10T00:00:00+00:00http://365daysofjquery.github.com/Day-010<p>For accessibility it's important to note that people may have styles and, or JavaScript disabled, when writing any code you should always bear this in mind. Unfortunately not everyone in the world uses a modern browser taking advantage of all the great stuff that can be accomplished with HTML5 and CSS3, so depending on your project it's worth thinking about what browsers you're going to support.</p>
<h2>Modernizr</h2>
<p>Modernizr is a great JavaScript library that can help out with these issues by detecting features and adding classes to the <code>html</code> element. Here's an example:</p>
<pre><code><html lang="en" dir="ltr" id="modernizrcom" class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage svg inlinesvg no-blobbuilder blob bloburls download formdata wf-proximanova1proximanova2-n4-active wf-proximanova1proximanova2-i4-active wf-proximanova1proximanova2-n7-active wf-proximanova1proximanova2-i7-active wf-proximanovacondensed1proximanovacondensed2-n6-active wf-athelas1athelas2-n4-active wf-active"><head>
</code></pre>
<p>To find out how to get started with Modernizr and a full list of feature detections please visit <a href="http://modernizr.com/">http://modernizr.com/</a>.</p>
<h2>Selectivizr</h2>
<p>As mentioned previously not everyone uses a modern browser, Internet Explorer is a prime culprit that many users will have installed on their Windows PC and not be aware that it's possible to download another browser or upgrade and so keep on using it.</p>
<p>Personally I'm not a fan of going back to support older browsers and adding extra code that will then have a negative impact on those using modern browsers. I opt to use the <code>chromeframe</code> as seen in <a href="https://github.com/h5bp/html5-boilerplate/blob/master/index.html">h5bp</a>, where possible in order to help move the web forwards.</p>
<p> <code>chromeframe</code> adds a message to the top of the page for people using older browsers to go to <a href="http://browsehappy.com/">http://browsehappy.com/</a> where they can upgrade to a modern browser.</p>
<p>However, most of us have bills to pay and if we're working on a project where the client's requirement is to support older browsers selectivizr can help out by doing a great job at providing CSS3 selectors for Internet Explorer 6-8.</p>
<p>To find out more visit <a href="http://selectivizr.com/">http://selectivizr.com/</a>.</p>
<h2>Zepto</h2>
<p>Zepto, Zepto, Zepto... Ok, this one's a bit different as in certain circumstances it can be used as a replacement for jQuery.</p>
<p>Zepto is less than a quarter the size of jQuery in file size, it does this by focusing on only modern browsers. So if you've assessed your project's requirements and know that older browsers aren't an issue (looking at IE8 and below) you'll most likely find that you can switch to Zepto.</p>
<p><a href="http://zeptojs.com/">http://zeptojs.com/</a></p>
Day 009 - Tools - Online2013-01-09T00:00:00+00:00http://365daysofjquery.github.com/Day-009<p>When working on bigger projects that may contain hundreds or thousands of lines of code and you're working on something that's not quite working the way you want it, a great approach is to create a 'reduced test case'.</p>
<p>Some awesome people have created the following sites that make it great to quickly create a reduced test case and even better, allow you to save, edit and share your code.</p>
<p>They're also great for trying out new techniques and playing about with code that's new or you're not familiar with.</p>
<p><a href="http://codepen.io/">http://codepen.io/</a></p>
<p><a href="http://cssdesk.com/">http://cssdesk.com/</a></p>
<p><a href="http://dabblet.com/">http://dabblet.com/</a></p>
<p><a href="http://jsbin.com/">http://jsbin.com/</a></p>
<p><a href="http://jsfiddle.net/">http://jsfiddle.net/</a></p>
<p><a href="http://tinkerbin.com/">http://tinkerbin.com/</a></p>
<p><a href="http://tinker.io/">http://tinker.io/</a></p>
<p>Enjoy!</p>
Day 008 - Tools - Workflow2013-01-08T00:00:00+00:00http://365daysofjquery.github.com/Day-008<p>Whilst writing and viewing code you'll be using at least a browser and most likely a text editor.
You'll also need a way to open and navigate the files you're working on.</p>
<p>Here's some tools you may find useful to help.</p>
<h2>Quicksilver</h2>
<p><a href="http://qsapp.com/">http://qsapp.com/</a> allows you to bring up a small popup and start typing to find things you most often use.</p>
<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/d0MvL_CkmnY?version=3&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/d0MvL_CkmnY?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
<h2>Spectacle</h2>
<p><a href="http://spectacleapp.com/">http://spectacleapp.com/</a> is a real time saver, forget moving your mouse to the bottom of a window to re-size it. Setup some shortcuts and automate window re-sizing with shortcuts. Great for quickly moving your browser to the left and your text editor to the right of the screen. Here's the shortcuts I use:</p>
<p><img src="http://farm9.staticflickr.com/8515/8373621900_cd0ae36461_o.png" alt="Spectacle Custom Shortcuts"></p>
<h2>LiveReload</h2>
<p><a href="http://livereload.com/">http://livereload.com/</a> again is a great time saver, when editing code in your text editor then saving, it will automatically reload your browser for you with the changes made.</p>
Demo 007 - Tools - Reading2013-01-07T00:00:00+00:00http://365daysofjquery.github.com/Demo-007<button>Button</button>
<script>
$('button').click(function(){
console.log('button is clicked');
});
</script>Day 007 - Tools - Reading2013-01-07T00:00:00+00:00http://365daysofjquery.github.com/Day-007<p>Ok, so now you've gone over some of the basics, let's get a bit of code working.</p>
<p>Copy the following code or view the <a href="/Demo-007">demo</a>:</p>
<pre><code><html>
<head>
<meta charset="utf-8">
<title>Console Log</title>
</head>
<body>
<button>Button</button>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.0.min.js"><\/script>')</script>
<script>
$('button').click(function(){
console.log('button is clicked');
});
</script>
</body>
</html>
</code></pre>
<p>Paste this code into a new file, save this somewhere and open in Google Chrome.
If you don't already have Google Chrome you can download it <a href="http://www.google.com/chrome">here</a>.</p>
<p>In Google Chrome you want to view the <code>console</code>. This can be found in Google Chrome's Developer Tools <code>View > Developer > Developer Tools</code> or use the shortcut <code>alt + cmd + i</code>.</p>
<p>By default the Elements tab is selected, select the <code>console</code> tab. Now click the <code>button</code> that's in the browser window, you should now see the text <code>button is clicked</code> appear in the <code>console</code>. Awesome. This will come in very handy in future posts to work out what jQuery is outputting.</p>
<p>The <code>console</code> and Google Chrome Dev Tools is where I spend a vast amount of time whilst developing, it's also possible to theme. I use <a href="https://github.com/simonowendesign/SO-Dark-Monokai-v3">https://github.com/simonowendesign/SO-Dark-Monokai-v3</a>. Still needs some work, but it's getting there.</p>
Day 006 - Tools - Writing2013-01-06T00:00:00+00:00http://365daysofjquery.github.com/Day-006<p>Web development is getting increasingly more complicated as time goes on. Gone are the days of learning tables, then divs, then CSS properties as they are invented and introduced.</p>
<p>Nowadays there's a <code>Fucking Shitload of Stuff</code> (Yes, that is a technical term in case you were wondering) with a multitude of various platforms, browsers and devices to test on. Luckily there's some great tools out there to help out with your workflow.</p>
<p>This topic could warrant its own site in itself, there's so much going on (If you're interested I've done a few <a href="http://www.youtube.com/user/simonowendesign/videos">screencasts</a>), but for now let's concentrate on some JavaScript helpers.</p>
<p>First thing you're going to want is a Text Editor, there's a few out there, I'd recommend <a href="http://www.sublimetext.com/2">Sublime Text 2</a>. Then you'll want to get <a href="http://wbond.net/sublime_packages/package_control">Package Control</a>. Once you've installed this, package installations are a piece of cake.</p>
<p>Open up Sublime Text 2, then press <code>cmd + shift + p</code>, you should see a new window open. You can then start typing and it will filter down, if you start typing <code>package</code> you can see all the package options that are available, we're after <code>Package Control: Install Package</code> when you have this selected hit <code>Enter</code>. This will now go and grab all the latest packages and again you can start typing for the package you'd like to install and it will filter down.</p>
<p>I find it handy to keep a gist of all the packages installed:</p>
<pre><code>Bracket Highlighter
CSScomb
Dotfiles Syntax Highlighting
FileDiffs
JsFormat
JSLint
Package Control
Prefixr
SFTP
Side Bar
Closure Linter (Google) https://developers.google.com/closure/utilities/
SublimeLinter
Tag
Emmet (previously ZenCoding)
EditorConfig
Theme - Phoenix
</code></pre>
<p>The main 2 packages I'd recommend for JavaScript are;
<code>Bracket Highlighter</code>, this is useful to see where code opens and closes.
<code>JSLint</code>, this will output helpful improvements and help debugging.</p>
<p>As well as packages it's also possible to change the theme, I use a custom theme <a href="https://github.com/simonowendesign/Monokai-Phoenix">https://github.com/simonowendesign/Monokai-Phoenix</a> fusing the beauty of the Monokai theme together with Phoenix which I find does a great job on improving the UI for Sublime Text 2.</p>
<p>When writing code you'll most likely find yourself using sections of code on a regular basis. This is where <a href="http://sublimetext.info/docs/en/extensibility/snippets.html">snippets</a> come in handy, the snippet created in <a href="/Day-005">Day 005</a> allows you to simply type <code>siaf</code> which will then output the code to create a Self Invoking Anonymous Function.</p>
<p>Here's another snippet that you'll find yourself using over and over again:</p>
<pre><code># Console Log Snippet for Sublime Text 2:
<snippet>
<content><![CDATA[console.log($1);$0]]></content>
<tabTrigger>cl</tabTrigger>
<scope>source.js,source.js.embedded.html</scope>
<description>console.log()</description>
</snippet>
</code></pre>
<p>Here <code>cl</code> creates code that allows you to <code>log</code> to the <code>console</code>. Not sure what the console is? You guessed it! Head on over to <a href="/Day-007">Day 007</a>.</p>
Day 005 - Let's get ready to jQuery2013-01-05T00:00:00+00:00http://365daysofjquery.github.com/Day-005<p>Let's head over to the H5BP <a href="https://github.com/h5bp/html5-boilerplate/blob/master/index.html">index.html</a>.</p>
<p>Notice all the script tags are at the bottom? So, why is this?</p>
<p>When a page is rendered you'll be able to view the source of that page. The code generated is the Document Object Model often referred to as the <code>DOM</code>.</p>
<p>When you're loading a page this code is rendered from top to bottom. If we were to render the page in slo-mo and we had all the script tags at the top the DOM would have to effectively stop whilst it grabs all the code from the scripts. Whilst it's doing this the user will be looking at a blank screen, not good. So to improve the perceived page load time it's worth keeping scripts at the bottom.</p>
<p>However, there may be instances where you need to include a script file at the top of the DOM or where other JavaScript code is being called from a difference source, but doing this will then mean that the script isn't aware of the code that's below it as the JavaScript has already been executed.</p>
<p>This is where <code>$(document).ready()</code> comes to use and will ensure that the code will only execute when the DOM is ready. The examples in <a href="/Day-004">Day 004</a> take advantage of <code>$(document).ready()</code> and also show an alternative way of writing this code.</p>
<p>Here's a handy snippet using the alternative way for Sublime Text 2:</p>
<pre><code># Self Invoking Anonymous Function Snippet for Sublime Text 2:
<snippet>
<content><![CDATA[(function() \{
$0
\})();]]></content>
<tabTrigger>siaf</tabTrigger>
<scope>source.js,source.js.embedded.html</scope>
<description>Self Invoking Anonymous Function</description>
</snippet>
</code></pre>
<p>Not sure what Sublime Text 2 or a snippet is? Fear not! Head on over to <a href="/Day-006">Day 006</a>.</p>
Day 004 - No Conflict2013-01-04T00:00:00+00:00http://365daysofjquery.github.com/Day-004<p>As mentioned previously if you open up the <a href="http://code.jquery.com/jquery-1.9.0.js">development version of jQuery</a> and search for <code>:</code> plus what you're looking for, in this case <code>noConflict:</code>, you'll see:</p>
<pre><code>noConflict: function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
}
</code></pre>
<p>It's also worth noting the jQuery API site has just had a sweet update and searching for noConflict, you'll find:
<a href="http://api.jquery.com/jQuery.noConflict/">http://api.jquery.com/jQuery.noConflict/</a></p>
<p>There's a few times, especially in WordPress builds where I've seen people fix multiple JavaScript libraries by constantly defining jQuery:</p>
<pre><code>jQuery.noConflict();
jQuery(function() {
// more code referencing jQuery
});
</code></pre>
<p>This can be improved using the following code to set <code>$</code> back as an alias <code>jQuery</code>.</p>
<pre><code>jQuery.noConflict();
// setting $ to alias to jQuery again
jQuery(document).ready(function($){
$(function() {
// now you can continue to use $ as an alias to jQuery
});
});
</code></pre>
<p>Another alternative that's worth mentioning is using the following code which is essentially doing the same job.
It is less descriptive, so not that great if you're a beginner trying to figure what is going on, but when you do, it's less code and widely used.</p>
<pre><code>jQuery.noConflict();
(function($) {
$(function() {
// now you can continue to use $ as an alias to jQuery
});
})(jQuery);
</code></pre>
<p>More on <code>$(document).ready()</code> in <a href="/Day-005">Day 005</a>.</p>
Day 003 - Give me some dollar!2013-01-03T00:00:00+00:00http://365daysofjquery.github.com/Day-003<p>If you've looked at any jQuery code, one of the first things you'll notice is the dollar symbol <code>$</code>.</p>
<p>The <code>$</code> symbol is an alias for <code>jQuery</code>.</p>
<p>This is sometimes referred to as <a href="http://en.wikipedia.org/wiki/Syntactic_sugar">Syntactic Sugar</a>.
Whilst writing jQuery code you could write <code>jQuery(doSomething)</code> or <code>$(doSomething)</code>. This is incredibly helpful, meaning that every time you want to call the jQuery object you can simply type <code>$</code>, rather than <code>jQuery</code>.</p>
<p>It's important to note that <code>$</code> isn't unique to jQuery and although <a href="http://trends.builtwith.com/javascript">it is the most popular JavaScript library</a>, there are others that use the <code>$</code> symbol as well.</p>
<p>There's a few times, particularly when using a CMS such as WordPress or Joomla, that various plugins get installed, some of these plugins may use another JavaScript library such as MooTools. In such instances where multiple JavaScript libraries are being used the <code>$</code> symbol can then have undesired results.</p>
<p>Fortunately there's <code>jQuery.noConflict()</code> which I'll elaborate on in <a href="/Day-004">Day 004</a>.</p>
Day 002 - Using Google's CDN to serve jQuery2013-01-02T00:00:00+00:00http://365daysofjquery.github.com/Day-002<pre><code><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
</code></pre>
<p>Few things to note here. Firstly there's no 'http', this isn't a mistake, it's done deliberately using a 'protocol-relative URL'.
There's an excellent post on this over at Paul Irish's blog:
<a href="http://paulirish.com/2010/the-protocol-relative-url/">http://paulirish.com/2010/the-protocol-relative-url/</a>.</p>
<p>Secondly, it's a good idea to specify the version of jQuery you're using. If you always automatically update, things may break.
When a new version of jQuery is released it's always worth giving things a check over before updating.</p>
<p>Third of all, on the second line we call jQuery again.
This is useful just in case Google's CDN version might not be available and also if you're working offline.</p>
<p>Another great reason for using this approach is that if the user has already visited a site using the same version of jQuery you're using they'll most likely have it cached. This means they won't need to download it again, meaning one less file to download and quicker page rendering of your site.</p>
Day 001 - Downloading jQuery2013-01-01T00:00:00+00:00http://365daysofjquery.github.com/Day-001<p>If you go to <a href="http://jquery.com">http://jquery.com</a> you'll see two versions of the file to download 'production' and 'development'. So what's the difference and which should you use?</p>
<h2>Production</h2>
<p>This version is used when you come to a point where you're happy with your code and you want push it live. You can upload or deploy your code and then people will be able to access it. In this environment it's useful to use Google's CDN (more on this in <a href="/day-002">Day 002</a>). The end goal here is to serve this file and the content to the user accessing it as quick as possible. The production file is 'minified', it takes the code from the development version and reduces it to use the least amount of characters possible. This makes it difficult when looking at the code to work out what everything's doing, but dramatically lowers the file size.</p>
<h2>Development</h2>
<p>When building web sites / web apps (<a href="http://stackoverflow.com/questions/8694922/whats-the-difference-between-a-web-site-and-a-web-application">What's the difference between a web site and a web application</a>) I'd recommend working locally, this allows you to test your code and make sure everything is working before showing it to the world. Whilst working this way it's often useful, especially whilst learning jQuery to view the development file. It's full of useful comments and generally any method can be found in the jQuery development version source by searching for it then adding <code>:</code>. There are a few exceptions I believe, but not many.</p>