jquery を使用して要素を取得し、要素をラップし、要素属性を挿入するための詳細な説明

要素の取得

.eq(index) jQueryオブジェクトコレクション内の特定のjQueryオブジェクトをインデックスにより取得します

.eq(-index) jQueryオブジェクトコレクション内の特定のjQueryオブジェクトをインデックスにより逆順に取得します

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

.get (index) jQueryコレクションオブジェクト内の特定のインデックスのDOMオブジェクトを取得(jQueryオブジェクトをDOMオブジェクトに自動変換)

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

.get() jQueryコレクションオブジェクトをDOMコレクションオブジェクトに変換して

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

を返す

.index () / .index(selector)/ .index(element) 指定されたコレクションから特定の要素のインデックスを検索します

1。パラメータがない場合は、最初の要素のインデックスを返します

2。 DOM オブジェクトまたは jQuery オブジェクト、コレクション内のパラメーターのインデックスを返します

3。パラメーターがセレクターの場合は、最初に一致した要素のインデックスを返します。見つからない場合は、-1

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

.clone ([withDataAndEvents)] を返します。 ][,deepWithDataAndEvents]) jQuery コレクションのコピーのディープ コピーを作成します (子要素もコピーされます)、コピー オブジェクトのShuju イベントとバインディング イベントはデフォルトではコピーされません

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

.parent([selector]) 親を取得セレクターに一致する jQuery オブジェクトの要素

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

.parents([selector]) セレクターに一致する jQuery オブジェクトの祖先要素を取得

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

要素を挿入

.append(content[,content]) / .append (function(index,html)) オブジェクトの末尾にコンテンツを追加します

1. 一度に複数の項目を追加できますコンテンツ、コンテンツは DOM オブジェクト、HTML 文字列、jQuery オブジェクトにすることができます

2. パラメーターが function の場合, 関数は DOM オブジェクト、HTML 文字列、jQuery オブジェクトを返すことができ、パラメータはコレクション内の要素の位置と元の HTML 値です

$( ".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) はターゲット要素の最後にオブジェクトを挿入します。要素はセレクター、DOM オブジェクト、HTML 文字列、要素コレクション、jQuery オブジェクトにすることができます;

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

.prepend(content[,content]) / .prepend(function(index, html)) コンテンツをオブジェクトの先頭に追加します使い方は append と似ています。

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

.prependTo(target) 使い方は prepend([content][,content] ) / と似ています。 before(function) オブジェクトの前にコンテンツを挿入します (先頭ではなく、オブジェクトと同じレベルの外側に)。 パラメーターは、append と似ています。 ターゲットの前にオブジェクトを挿入します。ヘッダーでもありません) 一番下は同じレベルです)

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

.after([content][,content]) / .after(function(index)) は前とは逆で、オブジェクトの後ろにあります（尾部ではなく、コンテンツとパラメーターの挿入は 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" ) );

と似ています。insertAfter(target) は insertBefore の逆で、ターゲットの後にオブジェクトを挿入します (これも末尾ではなく、同じレベル)

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

要素のラッピング

.wrap(wrappingElement) / .wrap( function(index)) は、セレクター、要素、HTML 文字列、jQuery オブジェクトなどの各オブジェクトの HTML 構造をラップします

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

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

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

.wrapAll( WrappingElement) は、一致するすべてのオブジェクトを同じ HTML 構造内でラップします

一致した要素のセット内のすべての要素の周囲に HTML 構造をラップします。

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

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

.wrapInner(wrappingElement) / .wrapInner(function(index)) 一致した要素のコンテンツをラップします. 言うのは難しいです。例を見ると理解できます

一致した要素のセット内の各要素のコンテンツを囲む HTML 構造をラップします。

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

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

.unwap() DOM 要素の親を削除します

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

Attributeメソッド

.val() 要素の値を取得します

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

.val(value) / .val(function(index,value)) 要素の値を設定します。 Indexとvalueはインデックスと値も参照します。コレクション内の各要素に設定する場合の要素の元の値

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

.attr(attributeName) 要素固有の属性の値を取得します

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

.attr(attributeName, value) / .attr(attributesJson) / .attr (attributeName, function(index, attr) ) 要素の属性に値を代入

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

.prop( propertyName ) 要素の特定の属性の値を取得

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

.prop(propertyName,value) / .prop(propertiesJson) ) / .prop(propertyName,function(index,oldPropertyValue)) 要素のプロパティに値を割り当てる

$( "#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) を HTML として DOM 要素にデータを追加します。HTML5 要素には既にデータがあります-* 属性

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

以上がjquery を使用して要素を取得し、要素をラップし、要素属性を挿入するための詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。