Selectores de jQuery

jQuery selectores : En este tutorial, vamos a aprender acerca de los selectores de jQuery .

Es hora de escribir algo de jQuery ahora. No echa un vistazo al artículo de introducción a jQuery por primera vez en class no lo ha hecho. Antes de pasar a selectores de jQuery , vamos a hablar un poco acerca de la sintaxis general primero.

declaraciones

Casi todo en jQuery es una declaración . Esto puede no ser la primera vez que se oye esto porque la mayoría de los lenguajes de programación conciben cada línea distinguible de código como un comunicado. En jQuery, todas las declaraciones son precedidos con un € (signo de dólar). Esto también se conoce como el jQuery palabra clave . case ejemplo,

    document.getElementById("#sub-text");
$("#sub-text");

Hemos utilizado un selector CSS anteriormente usando jQuery. Se puede ver lo fácil que es para seleccionar un elemento utilizando un selector CSS en jQuery . Que acaba de escribir la palabra clave jQuery ( € signo ) seguido de un par de paréntesis (()) y poner el selector CSS dentro de los paréntesis.

Los anteriores dos declaraciones, la primera en Vanilla JS y de la tarde en jQuery básicamente hacen lo mismo sin embargo hay una pequeña, sutil pero importante diferencia con respecto a la nota. Antes de entender eso y empezamos a programar algunos jQuery Vamos a crear una página HTML simple que podemos jugar. Estoy tomando esta repetitivo del artículo de introducción. Todo lo que he hecho hasta ahora Materialise se añade CDN For estilos de escritura se enfrían rápidamente y enlace a nuestra hoja de estilo local

Index.HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Let's add some content quickly so we can start using JQuery
<div class="container">
<h1 class="title">Explaining JQuery to Spongebob</h1>
<p id="intro-text">Can I say one word or two about Spongebob first?</p>
<div class="row">
</div>
<div class="card">
<div class="card-content">
<h5 class="sub-title">List of names of spongebob's buddies are</h5>
<ul class="center collection" id="list">
<li>Mr Krabs</li>
<li>Garry</li>
<li>Squidward Tentacles</li>
<li>Mrs Puff</li>
</ul>
</div>
</div>
</div>

salida

Selectors in JQuery - 4

Ahora que tenemos la configuración de la plantilla, vamos a ver primero que la sutil diferencia que hablamos,

    console.log(document.querySelector('.title'));
console.log($('.title'));

los anteriores dos declaraciones debe hacer esencialmente la misma cosa, y que en realidad hacer. Ambos nos dieran una referencia al elemento HTML con un nombre for del título. Sin embargo,

salida

    <h1 class="title">Explaining JQuery to Spongebob >/h1>
k.fn.init [h1.title, prevObject: k.fn.init(1)]

La segunda afirmación nos devuelve un tanto una matriz envuelta alrededor del elemento. Se parece mucho a una matriz sin embargo, para ser exactos se trata de un objeto jQuery. No importa lo que hace referencia a una declaración jQuery siempre devuelve un objeto jQuery. También puede verificar esto,

    typeof(title);

salida

    "Object"

Por qué jQuery envuelve elementos en un objeto jQuery envoltorio es simplemente porque tenemos un montón de diferentes propiedades y métodos disponibles para nosotros, entonces? Esto es muy útil cuando estamos utilizando elementos de jQuery animación.

    title.animate;

salida

    ƒ (t,e,n,r){var i=k.isEmptyObject(t),o=k.speed(e,n,r),a=function(){var e=dt(this,k.extend({},t),o);(i||Q.get(this,"finish"))&&e.stop(!0)};return a.finish=a,i||!1===o.queue?this.each(a):this.queue(o.que...

Sin embargo, también tenemos la libertad para desenvolver nuestro elemento y class objeto regular vainilla JS y utilizar los métodos comunes de vainilla JS disponibles en él.

    title[0];

salida

    <h1 class="title">Explaining JQuery to Spongebob</h1>

Aviso cómo el elemento 0th dentro del objeto jQuery es en realidad ese elemento HTML así que simplemente podemos obtenerlo mediante el método de indexación. Sin embargo, ahora no tenemos acceso a los métodos de animación,

    title[0].animate;

salida

    ƒ animate() { [native code] }

selectores se utilizan para obtener contenido de la página web. Podemos utilizar selectores CSS simples para agarrar los elementos del DOM con jQuery.

    const title=$('.container h1');
console.log(title);

salida

    k.fn.init [h1.title, prevObject: k.fn.init(1)]

También podemos apuntar a los identificadores.

    const list=$('#list');
console.log(list);

salida

    k.fn.init [ul#list.center.collection]
0: ul#list.center.collection
length: 1
__proto__: Object(0)

Si conoces CSS, utilizando los selectores de jQuery vendrá class fácil para usted.

    list[0];

salida

    <ul class="center collection" id="list">...</ul>

También podemos obtener la primera & lt; li & gt; usando,

    const firstFriend=$('ul li:first')[0];
console.log(firstFriend);

salida

    <li>Mr. Krabs</li>

El * es los selectores universales y agarra todo el HTML de la página.

    const everything=$('*')[0];
console.log(everything);

salida

    <html lang="en"><head>…</head><body cz-shortcut-listen="true">...</body></html>


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *