当前位置：首页 > jquery

jquery 取值

2026-03-02 14:43:43jquery

jQuery 取值方法

jQuery 提供了多种方法来获取元素的值或属性，以下是一些常见的使用场景和对应的方法：

获取表单元素的值

使用 val() 方法可以获取表单元素（如 input、select、textarea）的值：

// 获取 input 元素的值
var inputValue = $('input').val();

// 获取 select 元素选中的值
var selectValue = $('select').val();

// 获取 textarea 元素的值
var textareaValue = $('textarea').val();

获取元素属性

使用 attr() 方法可以获取元素的属性值：

// 获取元素的 href 属性
var hrefValue = $('a').attr('href');

// 获取元素的 class 属性
var classValue = $('div').attr('class');

获取元素的文本内容

使用 text() 方法可以获取元素的文本内容：

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

获取元素的 HTML 内容

使用 html() 方法可以获取元素的 HTML 内容：

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

获取 CSS 属性值

使用 css() 方法可以获取元素的 CSS 属性值：

// 获取元素的颜色属性
var colorValue = $('p').css('color');

// 获取元素的背景色属性
var bgColorValue = $('div').css('background-color');

获取数据属性

使用 data() 方法可以获取元素的自定义数据属性：

// 获取元素的 data-id 属性
var dataId = $('div').data('id');

// 获取元素的 data-name 属性
var dataName = $('div').data('name');

获取元素的位置信息

使用 offset() 或 position() 方法可以获取元素的位置信息：

// 获取元素相对于文档的偏移
var offset = $('div').offset();
console.log(offset.top, offset.left);

// 获取元素相对于父元素的偏移
var position = $('div').position();
console.log(position.top, position.left);

获取元素的尺寸

使用 width()、height() 等方法可以获取元素的尺寸：

// 获取元素的宽度
var width = $('div').width();

// 获取元素的高度
var height = $('div').height();

// 获取包含内边距的宽度
var innerWidth = $('div').innerWidth();

// 获取包含内边距和边框的宽度
var outerWidth = $('div').outerWidth();

这些方法可以灵活组合使用，以满足不同的取值需求。

jquery 取值