Home Web Front-end JS Tutorial Detailed explanation of the usage of jquery to get elements, wrap elements and insert element attributes

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

Jun 19, 2017 pm 02:40 PM
jquery element Obtain

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('ul').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
Copy after login
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
Copy after login
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
Copy after login
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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Where to get Google security code Where to get Google security code Mar 30, 2024 am 11:11 AM

Google Authenticator is a tool used to protect the security of user accounts, and its key is important information used to generate dynamic verification codes. If you forget the key of Google Authenticator and can only verify it through the security code, then the editor of this website will bring you a detailed introduction on where to get the Google security code. I hope it can help you. If you want to know more Users please continue reading below! First open the phone settings and enter the settings page. Scroll down the page and find Google. Go to the Google page and click on Google Account. Enter the account page and click View under the verification code. Enter your password or use your fingerprint to verify your identity. Obtain a Google security code and use the security code to verify your Google identity.

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ​​the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

How to install dual SIM on Realme 12 Pro? How to install dual SIM on Realme 12 Pro? Mar 18, 2024 pm 02:10 PM

Although the general operations of domestic mobile phones are very similar, there are still some differences in some details. For example, different mobile phone models and manufacturers may have different dual-SIM installation methods. Erzhenwo 12Pro, a new mobile phone, also supports dual-SIM dual standby, but how should dual-SIM be installed on this phone? How to install dual SIM on Realme 12Pro? Remember to turn off your phone before installation. Step 1: Find the SIM card tray: Find the SIM card tray of the phone. Usually, in the Realme 12 Pro, the SIM card tray is located on the side or top of the phone. Step 2: Insert the first SIM card. Use a dedicated SIM card pin or a small object to insert it into the slot in the SIM card tray. Then, carefully insert the first SIM card.

Understand the role and application scenarios of eq in jQuery Understand the role and application scenarios of eq in jQuery Feb 28, 2024 pm 01:15 PM

jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s

How to get fake future crystal coins How to get fake future crystal coins Mar 22, 2024 am 08:00 AM

Many players want to know how to obtain fake future crystal coins. There are actually four different methods, including purchasing gift packages, completing tasks, producing goods, developing land, etc. Players can choose different ways to earn crystal coins according to their needs. The specific content is as follows: Get up and take a look at this guide on how to obtain fake future crystal coins. Fake Future Guide: How to get Fake Future Crystal Coins 1. Purchase the gift package mall to purchase the crystal coin gift package. 2. Obtained by completing tasks and completing main and side tasks. 3. Produce goods. Produce goods in your home to obtain crystal coins. 4. Developing land can also be obtained by developing land, but the reward is one-time.

How to tell if a jQuery element has a specific attribute? How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

See all articles