Detailed explanation of the usage of jquery to get elements, wrap elements and insert element attributes-JS Tutorial-php.cn

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" );

Copy after login

.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 ) );

Copy after login

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

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

Copy after login

.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 ) );

Copy after login

.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" );

Copy after login

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

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

Copy after login

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

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

Copy after login

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" ) );

Copy after login

.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" );

Copy after login

.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>" );

Copy after login

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

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

Copy after login

.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" ) );

Copy after login

.insertBefore(target) Insert the object before the target (also not the head, but at the same level)

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

Copy after login

.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" ) );

Copy after login

.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" );

Copy after login

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>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

.unwap() Unwap() Remove the parent of the element

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

Copy after login

Attribute method

.val() Get the value of the element

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

Copy after login

.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();
  });
});

Copy after login

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

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

Copy after login

.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";
});

Copy after login

.prop( propertyName ) Get element A certain property value

$( elem ).prop( "checked" )

Copy after login

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

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

Copy after login

.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 ] } );

Copy after login

.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

Copy after login

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!