首页 前端知识 jQuery的元素操作

jQuery的元素操作

2024-08-18 22:08:27 前端知识 前端哥 690 346 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16027.html
标签
评论
发布的文章

jQuery 教程 (一)

2024-08-24 23:08:43

select 多选联动

2024-08-24 23:08:41

jQuery2 高级教程(九)

2024-08-24 23:08:22

使用CDN提高jQuery加载速度

2024-08-24 23:08:21

jQuery2 秘籍(七)

2024-08-24 23:08:20

【ECharts】雷达图

2024-08-24 23:08:18

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!