Explication détaillée de l'utilisation de jquery pour obtenir des éléments, envelopper des éléments et insérer des attributs d'élément

Obtenir l'élément

.eq(index) Obtenez un objet jQuery spécifique dans la collection d'objets jQuery par index

.eq(-index) Obtenez une collection d'objets jQuery dans l'ordre inverse par index Un objet jQuery spécifique

$( "li" ).eq( 2 ).css( "background-color", "red" );

.get(index) Obtient le Objet DOM d'un index spécifique dans l'objet de collection jQuery (convertit automatiquement l'objet jQuery en objet DOM)

console.log( $( "li" ).get( -1 ) );

.get() Convertit un objet de collection jQuery en objet de collection DOM et renvoie

console.log( $( "li" ).get() );

.index() / .index(selector) / .index(element) du collection donnée Rechercher un index d'élément spécifique

1 S'il n'y a pas de paramètre, renvoie le premier index d'élément

2 Si le paramètre est un objet DOM ou un objet jQuery, renvoie l'index du. paramètre dans la collection

3. Si le paramètre est un sélecteur, renvoie le premier index d'élément correspondant. S'il n'est pas trouvé, renvoie -1

var listItem = $( "#bar" );
alert( "Index: " + $( "li" ).index( listItem ) );

.clone ([withDataAndEvents][, deepWithDataAndEvents]) Créez une copie complète de la copie de la collection jQuery (les éléments enfants seront également copiés), les événements shuju et de liaison de l'objet de copie ne sont pas autorisés par défaut

$( ".hello" ).clone().appendTo( ".goodbye" );

.parents([sélecteur ]) Récupérez les éléments ancêtres de l'objet jQuery qui correspondent au sélecteur

$( "li.item-a" ).parent('ul').css( "background-color", "red" );

Insérer un élément

.append(content[,content] ) / .append(function(index,html) ) Ajouter du contenu à la fin de l'objet

$( "span.selected" ) .parents( "div" ) .css( "border", "2px red solid" )

1. Plusieurs contenus peuvent être ajoutés en même temps, et le contenu peut être des objets DOM, des chaînes HTML, des objets jQuery

2 si le paramètre. est une fonction, la fonction peut renvoyer un objet DOM, une chaîne HTML ou un objet jQuery. Le paramètre est la position de l'élément dans la collection et la valeur HTML d'origine

.appendTo(target) insère l'objet Allez à la fin de l'élément cible. L'élément cible peut être un sélecteur, un objet DOM, une chaîne HTML, une collection d'éléments, un objet jQuery

$( ".inner" ).append( "<p>Test</p>" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).append( "<strong>Hello</strong>" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) );

.prepend(content[, content]) / .prepend(function( index,html)) Ajouter du contenu à la tête de l'objet L'utilisation est similaire à append

$( "h2" ).appendTo( $( ".container" ) );
$( "<p>Test</p>" ).appendTo( ".inner" );

.prependTo(target) Insérer l'objet dans la tête de. l'élément cible. L'utilisation est similaire à prepend

$( ".inner" ).prepend( "<p>Test</p>" );

.before([content][,content]) / .before(function) Insérer du contenu devant l'objet (pas la tête, mais à l'extérieur , parallèle à l'objet), les paramètres sont similaires à append

$( "<p>Test</p>" ).prependTo( ".inner" );

.insertBefore(target) insère l'objet avant la cible (pas non plus la tête, mais le même niveau)

$( ".inner" ).before( "<p>Test</p>" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "<b>Hello</b>" );
$( "p" ).before( document.createTextNode( "Hello" ) );

.after([content][,content]) / .after(function（ index)) Contrairement à avant, insérez du contenu derrière l'objet (pas à la queue, mais à l'extérieur, au même niveau que l'objet). Les paramètres sont similaires à append

$( "h2" ).insertBefore( $( ".container" ) );

.insertAfter(target) est l'opposé de insertBefore L'objet est inséré après la cible (pas non plus à la queue, mais au même niveau)

<. 🎜>

Élément d'emballage

$( ".inner" ).after( "<p>Test</p>" );
$( "p" ).after( document.createTextNode( "Hello" ) );

.wrap(wrappingElement) / .wrap(function(index)) enveloppe chaque objet Une couche de structure HTML, qui peut être un sélecteur, un élément, une chaîne HTML, un objet jQuery

$( "<p>Test</p>" ).insertAfter( ".inner" );
$( "p" ).insertAfter( "#foo" );

.wrapAll(wrappingElement) enveloppe tous les objets correspondants dans la même structure HTML

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div></div>

Enroulez une structure HTML autour de tous les éléments de l'ensemble des éléments correspondants.

$( ".inner" ).wrap( "<div class=&#39;new&#39;></div>" );

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapInner(wrappingElement) / .wrapInner(function(index)) , c'est difficile à expliquer, vous pouvez le comprendre en regardant l'exemple

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div></div>

Envelopper un Structure HTML autour du contenu de chaque élément dans l'ensemble des éléments correspondants.

$( ".inner" ).wrapAll( "<div class=&#39;new&#39; />");

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

.unwap () Supprime le parent de l'élément DOM

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div></div>

$( ".inner" ).wrapInner( "<div class=&#39;new&#39;></div>");

Méthode d'attribut

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

.val() Obtenez la valeur de l'élément

pTags = $( "p" ).unwrap();

.val(value) / .val(function(index,value)) définit la valeur de l'élément. L'index et la valeur font également référence à l'index et à la valeur d'origine de l'élément lors de sa définition pour chaque élément de la collection

.attr (attributeName) Obtenez la valeur d'un attribut spécifique de l'élément

$( "input:checkbox:checked" ).val();

.attr(attributeName,value) / .attr(attributesJson) / .attr(attributName, function(index, attr) ) Attribuer une valeur à l'attribut de l'élément

$( "input" ).val( ‘hello’ );
$( "input" ).on( "blur", function() {
  $( this ).val(function( i, val ) {
    return val.toUpperCase();
  });
});

.prop ( propertyName ) Obtient une valeur de propriété d'un élément

var title = $( "em" ).attr( "title" );

.prop(propertyName,value) / .prop(propertiesJson) / .prop(propertyName,function(index,oldPropertyValue) )) Attribuer des valeurs aux propriétés de l'élément

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});
$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});

.data(key,value) / .value(json) Ajouter des données aux éléments HTML DOM Les éléments HTML5 ont déjà des attributs data-*

$( elem ).prop( "checked" )

.

$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );

.data(key) / .data() 获取获取data设置的数据或者HTML5 data-*属性中的数据

alert( $( "body" ).data( "foo" ) );
alert( $( "body" ).data() );
alert( $( "body" ).data( "foo" ) ); // undefined
$( "body" ).data( "bar", "foobar" );
alert( $( "body" ).data( "bar" ) ); // foobar

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!