JQuery escapeSelector() Method

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'.

html

<!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'

html

<!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 escapeSelector() Method

Explore