Mr.J-- jQuery学习笔记(六)--attr&prop方法

创建页面元素

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