四、Jquery入口函数
之前我们的jquery引用和所有的jquery代码都写在dom(网页内容)的后面，但是看商业网站，jquery引用和一些jquery代码会写在网页内容的前面，常常是在head标签中。如果我们直接把之前代码中的jquery引用和代码写到head中，会发现jquery代码无法执行。要实现jq代码在网页内容前面还可以执行就要用到JQuery入口函数。
语法1：
$(function(){
........//这里是页面DOM加载完成的入口。
});
语法2：
$(document).ready(function(){
........//这里是页面DOM加载完成的入口。
});
1.等DOM结构渲染完成即可执行内部代码，不用等到所有外部资源加载完成，JQuery帮我们完成了封装。
2.相当与原生js中的DOMContentLoaded
3.不同于原生js中的load事件，是等页面的所有外部资源加载完才执行内部代码，外部资源包括外部js，css，图片等。
4.推荐实用第一种写法。
原来的程序
使用入口函数后
也可以把scirpt模块写成外部文件，然后引入。
五、Each遍历
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
语法1：
$("div").each(function (index, domEle) { xxx; }）
1.each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个 2.里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象 3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法2：
$.each(object，function (index, element) { xxx; }）
$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
六、事件处理
6.1 事件绑定
jQuery中事件绑定有两种方式 1 eventName(function(){}) 绑定对应事件名的监听, 例如：$('#div').click(function(){}); 2 on(eventName, funcion(){}) 通用的绑定事件监听, 例如：$('#div').on('click', function(){});
优缺点: eventName: 编码方便, 但有的事件监听不支持 on: 编码不方便, 但更通用
企业开发中如何选择?能用eventName就用eventName, 不能用eventName就用on
6.2 事件解绑
jQuery中可以通过off(eventName,function);解绑事件
6.3 事件冒泡
什么是事件冒泡?
事件冒泡是从目标元素逐级向上传播到根节点的过程
案例中，但单击子节点的时候，儿子和父亲的click事件都会被触发。
6.4 阻止事件冒泡
如何阻止事件冒泡? 多数情况下，我们希望在触发一个元素的事件处理程序时，不影响它的父元素, 此时便可以使用停止事件冒泡
6.5 事件委托--利用事件冒泡 1.什么是事件委托? 现实世界的委托: 某班有50个同学有快递，快递员单独找每个同学拿快递，耗时耗力，同学们委托班主任代收快递，快递员一次性将所有快递给班主任，同学们找班主任拿。对于快递员来说，操作就简单多了。 这是委托之前的程序： $("ul li").click(function(){ alert("单击了ul中的li"); }); 这是委托之后的程序： $("ul").on("click","li",function(){ alert("单击了ul中的li"); }); 这里快递员相当于浏览器，老师是绑定事件的对象，同学是触发事件的对象。拿/派送快递就是事件，是浏览器要解释执行的那段程序。 结论: 事件委托就是请其他人帮忙做我们想做的事 做完之后最终的结果还是会反馈到我们这里 2. 委托的语法 绑定事件的对象.on("事件","触发事件的对象",function(){***}); $("ul").on("click","li",function(){ alert("单击了ul中的li"); }); 3.事件委托的好处 (1) 减少监听数量从而节省页面交互就绪时间，节省内容 添加到页面上的事件处理程序数量直接关系到页面的整体运行性能，因为浏览器需要不断的与Dom节点进行交互，访问Dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间。 每个监听函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差。 案例： $("li").click隐式迭代给界面上所有li都添加了click事件，编译后（js化后）有多少个li就有多少个同样的事件，监听数量众多 $("ul").on("click","li",function(){}),事件绑定在ul上，js化后也只有一个事件，只需一个监听即可
- 1我是孩子
- 2我是孩子
- 3我是孩子
(2) 新增的元素可以响应新增前（自己被添加前）添加的事件 默认情况下新增的元素无法响应新增前添加的事件，就是通过$("ul").append新添加的li无法响应在它添加前就定义的 $("ul li").click事件。 然而使用on动态绑定的事件，新增元素自动添加事件响应处理，就是通过$("ul").append新添加的li无法可以响应在它添加前就定义的 $("ul").on("click","li",function(){ *** });事件。 这里必须使用委托，委托到一个一直存在的对象上面例如ul。直接使用$("li").on("click",function(){ *** });是不行的。
- 1我是孩子
- 2我是孩子
- 3我是孩子
3.委托注意事项 (1) 绑定事件的对象与触发事件的对象 在上面的例子中ul就是绑定事件的对象，li就是触发事件的对象。 如果要获取li可以使用$(this)或者e.target，如果要获取ul可以使用e.delegateTarge，打印e来看看可以获得更多信息 (2) 绑定事件的对象，要选一直存在的对象，不能是运行后才新增的对象。 (3) 委托实质利用了冒泡原理，大家自己参悟。 6.6 阻止事件默认行为 什么是默认行为? 网页中的元素有自己的默认行为,例如单击超链接后会跳转,点击提交表单按钮会提交 如何阻止事件默认行为? 可以使用event.preventDefault();方法阻止事件默认行为方法
6.7 获取事件的坐标 当事件被触发时,系统会将事件对象(event)传递给回调函数,通过event对象我们就能获取事件的坐标 获取事件坐标有三种方式 event.offsetX, event.offsetY 相对于事件元素左上角 event.pageX, event.pageY 相对于页面的左上角 event.clientX, event.clientY 相对于视口的左上角 event.page和event.client区别 网页是可以滚动的,而视口是固定的 所以想获取距离可视区域坐标通过event.client 想获取距离网页左上角的坐标通过event.client
七、jQuery 尺寸、位置操作 7.1 jQuery 尺寸
以上参数为空，则是获取相应值，返回的是数字型。如果参数为数字，则是修改相应值。参数可以不必写单位。
7.2 jQuery 位置
位置主要有三个： offset()、position()、scrollTop()/scrollLeft()
offset() 设置或获取元素偏移 offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
该方法有2个属性 left、top 。
offset().top 用于获取距离文档顶部的距离 offset().left 用于获取距离文档左侧的距离。可以设置元素的偏移：offset({ top: 10, left: 30 });
position() 获取元素偏移 position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
该方法有2个属性 left、top。
position().top 用于获取距离定位父级顶部的距离 position().left 用于获取距离定位父级左侧的距离。该方法只能获取。
.father{
position: relative;
。。。
}
.son{
position: absolute;
left:10px;
top:10px;
。。。。
}
// 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准// 这个方法只能获取不能设置偏移console.log($(".son").position());
console.log($(".son").position().top)//10
console.log($(".son").position().left)//10
console.log($(".son").position())//{top: 10, left: 10}
$(".son").position({
top: 200,
left: 200
});
console.log($(".son").position())//{top: 10, left: 10}
7.3scrollTop()/scrollLeft()
scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
scrollTop() 方法设置或返回被选元素被卷去的头部。
1.不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
2.一般写法是$(document).scrollTop()获取，$(document).scrollTop(100)设置
3.如果要动画则使用，因为document文档不能做动画，animate动画必须作用在元素上
$("body, html").stop().animate({ scrollTop: 0 });
案例：带有动画的返回顶部
设置当滚动条滚动到蓝色盒子的顶部对齐页面顶端的时候，出现“返回顶部”按钮，当单击“返回顶部”按钮时，返回页面顶端。
———————————————— 版权声明：本文参考了下面两篇文章 原文链接：jQuery学习---这一篇就够了_时倾-的博客-CSDN博客原文链接：最全pink老师JavaScript笔记-JQuery 入门 基础部分（同步PPT）_琛一森的博客-CSDN博客_pink老师笔记 ————————————————
精彩文章
您阅读本篇文章共花了： 大家都在找：
jquery：jquery-3.6.0.min.js下载
javascript：javascript怎么开启
前端：前端面试题2024
1024程序员节：1024程序员节的由来
发表评论