Escape characters

In this chapter you will learn:

  1. How to escape characters
  2. How to escape the dot and []

Escape characters for selectors

Because characters such as hash (#) have special meaning, if you want to use them in selection expressions, you'll need to backslash escape those characters.

The following list of characters all contain special meanings inside of selectors, and should be backslash escaped if you want to match against them:

# ; & , . + * ~ ' : " ! ^ $ [] ( ) = > | /

For example, if you use the dollar sign as a naming convention for IDs in your HTML documents, you'd write an ID selector like this:

<!DOCTYPE html> <!--from   j  av a  2  s . c o m-->
<html>
    <head>
        <script src="http://java2s.com/style/jquery-1.8.0.min.js"> 
        </script> 
        <script>
            var n = $"#\\$specialId").length; 
            document.writeln(n);
        </script> 
    </head> 
    <body>
        <div id="$specialId">T-Rex</div> 
    </body> 
</html>

Click to view the demo

Escape the dot and []

The following code shows how to escape the dot and [].

<html><!--   j  ava  2  s.  com-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <style type="text/css">
        .changeP { font-weight: bold; color:red;}
    </style>

    <script type="text/javascript">
  $(document).ready(function(){
    $("#myID\\.index\\[1\\]").css("border","3px solid red");
  });
    </script>

  </head>
  <body>

  <div id="myID.index[0]">0</div>
  <div id="myID.index[1]">1</div>
  <div id="myID.index[2]">2</div>


  </body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter:

  1. How to generate code with the jQuery wrapper function.
Home » jQuery » jQuery Selector
Selector syntax
ID
Tag Name
Class Name
Descendant $('E F')
Child (E > F)
General sibling (E ~ F)
Multiple expressions (E, F, G)
Universal (*)
Filtering by Relationships
Numbered child (:nth-child(n/even/odd/expr))
First child (:first-child)
Last child (:last-child)
Only child (:only-child)
Not (:not(E))
Empty (:empty)
Attribute selectors
Attribute existence([attr])
Attribute equals ([foo=bar])
Attribute not equal ([foo!=bar])
Attribute begins with ([foo^=bar])
Attribute ends with ([foo$=bar])
Attribute contains ([foo*=bar])
Attribute contains word ([foo~=bar])
Attribute contains prefix ([foo|=bar])
Attribute exists $("[attributeName*='value']")
Form selector
Form input selector (:input)
Form text fields (input:text)
Form Password field (input:password)
Form Radio button (input:radio)
Form Checkbox (input:checkbox)
Form Submit button (input:submit)
Form Image button (input:image)
Form Reset button (input:reset)
Form button (input:button)
Form File upload (input:file)
Form Enabled form element (input:enabled)
Form Disabled form element (input:disabled)
Form Checked box (input:checked)
Form Selected option (input:selected)
Element at index (:eq(n))
Greater than (:gt(n))
Less than (:lt(n))
First (:first)
Last (:last)
Even element (:even)
Odd element (:odd)
parent (:parent)
Contains text (:contains(text))
Contains element (:has(E))
Visible (:visible)
Hidden (:hidden)
Header element (:header)
Currently animating (:animated)
$(this) selector
Custom User Selectors
Escape characters