目录
原生态javascript加载函数和jQuery加载函数的使用及区别：
?3.jQuery的加载函数 ?2种 ?一个页面可以出现多次
4.js的加载函数和jQuery的加载函数出现在一个页面，先后顺序版本有关 ?jQuery3.0版本以上 ? js快
原生态javascript加载函数和jQuery加载函数的使用及区别：
? 1.原生态js加载函数的编写?? 2种形式
??????????? a.window.onload = function(){}?? 1个?? 多个的情况，前者无效
??????????? b.window.addEventListener('事件名称',function(){});? 多个
??????????? 在一个页面中出现多个window.onload，前者会覆盖前者
?window.onload = function(){ alert('第1个加载函数'); } window.onload = function(){ alert('第2个加载函数'); } 运行后前面的会被覆盖 所以运行结果是 第二个加载函数2.js中可写多个加载函数的方法（但会被覆盖）
window.addEventListener('load',function(){ alert("111") }); window.addEventListener('load',function(){ alert("222") });?3.jQuery的加载函数 ?2种 ?一个页面可以出现多次
$(document).ready(function(){ alert(22); }); // 简写 $(function(){ alert(123); })4.js的加载函数和jQuery的加载函数出现在一个页面，先后顺序
版本有关 ?jQuery3.0版本以上 ? js快window.onload = function(){ alert("原生态js") } $(function(){ alert('jQuery') });
jQuery中三种绑定事件的方法：
// 加载函数 $(function(){ // 1.标签绑定绑定事件的方式 // (1)直接调用click点击事件的方法即可 $("#btn1").click(function(){ alert("我点击了这个按钮") }); // (2)可以通过标签对象调用on这个方法来绑定一个指定的事件。 $("#btn1").on('click',function(){ alert("on实现的点击"); }); // (3)可以通过调用bind方法进行绑定一个事件 $("#btn1").bind('click',function(){ alert("bind 点击") }); })
获取滚动条被滚动的距离：
$(window).scroll(function(){ console.log($('body').scrollTop()+$('html').scrollTop()) })
合成事件hover 鼠标移除与触发：
//1.合成事件hover $(function(){ // 参数中第1个回调函数的作用：鼠标触碰式触发 // 参数中第2个回调函数的作用：鼠标离开式触发 $("#btn2").hover(function(){ console.log('111') // 标签显示show 属于jQuery中的动画效果 // $("#oDiv").show(); $("#oDiv").css("display","block"); },function(){ console.log('222') // 标签隐藏 // $("#oDiv").hide(); $("#oDiv").css("display","none"); });
?事件传播与解绑事件：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* a标签属于行内元素，不能设置宽度和高度 */ a{ background-color: red; /* 转成行内块状 或者块状 */ display: inline-block; width:150px; height: 40px; /* 居中 */ text-align: center; /* 先获得行高，实现垂直居中 */ line-height: 40px; /* 去掉下划线 */ text-decoration: none; } /* 伪类选择器 */ a:hover{ background-color: yellow; color: red; } </style> <!-- 引入jQuery库 --> <!-- <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> --> <!-- jQuery1.7 --> <script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //1.合成事件hover $(function(){ // 参数中第1个回调函数的作用：鼠标触碰式触发 // 参数中第2个回调函数的作用：鼠标离开式触发 $("#btn2").hover(function(){ console.log('111') // 标签显示show 属于jQuery中的动画效果 // $("#oDiv").show(); $("#oDiv").css("display","block"); },function(){ console.log('222') // 标签隐藏 // $("#oDiv").hide(); $("#oDiv").css("display","none"); }); // toggle事件 $("#btn3").click(function(){ console.log("我点击了"); // 在jQuery中所有的动画效果都是默认改变标签的宽度，高度，透明度 $("#oDiv2").toggle(3000); }) }); </script> <!-- 事件传播如何组织 --> <script type="text/javascript"> // 事件传播：在多个标签中设置点击事件，只允许当前点击的标签有效 // 其它则无效----解决 阻止事件传播 // 阻止事件传播的顺序：从小到大。 $(function(){ // p标签设置一个点击事件 $("p").click(function(){ alert('p段落的点击事件'); return false;//阻止事件传播 }) // 设置oDiv3的点击事件 $("#oDiv3").click(function(){ alert('oDiv3的点击事件') return false;//直接返回false 阻止传播 }) // $("body").click(function(){ // alert('body点击事件') // }); // 事件坐标 pageX pageY 都是通过event事件对象调用 $("body").click(function(){ // 获取鼠标所点击的位置 // 鼠标的坐标 console.log(event.pageX+" "+event.pageY); // // 偏移量 考虑了外边距,边框,内填充 console.log(event.offsetX+" "+event.offsetY); // // 如果没有滚动条，与pageX和pageY是一样的 // // client 可视区宽度和高度 console.log(event.clientX+" "+event.clientY) }); }); </script> <!-- 解绑事件 --> <script type="text/javascript"> $(function(){ // unbind off $("#btn4").click(function(){ alert("恭喜你中奖了~"); // 调用解绑事件 $(this).unbind(); 解绑事件 $(this).off(); 第二种解绑事件 // $(this).disable();//禁用 无效 // disabled 是属性 不是样式 不能用css去设置 $(this).attr("disabled","disabled"); }); var index = 1; $("#btn5").click(function(){ // 点击（奇数次可以，偶数次不行） // index为奇数的时候可以 为偶数的时候不行 if(index % 2 == 1){ console.log(index); } index++; }); $("#btn6").one('click',function(){ alert("只有一次机会") }) }); </script> </head> <body> <button id="btn1" disabled="disabled">按钮</button> <hr> <!-- 伪类选择器的使用hover --> <a href="">我的老婆</a> <hr> <button type="button" id="btn2">按钮</button> <div id="oDiv" style="width:100px;height: 100px;background-color: red;display: none;"></div> <hr > <button type="button" id = "btn3">toggle</button> <div id="oDiv2" style="width:100px;height: 100px;background-color: red;display: none;"></div> <hr> <h4>事件传播如何阻止</h4> <div id = "oDiv3" style="width: 200px;height: 200px;background-color: red;"> <br><br><br><br> <p style="width:100%;height: 20px;background-color: yellow;">我是p段落</p> </div> <hr> <h4>解绑事件</h4> <button id="btn4">点击抽象</button> <button id="btn5">点击（奇数次可以，偶数次不行）</button> <button id="btn6">one方法 一次性</button></button> </body> </html>
jQuery中的动画效果演示：
点击时实现缩放显示和隐藏：
function test1() { // div隐藏和显示 $("div").eq(0).show(2000) } function test2() { // div隐藏和显示 $("div").eq(0).hide(2000) } function test3() { // div隐藏和显示 $("div").eq(0).toggle(1000) }点击时上下隐藏的实现：
?
//慢慢隐藏 高度慢慢缩短 function test4() { $("div").eq(1).slideUp(1000); } function test5() { $("div").eq(1).slideDown(1000); } //两个方法的结合 function test6() { $("div").eq(1).slideToggle(1000); }实现透明度的淡出，淡去效果：
//慢慢隐藏 改变透明度慢慢隐藏 function test7() { $("div").eq(2).fadeIn(1000); } function test8() { $("div").eq(2).fadeOut(1000); } //两个方法的结合 function test9() { $("div").eq(2).fadeToggle(1000); }自定义动画：
// 自定义动画 function test10(){ $("div").eq(3).animate({ width:"+=300", height:"+=300" },800) }自定义变大变小动画：
// 自定义动画 点击变大与变小 var index=1; function test10(){ if(index%2==1){ $("div").eq(3).animate({ width:"+=10", height:"+=10" },800)}else{ $("div").eq(3).animate({ width:"-=10", height:"-=10" },800) } index++; }自定义让div盒子每秒位移增加:
$(function(){ // 定时器 每隔200毫秒加2 window.setInterval(function(){ $("div").last().animate({ left:"+=2px" },2); },100); })
更多内容：
?