jQuery Notes

  • DOM represents an HTML document as a tree structure of nodes, wherein each node is an object representing a part of the document. The nodes are objects that have properties and methods, and these entities can be accessed via JavaScript and its libraries such as jQuery.
  • It has become common practice to link the main JS file at the bottom of the HTML document, usually before the </body> tag.

When the document is ready

There are two ways to handle the ‘document ready’ event

1
2
3
4
5
6
$(document).ready(function(){
    // jQuery, e.g. $('body').append("<div>Hi</div>")
})
$(function(){
    // More recommended approach
})

jQuery Selectors

${"*"} - select all elements

$("#id") - select an element with its id

${".class"} - select all elements with their class

${"div"} - select all elements with a tag

${"h2, div, p"} - select multiple tags

${"li:first"} - select the first li element, similarly, there are last, even, and odd

${":empty"} - select all elements that are empty

${":focus"} - select the element that has focus currently

${":root"} - select the html tag

jQuery Methods

1
2
3
4
5
6
7
8
9
10
11
// addClass
$(":root").addClass("container")
// css
$("li:odd").css("color", "blue")
// chaining methods
$(".mypanel").hide(1500).show(1500).hide(1500).show(1500)
// text() gets the combined text of matched elements, including their descendants
const cont = $("h2").text()
$("h3").text(cont)
// toggle: display or hide the element immediately
$(".target").toggle()

Binding events

on() adds an event handler for one or more events to matched elements

1
2
3
4
$("#btn").on('click', function(){
    $(".mypanel").slideToggle(2000);
});
// slideToggle() displays or hides the matched elements with a sliding motion

Mousemove events

.mousemove() triggered when a mouse pointer moves over the area of the element(s).

For example, to receive the coordinates of the mouse pointer

1
2
3
4
$(".mypanel").mousemove(function(e){
    let msg = "x: "+e.pageX+" y: "+e.pageY
    $("#log").text(message)
})

Event Source

We can refer to the event source with the $(this) syntax

1
2
3
4
5
6
7
8
// there are multiple buttons in the HTML document, with class .btn
// to recognize which button has been clicked
$(function(){
    $(".btn").on('click', function(){
        let btn_label = $(this).text()
        $(".message").text(btn_label+" is clicked")
    })
})

Removing elements

1
2
3
$("btn").click(function(){
    $("div:first").remove()
})

is() method

Combined with $(this) method and if statement

1
if ($(this).is('#panel1'))

Effects

  • slideUp(), slideDown() - The first parameter is duration, which can be a string(slideUp('fast') or slideUp('slow')) or a number, the default value is 400ms
  • animate(properties, duration) - The properties is an object of CSS properties and values
1
2
3
 $("rightBtn").click(function(){
    $(".panel").animate({"left": "+=250px"}, "slow")
})
  • fadeIn(), fadeOut() - fadeIn() fade the element(s) to opache, and fadeOut() fade the element(s) to transparent, the parameter is duration.

Asynchronous

  • get() requests data from a server with an HTTP GET request，the first parameter is a URL string to which to request is sent, the second parameter is a callback function which is executed if the request succeeds.

  • when() excutes callback functions having asynchronous events

    1
    $.when(task).done()

References

http://zetcode.com/web/jquery/