Jqery: Some basics

Mon 17 August 2015

Filed under Javascript

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.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

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.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="path/to/example.js"></script>

Basic syntax

!!First and foremost, all jQuery commands end with a semi-colon ;.

$(' html selector').action();

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

  // 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"); } });


DeeKras.com © Dee Kras Powered by Pelican and Twitter Bootstrap. Icons by Font Awesome and Font Awesome More