jQuery属性节点
- 什么是属性?
对象身上保存的变量就是属性 - 如何操作属性?
对象.属性名称 = 值;
对象.属性名称;
对象[“属性名称”] = 值;
对象[“属性名称”]; - 什么是属性节点?
<span name = “it666”>
在编写HTML代码时,在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点 - 如何操作属性节点?
DOM元素.setAttribute(“属性名称”, “值”);
DOM元素.getAttribute(“属性名称”); - 属性和属性节点有什么区别?
任何对象都有属性, 但是只有DOM对象才有属性节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15-属性和属性节点</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
var span = document.getElementsByTagName("span")[0];
span.setAttribute("name", "lnj");
console.log(span.getAttribute("name"));
});
</script>
</head>
<body>
<span name = "it666"></span>
</body>
</html>
jQuery中 attr 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-jQuery的attr方法</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("span").attr("class", "box");
$("span").removeAttr("class name");
});
</script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="cr"></span>
</body>
</html>
jQuery中的 prop 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17-jQuery的prop方法</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
console.log($("input").prop("checked"));
console.log($("input").attr("checked"));
});
</script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span>
<input type="checkbox">
</body>
</html>
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>18-attr和prop方法练习</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
var input = document.getElementsByTagName("input")[0];
var text = input.value;
$("img").attr("src", text);
}
});
</script>
</head>
<body>
<input type="text">
<button>切换图片</button><br>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</body>
</html>