四、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 遍历内容

1

2

3

六、事件处理

6.1 事件绑定

jQuery中事件绑定有两种方式 1 eventName(function(){}) 绑定对应事件名的监听, 例如:$('#div').click(function(){}); 2 on(eventName, funcion(){}) 通用的绑定事件监听, 例如:$('#div').on('click', function(){});

优缺点: eventName: 编码方便, 但有的事件监听不支持 on: 编码不方便, 但更通用

企业开发中如何选择?能用eventName就用eventName, 不能用eventName就用on  

13-jQuery事件绑定和解绑

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老师笔记 ————————————————

精彩文章

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: