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

Utilisation et exemples de quatre sélecteurs jQuery

巴扎黑original: 2017-06-20 16:31:311127parcourir

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 e388a4556c0f65e1904146cc1a846bee

$("p.intro") sélectionne tous les éléments e388a4556c0f65e1904146cc1a846bee avec class="intro".

$("p#demo") sélectionne tous les éléments e388a4556c0f65e1904146cc1a846bee avec id="demo".

Exemple de code :

partie jquery

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


function tagName(){
  $(&#39;p&#39;).addClass(&#39;heighlight&#39;);
}

function idName(){
  $(&#39;#p&#39;).addClass(&#39;heighlight2&#39;);
}
function className(){
  $(&#39;p.pClass&#39;).addClass(&#39;heighlight2&#39;);
}

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>

partie CSS

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

.alt{
  background-color:#ccc;
}

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(){
  $(&#39;[href="#"]&#39;).addClass(&#39;heighlight&#39;); 
}

sélecteur CSS jQuery

.addClass() ou .css()

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

function cssName(){
  $(&#39;p&#39;).css("background-color","pink");
}

Sélecteur personnalisé jQuery

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

function custom(){
  $(&#39;tr:odd&#39;).addClass(&#39;alt&#39;);
}

Pièce jointe

$("p:last")Le dernier élémente388a4556c0f65e1904146cc1a846bee:pair$(" tr:even" )Tous les éléments pairsa34de1251f0d9fe1e645927f19a896e8:impair$("tr:impair")Tous les impairs5cc624d72b373dfbad0c7409c590f729

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émentse388a4556c0f65e1904146cc1a846bee
. classe .class	$(".intro.demo")	Tous les éléments avec class="intro" et class="demo"

:premier	$("p:first")	Premiere388a4556c0f65e1904146cc1a846bee



: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 titre4a249f0d628e2318394fd9b75b4636b1 - 4e9ee319e0fa4abc21ff286eeb145ecc
: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 e388a4556c0f65e1904146cc1a846bee é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émentsd5fd7aea971a85678ba271703566ebfd
:text	$(":text")	Tous les
:password	$(":password")	Tous les éléments d5fd7aea971a85678ba271703566ebfd de type="password"
:radio	$(":radio")	Tous les éléments d5fd7aea971a85678ba271703566ebfd de type="radio"
:checkbox	$(":checkbox")	Tous les éléments d5fd7aea971a85678ba271703566ebfd de type="checkbox"
:submit	$(":submit")	Tous les éléments d5fd7aea971a85678ba271703566ebfd de type="submit"
:reset	$ (":reset")	Tous les éléments d5fd7aea971a85678ba271703566ebfd de type="reset"
:button	$(":button")	Tous les éléments d5fd7aea971a85678ba271703566ebfd de type="button"
:image	$(":image")	Tous les éléments d5fd7aea971a85678ba271703566ebfd de type="image"
:file	$(":file")	Tous les éléments d5fd7aea971a85678ba271703566ebfd 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：

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

Article précédent：Introduction à l'utilisation de l'élément sélecteur jQueryArticle suivant：Introduction à l'utilisation de l'élément sélecteur jQuery

Articles Liés

Voir plus