JQuery escapeSelector() Method
Last Updated :
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 =
</ 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:
Share your thoughts in the comments
Please Login to comment...