jQuery 101: Basic examples

Simple examples of selecting based on class and id of elements, binding a function to the click event, and changing css through jQuery.

by Gabriel Vazquez

HTML

<div id="container"></div>
<button id="saveFields">Save</button>

CSS

body {
  background-color: #eef;
  padding: 5px;
}

JavaScript

var fields = [{
  "id": 1,
  "text": "field1"
}, {
  "id": 2,
  "text": "field2"
}, {
  "id": 3,
  "text": "field3"
}];
var $container = $('#container');

$('#saveFields').click(function() {
  // Fields
});