요소 가져오기, 요소 래핑 및 요소 속성 삽입을 위한 jquery 사용법에 대한 자세한 설명-JS 튜토리얼-php.cn

요소 가져오기, 요소 래핑 및 요소 속성 삽입을 위한 jquery 사용법에 대한 자세한 설명

伊谢尔伦

풀어 주다： 2017-06-19 14:40:43

원래의

1785명이 탐색했습니다.

Get elements

.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 개체, 컬렉션에 있는 매개 변수의 인덱스를 반환합니다. ][,deepWithDataAndEvents]) jQuery 컬렉션 복사본의 전체 복사본을 만듭니다(하위 요소도 복사됨). 복사본 개체의 shuju 및 바인딩 이벤트는 기본적으로 복사되지 않습니다.

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

로그인 후 복사

.parent([selector]) 부모 가져오기 선택기와 일치하는 jQuery 개체의 요소

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

로그인 후 복사

.parents([selector]) 선택기와 일치하는 jQuery 개체의 상위 요소 가져오기

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

로그인 후 복사

Insert elements

.append(content[,content]) / .append (function(index,html)) 객체의 끝에 내용을 추가합니다

1. 한 번에 여러 항목을 추가할 수 있습니다. 내용은 DOM 객체, HTML 문자열, jQuery 객체

2일 수 있습니다. , 함수는 DOM 개체, HTML 문자열, jQuery 개체를 반환할 수 있으며 매개 변수는 컬렉션의 요소 위치이며 원래 HTML 값

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

로그인 후 복사

.appendTo(target)은 대상 요소의 끝에 개체를 삽입합니다. 요소는 선택기, DOM 개체, HTML 문자열, 요소 컬렉션, 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)) 콘텐츠를 개체의 헤드에 추가합니다.

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

로그인 후 복사

.prependTo(target) 대상 요소의 헤드에 객체를 삽입하는 것과 유사합니다.

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

로그인 후 복사

.before([content][,content] ) / . before(함수) 개체 앞에 내용을 삽입합니다(헤드가 아니라 개체와 동일한 수준에서 외부). 매개변수는 추가와 유사합니다.

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

로그인 후 복사

.insertBefore(target) 대상 앞에 개체를 삽입합니다. 헤더도 아님) 하단은 같은 레벨입니다)

$( ".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)) 는 before와 반대, 객체 뒤(꼬리 아님, 그러나 외부에서는 동일한 레벨의 객체와 평행) 콘텐츠 및 매개변수 삽입은 Append

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

로그인 후 복사

와 유사합니다.insertAfter(target)는 insertBefore와 반대이며 대상 뒤에 객체를 삽입합니다(또한 꼬리가 아니라 같은 수준)

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

로그인 후 복사

Wrapping elements

.wrap(wrappingElement) / .wrap( function(index))는 선택기, 요소, HTML 문자열, jQuery 객체

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

로그인 후 복사

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

로그인 후 복사

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

로그인 후 복사

.wrapAll( WrappingElement)는 일치하는 모든 개체를 동일한 HTML 구조로 래핑합니다.

일치하는 요소 집합의 모든 요소 주위에 HTML 구조를 래핑합니다.

<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>

로그인 후 복사

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

로그인 후 복사

.wrapInner(wrappingElement) / .wrapInner(function(index)) 일치하는 요소의 콘텐츠를 래핑합니다. . 예를 보면 이해하기 어렵습니다

일치하는 요소 집합에서 각 요소의 콘텐츠를 HTML 구조로 감싸세요.

<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>

로그인 후 복사

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

로그인 후 복사

.unwap() DOM 요소의 부모를 제거하세요

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

로그인 후 복사

속성 메서드

.val() 요소의 값 가져오기

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

로그인 후 복사

.val(value) / .val(function(index,value)) 요소의 값을 설정합니다. 인덱스와 값도 인덱스를 참조합니다. 컬렉션의 각 요소에 대해 설정할 때 요소의 원래 값

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

로그인 후 복사

.attr(attributeName) 특정 요소를 가져옵니다. 속성의 값

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

로그인 후 복사

.attr(attributeName, value) / .attr(attributesJson) / .attr ( attributeName, function(index, attr) ) 요소 속성에 값 할당

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

로그인 후 복사

.prop( propertyName ) 요소의 특정 속성 값 가져오기

$( "#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,value) / .prop(propertiesJson ) / .prop(propertyName,function(index,oldPropertyValue)) 요소 속성에 값 할당

$( elem ).prop( "checked" )

로그인 후 복사

.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!