jQuery的元素操作

1.属性操作

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

所谓元素固有属性就是元素本身自带的属性。

比如<a>元素里面的href，比如<input>元素里面的type。

//获取语法；

prop('属性')

//设置属性语法

prop('属性','属性值')

1.2设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性

比如给div添加 index="1"。

//获取属性语法

attr('属性')                 //类似原生  getAttribute()

//设置属性语法

attr('属性','属性值')              //类似原生 setAttribute()

2.数据缓存data()

·当做变量存储

·data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，所以元素上无法查看。一旦页面刷新，之前存放的数据都将被移除。

// 附加数据语法
data('name','value')     //向被选元素附加数据
//获取数据语法
data('name')            //向被选元素获取数据

//例如：
$('span').data('spanindex',3);
console.log($('span').data('spanindex'))

3 JQuery内容文本值

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

获取：html() //获取元素的内容

设置：html("内容") //设置元素的内容

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

获取：text() //获取元素的文本内容

设置：text("文本内容") //设置元素的文本内容

3.3表单的值 val() (相当于原生value)

获取：val() //获取表单的值

设置：val('"内容") //设置表单的值

4.JQuery 元素操作-遍历

4.1遍历元素

JQuery隐藏迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历

· 语法1：$("div").each(function(index,domEle) {xxx;})

each()
//方法遍历匹配的每一个元素。主要用DOM处理。each每一个
//里面的回调函数有2个参数：index 是每个元素的索引号；demEle 是每一个DOM元素对象，不是jQuery对象
//所以想要使用jQuery方法，需要给这个dom元素转换为jquery对象 $(domEle)

·语法2：$.each(object,function(index,element) {xxx;})

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

补充

·jQuery元素操作---创建

语法：$("<li></li>")

·jQuery元素操作---添加

element.append("内容") [把内容放入匹配元素内部最后面，类似原生appendChild]---生成父子关系

element.prepend("内容") //把内容放入匹配元素内部最前面。 ----生成父子关系

element.after("内容") //把元素放入元素后面 ----生成兄弟关系

element.before("内容") //把内容放入目标元素前面 ----生成兄弟关系

·jQuery元素操作---删除

element.remove() //删除匹配的元素（本身）

element.empty() //删除匹配的元素集合中所有的子节点

element.html("") //清空匹配元素的内容

标签