创建页面元素
<span class="span1" name="it666"></span>
<span class="span2" name="yjk"></span>
jQuery的attr方法
attr(name|pro|key,val|fn)
作用: 获取或者设置属性节点的值
可以传递一个参数, 也可以传递两个参数
如果传递一个参数, 代表获取属性节点的值
如果传递两个参数, 代表设置属性节点的值注意点:
如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增
console.log($("span").attr("class"));
$("span").attr("class", "box");
$("span").attr("abc", "123");
查看页面元素:
改变了class的内容,增加了原来不存在的abc属性
removeAttr(name)
作用:删除属性节点
注意点:
会删除所有找到元素指定的属性节点
$("span").removeAttr("class name");
删除了span元素的class 和 name属性
jQuery的prop方法
prop方法
特点和attr方法一致
$("span").eq(0).prop("demo", "it666");
$("span").eq(1).prop("demo", "lnj");
console.log($("span").prop("demo"));
removeProp方法
特点和removeAttr方法一致
$("span").removeProp("demo");
注意点:
prop方法不仅能够操作属性, 他还能操作属性节点官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
demo1
console.log($("span").prop("class"));
$("span").prop("class", "box");
demo2
console.log($("input").prop("checked")); // true / false
console.log($("input").attr("checked")); // checked / undefined
使用attr和prop练习小demo
$(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);
}
});
随便输入一个text,模拟更改图片属性: