jQuery — Get Content

Getting Text

var text = $("p").text();
console.log(text);

Getting HTML

var html = $("div").html();
console.log(html);

Getting Attributes

var href = $("a").attr("href");
var src = $("img").attr("src");
var id = $("div").attr("id");

Getting Multiple Attributes

var attrs = $("img").attr(["src", "alt", "title"]);
console.log(attrs.src, attrs.alt, attrs.title);

Getting Form Values

var inputVal = $("input").val();
var selectVal = $("select").val();
var textareaVal = $("textarea").val();

Getting CSS Values

var color = $("h1").css("color");
var width = $("div").css("width");

Getting Dimensions

var width = $("div").width();
var height = $("div").height();
var outerWidth = $("div").outerWidth();
var outerHeight = $("div").outerHeight();

Getting Position

var offset = $("div").offset();
console.log(offset.top, offset.left);

var position = $("div").position();
console.log(position.top, position.left);

Mini Practice

1. Get text from a paragraph
2. Get the href from a link
3. Get a form input's value
4. Get an element's width and height

Up Next

Continue with Set Content — setting content on elements.