jQuery基础操作篇

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”];

$.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()

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

2. 返回的是一个对象 $(“div”).offset().top就可以获得里面的属性值

3. 修改里面的值：$(“.son”).offset({top:200,left:300});不会影响父盒子 如果都添加定位 得到还是距离文档的大小

• position()

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

2. 只能获取偏移不能设置

• scrollTop() /scrollLeft(）

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

五、jQuery事件

==========

5.1、事件注册

---

单个事件注册 ele.事件(function(){ })

5.2、事件处理

---

• 事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法：element.on(event,[selector],fn)

• events：一个或多个用空格分隔的事件类型,如：click或keydown ，用对象的方式添加事件类型

• selector:元素的子元素选择器

• fn:回调函数 即绑定在元素身上的侦听函数

优势：

• on()方法优势1：可以绑定多个事件，多个处理事件处理程序

• on()方法优势2:  可以事件委派操作，事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

• on()方法优势3:动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事

如果有的事件只能触发一次，可以使用one() 来绑定事件

**$(“p”).one(“click”,function(){

alert（1）

})

此时元素只能被点击一次**

处理函数不一样的时候

$(“div”).on({

click: function () {

$(this).css(“color”, “red”)

},

mouseenter: function () {

$(this).css(“background”,“purple”)

}

})

事件处理一样的时候：

$(“div”).on(“mouseenter click”,function() {

$(this).toggleClass(“current”);

})

• 事件处理 off() 解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

三个使用场景

1. $(“p”).off()              //解绑p元素所有事件处理程序

2. $(“p”).off(“click”)   //解绑p元素上面的点击事件 后面的foo是侦听函数名

3. $(“ul”).off(“click”,“li”)  //解绑事件委托

• 自动触发事件tigger()

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

1. $(“div”).click()    //div会自动的触发点击事件

2. $(“div”).trigger(“click”)

3. $(“div”).triggerHandler(“focus”)    //区别是第三种方法不会触发元素的默认行为，如果表单聚焦事件，光标不会闪烁

5.3、事件对象

---

这里的事件对象根js里的事件对象一致

element.on(events,[selector],function(event) { })   //event就是事件对象

//阻止默认行为

event.preventDefault() 或者 return false

//阻止冒泡

event.stopPropagetion()

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

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

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

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

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

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里即可获取！！！。

己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

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

[外链图片转存中…(img-0rZnIaxX-1711680035999)]

[外链图片转存中…(img-SVNN26G1-1711680036000)]

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

[外链图片转存中…(img-IPh7Kxht-1711680036000)]

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

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里即可获取！！！。

[外链图片转存中…(img-EFmUuRWB-1711680036000)]