jQuery——属性操作

Posted 2021-02-22 ccv2

一、属性操作

1.1 设置或者获取元素固有属性值 prop()

element.prop("属性名") //获取属性值
console.log($("a").prop("href")); // "http://www.itcast.cn"

element.prop("属性","属性值") //设置属性语法

1.2 设置或获取自定义属性 attr()，这个属性原来是没有的

element.attr("属性名") //获取属性值,类似原生getAttribute()

element.attr("属性","属性值") //设置属性语法,类似原生setAtribute()

 

<div index="1" data-index="2"><div>

console.log($("div").attr("index")); // "1"
console.log($("div").attr("data-index")); // "2"

1.3 数据缓存 data()

在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除

把数据存放到内存中，在DOM中看不到

element.data("name","value") //向被选元素附加数据
element.data("name")  //向被选元素获取数据

 

<span></span>

$("span").data("uname", "andy");
console.log($("span").data("uname")); // andy

 

同时，还可以读取html5 自定义属性 data-index ，得到的是数字型

<div data-index="2"><div>

//这个方法获取data-index h5自定义属性，不用向attr()那样写 data-index，而且返回的是数字型
console.log($("div").data("index"));

 二、jQuery内容文本值

主要针对元素的内容还有表单的值操作

2.1 普通元素内容 html() ,相当于原生innerHTML

element.html() // 获取元素的内容，包括里面的标签
element.html("内容") // 设置元素的内容

 

2.2 普通元素文本内容text() ,相当于原生innerText

element.text() // 只获取里面的文字内容，不包含标签
element.text("内容")

 

2.3 设置获取表单值 val(), 相当于原生 value

element.val() 
element.val("内容")

 

element.parents(‘选择器‘) //返回所有的父亲节点

 

 

三、jQuery操作元素

3.1 遍历元素

如果想给同一类元素做不同的操作，就需要用到遍历

$("div").each(function(index, domElement){})
// each()方法遍历匹配的每一个元素，主要用DOM处理
// 里面的回调函数有两个参数：index是每个元素的索引号，domElement是每个DOM元素对象，不是jQuery对象
// 所以要想使用jQuery方法，需要把DOM元素对象转化为jQuery对象 $(domElement)

 

$.each(object, function(index,element){})
// 该方法可以遍历任何对象，主要用于数据处理，比如数组，对象
// 里面的函数有两个参数：index是每个元素的索引号，element遍历内容

 

3.2 创建元素

$("<li></li>")  // 动态的创建了一个<li>

 

3.3 添加元素

• 内部添加（父子关系）

element.append("内容") // 把内容放入匹配元素内部最后面，类似原生 appendChild
element.prepend("内容") // 把内容放入匹配元素内部最后面

• 外部添加（兄弟关系）

element.after("内容")  // 把内容放入目标元素后面
element.before("内容")  // 把内容放入目标元素前面

 

3.4 删除元素

element.remove() //删除匹配的元素（本身）
element.empty() //删除匹配的元素集合中所有的子节点（孩子）
element.html("") //清空匹配的元素内容，和empty一样