Open In App

JQuery escapeSelector() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    </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=
    </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:



Last Updated : 08 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads