jQuery操作input值的各种方法总结

让我来详细讲解一下“jQuery操作input值的各种方法总结”：

1. 使用jQuery的.val()方法获取或设置input的值

使用.val()方法可以获取或设置输入框的值，如下所示：

//获取输入框的值
var value = $('input').val();

//设置输入框的值
$('input').val('new value');

2. 使用jQuery的.prop()方法获取或设置input的属性

使用.prop()方法可以获取或设置输入框的属性，如下所示：

//获取输入框的readonly属性
var isReadOnly = $('input').prop('readonly');

//设置输入框的readonly属性
$('input').prop('readonly', true);

3. 使用jQuery的.attr()方法获取或设置input的属性

使用.attr()方法可以获取或设置输入框的属性，但是需要注意的是，该方法获取的是DOM属性，而不是元素属性，如下所示：

//获取输入框的id属性
var id = $('input').attr('id');

//设置输入框的id属性
$('input').attr('id', 'new-id');

4. 使用jQuery的data()方法获取或设置input的data值

使用.data()方法可以获取或设置输入框的data属性，如下所示：

//获取输入框的data-value属性
var dataValue = $('input').data('value');

//设置输入框的data-value属性
$('input').data('value', 'new data value');

示例一

下面是一个示例，展示了如何通过点击按钮来获取输入框的值：

<input type="text" id="my-input" value="hello world!" />
<button id="my-button">获取值</button>

<script>
  //当按钮被点击时，获取输入框的值并弹出
  $('#my-button').click(function(){
    var value = $('#my-input').val();
    alert(value);
  });
</script>

示例二

下面是一个示例，展示了如何通过改变checkbox状态来更改输入框的只读属性：

<input type="text" id="my-input" value="hello world!" readonly />
<input type="checkbox" id="my-checkbox" checked />

<script>
  //当checkbox状态改变时，更改输入框的只读属性
  $('#my-checkbox').change(function(){
    var isReadOnly = $(this).prop('checked');
    $('#my-input').prop('readonly', isReadOnly);
  });
</script>

希望这份攻略能够对你有所帮助！