La tarea es verificar la selección actual contra una expresión usando jQuery . jQuery es un JavaScript ligero y rápido que simplifica las interacciones entre un documento HTML/CSS , o más precisamente el Modelo de Objetos del Documento (DOM) y JavaScript .
jQuery es ampliamente famoso por su lema «Escribe menos, haz más». En palabras simples, escribiendo unas pocas líneas de código puedes lograr tu objetivo.
En jQuery, podemos usar el método is(selector) que compara la selección actual con una expresión y devuelve verdadero si al menos un elemento de la selección se ajusta al selector dado. Recuerda que si no cabe ningún elemento, o el selector no es válido, entonces la respuesta será ‘ falso ‘.
Sintaxis:
element.is( selector )
- selector: La expresión a filtrar.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("li").click(function () {
if ($(this).is(":first-child")) {
$("h2").text("This is list item 1");
} else if ($(this).is(".middle0,.middle1")) {
$("h2").text("This is middle class list");
} else if ($(this).is(":contains('item 5')")) {
$("h2").text("It's 5th list");
} else if ($(this).is(":contains('item 6')")) {
$("h2").text("It's 6th list");
}
});
});
</script>
</head>
<body>
<div>
<h1 style="color:green;text-align:center">
GeeksforGeeks
</h1>
<span style="color:green:">
Click any list item below:
</span>
<ul>
<li class="top0">list item 1</li>
<li class="top1">list item 2</li>
<li class="middle0">list item 3</li>
<li class="middle1">list item 4</li>
<li class="bottom0">list item 5</li>
<li class="bottom1">list item 6</li>
</ul>
<h2 style="color:green;
text-align:center;
background-color:lightgreen;">
FILLER
</h2>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por volumezero9786 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA