jQuery 3
督嘉言
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 () {
/*
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>
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 () {
/*
1.attr(name|pro|key,val|fn)
作用: 获取或者设置属性节点的值
可以传递一个参数, 也可以传递两个参数
如果传递一个参数, 代表获取属性节点的值
如果传递两个参数, 代表设置属性节点的值
注意点:
如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增
2.removeAttr(name)
删除属性节点
注意点:
会删除所有找到元素指定的属性节点
*/
// console.log($("span").attr("class"));
$("span").attr("class", "box");
// $("span").attr("abc", "123");
$("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 () {
/*
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>
练习
<!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 () {
// 编写jQuery相关代码
// 1.给按钮添加点击事件
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
// 2.获取输入框输入的内容
var input = document.getElementsByTagName("input")[0];
var text = input.value;
// 3.修改img的src属性节点的值
$("img").attr("src", text);
// $("images").prop("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>
类似资料：