How to get the image address with jquery

As a JavaScript framework that is widely used to develop Web pages, jQuery has many powerful functions and APIs to achieve various page interaction effects and dynamic operations. Among them, getting the image address is also one of the common operations in jQuery. This article will introduce how to use jQuery to get the image address.

1. Use the attr() method to obtain the image address

jQuery provides the attr() method to obtain the attribute value of the HTML element. Among them, obtaining the image address is to obtain the src attribute value of the img element. . The following is a sample code that uses the attr() method to obtain the image address:

// HTML代码
<img src="/static/imghwm/default1.png"  data-src="https://www.example.com/image.jpg"  class="lazy" alt="Example Image">

// jQuery代码
var imageUrl = $('img').attr('src');
console.log(imageUrl); // 输出：https://www.example.com/image.jpg

In the above code, $('img') means to obtain all img elements in the page, attr ('src') means to get the src attribute value of the img element, and finally store the image address in the variable imageUrl, and output it to the console through console.log().

2. Use the prop() method to obtain the image address

In addition to the attr() method, jQuery also provides the prop() method to obtain the attribute value of the element. Compared with the attr() method, the prop() method is more suitable for obtaining attribute values ​​of checkbox, radio and other form elements. But it is also feasible to get the src attribute value of the img element. The following is an example code that uses the prop() method to obtain the image address:

// HTML代码
<img src="/static/imghwm/default1.png"  data-src="https://www.example.com/image.jpg"  class="lazy" alt="Example Image">

// jQuery代码
var imageUrl = $('img').prop('src');
console.log(imageUrl); // 输出：https://www.example.com/image.jpg

In the above code, $('img') means to obtain all img elements in the page, prop ('src') means to get the src attribute value of the img element, and finally store the image address in the variable imageUrl, and output it to the console through console.log().

3. Use each() method to obtain multiple image addresses

The above two methods are operations for obtaining the image address of a single img element. But if there are multiple images on the page, we may need to obtain their image addresses and perform operations. At this point, we can use jQuery's each() method to traverse all img elements, and then obtain their image addresses in sequence. The following is an example code that uses the each() method to obtain the addresses of multiple images:

// HTML代码
<img src="/static/imghwm/default1.png"  data-src="https://www.example.com/image1.jpg"  class="lazy" alt="Example Image">
<img src="/static/imghwm/default1.png"  data-src="https://www.example.com/image2.jpg"  class="lazy" alt="Example Image">
<img src="/static/imghwm/default1.png"  data-src="https://www.example.com/image3.jpg"  class="lazy" alt="Example Image">

// jQuery代码
$('img').each(function() {
    var imageUrl = $(this).attr('src');
    console.log(imageUrl);
});

In the above code, $('img') means to obtain all img elements in the page, through each () method traverses each img element and executes the callback function, $(this) represents the currently traversed img element, attr('src') represents getting the src attribute of the current img element value, and finally output the image address to the console.

Summary:

The above is the method and sample code for using jQuery to obtain the image address. You can choose one or more of these methods to operate based on specific needs. At the same time, it should be noted that before obtaining the image address, you need to ensure that the img element in the page has been loaded, otherwise the wrong address may be obtained.

The above is the detailed content of How to get the image address with jquery. For more information, please follow other related articles on the PHP Chinese website!