SemperCallide SemperCallide - 3 months ago 11
jQuery Question

Why are the JQuery methods I'm calling all giving "not a function" errors?

I'm in the process of debugging a page (using Chrome web developer tools), and this page definitely has JQuery included as a library. For instance, when I enter the command $("#desktop-header"), I'm returned a Div object with the ID desktop-header. So I know it's there.

The problem is, any other JQuery method I try to call once I have that object, does NOT work.

$("#desktop-header") ---> Returns div object with ID "desktop-header"

$("#desktop-header").html() ---> "TypeError: $(...).html() is not a function"

$("#desktop-header").css("width") ---> "TypeError: $(...).css() is not a function"
etc.

I read somewhere that this is because $(...) returns a DOM object, and those functions are for JQuery objects. But then when I look up how to get JQuery objects, they seem to be using the exact same code that I am, IE using $(...). I'm also finding plenty of examples online that are doing things like $("#div-id").html(), and they appear to be working fine. So why am I getting all these errors?

I'm very new to JQuery, so I apologize in advance if the answer is obvious. Any assistance would be appreciated. Thank you very much.

Answer

Chrome has shortcuts built in that happen to be $ so just because there is a $, does not mean it is jQuery.

Documentation do $() in Dev Tools

$(selector) returns the reference to the first DOM element with the specified CSS selector. This function is an alias for the document.querySelector() function.