Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Pavle Lucic
10,801 PointsJquery representation of object - question?
What is exactly jquery representation of object?
What is the difference:
var variable = "<p>Test paragraph</p>";
versus
var variable = $("<p>Test paragraph</p>");
3 Answers
Colin Bell
29,679 PointsYour first example simply stores a string as a plain JavaScript variable.
Your second example actually creates a new DOM element and returns it as jQuery object.
From jQuery Documentation:
Creating New Elements
If a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML (i.e., it starts with ... >). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements. You can perform any of the usual jQuery methods on this object:
$( "My new text" ).appendTo( "body" );
So let's take your 2 examples again (renamed for clarity):
var variableString = "<p>Test paragraph</p>";
var variablejQuery = $("<p>Test paragraph</p>");
variableString.appendTo('body');
// Returns an error => TypeError: variableString.appendTo is not a function
// You can't perform jQuery methods on a string.
variablejQuery.appendTo('body');
// Appends <p>Test Paragraph</p> to the body of your document
luke hammer
25,513 PointsJquery is simply a way to navigate the DOM.
so your first example would just save a string to the variable
your second example would attempt to find <p>Test paragraph</p> and attach it self to the exact instance in side the dom. I'm not sure this second example would even work.
here is the prime example i see from the web showing the differance between Jquery and JS.
Example One JQuery changing the background color of a body tag
$('body').css('background', '#ccc');
Example Two JavaScript function to change the background color with the onload function that would need to placed into the body tag
function changeBackground(color) {
document.body.style.background = color;
}
onload="changeBackground('red');"
Pavle Lucic
10,801 PointsThat second sample is confusing me. What is the exact functionality?
Jonathan Grieve
Treehouse Moderator 91,253 PointsThe second example is a function which passes in something called a parameter called color
The statement ```document.body.style.backgeound = color; is using that paremeter as a placeholder to store a value so... using JavaScript to change the backgrond colour of the body element.
Finally, an onload method adds in an argument, which is a function call to the changeBackground function we defined on the first line. with the red keyword so JavaScript knows to change the DOM so the background colour of the body element becomes Red as soon as the page has finished loading.
Hope that helps :).
luke hammer
25,513 PointsIn both cases you are making the background red
Pavle Lucic
10,801 PointsPavle Lucic
10,801 PointsColin Bell tnx , this is great answer.