Utilisation et exemples de quatre sélecteurs jQuery-js tutoriel-php.cn

Utilisation et exemples de quatre sélecteurs jQuery

巴扎黑

Libérer： 2017-06-20 16:31:31

original

1130 Les gens l'ont consulté

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!