这次我们来说一下JQ的元素操作。
一、属性操作
(1).设置或获取元素的固有值 prop()
元素的固有属性就是元素本身自带的属性,比如<img scr=''></img>这里面的scr就是固有属性。
获取属性 prop('属性')
设置(改变)属性 prop('属性','属性值')
(2).设置或获取元素自定义属性值 attr()
我们自己给元素添加的属性,我们称之为自定义属性。
比如给<div index='值'></div> 这里面的index就是我们自己添加的属性 并不是div固有自带的属性。
获取属性 attr('属性')
设置(改变)属性 attr('属性','属性值')
二、JQuer内容文本值
(1).普通元素内容 hml() (相当于JS中的innerHTML)
获取元素的内容 html()
设置(改变)元素的内容 html('内容')
例如:$("div").html()
(2).普通元素文本内容 (相当于JS中的innerText)
获取元素的文本内容 text()
设置(改变)元素的文本内容 text('文本内容')
例如: $("div").text()
(3).表单的值 val() (相当于JS中的value)
获取表单的值 val()
设置(改变)表单的值 val('内容')
例如: $("input").val()
三、遍历元素
JQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同得的操作,就需要用到遍历。
(1).语法1:$('div').each(function(index,domEle){xxx;})
这个方法遍历匹配的每一个元素,主要用DOM处理。
index 是每个元素的索引
domEle 是每一个DOM对象 需要给这个DOM对象转换为JQ对象
(2)语法2:$.each(object,function(index,element){xxx;})
这个方法可用于遍历对象,主要用于数据处理。
index 是每个元素的索引号
element 是遍历内容
四、元素操作
(1).创建元素
l$("<div></div>")
(2).添加元素
e.append('内容') 把内容放入匹配元素最后面(生成父子关系)
e.perpend('内容') 把内容放入匹配元素最前面(生成父子关系)
e.after('内容') 把内容放入目标元素后面(生成兄弟关系)
e.before('内容') 把内容放入目标元素前面(生成兄弟关系)
(3).删除元素
e.remove() 删除自身
e.empty() 删除自身元素集合中的所有子节点
e.html('') 清空匹配的元素内容