jQuery - 获取内容和属性
jQuery - 获取内容和属性
在前端开发中,我们经常需要获取页面元素的内容和属性,以便进行相应的操作。jQuery提供了一系列方法来获取元素的内容和属性,本文就来介绍一下。
获取元素内容
.text()
.text()
方法用来获取元素的文本内容,返回一个字符串。
<p>This is a paragraph.</p>
$('p').text(); // "This is a paragraph."
.html()
.html()
方法用来获取元素的HTML内容,返回一个字符串。
<div><p>This is a paragraph.</p></div>
$('div').html(); // "<p>This is a paragraph.</p>"
.val()
.val()
方法用来获取表单元素的值,返回一个字符串。
<input type="text" value="hello world">
$('input').val(); // "hello world"
获取元素属性
.attr()
.attr()
方法用来获取元素的属性值,返回一个字符串。
<img src="example.png" alt="example">
$('img').attr('src'); // "example.png"
.prop()
.prop()
方法用来获取元素的属性值,返回一个布尔值、数字或者字符串。
<input type="checkbox" checked>
$('input').prop('checked'); // true
.data()
.data()
方法用来获取元素的数据属性值,返回一个字符串。
<div data-id="1" data-name="example"></div>
$('div').data('id'); // "1"
获取计算后的样式
.css()
.css()
方法用来获取元素计算后的样式,返回一个字符串。
<p style="color: red;">This is a paragraph.</p>
$('p').css('color'); // "rgb(255, 0, 0)"
总结
以上是jQuery获取元素内容和属性的方法,不同的方法根据实际需求选择使用即可。需要注意的是,对于多个元素的操作,需要通过遍历来获取每一个元素的内容和属性。