Reports from our 2016 Meetings
Reports from our 2016 Meetings
This month Bob gave us a long look at jQuery. What is jQuery? To answer, Bob had a few links to show us, starting with the Wikipedia entry on origins of jQuery.
So what is jQuery, it’s a library of commands that simplify the way you write JavaScript.
This is an example of how you load JavaScript;
Window.onload = function(){
// all JS code here
This is how you load jQuery
$(document). Ready(function) () {
// All jQuery code goes here
})
And that can be even simpler
$(function() {} )
Here’s an example of a JavaScript. It is take from a Sitepoint course called “Introduction to jQuery”
There are three free videos available on “What jQuery is”, “Why you should learn it” and one on How you can use jQuery by selection, html elements and attributes.
Here’s the example of a JavaScript to dim a logo image
Window.onload = function(){
Var.elements – document.getElementdById(‘alcovelog’);
element.style.opacity =0.2;
}
Now here’s the jQuery
$(function() {
$(‘#alcovelogo’).css(‘opacity’, 0.2);
)}
The result is the same
<img alt="Alcove dim" height="101" src="../../images/october16/alcove-dim.jpg" width="289"></p>
And that’s why jQuery is so popular.
Here’s the HTML it’s looking at
<div id="alcoveLogo" class="logo"></div>
And the css
.logo {
position:relative;
width:250px;
height:100px;
float:left;
background:url('../img/logo.png');
background-color:rgb(235, 253, 212);
We then spent the afternoon looking at various examples Bob had created to demonstrate jQuery in action. We also had a look at this Youtube video, jQuery Tutorial for Beginners
Bob showed us the site of a BBC children’s program called “Grandpa in my pocket”. To illustrate how jQuery is used to create a moving background header.
We finished with some learning how to hide and display the elements that made the panels below
Steve South
Sig Leader