jq---属性操作,元素操作,文本属性值,尺寸位置，web应用开发平台

注意: 可以获取H5自定义属性data-index 得到的是数字型;

2.元素操作

2.1 遍历元素

2.11 第一种

$(‘div’).each(function(index,domEle){xxx;})

1.each()方法遍历匹配的每一个元素,主要用在DOM处理,each每一个;

2.里面的回调函数有两个参数,index是每个元素的索引号,domEle是每个DOM元素对象,不是jq对象;

3.想要使用jq方法需要给这个dom元素转换为jq对象$(domEle);

注意: 此方法适用于jq对象的每一项,回调函数中的元素为DOM对象,想要使用jq方法需要转换;

2.22 第二种

$.each(object,function(index,element){xxx;})

1.$.each()方法可用于遍历的任何对象,主要用于数据处理,比如 数组,对象…;

2.里面的函数有两个参数,index是每个元素的索引号,element遍历内容;

注意: 此方法适用于jq对象的每一项,回调函数中的元素为DOM对象,想要使用jq方法需要转换;

2.2创建,添加,删除

2.21创建

$(“

• ”); //动态创建li

  2.22内部添加

  内部添加元素,生成之后,它们是父子关系

  //把内容放入匹配元素内部的最后面,类似于appendChild

  element.append(“内容”);

  //把内容放入匹配元素内部前面

  element.prepend(“内容”);

  2.23外部添加

  外部添加元素,生成之后,它们是兄弟关系

  //把内容放入目标元素后边

  element.after(“内容”);

  //把内容放入目标元素前面

  element.before(“内容”);

  2.24 删除元素

  //删除匹配元素(本身)

  element.remove();

  //删除匹配的元素集合中所有的子节点

  element.empty()

  //清空匹配的元素内容

  element.html(‘’);

  注意: empty() 和html() 作用等价,都可以删除元素里面的内容,只不过html还可以设置内容;

  3.内容文本值

  常见的有html()/text()/val() 和原生js中的innerHTML和innerText和value属性对应;

  3.1.普通元素内容html()

  html()可识别标签

  //获取元素的内容

  html();

  //设置元素的内容

  html(“内容”);

  3.2普通文本内容text()

  text() 不识别标签

  //获取元素的文本内容

  text();

  //设置元素的文本内容

  text(“内容”);

  3.3表单的值val()

  //获取表单的值

  val();

  //设置表单的值

  val(“内容”);

  4.jq尺寸

  //获取匹配元素宽度和高度值 只算width/height

  width()/height();

  //取得匹配元素宽度和高度值 包含padding

  innerWidth()/innerHeight();

  //取得匹配元素宽度和高度 包含padding 和 border

  outerWidth()/outerHeight()

  //取得匹配元素宽度和高度值 包含padding 和 border 和 margin

  outerWidth(true)/outerHeight(true);

  5.jq位置操作

  主要有三个:offset(), position(), scrollTop, scrollLeft();

  5.1 offset()设置或获取元素偏移

  1.offset()方法设置或者返回被选元素相对于文档的偏移坐标,跟父元素没有关系;

  2.该方法有两个属性left和top, offset().top 用于获取距离文档顶部的距离,offset().left用于获取距离文档左侧的距离;

  3.可以设置元素的偏移,offset({top:100,left:100});

  5.2position()获取元素偏移

  1.position()方法用于返回被选中元素相对于带有定位的父级偏移坐标,如果父级没有定位,则以文档为准;

  2.该方法有两个属性left和top,position().top 用于获取距离父级顶部的距离,position().left用于获取距离定位父级左侧的距离;

  3.该方法只能获取;

  5.3 scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

  1.scrollTop()方法设置或者返回被卷去的头部;

  2.不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部;

  卷去头部的小案例,更容易理解**,记得引入jq文件** <script src="jQuery.min.js"></script>

  body {

  height: 3000px;

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  最后

  分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载

  ❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

  知识点，真正体系化！**

  [外链图片转存中…(img-ZB39wbx3-1712160349487)]

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  最后

  分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载

  ❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。