jquery取得元素，包裹元素和插入元素屬性用法詳解-js教程-PHP中文網

取得元素

.eq(index) 按index取得jQuery物件集合中的某個特定jQuery物件

.eq(-index) 依逆序index取得jQuery物件集合中的某個特定jQuery物件

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

登入後複製

.get(index) 取得jQuery集合物件中某個特定index的DOM物件（將jQuery物件自動轉換為DOM物件）

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

登入後複製

.get() 將jQuery集合物件轉換為DOM集合物件並傳回

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

登入後複製

.index() / .index(selector)/ .index(element) 從給定集合中找出特定元素index

1. 沒參數傳回第一個元素index

2.如果參數是DOM對像或jQuery對象，則傳回參數在集合中的index

#3.如果參數是選擇器，傳回第一個符合元素index，沒有找到回傳-1

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

登入後複製

.clone（[withDataAndEvents][,deepWithDataAndEvents]) 建立jQuery集合的一份deep copy（子元素也會被複製），預設不copy物件的shuju和綁定事件

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

登入後複製

.parent([selector]) 取得jQuery物件符合selector的父元素

$( "li.item-a" ).parent(&#39;ul&#39;).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 string、 jQuery物件

2. 如果參數是function，function可以回傳DOM物件、HTML string 、 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) 把對象插入到目標元素尾部，目標元素可以是selector, DOM對象, HTML string , 元素集合,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類似

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

登入後複製

.before([content][,content]) / .before(function) 在物件前面(不是頭部，而是外面，和物件並列同級)插入內容，參數和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) 把物件插入到target之前（同樣不是頭部，是同級）

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

登入後複製

.after([content][,content]) / .after(function（index）) 和before相反，在物件後面(不是尾部，而是外面，和物件並列同級)插入內容，參數和append類似

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

登入後複製

.insertAfter(target) 和insertBefore相反，把物件插入到target之後（同樣不是尾部，是同級）

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

登入後複製

包元素

#.wrap(wrappingElement) / .wrap(function(index)) 為每個物件包裹一層HTML結構，可以是selector, element, HTML string, jQuery object

<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) 把所有匹配物件包裹在同一個HTML結構中

Wrap an HTML structure around all elements in the set of matched elements.

<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))包裹匹配元素內容，這個不好說，一看例子就懂

Wrap an HTML structure around the content of each element in the set of matched elements.

<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() 把DOM元素的parent移除

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

登入後複製

屬性方法

.val() 取得元素的value值

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

登入後複製

.val(value) /.val(function(index,value )) 為元素設定值，index和value同樣是指在為集合中每個元素設定的時候該元素的index和原value值

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

登入後複製

.attr(attributeName) 取得元素特定屬性的值

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

登入後複製

.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ) 為元素屬性賦值

$( "#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 ) 取得元素屬性賦值

$( elem ).prop( "checked" )

登入後複製

.prop( propertyName ) 取得元素某特性值

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

登入後複製

.prop(propertyName,value) / .prop(propertiesJson) / .prop(propertyName,function(index,oldPropertyValue)) 為元素特性賦值

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

登入後複製

###.data( key,value) / .value(json) 為HTML DOM元素新增數據，HTML5元素已有data-*屬性###

$( "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中文網其他相關文章！