jQuery: More selectors

This entry is part 6 of 33 in the series jQuery Tutorial

For a beginner in jQuery programming, you will probably find that the 3 methods based on HTML elements, IDs and classes mentioned in the earlier post will be sufficed.

For a more thorough treatment of jQuery selectors, you can refer to this guide.

Nonetheless, we will go ahead and list down some common selectors.

ExampleDescription
$('*')Selects all elements
$('#demo_id')Selects elements with id='demo_id'
$('.demo_class')Selects all elements with class='demo_class'
$('p')All <p> elements
$('ul li:first')This selector gets only the first <li> element of the <ul>
$('li:not(.myclass)')Selects all elements matched by <li> that do not have class='myclass'.

 

jQuery: Events

This entry is part 7 of 33 in the series jQuery Tutorial

After selector, Event is the second most important component of jQuery.
We use a click event to illustrate jQuery event.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script>
        $(function () {
            $('p').click( function () {
                        $('p').css('background-color','yellow');
                    }
            )
        });
    </script>
</head>
<body>
<p>If you click me I will change</p>
</body>
</html>

Try The Code

Notice how we use the click event to act on <p> element.  We want the font color to change and so we put a function inside the click event.

Similar to .click, we use .css to change the background color of the font.

In jQuery, there is a this object that we use to refer to the current element that it is acting on.  In this example, the current element is <p>.

We can replace the p element with this object as below.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script>
        $(function () {
            $('p').click( function () {
                       $(this).css('background-color','yellow');
                    }
            )
        });
    </script>
</head>
<body>
<p>If you click me I will change</p>
</body>
</html>
Try The Code

jQuery: Focus event

This entry is part 8 of 33 in the series jQuery Tutorial

There are a few other events that are commonly used in jQuery.

We look at an interesting event called focus.  Once you put the mouse into the textbox, the textbox will be put into focus.

<!doctype html>
<html>
<head>
    <title>focus demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        span {
            display: none;
        }
    </style>
</head>
<body>

<p>Enter something: <input type='text'> <span>You are in focus</span></p>
<script>
    $('input').focus(function () {
        $('span').fadeIn(4000);
    });
</script>

</body>
</html>

Try The Code

We have an anonymous function in focus and after the cursor has entered the text box, the function is ran bringing the text box in focus.

Here, we also have some simple CSS code, display: none.  That means anything that is wrapped inside the <span> will not be shown when the page is loaded.

We use fadeIn(), which is an animation method in jQuery to bring out the the ‘You are in focus’ text.

The 4000 in fadeIn(4000) is the time required to show the text.  In this case, it is 4000ms.

jQuery: Mouse events

This entry is part 9 of 33 in the series jQuery Tutorial

Ever hover your mouse over a line and found that the line color changed?

This can be done easily using jQuery.

<!doctype html>
<html>
<head>
    <title>hover demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        ul {
            color: blue;
        }
    </style>
    <script>
        $(function () {
            $('li').mouseover(
                    function () {
                        $(this).css('color', 'red');
                    }
            );
            $('li').mouseout(
                    function () {
                        $(this).css('color', 'blue');
                    }
            )
        });
    </script>
</head>
<body>

<ul>
    <li>Milk</li>
    <li>Bread</li>
</ul>
</body>
</html>

Try The Code

With jQuery, it acts on the li element using $(‘li’).

It is also similar to writing jQuery(‘li’) where the $ is replaced by jQuery.

Here are other jQuery related mouse events.

Mouse EventDescription
.click()triggers an event when the mouse is clicked.
.dblclick()triggers an event when the mouse is double clicked.
.hover()event to be executed when the mouse pointer enters and leaves the elements.
.mousedown()Binds an event handler to the “mousedown”
.mouseenter()triggers an event when the mouse enters an element.
.mouseleave()event is fired when the mouse leaves an element.
.mousemove()Bind an event handler to the “mousemove” Javascript event.
.mouseout()Bind an event handler to the “mouseout” event.
.mouseover()When the mouse is over an element.
.mouseup()Fired on a mouseup event.
.toggle()Events to be executed on alternate clicks.

jQuery: Mouse hover event and callback

This entry is part 10 of 33 in the series jQuery Tutorial

We look at a rather interesting hover event that behaves similarly to the mouseover and mouseout events.

Inside the hover method, there are actually 2 functions.

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

<!doctype html>
<html>
<head>
    <title>hover demo</title>
    <style>
        h3 {
            color: blue;
        }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(function(){
            $('h3').hover(
                    function () {
                        $(this).css('color','red');
                    }, function () {
                        $(this).css('color','blue');
                    }
            )});
    </script>
</head>
<body>
<h3>Milk</h3>
</body>
</html>

Try The Code

Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

The first function above is for handlerIn and the second function is for handlerOut.

Callback Functions

The 2 functions are actually callback functions in Javascript/jQuery. Callback is a very important concept in jQuery. With callbacks, functions will run one after another or continuously.

In this case, first function will first run and after it’s done, it will come back and run the second function. That is probably how the name callback is derived.

We will comeback to callback in the later posts.