jQuery

jQuery is basically a java script library so you can use the library's functions and interfaces to operate html components more easily than using native java script.

The library can be referenced in the html head by specifying:

There are different sources of the jquery library, full version, min version, such as:

The jquery-ui.js is for UI components such as a progress bar. You may also download the library js file and store locally so it doesn't need to fetch from the web.

jQuery is obviously still java script so it runs within the <script> tab.

The basic syntax is: $(selector).action()

A $ sign to define/access jQuery, so the browser knows to start running jQuery.

A (selector) to "query (or find)" HTML elements. This is for selecting the html element to operate on.

A jQuery action() to be performed on the element(s). It can be changing text, color, hiding, etc.

Selector examples:

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".

A html element can be assigned an event handler, so only when the event happens, the handler will be triggered.

for example, to assign a click event to all paragraphs on a page, you can do this:

$("p").click();

The next step is to define what should happen when the event fires. You must pass a function to the event:

$("p").click(function(){

// action goes here!!

});

The function here looks like an anonymous function / lambda function in other programming languages.

Get / Set Content

text() - get or set the text content of selected elements, eg a button's text

$("#test").text()

$("#test").text("new text")

val() - get or set the value of form fields, eg input field's value

$("#test").val()

$("#test").val("new value")

attr() - get or set an element's attribute value

$("#test").attr("title")

$("#test").attr("title", "good")

The text(), val() and attr() also supports call back function, so you can manipulate element based on the element's index i and the original text/val/attr value.

$("#test").attr("href", function(i, origValue){ return origValue + "something";});

Http get a content. jQuery can also send a HTTP GET to retrive the content from a web endpoint.

$.get( "test.html", function( data ) { do stuff here });

On retrieving the test.html into 'data' in string, you can do stuff in the call back function accordingly.

Program entry point: $( document ).ready()

A html page can't be manipulated safely until the page is "ready" or fully loaded. jQuery detects this state of readiness for you. The code within $( document ).ready( ... ) will be run once the page is ready, and this is usually the program's entry point under the <script> tab

$( document ).ready(function() {

do stuff here

});

</script>

jQuery has simplified this and made a shorthand for $( document ).ready() :

$(function() {

do stuff here

});