The tenth issue of jQuery that monkeys can also learn - jQuery element operation

📚Series of Articles—Contents🔥

to be continued

📌Review the previous issue

In the last issue, I talked about the content of jQuery animation, which is divided into upper and lower parts

In web development, the proper use of animation can make the page more beautiful, thereby enhancing the user experience. jQuery covers a series of methods for realizing animation. When these methods cannot meet the actual needs, users can also customize animation (animate method).

🎯jQuery property manipulation

jQuery provides some methods of attribute manipulation, mainly including prop(), attr(), data() and so on. Through these methods, different needs can be realized.

🧩prop() method

The prop() method is used to set or get the intrinsic property value of the element. Intrinsic attributes of an element refer to the attributes that come with the element itself, such as the href attribute of the <a> tag. Specific syntax examples are as follows.

$(selector).prop("attribute name")            // get attribute value
$(selector).prop("Attributes", "attribute value")    // set attribute value

The following code demonstrates the use of the prop() method.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ajax study</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>

<body>
  <a href="http://localhost" title="Home"></a>


</body>
<script>
  console.log($("a").prop("href")); // Output result: http://localhost
  $("a").prop("title", "front page"); // Set the title value to "Home Page"
  console.log($("a").prop("title")); // Output result: Home page
</script>

</html>

In development, you can also use prop('property') to get the checked value of the form element, the sample code is as follows.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ajax study</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>

<body>
  <input type="checkbox" checked>Please click the box


</body>
<script>
  // Get the checked value of a form element
  $("input").change(function () {
    console.log($(this).prop("checked")); // When the checkbox is selected, the output result is true
  });
</script>

</html>

Set the type value of the input to checkbox, indicating a check box; then bind the change event to the input, which is triggered when the state of the form element changes. If the checkbox is checked, the output will be true, otherwise it will be false.

🧩attr() method

attr() is used to set or get the custom attribute of the element. Custom attribute refers to the non-intrinsic attribute added by the user to the element. For example, add an index attribute to div to save the index value of the element. The specific syntax is as follows.

$(selector).attr("attribute name")            // get attribute value
$(selector).attr("Attributes", "attribute value")        // set attribute value

The following code demonstrates the use of the attr() method.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ajax study</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>

<body>
  <div index="1" data-index="2">I'm div</div>

</body>
<script>
  console.log($("div").attr("index")); // Output result: 1
  console.log($("div").attr("data-index")); // Output result: 2
  $("div").attr("index", 3); // Set the index attribute value to 3
  $("div").attr("data-index", 4); // Set the data-index attribute value to 4
  console.log($("div").attr("index")); // Output result: 3
  console.log($("div").attr("data-index")); // Output result: 4

</script>

</html>

In the above code, the index attribute of div is an ordinary custom attribute, and data-index is a custom attribute of HTML5 (starting with "data-"), which can be set or obtained by using the attr() method. It should be noted that custom properties cannot be set and retrieved using prop().

🔗Supplement the difference between attr and prop

For the inherent attributes of the HTML element itself, use the prop method when processing.
For our own custom DOM attributes of HTML elements, use the attr method when processing.
The result of the prop() function: 1. If there is a corresponding property, return the value of the specified property. 2. If there is no corresponding attribute, the return value is an empty string.
The result of the attr() function: 1. If there is a corresponding attribute, return the value of the specified attribute. 2. If there is no corresponding attribute, the return value is undefined.
Properties with two properties true and false, like checked, selected or disabled use prop()

🧩data() method

The data() method is used to access data on the specified element. The data is stored in memory and does not modify the DOM element structure. Once the page is refreshed, the previously stored data will be removed. The specific syntax is as follows.

$(selector).data("data name")               // retrieve data
$(selector).data("data name", "data value")     // set data

The following demonstrates the operation of data through the data() method, and the sample code is as follows.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ajax study</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>

<body>
  <div>I'm div</div>

</body>
<script>
  $("div").data("uname", "andy"); // set data
  console.log($("div").data("uname")); // Get the data and output the result: andy
</script>

</html>

After the above code runs, uname will be saved in memory and will not appear in the HTML structure.
The data() method can also be used to read the HTML5 custom attribute data-index, the sample code is as follows.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ajax study</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>

<body>
  <div index="1" data-index="2">I'm div</div>

</body>
<script>
  console.log($("div").data("index")); // Output result: 2
</script>

</html>

In the above code, the data-index attribute is obtained through data(), the "data-" prefix is not required in the attribute name, and the returned result is a number.

📚Continuous update🔥

Tags: Front-end Javascript JQuery Framework

Posted by mp04 on Sat, 26 Nov 2022 16:41:31 +1030

Programs Wiki