Maison interface Web js tutoriel Utilisation et exemples de quatre sélecteurs jQuery

Utilisation et exemples de quatre sélecteurs jQuery

Jun 20, 2017 pm 04:31 PM
jquery 使用 示例 选择器

Cet article vous donne un résumé de la façon d'utiliser les quatre sélecteurs et exemples de jQuery. C'est très simple et pratique. J'espère qu'il sera utile à tout le monde d'apprendre jquery.

jQuery Sélecteur d'éléments

jQuery utilise des sélecteurs CSS pour sélectionner des éléments HTML.

$("p") sélectionne l'élément

$("p.intro") sélectionne tous les éléments

avec class="intro".

$("p#demo") sélectionne tous les éléments

avec id="demo".

Exemple de code :

partie jquery


$(document).ready(function(){//页面加载完成后执行
  tagName();
// idName();
// className();
});


function tagName(){
  $('p').addClass('heighlight');
}

function idName(){
  $('#p').addClass('heighlight2');
}
function className(){
  $('p.pClass').addClass('heighlight2');
}
Copier après la connexion

partie html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/select.js" ></script>
    <link rel="stylesheet" href="css/select.css" />
  </head>
  <body>
    <p id="p">
      <p>this is my name!!</p>
      <p class="pClass">class is import!</p>
      <a href="#">you cai!!</a>
    </p>
  </body>
</html>
Copier après la connexion

partie CSS


.heighlight {
  background-color: blue;
  
}
.heighlight2 {
  background-color: red;
}

.alt{
  background-color:#ccc;
}
Copier après la connexion

jQuery Sélecteur d'attribut

Requête à l'aide de l'expression XPath pour sélectionner des éléments avec un attribut donné.

$("[href]") sélectionne tous les éléments avec l'attribut href.

$("[href='#']") sélectionne tous les éléments avec une valeur href égale à "#".

$("[href!='#']") sélectionne tous les éléments dont la valeur href n'est pas égale à "#".

$("[href$='.jpg']") sélectionne tous les éléments dont la valeur href se termine par ".jpg".

partie jquery, les autres parties sont les mêmes que ci-dessus.


$(document).ready(function(){
  attribute();
});

function attribute(){
  $('[href="#"]').addClass('heighlight'); 
}
Copier après la connexion

sélecteur CSS jQuery

.addClass() ou .css()


$(document).ready(function(){
 cssName();
});

function cssName(){
  $('p').css("background-color","pink");
}
Copier après la connexion

Sélecteur personnalisé jQuery


$(document).ready(function(){
 custom();
});

function custom(){
  $('tr:odd').addClass('alt');
}
Copier après la connexion

Pièce jointe

$("p:last")Le dernier élément

:pair$(" tr:even" )Tous les éléments pairs:impair$("tr:impair")Tous les impairs< éléments tr>
Sélecteur Instance Sélectionner
* $(" * ") Tous les éléments
#id $("#lastname") Élément avec id="nom"
.class $(".intro") Tous les éléments avec class="intro"
élément $("p") Tous les éléments

. classe .class $(".intro.demo") Tous les éléments avec class="intro" et class="demo"
:premier $("p:first") Premier

:eq(index) $(" ul li:eq(3)") Le quatrième élément de la liste (l'index commence à 0)
:gt(no ) $("ul li:gt(3)") Liste des éléments avec un indice supérieur à 3
:lt( non ) $("ul li:lt(3)") Liste des éléments avec un indice inférieur à 3
:not(selector) $("input:not(:empty)") Tous les éléments d'entrée qui ne sont pas vides
:en-tête $(":en-tête") Tous les éléments du titre

-

:animés Tous les éléments animés
:contient(texte) $(" :contains('W3School')") Contient tous les éléments de la chaîne spécifiée
:empty $(":empty") Tous les éléments sans nœuds enfants (élément)
:hidden $("p:hidden") Tous cachés

élément

:visible $("table:visible") Toutes les tables visibles
s1,s2,s3 $("th,td,.intro") Tous avec les éléments sélectionnés correspondants
[attribut] $("[href]") Tous les éléments avec l'attribut href
[attribute=value] $("[href='#']") La valeur de tous les attributs href Éléments égal à "#"
[attribut!=valeur] $("[href!=' # ']") Tous les éléments dont la valeur de l'attribut href n'est pas égale à "#"
[attribut$=value] $("[href$='.jpg']") La valeur de tous les attributs href contient des éléments se terminant par ".jpg"
:input $(":input") Tous les éléments
:text $(":text") Tous les
:password $(":password") Tous les éléments de type="password"
:radio $(":radio") Tous les éléments de type="radio"
:checkbox $(":checkbox") Tous les éléments de type="checkbox"
:submit $(":submit") Tous les éléments de type="submit"
:reset $ (":reset") Tous les éléments de type="reset"
:button $(":button") Tous les éléments de type="button"
:image $(":image") Tous les éléments de type="image"
:file $(":file") Tous les éléments de type="file"
:activé $(":enabled") Tous les éléments d'entrée activés
:désactivé $(":disabled") Tous les éléments d'entrée désactivés
:selected $(":selected") Tous les éléments d'entrée sélectionnés
:checked $(":checked") Tous les éléments d'entrée sélectionnés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quel logiciel est CrystalDiskmark ? -Comment utiliser crystaldiskmark ? Quel logiciel est CrystalDiskmark ? -Comment utiliser crystaldiskmark ? Mar 18, 2024 pm 02:58 PM

CrystalDiskMark est un petit outil de référence pour disques durs qui mesure rapidement les vitesses de lecture/écriture séquentielles et aléatoires. Ensuite, laissez l'éditeur vous présenter CrystalDiskMark et comment utiliser crystaldiskmark~ 1. Introduction à CrystalDiskMark CrystalDiskMark est un outil de test de performances de disque largement utilisé pour évaluer la vitesse et les performances de lecture et d'écriture des disques durs mécaniques et des disques SSD (SSD). ). Performances d’E/S aléatoires. Il s'agit d'une application Windows gratuite qui fournit une interface conviviale et divers modes de test pour évaluer différents aspects des performances du disque dur. Elle est largement utilisée dans les revues de matériel.

