jQuery operates DOM to get the value of form control_jquery

The example in this article describes how jQuery operates the DOM to obtain the value of the form control. Share it with everyone for your reference. The specific analysis is as follows:

The biggest difference between HTML attributes and DOM attributes is probably the value of the form control. For example, the value attribute of the text input box in the DOM is called defaultValue, and there is no value attribute in the DOM. As for the option list (select) element, the value of its option is usually obtained through the selectedIndex attribute in the DOM, or through the selected attribute of its option element.

Due to these differences, it is best not to use the .attr() method when getting and setting the value of a form control. As for the option list, it is best not to even use the .prop() method. So what to use? It is recommended to use the .val() method provided by jQuery:

Copy code The code is as follows:

//Get the current value of the text input box
var inputValue = $('#my-input').val();
//Get the current value of the option list
var selectValue = $('#my-select').val();
8. Set the value of the radio list
$('#my-single-select').val('value3');
/^Set the value of the multi-select list
$('#my-multi-select').val(['value1', 'value2']);

Like .attr() and .prop(), the .val() method can also accept a function as its setter parameter. With this versatile .val() method, you will feel more efficient when using jQuery for web development.

I hope this article will be helpful to everyone’s jQuery programming.