Easy jQuery - Syntax and Selectors

EasyProgramming.net tutorial on jQuery syntax and selectors

by Nazmus Nasir

HTML

<!-- Easy jQuery - jQuery syntax and selectors - #1 -->
<p>
Welcome to the first Easy jQuery Tutorial, part of <a href="http://www.easyprogramming.net">EasyProgramming.net</a>. Technically this is the first video, but we started with an index of 0! 
</p>
<p>
Let's learn how to select HTML elements using jQuery. It's pretty easy!
</p>
<p>
All jQuery selectors begin with a $ symbol with the selector in parenthesis: <code>$(selector)</code>. You can also use the keyword <code>jQuery</code> instead of the $ symbol, but why type more than you need to?
</p>
<p>
You can select tags, ids, classes, or the current element. 
</p>

<table>
<thead>
  <th>Type</th>
  <th>Example</th>
</thead>
<tbody>
  <tr>
    <td>tag</td>
    <td>$("div")</td>
  </tr>
  <tr>
    <td>class</td>
    <td>$(".nums")</td>
  </tr>
  <tr>
    <td>id</td>
    <td>$("#name")</td>
  </tr>
  <tr>
    <td>current element</td>
    <td>$(this)</td>
  </tr>
</tbody>
</table>

<h2>
Let's practice:
</h2>
<p>
This text is inside a p tag. Change my color to red!
</p>
<p>
Also in a p tag, change my color, too!
</p>
<h3>
Below numbers in in class .numbers
</h3>
<div class="numbers">
5
</div>
<div class="numbers">
10
</div>
<div class="numbers">
30
</div>
<div class="numbers">
2
</div>
<h3>
Below item is just one id
</h3>
<div id="name">
I'm Nazmus from EasyProgramming.net. Let's learn!
</div>

CSS

td, th {
  padding: 10px;
  border-bottom: solid #000 1px;
}

JavaScript

$('p').css("color", "red");

$('.numbers').append(" Yup, it's a number");

$('#name').animate({'font-size': '3em'}).delay(1000).animate({'font-size': '1em'});