Ausführliche Erläuterung der Verwendung von jquery zum Abrufen von Elementen, zum Umschließen von Elementen und zum Einfügen von Elementattributen

Get element

.eq(index) Ruft ein bestimmtes jQuery-Objekt in der jQuery-Objektsammlung nach Index ab.

.eq(-index) Ruft eine jQuery-Objektsammlung in umgekehrter Reihenfolge nach Index ab Ein bestimmtes jQuery-Objekt

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

.get(index) Ruft das DOM-Objekt eines bestimmten Index im jQuery-Sammlungsobjekt ab (konvertiert das jQuery-Objekt automatisch in ein DOM-Objekt)

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

.get() Konvertiert ein jQuery-Sammlungsobjekt in ein DOM-Sammlungsobjekt und gibt

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

.index() / .index(selector) / .index(element) aus dem zurück gegebene Sammlung Suchen Sie einen bestimmten Elementindex

1 Wenn kein Parameter vorhanden ist, geben Sie den ersten Elementindex zurück

2 Wenn der Parameter ein DOM-Objekt oder ein jQuery-Objekt ist, geben Sie den Index zurück Parameter in der Sammlung

3. Wenn der Parameter ein Selektor ist, geben Sie den ersten passenden Elementindex zurück. Wenn er nicht gefunden wird, geben Sie -1 zurück

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

.clone([withDataAndEvents][, deepWithDataAndEvents]) Erstellen Sie eine tiefe Kopie der jQuery-Sammlungskopie (untergeordnete Elemente werden ebenfalls kopiert). Die Shuju- und Bindungsereignisse des Kopierobjekts sind standardmäßig nicht aktiviert

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

.parent ([selector]) Ruft das übergeordnete Element des jQuery-Objekts ab, das mit dem Selektor

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

übereinstimmt.parents([selector]) Ruft die Vorgängerelemente des jQuery-Objekts ab, die mit dem Selektor

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

Element einfügen

.append(content[,content] ) / .append(function(index,html)) Inhalt an das Ende des Objekts anhängen

1 kann auf einmal hinzugefügt werden und der Inhalt kann DOM-Objekte, HTML-Strings, jQuery-Objekte sein

2 . Wenn der Parameter eine Funktion ist, kann die Funktion ein DOM-Objekt, einen HTML-String oder ein jQuery-Objekt zurückgeben. Der Parameter ist die Elementposition in der Sammlung und der ursprüngliche HTML-Wert

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

.appendTo(target) fügt das Objekt ein. Gehe zum Ende des Zielelements. Das Zielelement kann ein Selektor sein , DOM-Objekt, HTML-String, Elementsammlung, jQuery-Objekt;

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

.prepend(content[,content]) / .prepend(function( index,html)) Inhalt an den Kopf anhängen des Objekts. Die Verwendung ähnelt append

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

.prependTo(target) Fügt das Objekt in den Kopf des Zielelements ein. Die Verwendung ähnelt prepend

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

.before([content][,content]) / .before(function) Fügt Inhalt vor dem Objekt ein (nicht am Kopf, sondern außerhalb, parallel zum Objekt), die Parameter ähneln append

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

.insertBefore(target) fügt das Objekt vor dem Ziel ein (ebenfalls nicht der Kopf, aber die gleiche Ebene)

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

.after([content][,content]) / .after(function (index)) Fügen Sie im Gegensatz zu zuvor den Inhalt hinter dem Objekt ein (nicht am Ende, sondern außerhalb, auf derselben Ebene wie das Objekt). Die Parameter ähneln append

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

.insertAfter(target). ) ist das Gegenteil von insertBefore. Das Objekt wird nach dem Ziel eingefügt (ebenfalls nicht am Ende, sondern auf der gleichen Ebene)

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

Wrapping element

.wrap(wrappingElement) / .wrap(function(index)) umschließt jedes Objekt. Eine Ebene der HTML-Struktur, die Selektor, Element, HTML-String, jQuery-Objekt sein kann

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

$( ".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>

.wrapAll(wrappingElement) umschließt alle übereinstimmenden Objekte in derselben HTML-Struktur

Wickeln Sie eine HTML-Struktur um alle Elemente im Satz übereinstimmender Elemente.

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

$( ".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>

.wrapInner(wrappingElement) / . wrapInner(function(index)) , das ist schwer zu erklären, schauen Sie sich einfach das Beispiel an und Sie werden es verstehen.

Wickeln Sie eine HTML-Struktur um den Inhalt jedes Elements in der Menge der übereinstimmenden Elemente.

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

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

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

.unwap () Entfernen Sie das übergeordnete Element des DOM-Elements.

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

Attributmethode

.val() Rufen Sie den Wert des Elements ab

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

.val(value) / .val(function(index,value)) legt den Wert für das Element fest. Index und Wert beziehen sich beim Festlegen auch auf den Index und den ursprünglichen Wert des Elements jedes Element in der Sammlung

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

.attr (attributeName) Ruft den Wert eines bestimmten Attributs des Elements ab

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

.attr(attributeName,value) / .attr(attributesJson ) / .attr( attributeName, function(index, attr) ) Weisen Sie dem Elementattribut einen Wert zu

$( "#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";
});

.prop( propertyName ) Ruft einen Eigenschaftswert eines Elements ab

$( elem ).prop( "checked" )

.prop(propertyName,value) / .prop(propertiesJson) / .prop(propertyName,function(index,oldPropertyValue) )) Elementeigenschaften Werte zuweisen

$( "input" ).prop( "checked", true );
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
  return !val;
});
$( "input[type='checkbox']" ).prop({
  disabled: true
});

.data(key,value ) / .value(json) Fügen Sie Daten zu HTML-DOM-Elementen hinzu. HTML5-Elemente haben bereits data-*-Attribute

$( "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

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von jquery zum Abrufen von Elementen, zum Umschließen von Elementen und zum Einfügen von Elementattributen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!