四、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.推荐实用第一种写法。
原来的程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: #000;
}
.a {
background: palevioletred;
border-radius: 50%;
}
.b {
border: 5px dashed darkcyan;
opacity: 0.6;
}
</style>
</head>
<body>
<button id="btn1">添加类样式</button>
<button id="btn2">移除类样式</button>
<hr>
<div></div>
<script src="js/jquery.min.js"></script>
<script>
$("#btn1").click(function() {
$("div").addClass("a b");
});
$("#btn2").click(function() {
$("div").removeClass("b");
});
</script>
</body>
</html>
使用入口函数后
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: #000;
}
.a {
background: palevioletred;
border-radius: 50%;
}
.b {
border: 5px dashed darkcyan;
opacity: 0.6;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$("#btn1").click(function() {
$("div").addClass("a b");
});
$("#btn2").click(function() {
$("div").removeClass("b");
});
})
</script>
</head>
<body>
<button id="btn1">添加类样式</button>
<button id="btn2">移除类样式</button>
<hr>
<div></div>
</body>
</html>
也可以把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 遍历内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<button>改背景颜色</button>
<script src="js/jquery.min.js"></script>
<script>
$("button:eq(0)").click(function(){
var arr=['red','pink','green'];
$("div").each(function(index,domEle){
$(domEle).css('background-color',arr[index]);//domEle是dom对象，这里转为jq对象
});
// $.each($("div"),function(index,element){
// $(element).css('background-color',arr[index]);
// });
});
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>数组求和</button>
<button >对象操作</button>
<script src="js/jquery.min.js"></script>
<script>
$("button:eq(0)").click(function(){
var arr=[1,2,4];
var sum=0;
$.each(arr,function(index,ele){
console.log(index,ele);
sum+=ele;
});
console.log(sum);
});
$("button:eq(1)").click(function(){
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log("i:"+i); // 输出的是 name age 属性名
console.log("ele:"+ele); // 输出的是 andy 18 属性值
})
});
</script>
</body>
</html>
六、事件处理
6.1 事件绑定
jQuery中事件绑定有两种方式
1 eventName(function(){})
绑定对应事件名的监听, 例如：$('#div').click(function(){});
2 on(eventName, funcion(){})
通用的绑定事件监听, 例如：$('#div').on('click', function(){});
优缺点:
eventName: 编码方便, 但有的事件监听不支持
on: 编码不方便, 但更通用
企业开发中如何选择?能用eventName就用eventName, 不能用eventName就用on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-jQuery事件绑定和解绑</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
overflow: hidden;
}
.son{
width: 100px;
height: 100px;
background: blue;
margin-top: 50px;
margin-left: 50px;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
/*
// 1.通过eventName绑定事件
$(".son").click(function () {
alert("son");
});
// 2.通过on绑定事件
$(".son").on("click", function () {
alert("son");
});
*/
// 2.可以多次添加相同类型的监听,后面添加不会覆盖前面添加
function test1() {
alert("son1");
}
function test2() {
alert("son2");
}
function test3() {
alert("son3");
}
$(".son").click(test1);
$(".son").click(test2);
$(".son").on("mouseleave", test3);
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
6.2 事件解绑
jQuery中可以通过off(eventName,function);解绑事件
<script>
$(function () {
function test1() {
alert("son1");
}
function test2() {
alert("son2");
}
function test3() {
alert("son3");
}
$(".son").click(test1);
$(".son").click(test2);
$(".son").on("mouseleave", test3);
// 1.1不传入任何参数,移除所有事件
// $(".son").off();
// 1.2传入一个参数,移除指定事件
// $(".son").off("click");
// 1.3传入两个参数,移除指定事件中的指定回调
$(".son").off("click", test1);
});
</script>
6.3 事件冒泡
什么是事件冒泡?
事件冒泡是从目标元素逐级向上传播到根节点的过程
案例中，但单击子节点的时候，儿子和父亲的click事件都会被触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.father{
width: 200px;
height: 200px;
background-color: skyblue;
}
.son{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(".father").click(function(){
console.log("father");
})
$(".son").click(function(){
console.log("son");
})
</script>
</body>
</html>6.4 阻止事件冒泡
如何阻止事件冒泡?
多数情况下，我们希望在触发一个元素的事件处理程序时，不影响它的父元素, 此时便可以使用停止事件冒泡
<script>
$(function () {
$(".son").click(function (event) {
console.log(".son");
// 在子元素中停止事件冒泡,事件不会继续向上传播,所以父元素click方法不会被触发
event.stopPropagation();
});
$(".father").click(function () {
console.log(".father");
});
});
</script>
-
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化后也只有一个事件，只需一个监听即可
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li>1我是孩子</li> <li>2我是孩子</li> <li>3我是孩子</li> </ul> <script src="js/jquery.min.js"></script> <script> /// js化后有3个监听事件 // $("ul li").on("click",function(){ // alert("单击了ul中的li"); // }); //利用委托，js化后只有一个监听事件 $("ul").on("click", "li", function() { alert("单击了ul中的li"); }) </script> </body> </html>(2) 新增的元素可以响应新增前（自己被添加前）添加的事件
默认情况下新增的元素无法响应新增前添加的事件，就是通过$("ul").append新添加的li无法响应在它添加前就定义的 $("ul li").click事件。
然而使用on动态绑定的事件，新增元素自动添加事件响应处理，就是通过$("ul").append新添加的li无法可以响应在它添加前就定义的 $("ul").on("click","li",function(){ *** });事件。
这里必须使用委托，委托到一个一直存在的对象上面例如ul。直接使用$("li").on("click",function(){ *** });是不行的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>1我是孩子</li>
<li>2我是孩子</li>
<li>3我是孩子</li>
</ul>
<script src="js/jquery.min.js"></script>
<script>
//给未来的元素绑定事件--on的第二大优势
//这个弹不出来对话框，因为当前ol中还没创建li
// $("ol li").click(function(){
// alert("单击了ul中的li");
// });
//这个可以弹出对话框，因为on是动态事件，专门来实现这个功能的,必须要写成委托的形式
$("ul").on("click", "li", function() {
alert("单击了ul中的li");
});
var newli = $("<li>我是后来创建的li</li>");
$("ul").append(newli);
</script>
</body>
</html>
-
3.委托注意事项
- (1) 绑定事件的对象与触发事件的对象
-
在上面的例子中ul就是绑定事件的对象，li就是触发事件的对象。
如果要获取li可以使用$(this)或者e.target，如果要获取ul可以使用e.delegateTarge，打印e来看看可以获得更多信息
(2) 绑定事件的对象，要选一直存在的对象，不能是运行后才新增的对象。
-
(3) 委托实质利用了冒泡原理，大家自己参悟。
-
6.6 阻止事件默认行为
-
什么是默认行为?
网页中的元素有自己的默认行为,例如单击超链接后会跳转,点击提交表单按钮会提交 -
如何阻止事件默认行为?
可以使用event.preventDefault();方法阻止事件默认行为方法 -
<script> $(function () { $("a").click(function (event) { var str = $("a").attr("href"); // 如果超链接是百度就不跳转 if(str.indexOf("baidu") > 0){ // 阻止默认行为 event.preventDefault(); } }); }); </script> -
6.7 获取事件的坐标
当事件被触发时,系统会将事件对象(event)传递给回调函数,通过event对象我们就能获取事件的坐标获取事件坐标有三种方式
event.offsetX, event.offsetY 相对于事件元素左上角
event.pageX, event.pageY 相对于页面的左上角
event.clientX, event.clientY 相对于视口的左上角event.page和event.client区别
网页是可以滚动的,而视口是固定的
所以想获取距离可视区域坐标通过event.client
想获取距离网页左上角的坐标通过event.client
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .father{ position:fixed; bottom:0; left:0; width: 200px; height: 200px; background: red; overflow: hidden; } .son{ width: 100px; height: 100px; background: blue; margin-top: 50px; margin-left: 50px; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 获取事件的坐标 $(".son").click(function (event) { // 获取相对于事件元素左上角坐标 console.log(event.offsetX, event.offsetY); // 获取相对于视口左上角坐标 console.log(event.clientX, event.clientY); // 获取相对于页面左上角坐标 console.log(event.pageX, event.pageY); }); }); </script> </head> <body> <div class="father"> <div class="son"></div> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html> -
七、jQuery 尺寸、位置操作
7.1 jQuery 尺寸
- 以上参数为空，则是获取相应值，返回的是数字型。
- 如果参数为数字，则是修改相应值。
- 参数可以不必写单位。
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
7.2 jQuery 位置
位置主要有三个： offset()、position()、scrollTop()/scrollLeft()
offset() 设置或获取元素偏移
offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
该方法有2个属性 left、top 。
offset().top 用于获取距离文档顶部的距离
offset().left 用于获取距离文档左侧的距离。可以设置元素的偏移：offset({ top: 10, left: 30 });
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
.father{
width: 200px;
height: 200px;
background-color: pink;
margin:50px;
}
.son{
width: 100px;
height: 100px;
background-color:skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
// 1. 获取设置距离文档的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
</script>
</body>
</html>
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
});
案例：带有动画的返回顶部
设置当滚动条滚动到蓝色盒子的顶部对齐页面顶端的时候，出现“返回顶部”按钮，当单击“返回顶部”按钮时，返回页面顶端。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
.back{
position:fixed;
width: 50px;
height: 50px;
background-color: pink;
right: 30px;
bottom:100px;
display: none;
}
.container{
width: 900px;
height: 500px;
background-color: skyblue;
margin:400px auto;
}
</style>
</head>
<body>
<div class="container"></div>
<div class="back">返回顶部</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
//文档被卷进的距离，页面已加载直接跳到100的位置
$(document).scrollTop(100);
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top;//蓝色盒子距离页面顶端距离
//每当滚动条滚动的时候就触发window的scroll事件
$(window).scroll(function () {
// console.log(11);
console.log($(document).scrollTop());
//当滚动到卷进的距离等于蓝色盒子到页面顶端距离的时候，其实就是蓝色盒子开始的地方到页面顶端
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function () {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画，文档不能做动画
})
})
</script>
</body>
</html>
————————————————
版权声明：本文参考了下面两篇文章
原文链接：jQuery学习---这一篇就够了_时倾-的博客-CSDN博客原文链接：最全pink老师JavaScript笔记-JQuery 入门 基础部分（同步PPT）_琛一森的博客-CSDN博客_pink老师笔记
————————————————
