JQuery

OpenWest Conference 2014

See OpenWest_Conference_2014#jQuery

Load jQuery

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

Code

<p id="main">Hello World</p>

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

// <h1 id="heading">hello</h1>
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

<canvas id="canvas" width="200" height="200"></canvas>
<script>
// 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 = '<img src='http://...">';
  var imgElement = $(imgHtml);  // create jQuery object
  imgElement.css({ left: imgConf.x; ... });
  $('body').append(imgElement);
};

Examples

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);
</script>