jQuery selector can't select id or class which contains @ # !"$%&'()*+,./:;<=>?[\]^`{|}~

 When developing front end interface of application in javascript and HTML using Jquery. You may face with the Problem that jQuery selector can not select a DOM with id or class. Sometimes, the cause is  the ID or Class of Dom containing meta characters such as @  # !"$%&'()*+,./:;<=>?[\]^`{|}~ like "foo.bar", "adzd@qhf" , "dom#dom"....

From jquery API document :

 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")

At first glance , I think i will write a script by adding "\\" characters before each meta-character to solve this problem based on the recommendation of jQuery API document. But let's take a look at W3C reference : http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier .

Oops !  You can see that if our application has some Dom identifier which containing any meta-characters our HTML is not validated. In my opinion, it's not a good news. So I think we should change the identifier of Dom (id or class) in advanced.