创建页面元素

<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 / falseconsole.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，模拟更改图片属性：