The absolute minimal jQuery reference

Selectors

Used to find elements in your page to do some processing with

$("#menu")          // find the element with the id of menu
$(".someClass")     // find ALL elements with the class someClass
$("h1")             // find All <h1> elements
$("#menu li")       // find all <li> elements in the list with id "menu"

Display the value of the textfield with the id email, and show it as an alert

var content = $("#email").val();
alert(content);

Triggers when the document is fully loaded, ideal to start your layouting or hook events to other controles

$(document).ready(function(){
    // Code here
});

A function thet can be called from somehere else

function SomeCode() {
    // Code here
};

Hook an event to a button with the id of startbutton, so it executes the SomeCode function we defined above when clicked

$(document).ready(function(){
    $("#startbutton").click(function() {
            SomeCode();
    });
});

Define a button and a small list with three items. When the button is clicked we change the lisyt items with the class definition of “item” to green.

<input type="button" id="startbutton" value="start" />
<ul>
    <li class="item">one</li>
    <li class="item">two</li>
    <li class="item">three</li>
</ul>
<script type="text/javascript">
    $(document).ready(function () {
        $("#startbutton").click(function () {
            $(".item").css('color', 'green')
        });
    });
</script>

Some handy events to hook into

$("#someItem").click(function() { });  // triggers when clicked
$("#someItem").hover(function() { });  // triggers when hovered with the mouse
$("#someItem").blur(function() { });  // triggered when the field is left (eg textfield)
$("#someItem").change(function() { }); // triggers when content is changed (eg textfield)
// full list http://api.jquery.com/category/events/

Now we add an event to a button and pass the event itsself as e, so we can cancel the default submit behaviour of the button if our validation rules fail

$(document).ready(function() {
  $("#startbutton").click(function(e) {
    content = $("#entryfield").val();
    if (content == "") {
      e.preventDefault();
      alert("no entry");
    } else {
      alert("your typed " + content)
    }
  });
});

This setup will allow toy to trigger an event on each field entered (color it blue as it get’s focus) and again when it is left. (color it green when it lost focus). It works by hooking the events into the class type “item” which will in each case be present on the controls. The focus events adds the focus class to the control and removes the normal class. Th eblurr event when the control lost focus removes the focus class and adds the normal class back to the control, thus changing the background color back.

.item {}
.normal {
  background-color: lightgreen;
}
.focus {
  background-color: lightblue;
}

<input type="text" class="item normal" id="one" />
<input type="text" class="item normal" id="two" />
<input type="text" class="item normal" id="three" />

$(document).ready(function() {
  $(".item").focus(function() {
    $(this).removeClass("normal").addClass("focus");
  });
  $(".item").blur(function() {
    $(this).removeClass("focus").addClass("normal");
  });
});