jQuery——属性操作

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

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

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

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

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").data("uname", "andy");
console.log($("span").data("uname")); // andy

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




//这个方法获取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 创建元素

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



 
3.3 添加元素

内部添加（父子关系）


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


外部添加（兄弟关系）


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

 
3.4 删除元素

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

 
jQuery——属性操作
标签：引号   size   innertext   自定义   jquer   结构   div   ast   获取数据   
原文地址：https://www.cnblogs.com/ccv2/p/12768851.html