Home > Web Front-end > Front-end Q&A > jquery calls attribute method

jquery calls attribute method

王林
Release: 2023-05-28 16:13:38
Original
498 people have browsed it

JQuery is a very commonly used JavaScript library, which can greatly simplify the writing of JavaScript code, especially when operating DOM. This article will introduce how to use the attribute methods (.prop() and .attr()) in JQuery to operate the attributes of HTML elements.

Attribute methods refer to methods used to get and set attributes of HTML elements. In HTML, attributes are part of a tag, and they allow customization of the tag or tag content. JQuery provides two methods to access properties: .prop() and .attr(). The

.prop() method is used to get and set standard HTML attributes (such as checked, disabled, selected, etc.) and object attributes (such as nodeName, nodeType, etc.), and return Boolean values, strings, or numbers. The following is the basic usage of the .prop() method:

// 获取属性值
$(selector).prop(propertyName);

// 设置属性值
$(selector).prop(propertyName, value);
Copy after login

For example, to get whether a radio button is selected, you can use the following code:

<input type="radio" name="gender" id="male" value="male">Male
<input type="radio" name="gender" id="female" value="female">Female
Copy after login
if ($('#male').prop('checked')) {
  // 如果male被选中
}
Copy after login

If you want to disable all text input boxes , you can use the following code:

$('input[type="text"]').prop('disabled', true);
Copy after login

On the contrary, if you want to enable all text input boxes, you can set the parameter value to false.

.attr() method is used to get and set all HTML attributes and return string values. The following is the basic usage of the .attr() method:

// 获取属性值
$(selector).attr(attributeName);

// 设置属性值
$(selector).attr(attributeName, value);
Copy after login

For example, to get the alt attribute value of an image, you can use the following code:

<img src="image.jpg" alt="这是一张照片">
Copy after login
var altValue = $('img').attr('alt');
Copy after login

If you want to change the src attribute value of the img tag , you can use the following code:

$('img').attr('src', 'newImage.jpg');
Copy after login

It should be noted that some properties can be obtained and set using both the .prop() and .attr() methods, while some properties can only use one of the methods. For example, checked and disabled properties can only be used with the .prop() method, and using the .attr() method will have no effect.

To summarize, when operating HTML attributes, if you are operating standard HTML attributes or object attributes, you should use the .prop() method. If you want to manipulate other HTML attributes besides this, you should use the .attr() method. When using both methods, there are trade-offs to be made and the appropriate method chosen to obtain the desired results.

The above is a basic introduction to the attribute methods (.prop() and .attr()) in JQuery. If you want to know more about JQuery, please read the JQuery official documentation.

The above is the detailed content of jquery calls attribute method. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template