⛽️ 好好学习 天天向上 ⛽️
===========================================================================
一、jQuery属性操作
============
1.1、设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性,比如元素里面的href,比如元素里面的type
- 获取属性值 element.prop(“属性名”)
$(“a”).prop(“href”) //获取了a标签里的href属性
- 设置属性值 element.prop(“属性名”,“属性值”)
$(“a”).prop(“title”,“我们都挺好”) //将a标签里面的title属性修改为我们都挺好
1.2、设置或获取元素元素自定义属性值 attr()
属性是自己定义的,该方法也可以获取H5自定义属性 data-index 以data-开头的属性
- 获取属性值 element.attr(“属性名”)
$(“div”).attr(“data-index”)
- 设置属性值 element.attr(“属性名”,“属性值”)
$(“div”).attr(“index”,“2”)
1.3、数据缓存 data()
data()方法可以在指定的元素上存放数据,并不会修改DOM元素结构,一旦页面刷新,之前存放的数据都将被移出。这个里面的数据是存放在元素的内存里面,存放的属性当做一个变量来看
$(“span”).data(“uname”,“andy”);
同时还可以读取html5自定义属性data-index,得到的是数字型 与attr不同的是得到的是数字型的1
$(“div”).data(“index”)
二、jQuery内容文本值
==============
主要针对元素的内容和表单的值操作
2.1、普通元素内容 html() / text()
- html() 获取和设置元素的内容
相当于原生innerHTML,获取的内容是带有标签的
element.html() //获取元素的内容
element.html(“内容”) //设置元素的内容
你好呀
结果展示
- text() 普通元素文本内容
相当于原生innerText ,只输出里面的内容
element.text() //获取元素的内容
element.text(“内容”) //设置元素的内容
你好呀
结果展示
2.2、特殊的表单值 val()
相当于原生value值
$(“input”).val() //获取表单里面的值
$(“input”).val(“内容”) //设置表单里面的值
结果展示
三、jQuery元素操作
=============
主要是遍历、创建、添加、删除元素操作
3.1、遍历元素 each
前面讲了jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同的操作,就需要用到遍历
语法1:$(“div”).each(function(index,domEle){ XXX; })
- each()方法遍历匹配的每个元素,主要用DOM处理each每一个
- 里面的回调函数有两个参数:index是每个元素的索引号;domEle是每个DOM元素对象,不是jQuery对象
- 所以要想使用jQuery方法,需要给这个dom元素转换为jQuery对象 $(domEle)
语法2: $.each(object,function(index,element){ XXX; })
- 主要是做数据处理的 可以遍历数组可以遍历对象,如果遍历的是对象 那么i输出的是属性名;element输出的是属性值
- object是要处理的元素 $(“div”)
- 回调函数有2个参数:index是每个元素的索引号;element遍历的内容
方法一:
$(function () {
var arr = [“red”, “green”, “pink”];
$(“div”).each(function (i, domfile) {
$(domfile).css(“color”,arr[i] );
})
})
方法二:
var arr = [“red”, “green”, “pink”];
. e a c h ( .each( .each((“div”),function(index,ele){
$(ele).css(“background”,arr[index]);
})
展示的效果都是一样的:
方法二遍历数组
3.2、创建元素
语法
var li = $(“
- ”)
3.3、添加元素
- 内部添加元素,生成之后,它们是父子关系
element.append(li) //在已有的元素后面添加元素
element.prepend(li) //在已有的元素前面添加元素
- 外部添加元素,生成之后,它们是兄弟关系
element.after(li) //在已有的元素后面添加元素
element.before(li) //在已有的元素前面添加元素
3.4、删除元素
- element.remove() //删除匹配的元素(本身)
- element.empty() //删除匹配的元素集合中所有的子节点
- element.html(“”) //删除匹配的元素集合中的子节点 引号里面不用写东西
综合以上 做一个小小的发布微博的案例 让大家不迷茫 ✊
当点击发布的时候,就会在ul里面创建一个li 在li里面获取表单的值,和一个a标签,当点击当前li的删除时,就会删除a标签的li
效果展示:
css部分
html部分
微博发布
发布
js部分
四、jQuery尺寸、位置操作
================
4.1、 jQuery尺寸
width() / height() | 取得匹配元素宽度和高度 只算width/height |
innerWidth() / innerHeight() | 取得匹配元素宽度和高度值 包含padding |
outerWidth() / outerHeight() | 取得匹配元素宽度和高度值 包含padding、border |
outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值 包含padding、border、margin |
-
以上参数为空,则是获取相应值,返回的是数字型
-
如果参数为数字,则是修改相应值
-
参数是可以不用写单位的
4.2、jQuery位置
offset() | 设置或获取元素偏移 |
position() | 获取元素偏移 |
scrollTop() / scrollLeft() | 设置或获取元素被卷去的头部和左侧 |
- offset()
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
由于篇幅限制,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!有需要的程序猿(媛)可以帮忙点赞+点击【学习资料】即可领取!
里一直到现在。**
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-am5y4jhn-1712457251910)]
[外链图片转存中…(img-eXCQpVeK-1712457251910)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-FiQ4kJxz-1712457251911)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
由于篇幅限制,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!有需要的程序猿(媛)可以帮忙点赞+点击【学习资料】即可领取!
[外链图片转存中…(img-qsXBZwhp-1712457251911)]
[外链图片转存中…(img-vWJS8ZRH-1712457251911)]