码迷,mamicode.com
首页 > Web开发 > 详细

jQuery——属性操作

时间:2020-04-24 20:15:15      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:引号   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一样

 

jQuery——属性操作

标签:引号   size   innertext   自定义   jquer   结构   div   ast   获取数据   

原文地址:https://www.cnblogs.com/ccv2/p/12768851.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!