What is jQuery?
With jQuery you select (query) HTML elements and perform "actions" on them. For example, when you hover over a button, the button is highlighted.
Getting started
In the <head> of your html, include a reference to the jquery library - in the <script> tags.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
You can write your jquery right into the html. Or, you can write it as a jquery file with a .js extension (ex: example.js) and reference it in your <head>. The second way allows for you to reuse the code in several html templates.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="path/to/example.js"></script>
</head>
Basic syntax
!!First and foremost, all jQuery commands end with a semi-colon ;.
$(' html selector').action();
Note:
The selector is surrounded with quotes.
The action is followed by parenthesis. There may be arguments in those ().
The selector#
The selector can be any html element:
$('p') or $('h1') or $('button') or $('ol') or $('td') and so forth.
The selector can also reference a specific class in the html code.
For example in the html <div class="highlighted"> is referenced as $('.highlighted'). Notice the . dot before the class name.
The selector can also reference a specific ID in the html code.
For example in the html <p ID="target"> is referenced as $('#target'). Notice the # hash before the ID name.
We can also reference a few html elements:
$('h1, h2, h3'). References all h1, h2, h3. Note: Elements are separated with commas. There is only 1 set of quotes areound all the elements.
Or reference a specificly detailed element:
$('div.highlighted') or $('p#target'). <b>Note:</b> There is no space betweendivand the class.$('div div p'). This refers to any html elements that are apin adivin adiv`.
Lastly, the this:
this refers to the element that we are on currently. It is used instead of repeating the entire element again. You might think of it as a pronoun. We don't repeat someone's name every time we refer to her; we use the words 'she' or 'her'.
$(this). Note: There are no quotes around the this.
Then there are some more cool selectors:
| $('*') | all html elements | ||
| $('p:first') | FIRST p | notice the : colon |
$('element:last') |
| $('tr:even') | the EVEN rows | notice the : colon |
$('element:odd') |
| $(':button') | all | notice the : colon |
$(':checkbox'), $(':selected') |
| $('[href]') | all elements with href (links) |
notice the square brackets | $("[href='value]") |
For a complete list of selectors, see jquery from www.w3schools.com
The Events#
jquery works really well with different 'events' that happen on a webpage.
Events are things like hovering over an element (hover), clicking on an element (click), pressing a key, (keydown) and many others. These 'events' on an element trigger an action.
The syntax
$('element').event(function(){
// action function details here
});
Some examples: For all these, we will use the same function alert('Hello'). This creates a pop-up with the word 'Hello'. Notice the 2 semi colons.
| click | ``` $('button').click(function(){ alert('Hello'); }); ``` | `dblclick`, `mousedown` |
| hover | ``` $('hover').click(function(){ alert('Hello'); }, function(){ alert('Bye now!'); }); ``` | takes 2 functions |
Other common events:
| click() | when the element is clicked |
| dblclick() | when the element is doubleclicked |
| mouseenter() | when the mouse enters the element |
| mouseleave() | when the mouse leaves the element |
| mousedown() | when the mouse is pressed when over that element |
| mouseup() | when the mouse is released when over that element |
| hover() | when the mouse enters the element, and then again when it leaves* |
| focus() | when the (form field) element gets focus |
| blur() | when the (form field) element loses focus |
/* hover() gets 2 functions - first for when mouse enters that element; second when mouse leaves.
And lastly, you can combine several events to the same element. with the on. Example
```
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function() {
$(this).css("background-color", "lightblue");
},
click: function() {
$(this).css("background-color", "yellow");
}
});