Detailed explanation of the usage of jquery to get elements, wrap elements and insert element attributes

Get elements

.eq(index) Get a specific jQuery object in the jQuery object collection by index

.eq(-index) Get a jQuery object collection in reverse order by index A specific jQuery object

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

.get(index) Gets the DOM object of a specific index in the jQuery collection object (automatically converts the jQuery object into a DOM object)

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

.get() Convert jQuery collection object to DOM collection object and return

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

.index() / .index(selector)/ .index(element) Find specific element index# from the given collection

##1. If there is no parameter, return the index of the first element

2. If the parameter is a DOM object or jQuery object, return the index of the parameter in the collection

3. If the parameter Is the selector, returns the first matching element index, if not found, returns -1

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

.clone([withDataAndEvents][,deepWithDataAndEvents]) creates a deep copy of the jQuery collection (child elements will also be copied ), the shuju and binding of the object are not copied by default

Event

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

.parent([selector]) Get the parent element of the jQuery object that matches the selector

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

.parents( [selector]) Get the ancestor element of the jQuery object that matches the selector

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

Insert element

.append(content[,content]) / .append(function(index,html)) to the object Appending content at the end

1. You can add multiple contents at one time, and the content can be DOM objects, HTML strings, jQuery objects

2. If the parameter is a function, the function can return DOM objects, HTML strings , jQuery object, the parameters are the element position in the collection and the original html value

$( ".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) Insert the object at the end of the target element. The target element can be selector, DOM object, HTML string , element collection, jQuery object;

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

.prepend(content[,content]) / .prepend(function(index,html)) Append content to the head of the object, the usage is similar to append

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

.prependTo(target) inserts the object into the head of the target element. The usage is similar to prepend

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

.before([content][,content]) / .before(function) in front of the object (Not the head, but outside, at the same level as the object) Insert content, the parameters are similar to 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) Insert the object before the target (also not the head, but at the same level)

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

.after([content][,content]) / .after(function(index)) Contrary to before, insert content after the object (not at the tail, but outside, at the same level as the object) , the parameters are similar to append

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

.insertAfter(target) is the opposite of insertBefore, inserting the object after the target (also not at the tail, but at the same level)

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

Wrapping element

.wrap(wrappingElement) / .wrap(function(index)) Wrap an HTML structure for each object, which can be 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) Wrap all Matched objects are wrapped in the same HTML structure

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() Unwap() Remove the parent of the element

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

Attribute method

.val() Get the value of the element

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

.val(value) /.val(function(index,value )) Set the value for the element. Index and value also refer to the index and original value of the element when setting it for each element in the collection.

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

.attr(attributeName) Gets the value of the specific attribute of the element

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

.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ) Assign value to element attribute

$( "#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 ) Get element A certain property value

$( elem ).prop( "checked" )

.prop(propertyName,value) / .prop(propertiesJson) / .prop(propertyName,function(index,oldPropertyValue)) Assign a value to the element property

$( "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) Add data to HTML DOM elements. HTML5 elements already have data-* attributes

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

The above is the detailed content of Detailed explanation of the usage of jquery to get elements, wrap elements and insert element attributes. For more information, please follow other related articles on the PHP Chinese website!