博客

如何在jQuery中获取文本框的值

  • Post category:jquery

获取文本框的值在很多网页应用中是必不可少的操作之一，jQuery提供了简单易用的方法来实现这个功能。

使用.val()方法获取文本框的值

.val()方法是jQuery中最常用的获取表单元素的值的方法，可以用于获取输入框、下拉框、单选框、复选框等表单元素的值。

示例1：获取输入框的值

HTML代码：

<input type="text" id="my-input" value="hello world">

jQuery代码：

var inputVal = $('#my-input').val();
console.log(inputVal);  // 输出：hello world

以上代码会输出输入框中的值”hello world”。

示例2：获取下拉框的值

HTML代码：

<select id="my-select">
  <option value="option1">选项1</option>
  <option value="option2" selected>选项2</option>
  <option value="option3">选项3</option>
</select>

jQuery代码：

var selectVal = $('#my-select').val();
console.log(selectVal);  // 输出：option2

以上代码会输出下拉框中选中的值”option2″。

使用.text()方法获取文本框的值

.text()方法可以获取文本框输入的内容，但是只能用于获取纯文本，对于HTML代码不起作用。

示例1：获取文本框的值

HTML代码：

<input type="text" id="my-input" value="hello world">

jQuery代码：

var inputText = $('#my-input').text();
console.log(inputText);  // 输出：""

以上代码会输出一个空字符串，因为.text()方法只能用于获取文本框输入的内容，而上面的示例中文本框的值是使用.value属性来获取的。

示例2：使用.text()方法获取HTML代码内容

HTML代码：

<div id="my-div">
  <p>这是一个段落</p>
</div>

jQuery代码：

var divText = $('#my-div').text();
console.log(divText);  // 输出：这是一个段落

以上代码会输出div元素中的文本”这是一个段落”，而不是包含在p标签中的HTML代码。如果想获取包含HTML代码的内容，应该使用.html()方法。

Tags: