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 between
divand the class.
$('div div p'). This refers to any html elements that are a
pin a
divin a
div`.
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");
}
});