jQuery操作属性、属性文本和属性节点

操作属性节点

属性节点就是在标签上的各种属性,例如class，name，id等；

• 操作属性节点主要用到jQuery中：attr函数，removeAttr函数
  • attr函数是用来查询和设置属性节点的函数
    • 查询属性：在attr函数中只写一个属性名就代表查询属性
      • 注意：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
    • 设置属性：在attr函数中写属性名和属性值两个属性表示设置
      • 注意：找到多少个元素就会设置多少个元素
  • removeAttr函数是用来删除属性节点的函数:
    • 会删除所有找到元素指定的属性节点
    • 如果想一次删除多个属性节点就用空格间隔，输入第二个

//查询class属性
console.log($("span").attr("class"));
//设置class为box
$("span").attr("class", "box");
//删除class和name
$("span").removeAttr("class name");

操作属性

操作属性和操作属性节点大同小异

• 操作属性节点主要用到jQuery中：prop函数，removeProp函数
  • 注意点：prop不但能操作属性，也能操作属性节点(因为属性节点在attributes属性中)
• 操作属性节点attr和prop的具体用法:
  • 具有 true 和 false 两个属性的属性节点 checked, selected 或者 disabled 使用 prop(), 其他的使用 attr()

//查看属性
$("span").prop("demo")//返回第一个找到的
//设置属性
$("span").prop("demo", "it666");
//删除属性
$("span").removeProp("demo")
//获取属性节点
console.log($("span").prop("class"))
//设置属性节点
$("span").prop("class", "box")

操作css类

就是添加或者删除类的操作：addClass,removeClass,toggleClass

• 添加类(addClass)
  • 如果想要添加多个类，用空格隔开
• 删除类(removeClass)
  • 如果想要删除多个类，用空格隔开
• 切换类
  • 如果没有此类就添加，如果有就删除
  • 多个还是用空格隔开

$("div").addClass("class1 class2");
 $("div").removeClass("class1 class2");
$("div").toggleClass("class1 class2");

操作HTML代码/文本/值

在jQuery用的方法为：html ,text,val---->相当于原生js的innerHTML和innerText和设置value

• 这三个方法的设置和获取都是一个函数
  • 设置，传入要设置的内容
  • 获取，什么都不用穿

//相当于原生的innerHTML(设置代码)
$("div").html("<p>我是段落<span>我是span</span></p>");
//获取后代代码
console.log($("div").html());

//相当于原生innerText(设置文本)
$("div").text("我是一个文本内容");
//获取文本
 console.log($("div").text());

//设置value
$("input").val("请输入内容");
//获取value
console.log($("input").val());