7 – Actions: Hide / Show, Hover, Remove, PrependTo / AppendTo, .text / .html

Let’s do a quick review of the jQuery statement:
function(selector).action(parameters)

On a page this might look like:
$(‘div’).slideUp(‘slow’);
where $ is the function, div is the selector, .slideUp is the action, and slow is the parameter.

Now that we have talked about selectors, we will talk about actions. Actions make something happen. jQuery uses simple terms to make the point of the action clear. For instance “hide” means to hide an element, “show” means to display the element, and so forth. Easy, right?

So in this section, what you really need to focus on is memorizing the name, the spelling, and any parameters that might be available to the action. Additionally, practicing applying actions will help you better understand the roles of selectors in the statement.

Hide / Show

The code:
$(‘p’).hide();
$(‘p’).show();

The demo:

Hide and show this paragraph with buttons below.

Toggle [Hide/Show]

Combine hide/show into one button. Similar to toggleClass, we can also toggle hide/show with the .toggle function.

The code:
$(‘p’).toggle();

The demo:

Show/Hide this paragraph.

 

Hover

Hovers are executed on mouseover and mouseout events, which require a function(). After applying the action of .hover, we’ll immediately call the function to apply the .addClass action and it’s parameters.

A second function is called to invoke the action .removeClass when the hover is taken off the tr.

hover = mouseover + mouseout (both referred to as function below)

Note the use of “this” to refer to the containing element.

The code:

$(‘table tr’).hover(function () {
$(this).addClass(‘lightyellow’);
}, function() {
$(this).removeClass(‘lightyellow’);
});

The demo:

Hover over a row to see the .hover, .addClass, and .removeClass actions

This is one
This is two
This is three
This is four
This is five

 

Remove

$(‘p’).remove() – removes all the p’s on the page

$(‘p’).remove(‘:contains(“something”)’); – removes all the p’s on the page that contain the string “something”

In the above statement :contains is a filter. Read about filters.

If you have appended something to a div, you can use .remove to remove it when it is no longer needed. This can be included within the same statement, such as the hover that uses .removeClass (a type of remove) to take off the class when the mouse hovers off the table row in the example above.

 

PrependTo / AppendTo

On Day 3, under Change Elements, we talked about using .insertBefore and .insertAfter. This will add HTML before or after an element, but what if you want to add something inside an element? That’s what .prependTo and .appendTo do.

Prepend adds content at the top of the element. Append adds content at the bottom the element.

The code:
$(‘<p>something</p>’).prependTo(‘.attach’);
$(‘<p>something</p>’).appendTo(‘.attach’);

The demo:

Add “something” before this paragraph by clicking prepend. Add it after by clicking append.

 

Here is a demo to show the differences between appendTo, prependTo, insertBefore, and insertAfter. Click on each button to see where it falls in the yellow div.

This is the paragraph to test where things append, prepend, wrap, and insert.

.append versus .appendTo

In jQuery there is also .append. This is similar to .appendTo but is written in opposite fashion.

.appendTo is written:
$(‘<p>something</p>’).append(‘p:last’);

.append is written:
$(‘p:last’).append(‘<p>something</p>’);

 

Manipulating content: .text vs .html

$(‘p’).html(‘span’); – replaces all the p with span tags

$(‘h2′).text(‘Hello’); – replaces all the text in the H2 with the string provided

We can also get content from one area and output it in another:

$(‘h2:first’).text(); – this will bring back the content from the first paragraph and hold it in the function for later use.