Comment télécharger foobar2000 ? -Comment utiliser foobar2000 Comment télécharger foobar2000 ? -Comment utiliser foobar2000 Mar 18, 2024 am 10:58 AM

foobar2000 est un logiciel qui peut écouter des ressources musicales à tout moment. Il vous offre toutes sortes de musique avec une qualité sonore sans perte. La version améliorée du lecteur de musique vous permet d'obtenir une expérience musicale plus complète et plus confortable. lire l'audio avancé sur l'ordinateur. L'appareil est transplanté sur le téléphone mobile pour offrir une expérience de lecture de musique plus pratique et efficace. La conception de l'interface est simple, claire et facile à utiliser. opérations pour démarrer rapidement. Il prend également en charge une variété de skins et de thèmes, personnalisez les paramètres en fonction de vos propres préférences et créez un lecteur de musique exclusif prenant en charge la lecture de plusieurs formats audio. Il prend également en charge la fonction de gain audio pour régler le volume. selon vos propres conditions auditives pour éviter les dommages auditifs causés par un volume excessif. Ensuite, laisse-moi t'aider

Comment utiliser l'application Baidu Netdisk Comment utiliser l'application Baidu Netdisk Mar 27, 2024 pm 06:46 PM

Le stockage cloud est devenu aujourd’hui un élément indispensable de notre vie quotidienne et de notre travail. En tant que l'un des principaux services de stockage cloud en Chine, Baidu Netdisk a gagné la faveur d'un grand nombre d'utilisateurs grâce à ses puissantes fonctions de stockage, sa vitesse de transmission efficace et son expérience de fonctionnement pratique. Et que vous souhaitiez sauvegarder des fichiers importants, partager des informations, regarder des vidéos en ligne ou écouter de la musique, Baidu Cloud Disk peut répondre à vos besoins. Cependant, de nombreux utilisateurs peuvent ne pas comprendre l'utilisation spécifique de l'application Baidu Netdisk, ce didacticiel vous présentera donc en détail comment utiliser l'application Baidu Netdisk. Si vous êtes toujours confus, veuillez suivre cet article pour en savoir plus ! Comment utiliser Baidu Cloud Network Disk : 1. Installation Tout d'abord, lors du téléchargement et de l'installation du logiciel Baidu Cloud, veuillez sélectionner l'option d'installation personnalisée.

Comment utiliser NetEase Mailbox Master Comment utiliser NetEase Mailbox Master Mar 27, 2024 pm 05:32 PM

NetEase Mailbox, en tant qu'adresse e-mail largement utilisée par les internautes chinois, a toujours gagné la confiance des utilisateurs grâce à ses services stables et efficaces. NetEase Mailbox Master est un logiciel de messagerie spécialement créé pour les utilisateurs de téléphones mobiles. Il simplifie grandement le processus d'envoi et de réception d'e-mails et rend le traitement de nos e-mails plus pratique. Alors comment utiliser NetEase Mailbox Master, et quelles sont ses fonctions spécifiques Ci-dessous, l'éditeur de ce site vous donnera une introduction détaillée, en espérant vous aider ! Tout d’abord, vous pouvez rechercher et télécharger l’application NetEase Mailbox Master dans la boutique d’applications mobiles. Recherchez « NetEase Mailbox Master » dans l'App Store ou Baidu Mobile Assistant, puis suivez les instructions pour l'installer. Une fois le téléchargement et l'installation terminés, nous ouvrons le compte de messagerie NetEase et nous connectons. L'interface de connexion est la suivante

