JQuery escapeSelector() Method - GeeksforGeeks

08 Jul, 2020
The escapeSelector() method in jQuery is used to escape CSS selectors which have special significant character or string. It can select the element of id(‘#ID1’, ‘#ID2’) and elements of class(‘.class1’, ‘.class2’). Let us understand it with the help of few examples.
Syntax:
jQuery.escapeSelector( selector )
Parameters: This method accepts single parameter selector that holds a string which contains a selector expression to escape (example ‘#ID1’ etc).
Example 1: This example selects elements of class = ‘.list’.
<!DOCTYPE HTML><html>  <head>    <title>        jQuery escapeSelector() method    </title>      <script src="https://code.jquery.com/jquery-3.5.0.js">    </script>      <style>        li {            width: 150px;            margin: 0 auto;        }          .highlight {            background-color: green;        }    </style></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>      <p id="GFG_UP"></p>      <ul>        <li class=".list">GFG_0</li>        <li class=".list">GFG_1</li>        <li class="list">GFG_2</li>        <li class="list">GFG_3</li>        <li class=".list">GFG_4</li>    </ul>    <br>      <button onclick="Geeks()">        Click here    </button>          <p id="GFG_DOWN"></p>      <script>        var elUp = document.getElementById("GFG_UP");        var elDown = document.getElementById("GFG_DOWN");          elUp.innerHTML =             "JQuery | escapeSelector() method";          function Geeks() {            $("ul").find("." + $.escapeSelector(                        ".list")).addClass("highlight");              elDown.innerHTML = "The list elements of class"                    + " '.list' are highlighted not the "                    + "elements of class 'list'";        }     </script></body>  </html>
Output:
Example 2: This example selects elements of ID = ‘#list’.
<!DOCTYPE HTML><html>  <head>    <title>        jQuery escapeSelector() method    </title>      <script src="https://code.jquery.com/jquery-3.5.0.js">    </script>      <style>        li {            width: 150px;            margin: 0 auto;        }          .highlight {            background-color: green;        }    </style></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>      <p id="GFG_UP"></p>      <ul>        <li id="#list">GFG_0</li>        <li>GFG_1</li>        <li>GFG_2</li>        <li>GFG_3</li>        <li id="list">GFG_4</li>    </ul>    <br>      <button onclick="Geeks()">        Click here    </button>          <p id="GFG_DOWN"></p>      <script>        var elUp = document.getElementById("GFG_UP");        var elDown = document.getElementById("GFG_DOWN");        elUp.innerHTML =             "JQuery | escapeSelector() method";          function Geeks() {            $("ul").find("#" + $.escapeSelector(                    "#list")).addClass("highlight");              elDown.innerHTML = "The list element of id"                    + " '#list' is highlighted not the"                    + " element of id 'list'";        }     </script></body>  </html>
Output:
jQuery-Methods
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills