<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15-属性和属性节点</title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
1.什么是属性?
对象身上保存的变量就是属性
2.如何操作属性?
对象.属性名称 = 值;
对象.属性名称;
对象["属性名称"] = 值;
对象["属性名称"];
3.什么是属性节点?
<span name = "it666"></span>
在编写HTML代码时,在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点
4.如何操作属性节点?
DOM元素.setAttribute("属性名称", "值");
DOM元素.getAttribute("属性名称");
5.属性和属性节点有什么区别?
任何对象都有属性, 但是只有DOM对象才有属性节点
*/
/*
function Person() {
}
var p = new Person();
// p.name = "lnj";
p["name"] = "zs";
// console.log(p.name);
console.log(p["name"]);
*/
var span = document.getElementsByTagName("span")[0];
span.setAttribute("name", "lnj");
console.log(span.getAttribute("name"));
});
</script>
</head>
<body>
<span name = "it666"></span>
</body>
</html>
```bash
<!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 () {
/*
1.prop方法
特点和attr方法一致
2.removeProp方法
特点和removeAttr方法一致
*/
/*
$("span").eq(0).prop("demo", "it666");
$("span").eq(1).prop("demo", "lnj");
console.log($("span").prop("demo"));
$("span").removeProp("demo");
*/
/*
注意点:
prop方法不仅能够操作属性, 他还能操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
*/
// console.log($("span").prop("class"));
// $("span").prop("class", "box");
console.log($("input").prop("checked")); // true / false
console.log($("input").attr("checked")); // checked / undefined
});
</script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span>
<input type="checkbox">
</body>
</html>
js,jquery属性和属性节点,及attr方法和removeAttr方法,prop和removeprop
最新推荐文章于 2023-06-13 17:44:55 发布