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("")                        //清空匹配元素的内容