当前位置：首页 > jquery

jquery 取值

2026-04-07 23:46:33jquery

jQuery 获取元素值的方法

jQuery 提供了多种方法获取和设置 HTML 元素的值，具体取决于元素的类型和需求。

获取表单元素的值

使用 val() 方法可以获取或设置表单元素的值，例如输入框、下拉框等。

// 获取输入框的值
var inputValue = $('#inputId').val();

// 获取下拉框选中的值
var selectValue = $('#selectId').val();

获取 HTML 元素的文本内容

使用 text() 方法可以获取或设置元素的纯文本内容。

jquery 取值

// 获取元素的文本内容
var textContent = $('#elementId').text();

获取 HTML 元素的 HTML 内容

使用 html() 方法可以获取或设置元素的 HTML 内容，包括标签。

// 获取元素的 HTML 内容
var htmlContent = $('#elementId').html();

获取属性值

使用 attr() 方法可以获取或设置元素的属性值。

jquery 取值

// 获取元素的属性值
var attrValue = $('#elementId').attr('attributeName');

获取 CSS 属性值

使用 css() 方法可以获取或设置元素的 CSS 属性值。

// 获取元素的 CSS 属性值
var cssValue = $('#elementId').css('propertyName');

示例代码

以下是一个完整的示例，展示如何使用 jQuery 获取不同类型的值：

<input type="text" id="username" value="John Doe">
<select id="gender">
  <option value="male">Male</option>
  <option value="female" selected>Female</option>
</select>
<div id="message">Hello, <strong>World</strong>!</div>
<a id="link" href="https://example.com">Example</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // 获取输入框的值
    var username = $('#username').val();
    console.log('Username:', username);

    // 获取下拉框选中的值
    var gender = $('#gender').val();
    console.log('Gender:', gender);

    // 获取元素的文本内容
    var messageText = $('#message').text();
    console.log('Message Text:', messageText);

    // 获取元素的 HTML 内容
    var messageHtml = $('#message').html();
    console.log('Message HTML:', messageHtml);

    // 获取链接的 href 属性
    var linkUrl = $('#link').attr('href');
    console.log('Link URL:', linkUrl);
  });
</script>