jQuery获取元素的值 - JavaScript

jQuery是一款流行的JavaScript框架，它提供了一系列强大的选择器和方法，可以轻松地获取元素的值。

获取输入框的值

获取文本框的值是处理表单数据的常见任务。使用.val()方法可以轻松地获取输入框的值。

// HTML
<input type="text" id="myInput">
// jQuery
var inputValue = $('#myInput').val()
console.log(inputValue) // 打印输入框的值

获取单选框和复选框的值

单选框和复选框也是表单中重要的元素。使用:checked选择器可以获取单选框和已选中复选框的值。

// HTML
<input type="radio" name="gender" id="male" value="male">
<input type="radio" name="gender" id="female" value="female">

<input type="checkbox" id="checkbox1" name="checkbox1" value="checkbox1">
<input type="checkbox" id="checkbox2" name="checkbox2" value="checkbox2" checked>

// jQuery 获取单选框的值
var genderValue = $('input[name="gender"]:checked').val()
console.log(genderValue) // 打印单选框选中的值

// jQuery 获取复选框的值
var checkboxValue1 = $('#checkbox1').val()
console.log(checkboxValue1)  // 打印复选框的值

var checkboxValue2 = $('#checkbox2').val()
console.log(checkboxValue2)  // 打印复选框选中的值

获取下拉框的值

下拉框也是表单中重要的元素之一。使用.val()方法和:selected选择器，可以轻松地获取下拉框的值。

// HTML
<select id="mySelect">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3" selected>Option 3</option>
</select>

// jQuery 获取下拉框的值
var selectValue = $('#mySelect').val()
console.log(selectValue) // 打印选中的值

以上是获取元素值的几种常见方法，使用jQuery获取元素的值可以大大简化代码，并提高效率。