jQuery HTML and CSS modification

Display the actual text or html code of a given html block

syntax
$(selector).text();
$(selector).html();

This is some bold text in a paragraph.

Show the value in a html control

syntax
$(selector).val();

Name:

Show the href value in a html control

syntax
$(selector).attr(href);

seakritters.com

Sets the html content

syntax
$(selector).text("Any String");
$(selector).html("Any String");
$(selector).val("Any String");

This is a paragraph.

This is another paragraph.

Input field:

Sets the html content using a callback

All of the three jQuery methods above: text(), html(), and val(), also come with a callback function. The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) value. You then return the string you wish to use as the new value from the function.

syntax
$(selector).text(function (current element index, current value));
return "new string"; });

This is a bold paragraph.

This is another bold paragraph.

The following example demonstrates how to change (set) the value of the href attribute in a link:

syntax
$(selector).click(function(){
$(selector).attr("href","http://www.seakritters.com/jquery");
});

seakritters.com

Mouse over the link (or click on it) to see that the value of the href attribute has changed.

The attr() method also allows you to set multiple attributes at the same time.

syntax
$(selector).click(function(){
$(selector).attr({
"href" : "http://www.seakritters.com/jquery",
"title" : seakritters jQuery page" });
});

seakritters.com

Mouse over the link (or click on it) to see that the value of the href attribute has changed.

The jQuery method attr(), also come with a callback function. The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) attribute value. You then return the string you wish to use as the new attribute value from the function.

syntax
$(selector).click(function(){
$(selector).attr({
"href", function(i, origValue) {
return new value
});
});

seakritters.com

Mouse over the link (or click on it) to see that the value of the href attribute has changed.

The jQuery append() method inserts content AT THE END of the selected HTML elements.

syntax
$(selector).append("some appendend text");

This is a paragraph.

This is another paragraph.

  1. List item 1
  2. List item 2
  3. List item 3

The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements.

syntax
$(selector).prepend("some appendend text");

This is a paragraph.

This is another paragraph.

  1. List item 1
  2. List item 2
  3. List item 3

Both the append() and prepend() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/HTML (like we have done in the examples above), with jQuery, or with JavaScript code and DOM elements..

syntax
function appendText()
{
var txt1="< p >Text.< /p >"; // Create element with HTML
var txt2=$("< p >< /p >").text("Text."); // Create with jQuery
var txt3=document.createElement("p"); // Create with DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // Append the new elements
}

This is a paragraph.

after() method inserts content AFTER the selected HTML elements.

before() method inserts content BEFORE the selected HTML elements.

syntax
$(selector).after("Some text after");
$(selector).before("Some text before");

Main line



The jQuery remove() method removes the selected element(s) and its child elements.

syntax
$(selector).remove()
This is some text in the div.

This is a paragraph in the div.

This is another paragraph in the div.


empty() method removes the child elements of the selected element(s).

syntax
$(selector).empty()
This is some text in the div.

This is a paragraph in the div.

This is another paragraph in the div.


remove() method also accepts one parameter, which allows you to filter the elements to be removed

syntax
$(selector).remove(".italic")

This is a paragraph in the div.

This is another paragraph in the div.

This is another paragraph in the div.

Add class attributes to different elements. Of course you can select multiple elements, when adding classes:

syntax
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});

You can also specify multiple classes within the addClass() method:

$("button").click(function(){
$(selector).addClass("important blue");
});

Heading 1

Heading 2

This is a paragraph.

This is another paragraph.

This is some important text!

remove a specific class attribute from different elements. Of course you can select multiple elements, when adding classes:

syntax
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});

Heading 1

Heading 2

This is a paragraph.

This is another paragraph.


ToggleClass() method. This method toggles between adding/removing classes from the selected elements:

syntax
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});

Heading 1

Heading 2

This is a paragraph.

This is another paragraph.

Return a CSS Property

To return the value of a specified CSS property, use the following syntax: css("propertyname");
of the FIRST matched element
syntax
$(selector).css("background-color");

This is a paragraph.

This is a paragraph.

This is a paragraph.

Set a CSS Property

To set the value of a specified CSS property, use the following syntax: css("propertyname");
syntax
$(selector).css("background-color", "yellow");
$(selector).css({"background-color":"yellow","font-size":"200%"});

This is a paragraph.

jQuery Dimensions functions

css dimensions
To return the height and width
syntax
$("#div1").width();
$("#div1").height();
$("#div1").innerWidth();
$("#div1").innerHeight();

The outerWidth() method returns the width of an element (includes padding and border).
The outerHeight() method returns the height of an element (includes padding and border)
The outerWidth(true) method returns the width of an element (includes padding, border and margin).
The outerHeight(true) method returns the height of an element (includes padding, border and margin)
syntax
$("#div1").outerWidth();
$("#div1").outerHeight();
$("#div1").outerWidth(true);
$("#div1").outerHeight(true);

returns the width and height of the document (the HTML document) and window (the browser viewport):

syntax
$(document).width();
$(document).height();
$(window).width(true);
$(window).height(true);

sets the width and height of a specified element

syntax
$("#div1").width(500) .height(500);