El método escapeSelector() en jQuery se usa para escapar de los selectores de CSS que tienen un carácter o string especial significativa. Puede seleccionar el elemento de id(‘#ID1’, ‘#ID2’) y elementos de clase(‘.class1’, ‘.class2’). Entendámoslo con la ayuda de algunos ejemplos.
Sintaxis:
jQuery.escapeSelector( selector )
Parámetros: este método acepta un selector de parámetro único que contiene una string que contiene una expresión de selector para escapar (ejemplo ‘#ID1’, etc.).
Ejemplo 1: Este ejemplo selecciona elementos de 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>
Producción:
Ejemplo 2: este ejemplo selecciona elementos de 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>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA