JQuery

OpenWest Conference 2014
See OpenWest_Conference_2014

Load jQuery


Code
Hello World

Reference Page Element
$("#main"); // by ID $("body");   // by tag $("p");     // by tag (all of them)

Replace Text
$("#main").text("hi");

Append
$("body").append(" hi ");

Animation
$("h1").fadeOut(3000); // freaken awesome! $("h1").fadeIn(3000); // freaken awesome! $(selector).fadeTo(milsec, percent); // eg: 2000, 0.5 $(selector).slideUp(milsec); $(selector).slideDown(milsec); $(selector).hide; $(selector).show;

Chaining
When you call a method on a jQuery object, the method usually returns the original object that it was called on.

$("h1").text("will fade").fadeOut(3000).fadeIn(3000);

CSS
$(elem).css({ left: leftPos; ... });

Moving Elements
$(elem).offset({ left: leftOffset });

// hello var leftOffset = 0; var moveHeading = function { $("#heading").offset({ left: leftOffset }); leftOffset++; if (leftOffset > 200) { leftOffset = 0; } }; setInterval(moveHeading, 30);

Event Handling
var clickHandler = function(event) { // x-y coordinates start top-left corner of screen console.log("click " + event.pageX + " " + event.pageY); } $(elem).click(clickHandler); // assign event handler

Mouse Click
$(elem).click(clickHandler); // assign event handler

var getDistance = function (event, targetX, targetY) { var diffX = event.offsetX - targetX; var diffY = event.offsetY - targetY; return Math.sqrt((diffX * diffX) + (diffY * diffY)); };

Mouse Movement
 // x-y coordinates start top-left corner of screen

$("html").mousemove(function (event) { $("#heading").offset({ left: event.pageX, top: event.pageY }); });

Creating Elements
Example: var createImg = function (imgConf) { var imgHtml = ''; var imgElement = $(imgHtml);  // create jQuery object  imgElement.css({ left: imgConf.x; ... });  $('body').append(imgElement); };

Keyboard Controlled Ball
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var width = canvas.width; var height = canvas.height; var circle = function (x, y, radius, fillCircle) { ctx.beginPath; ctx.arc(x, y, radius, 0, Math.PI * 2, false); if (fillCircle) { ctx.fill; } else { ctx.stroke; } };

// The Ball constructor var Ball = function { this.x = width / 2; this.y = height / 2; this.xSpeed = 5; this.ySpeed = 0; };

// Update the ball's position based on its speed Ball.prototype.move = function { this.x += this.xSpeed; this.y += this.ySpeed; if (this.x < 0) { this.x = width; } else if (this.x > width) { this.x = 0; } else if (this.y < 0) { this.y = height; } else if (this.y > height) { this.y = 0; } };

// Draw the ball at its current position Ball.prototype.draw = function { circle(this.x, this.y, 10, true); };

// Set the ball's direction based on a string Ball.prototype.setDirection = function (direction) { if (direction === "up") { this.xSpeed = 0; this.ySpeed = -5; } else if (direction === "down") { this.xSpeed = 0; this.ySpeed = 5; } else if (direction === "left") { this.xSpeed = -5; this.ySpeed = 0; } else if (direction === "right") { this.xSpeed = 5; this.ySpeed = 0; } else if (direction === "stop") { this.xSpeed = 0; this.ySpeed = 0; } };

// Create the ball object var ball = new Ball; // An object to convert keycodes into action names var keyActions = { 32: "stop", 37: "left", 38: "up", 39: "right", 40: "down" };

// The keydown handler that will be called for every keypress $("body").keydown(function (event) { var direction = keyActions[event.keyCode]; ball.setDirection(direction); });

// The animation function, called every 30 ms setInterval(function { ctx.clearRect(0, 0, width, height); ball.draw; ball.move; ctx.strokeRect(0, 0, width, height); }, 30);