Question

When I do

var foo = $('n');
console.log(foo);

I get jQuery object. However if I do:

var bar = $(' ');
console.log(bar);

then I get “Syntax error, unrecognized expression:  ” error message in Firefox.

Why?

Answer 1

If the arguments to the jQuery object are a string, it must either be a valid CSS selector or some detectable HTML tags. Since it is not detectable HTML tags (there are no HTML tags in your string that are surrounded by < and >), then it tries to process the string as a CSS selector.

But the Sizzle selector engine inside of jQuery finds that it is in invalid CSS selector and it throws an exception. You can see this code inside of jQuery that is getting triggered:

Sizzle.error = function( msg ) {
    throw new Error( "Syntax error, unrecognized expression: " + msg );
};

---

Though ' ' is a valid snippet of HTML, jQuery has to be able tell whether you are trying to pass a CSS selector or some HTML tags. To do that, it looks for the open and close tag characters < and > in a typical place for HTML tags in order to distinguish between HTML and a CSS selector. In your case, you fail that test so it tries to process your string as a CSS selector (which it is not) so it fails.

You need to pass valid arguments to jQuery. If you want to pass some HTML to it, you can do this:

var bar = $('<span>&nbsp;</span>');

---

The reason that this works:

var foo = $('n');
console.log(foo);

Is that 'n' is a valid CSS selector. It probably won’t match anything in your document unless you have <n> tags in your document, but it is a valid CSS selector.