Tutoriel BTCC : Comment lier et utiliser le portefeuille MetaMask sur l'échange BTCC ? Tutoriel BTCC : Comment lier et utiliser le portefeuille MetaMask sur l'échange BTCC ? Apr 26, 2024 am 09:40 AM

MetaMask (également appelé Little Fox Wallet en chinois) est un logiciel de portefeuille de cryptage gratuit et bien accueilli. Actuellement, BTCC prend en charge la liaison au portefeuille MetaMask. Après la liaison, vous pouvez utiliser le portefeuille MetaMask pour vous connecter rapidement, stocker de la valeur, acheter des pièces, etc., et vous pouvez également obtenir un bonus d'essai de 20 USDT pour la première liaison. Dans le didacticiel du portefeuille BTCCMetaMask, nous présenterons en détail comment enregistrer et utiliser MetaMask, ainsi que comment lier et utiliser le portefeuille Little Fox dans BTCC. Qu'est-ce que le portefeuille MetaMask ? Avec plus de 30 millions d’utilisateurs, MetaMask Little Fox Wallet est aujourd’hui l’un des portefeuilles de crypto-monnaie les plus populaires. Son utilisation est gratuite et peut être installée sur le réseau en tant qu'extension

Vous apprendre à utiliser les nouvelles fonctionnalités avancées d'iOS 17.4 « Protection des appareils volés » Vous apprendre à utiliser les nouvelles fonctionnalités avancées d'iOS 17.4 « Protection des appareils volés » Mar 10, 2024 pm 04:34 PM

Apple a déployé mardi la mise à jour iOS 17.4, apportant une multitude de nouvelles fonctionnalités et de correctifs aux iPhones. La mise à jour inclut de nouveaux emojis et les utilisateurs de l’UE pourront également les télécharger depuis d’autres magasins d’applications. En outre, la mise à jour renforce également le contrôle de la sécurité de l'iPhone et introduit davantage d'options de configuration de « Protection des appareils volés » pour offrir aux utilisateurs plus de choix et de protection. "iOS 17.3 introduit pour la première fois la fonction "Protection des appareils volés", ajoutant une sécurité supplémentaire aux informations sensibles des utilisateurs. Lorsque l'utilisateur est loin de chez lui et d'autres lieux familiers, cette fonction nécessite que l'utilisateur saisisse des informations biométriques pour la première fois. heure, et après une heure, vous devez saisir à nouveau les informations pour accéder et modifier certaines données, telles que la modification du mot de passe de votre identifiant Apple ou la désactivation de la protection de l'appareil volé.

Mar 22, 2024 pm 09:33 PM

Spécifications d'indentation et exemples du langage Go Le langage Go est un langage de programmation développé par Google. Il est connu pour sa syntaxe concise et claire, dans laquelle les spécifications d'indentation jouent un rôle crucial dans la lisibilité et la beauté du code. Cet article présentera les spécifications d'indentation du langage Go et les expliquera en détail à travers des exemples de code spécifiques. Spécifications d'indentation Dans le langage Go, les tabulations sont utilisées pour l'indentation au lieu des espaces. Chaque niveau d'indentation correspond à un onglet, généralement défini sur une largeur de 4 espaces. De telles spécifications unifient le style de codage et permettent aux équipes de travailler ensemble pour compiler

Comment utiliser la clé cd de la petite boîte noire Comment utiliser la clé cd de la petite boîte noire Mar 12, 2024 pm 07:34 PM

Comment utiliser la clé cd Little Black Box ? Pour faire simple, vous pouvez acheter directement des jeux sur la plateforme Steam depuis la Little Black Box, et vous recevrez un code de remboursement CDK après un achat réussi. Ensuite, utilisez ce code d'échange dans le Steam Mall pour acheter le jeu correspondant. De nombreux amis ne savent peut-être pas comment utiliser la petite clé cd de boîte noire. Ci-dessous, j'expliquerai les étapes d'échange en détail, j'espère que cela vous sera utile. Comment utiliser la clé cd Little Black Box 1. Copiez d'abord le code de remboursement CDK obtenu après l'achat du jeu Little Black Box. 2. Démarrez ensuite la plateforme Steam. 3. Cliquez sur l'option "Jeu" dans le menu dans le coin supérieur gauche. 4. Recherchez et cliquez sur « Activer le produit sur Steam » dans le nouveau menu. 5. Cliquez sur Suivant directement sur l'interface contextuelle. 6. Achetez la petite boîte noire

See all articles