JS和jQuery通过this获取html标签中的属性值(实例代码)

获取html标签中属性值是前端常见的操作之一。在JavaScript和jQuery中，使用this关键字可以获取到当前元素，通过this就可以方便地获取到当前元素中的属性值。

下面是使用JavaScript和jQuery分别获取html标签属性值的示例代码：

使用JavaScript获取html标签属性值

在JavaScript中，可以使用this关键字来获取当前元素，接着在获取元素属性时使用getAttribute()方法来获取属性值。代码示例：

<input type="text" name="username" placeholder="请输入用户名" onchange="getInputValue(event)">
<script>
function getInputValue(event) {
    var target = event.target;
    var value = target.getAttribute('placeholder');
    console.log(value);
}
</script>

上述代码中，当input元素的placeholder值发生变化时，会触发onchange事件，事件处理函数getInputValue()中通过event.target获取到当前元素，然后使用getAttribute()方法获取到placeholder值，并将其打印到控制台上。

使用jQuery获取html标签属性值

在jQuery中，使用this关键字可以获取当前元素的jQuery对象，然后使用attr()方法获取元素属性值。代码示例：

<input type="text" name="username" placeholder="请输入用户名" onchange="getInputValue()">
<script>
function getInputValue() {
    var value = $(this).attr('placeholder');
    console.log(value);
}
</script>

上述代码中，当input元素的placeholder值发生变化时，会触发onchange事件，事件处理函数getInputValue()中通过$(this)获取到当前元素的jQuery对象，然后使用attr()方法获取到placeholder值，并将其打印到控制台上。

除了使用onchange事件来触发事件处理函数，还可以使用jQuery的click()、blur()等事件来触发事件处理函数，实现不同场景下获取元素属性值的操作。