why jquery id selector not support special character

Question

when using the special character to find the element like as below $("#search@") the exception will occur. how to resolve it? I've tried using the all special character but it's working with * character like $("#search*") without any error, but others #$%^&() throw an error.So why it accepts the * character but why the other character doesn't.

Answer 1

If you have special character for ids, you should escape them using \\ (two backslashes) when you access them. But as far as I know this will only be allowed with html5.

As stated in jquery selector documentation

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar").

alert($("#search\\$").html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="search$">Heh</div>

Answer 2

Try utilizing Attribute Equals Selector [name="value"]

$("[id='search@']").click(function() {
  $(this).html(this.id)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="search@">click</div>

Answer 3

Many special characters are not allowed (Which characters are valid in CSS class names/selectors?).

A way to still select what you want, by looking for all but the special character(s) be seeing what some at the start, end, or contained somewhere within the tag's id.

1. Starts with: jQuery ID starts with

   $('[id^="start-with"]')
   

2. Ends with: jQuery Selector: Id Ends With?

   $('[id$="ending-part"]')
   

3. Contained somewhere within: jQuery ID Contains

   $('[id*="any-spot-at-all"]')
   

There are others ways to "skin the cat" of course - some other selector options for example, to find only a part of a id or class or any other HTML tag attribute can be found at http://api.jquery.com/category/selectors/attribute-selectors/ .