本文详细介绍了jQuery中用于操作DOM元素属性的方法，包括attr()用于获取或设置属性值，removeAttr()用于移除属性，以及prop()方法专门处理如selected、checked等特殊属性。通过示例代码展示了如何使用这些方法进行实际操作。
好好学习，天天向上
本章主要内容是：JQ操作标签的属性方法，attr()、removeAttr()、prop()方法
1、attr() 方法
- attr：全称 attribute，属性的意思
- 作用：用来获取或者设置标签的属性值
- 设置标签的属性
- 语法：jQuery对象.attr(name,value);
- 获取标签属性值
- 语法：jQuery对象.attr(name);
<body>
<img src="images/cat.jpg" alt="这是一只猫" hobby="fish" class="pic">
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 获取元素
var $pic = $(".pic")
// 标签属性设置：需要传 2 个参数
// $pic.attr("src","images/cat2.jpg") // 图片更换
$pic.attr("hobby","sleep")
// 获取标签属性的值：需要 1 个参数
console.log($pic.attr("alt"))
console.log($pic.attr("hobby"))
</script>
</body>
2、removeAttr() 方法
- 作用：移除标签的属性
- 语法：removeAttr(name);
结合上一个方法的代码：
// 删除属性方法 removeAttr()
$pic.removeAttr("hobby")
3、prop() 方法
- 针对：selected、checked、disabled 等表单元素的属性，此类属性的属性值与属性名相同
- 获取
- 语法：$('input').prop('属性名');
- 设置
- 语法：$('input').prop('属性名',值);
<body>
<input type="button" value="按钮" disabled="disabled" class="btn"><br>
<input type="checkbox" checked="checked" class="choose"> 绘画
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 获取元素
var $btn = $(".btn")
var $choose = $(".choose")
var btn = document.querySelector(".btn")
// 获取 disabled 的属性值
// console.log(btn.disabled)
// console.log($btn.attr("disabled"))
// console.log($btn[0].disabled)
// prop() 方法，直接操作的就是布尔值
console.log($btn.prop("disabled"))
console.log($choose.prop("checked"))
// 设置
$btn.prop("disabled",false)
</script>
</body>
6890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
