How to get element content with jquery

jQuery is a fast, small, and powerful JavaScript library developed on the basis of JavaScript. At its core, it is an easy-to-use, powerful selector for selecting and manipulating elements in HTML documents. In jQuery, there are many ways to obtain the content of elements. This article will explain to you some of the most commonly used methods.

1. The text() method gets the text content of the element

In jQuery, you can use the text() method to get the text content of the element. This method is suitable for situations where the selected element does not contain other tags or elements. For example, for the following HTML code:

<p>这是一个段落</p>

You can use the following code to get the text content of the paragraph:

var text = $("p").text();

2. The html() method gets the HTML content of the element

If The selected element contains other tags or elements, and its HTML content can be obtained using the html() method. For example, for the following HTML code:

    
标题
    <p>这是一个段落</p>

You can use the following code to get the HTML content of the div element:

var html = $("div").html();

3. The val() method gets the value of the form element

For form elements (such as input, select, and textarea), you can use the val() method to obtain their values. For example, for the following HTML code:

<input type="text" value="这是输入框的值">

You can use the following code to get the value of the input box:

var value = $("input[type='text']").val();

4. The attr() method to get the element attribute value

You can use The attr() method gets the attribute value of the element. For example, for the following HTML code:

<img src="image.png">

You can use the following code to obtain the src attribute value of the img element:

var src = $("img").attr("src");

5. The data() method obtains the element data attribute value

For elements with data attributes, you can use the data() method to obtain their data attribute values. For example, for the following HTML code:

<div data-name="John" data-age="30"></div>

You can use the following code to get the data-name and data-age attribute values ​​of the div element:

var name = $("div").data("name");
var age = $("div").data("age");

It should be noted that data is defined in HTML Attributes should be prefixed with "data-", such as "data-name".

Summary

In jQuery, there are many ways to obtain element content, and you can choose according to specific common scenarios. The above methods can cover most application scenarios. I hope this article can help readers better understand and apply jQuery.

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