标签:引号 size innertext 自定义 jquer 结构 div ast 获取数据
一、属性操作
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一样
标签:引号 size innertext 自定义 jquer 结构 div ast 获取数据
原文地址:https://www.cnblogs.com/ccv2/p/12768851.html