jquery 取值

获取元素值的方法

使用jQuery获取元素的值可以通过多种方式实现，具体取决于元素的类型和需求。

获取输入框的值
使用val()方法可以获取表单元素如input、textarea、select的值。

var inputValue = $('#inputId').val();

获取文本内容
使用text()方法获取元素的纯文本内容，不包括HTML标签。

var textContent = $('#elementId').text();

获取HTML内容
使用html()方法获取元素内部的HTML内容，包括标签。

var htmlContent = $('#elementId').html();

获取属性值
使用attr()方法获取元素的属性值，如data-*、href等。

var hrefValue = $('#linkId').attr('href');

获取data属性值
使用data()方法获取通过data-*属性存储的值。

var dataValue = $('#elementId').data('key');

示例代码

// 获取输入框值
$('#submitBtn').click(function() {
    var username = $('#username').val();
    console.log(username);
});

// 获取文本内容
var paragraphText = $('#paragraph').text();
console.log(paragraphText);

// 获取HTML内容
var divHtml = $('#divElement').html();
console.log(divHtml);

// 获取属性值
var imageSrc = $('#image').attr('src');
console.log(imageSrc);

// 获取data属性值
var userRole = $('#user').data('role');
console.log(userRole);

注意事项

• val()适用于表单元素，text()和html()适用于普通元素。
• data()方法会自动将data-*属性转换为JavaScript对象，适合处理复杂数据。
• 确保DOM加载完成后再执行jQuery代码，可以将代码放在$(document).ready()中。