一：事件
1.事件（简单概述）<div class="ele">123</div>var data = "后台获取的数据";box.onclick = function(ev) { ???// ev: 系统传入的事件对象 ???// a ???// ele.innerText ???if (data) { ???????// 逻辑 ???} else { ???????// 小菊花 ???}}var a = 10;二：鼠标事件
var box = document.querySelector(‘.box‘);// 悬浮box.onmouseenter = function () { ???box.style.cursor = "pointer"; ???console.log("鼠标悬浮了")}// 移动box.onmousemove = function () { ???console.log("鼠标在移动")}// 按下box.onmousedown = function () { ???console.log("鼠标按下")}// 抬起box.onmouseup = function () { ???console.log("鼠标抬起")}// 移开box.onmouseleave = function () { ???console.log("鼠标移开")}// 右键: 右键按下抬起为一次右键box.oncontextmenu = function (ev) { ???console.log("鼠标右键")}// 点击点的x坐标: ev.clientX | 点击点的y坐标: ev.clientY<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>鼠标事件</title> ???<style> ???????.box { ???????????width: 200px; ???????????height: 200px; ???????????background-color: orange; ???????} ???</style></head><body> ???<div class="box"></div></body><script> ???var box = document.querySelector(‘.box‘); ???// 悬浮 ???box.onmouseenter = function () { ???????box.style.cursor = "pointer"; ???????console.log("鼠标悬浮了") ???} ???// 移动 ???box.onmousemove = function () { ???????console.log("鼠标在移动") ???} ???// 按下 ???box.onmousedown = function (ev) { ???????console.log(ev); ???????// 鼠标的点击点 ???????// ev.clientX | ev.clientY ???????console.log(ev.clientX, ev.clientY); ???????console.log("鼠标按下") ???} ???// 抬起 ???box.onmouseup = function () { ???????console.log("鼠标抬起") ???} ???// 移开 ???box.onmouseleave = function () { ???????console.log("鼠标移开") ???} ???// 右键: 右键按下抬起为一次右键 ???box.oncontextmenu = function () { ???????console.log("鼠标右键") ???}</script></html>三：键盘事件
// 具体按下的是那个按键document.onkeydown = function () { ???// console.log("键盘按下了")}// ev: 系统回调事件函数,传递的事件对象// 键盘事件中,ev中有keyCode来唯一标识具体的按键// 通过ctrlKey | shiftKey | altKey 来标签特殊按键是否为按下状态document.onkeyup = function (ev) { ???console.log(ev); ???console.log(ev.keyCode, ev.altKey); ???console.log("键盘抬起了")}<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>键盘事件</title></head><body></body><script> ???// 具体按下的是那个按键 ???document.onkeydown = function () { ???????// console.log("键盘按下了") ???}; ???// ev: 系统回调事件函数,传递的事件对象 ???// 键盘事件中,ev中有keyCode来唯一标识具体的按键 ???// 通过ctrlKey | shiftKey | altKey 来标签特殊按键是否为按下状态 ???document.onkeyup = function (ev) { ???????console.log(ev); ???????console.log(ev.keyCode, ev.altKey); ???????console.log("键盘抬起了") ???}</script></html>四：定时器
一次性定时器：1.r1是定时器返回值，就是定时器创建先后的数字编号2.值在创建定时器1s后执行一次var r1 = setTimeout(function () { ???console.log("一次性定时器响了!1111");}, 1000);持续性定时器：1.r2是定时器返回值，就是定时器创建先后的数字编号2.第一次触发在1s后，然后每1s触发一次var num = 0;var r2 = setInterval(function () { ???console.log("持续性性定时器响了%d次!", ++num);}, 1000);清除一个定时器（清除定时器本质就是对定时器创建的数字编号进行清除操作）：1.通过定时器数字编号来清除2.清除定时器不分种类可以混用clearTimeout(r1) ?== clearInterval(1)清除页面所有定时器（也就是创建一个新的定时器，使其是最后一个，然后循环遍历所欲的定时器，一个一个清除掉，这样就会清除掉所有的定时器）var n = setTimeout(function () {}, 1); // n一定大于之前所有的定时器编号for (var i = 0; i < n; i++) ?{ // 将1~n之间所有定时器再清一遍 ???clearTimeout(i)}<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>定时器</title></head><body></body><script> ???// 一次性定时器 ???var r1 = setTimeout(function () { ???????console.log("一次性定时器响了!1111"); ???}, 1000); ???var r2 = setTimeout(function () { ???????console.log("一次性定时器响了!2222"); ???}, 1000); ???var num = 0; ???var r3 = setInterval(function () { ???????console.log("持续性性定时器响了%d次!", ++num); ???}, 1000); ???????console.log("代码向下执行了!"); ???console.log(r1, r2, r3); ???// 如何取消定时器 => 通过定时器数字编号(该定时器是第几个创建的) ???clearInterval(2); ???var r4 = setTimeout(function () { ???????console.log("一次性定时器响了!4444"); ???}, 1000); ???console.log(r4); ???// 将页面中所有定时器清除 ???// 注: 清除定时器不分种类可以混用 ???var n = setTimeout(function () {}, 1); // n一定大于之前所有的定时器编号 ???for (var i = 0; i < n; i++) ?{ // 将1~n之间所有定时器再清一遍 ???????clearTimeout(i) ???}</script></html>五：JQ导入
什么是JQuery？JQuery是一个简洁高效的且功能丰富的JavaScript工具库，是对原生JavaScript二次分装的工具函数集合优点：开源，简洁的选择器，简化的Ajax操作，良好的浏览器兼容，强大的链式操作
六：JQ选择器
// 获取满足条件的所有页面元素jq对象$(‘css3选择器语法‘);// 拿到指定索引的页面元素jq对象$(‘css3选择器语法‘).eq(index);// 拿到指定索引的页面元素js对象 (jq对象转js对象)$(‘css3选择器语法‘).get(index);// js对象转jq对象$(js对象);
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>jq选择器</title> ???<style> ???????body .box:first-child {} ???</style></head><body><div class="box">123</div><div class="box">456</div></body><script src="js/jquery-3.3.1.js"></script><script> ???// 使用jq => 该html页面有jq环境 => 引入jq => 依赖jq,所以jq要提前引入 ???console.log(jQuery); ???console.log($); ???// jq选择器 ???// $("css3选择器位") ???// 命名小规范, jq变量一般以$开头 ???var $boxs = $(‘.box‘); ???console.log($boxs); ???// 拿到123 ???// js与jq对象的相互转化 ???// jq拿到文本 ???console.log($boxs.text()); ???// 只获取第一个box ???var $box = $(‘.box:nth-child(1)‘); ???console.log($box); ???console.log($box.text()); ???console.log($box[0].innerText); ???// 总结: jq对象就是用数组包裹的js对象, 可以包裹0个到多个 ???// jq转js => 使用js语法 ???var box1 = $boxs[0]; ???console.log(box1); ???var box2 = $boxs.get(1); ???console.log(box2); ???// js转jq => 使用jq语法 ???var $box1 = $(box1); ???console.log($box1); ???</script></html>七：文档加载
JS:
JS中window提供了一个window.onload = fn， 页面结构及页面所需资源全部加载完毕，只能绑定一个事件方法window.onload = function() {}
JQ：
页面结构加载完毕，能绑定多个事件方法，可以简写一：可以保证页面结构一定加载完毕二:可以保证数据的局部化（不会被外界直接读写）$(function(){})
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>页面加载</title> ???<script src="js/jquery-3.3.1.js"></script> ???<!--在页面加载前的脚步语句中,如何获取页面对象 => 主动睡觉,页面一加载完毕,就醒 --> ???<!--js中window提供了一个 window.onload = fn 事件: 页面结构及页面所需资源全部加载完毕, 只能绑定一个事件方法--> ???<!--jq中document提供了一个 $(document).ready(fn) 事件: 页面结构加载完毕, 能绑定多个事件方法, 可以简写--> ???<script> ???????// 时间得当就可以处理, 问题多多 ???????// setTimeout(function () { ???????// ????var $box = $(‘#box‘); ???????// ???????// ????console.log($box); ???????// }, 1) ???</script> ???<script> ???????window.onload = function() { ???????????console.log("window load 1"); ???????}; ???????window.onload = function() { ???????????console.log("window load 2"); ???????}; ???????$(document).ready(function() { ???????????console.log("document load 1"); ???????}); ???????$(function() { ???????????console.log("document load 3"); ???????}); ???????// 简写: $(fn) ???</script> ???<script> ???????$(function () { ?// 页面结构加载完毕 ???????????$(‘.box‘).eq(1).text("000"); ???????}); ???</script></head><body> ???<div id="box" class="box">123</div> ???<div class="box">456</div> ???<img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/></body><script>// 一,可以保证页面结构一定加载完毕, 二,可以保证数据的局部化(不会被外界直接读写)$(function () { ???var $box;});</script><script></script></html>八：JQ操作元素对象
链式操作：（几乎）每一个方法都具有返回值（元素对象）// 1.文本内容var res = $(‘.box:first-child‘).text("100").html("<b>888</b>");// console.log(res);// 2.样式res = $(‘.box‘).eq(1) ???.css("color", "pink") ???.css("font-size", "30px") ???.css({ ???backgroundColor: "orange", ???"height": "80px"}) ???.css("width", function (index,oldVal) { ???console.log(this); // js对象 转化为jq对象来使用 ???console.log($(this).height()); ???// 宽度为自身高度的2倍 ???return $(this).height() * 2;}) ???.css("border-radius"); // 能获取计算后样式// console.log(res);// 3.类名res = $(‘.box:nth-child(3)‘).addClass("abc").removeClass("abc");console.log(res);// 4.全局属性$(‘img‘).attr("src", "http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg") ???.removeAttr("src");console.log($(‘img‘).attr("ooo"));<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>jq控制元素对象</title> ???<style> ???????.abc { ???????????background-color: red; ???????????/*...*/ ???????} ???????.box { ???????????border-radius: 5px; ???????} ???</style></head><body><div class="box">001</div><div class="box">002</div><div class="box">003</div><img src="" ?ooo="100w"></body><script src="js/jquery-3.3.1.js"></script><script> ???$(function () { ???????// 链式操作: (几乎)每一个方法都具有返回值(元素对象) ???????// 1.文本内容 ???????var res = $(‘.box:first-child‘).text("100").html("<b>888</b>"); ???????// console.log(res); ???????// 2.样式 ???????res = $(‘.box‘).eq(1) ???????????.css("color", "pink") ???????????.css("font-size", "30px") ???????????.css({ ???????????????backgroundColor: "orange", ???????????????"height": "80px" ???????????}) ???????????.css("width", function (index,oldVal) { ???????????????console.log(this); // js对象 转化为jq对象来使用 ???????????????console.log($(this).height()); ???????????????// 宽度为自身高度的2倍 ???????????????return $(this).height() * 2; ???????????}) ???????????.css("border-radius"); // 能获取计算后样式 ???????// console.log(res); ???????// 3.类名 ???????res = $(‘.box:nth-child(3)‘).addClass("abc").removeClass("abc"); ???????console.log(res); ???????// 4.全局属性 ???????$(‘img‘).attr("src", "http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg") ???????????.removeAttr("src"); ???????console.log($(‘img‘).attr("ooo")); ???})</script></html>九：JQ获取盒子信息
9.1显示信息
盒子信息：宽高，内边距，宽边，外边距var res = $(‘.box‘).css("padding");console.log(res);宽高res = $(‘.box‘).width();console.log(res);宽高+内边距res = $(‘.box‘).innerWidth();console.log(res);宽高+内边距+边框res = $(‘.box‘).outerWidth();console.log(res);宽高+内边距+边框+外边距res = $(‘.box‘).outerWidth(true);console.log(res);9.2位置信息
相对窗口偏移：算margin产生的主题console.log($(‘.box‘).offset().top, $(‘.box‘).offset().left);绝对定位偏移（top，left），不算margin产生的距离console.log($(‘.box‘).position().top, $(‘.box‘).position().left);
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>jq获取盒子信息</title> ???<style> ???????body { ???????????margin: 0; ???????} ???????.sup { ???????????width: 350px; ???????????height: 350px; ???????????background-color: pink; ???????????position: relative; ???????????margin: 10px; ???????} ???????.box { ???????????width: 200px; ???????????height: 200px; ???????????background-color: orange; ???????????padding: 10px; ???????????border: 20px solid black; ???????????margin: 50px; ???????????position: absolute; ???????????top: 5px; ???????????left: 5px; ???????} ???</style></head><body> ???<div class="sup"> ???????<div class="box"></div> ???</div></body><script src="js/jquery-3.3.1.js"></script><script> ???// 盒子信息: ???// 宽高 | 内边距 | 宽边 | 外边距 ???var res = $(‘.box‘).css("padding"); ???console.log(res); ???// 宽高 ???res = $(‘.box‘).width(); ???console.log(res); ???// 宽高+内边距 ???res = $(‘.box‘).innerWidth(); ???console.log(res); ???// 宽高+内边距+边框 ???res = $(‘.box‘).outerWidth(); ???console.log(res); ???// 宽高+内边距+边框+外边距 ???res = $(‘.box‘).outerWidth(true); ???console.log(res);</script><script> ???// 相对窗口偏移 ???console.log($(‘.box‘).offset().top, $(‘.box‘).offset().left); ???// 绝对定位偏移(top,left) ???console.log($(‘.box‘).position().top, $(‘.box‘).position().left);</script></html>十：事件
事件名，函数$(‘.box‘).on(‘click‘, function (ev) { ???// jq事件对象对js事件对象 兼容 ???console.log(ev);})取消默认事件：取消系统自带的功能，a标签点击的href转跳ev.preventDefault(); | 事件方法 return false;阻止事件的传播（阻止事件的冒泡）：父子有同样事件，子响应了事件，会将事件传递给父，父级也会响应同样的事件。只让子点击子响应，只点击到父，父响应，子级需要阻止事件的传播ev.stopPropagation();<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>jq事件</title> ???<style> ???????.sup { ???????????width: 200px; ???????????height: 200px; ???????????background-color: red; ???????} ???????.sub { ???????????width: 100px; ???????????height: 100px; ???????????background-color: orange; ???????} ???</style></head><body> ???<div class="box"> ???????<span class="sss">123</span> ???????<i>456</i> ???</div> ???<div class="sup"> ???????<div class="sub"></div> ???</div></body><script src="js/jquery-3.3.1.js"></script><script> ???// $(‘.box‘).on(‘click‘, function () { ???// ????// alert(this.innerText); ???// ????alert($(this).text()) ???// }) ???????// $(‘.box‘).click(function () { ???// ????alert($(this).text()) ???// }) ???var d = "AAA"; ???// 事件名, 委派的子类(可选,了解), 参数(可选,了解), 函数 ???$(‘.box‘).on(‘click‘, ‘span‘, {aaa: d}, function (ev) { ???????// jq事件对象对js事件对象 兼容 ???????console.log(ev); ???????console.log(ev.data.aaa) // 拿到传入的参数 ???}) ???// sup右键,弹出自身背景颜色 ???// 右键有系统自带的功能, 取消掉 => 取消默认事件 ???$(‘.sup‘).on(‘contextmenu‘, function (ev) { ???????// 取消默认事件 ???????ev.preventDefault(); ???????var bgColor = $(this).css(‘background-color‘); ???????alert(bgColor); ???????// return false; ???}) ???// sup和sub都具有单击事件 ???$(‘.sup‘).click(function () { ???????console.log("父点击") ???}) ???// 子父拥有同样事件时,子响应了事件,会将事件传递给父,父级也会响应同样的事件 ???$(‘.sub‘).click(function (ev) { ???????// 阻止事件的传播 => 阻止事件的冒泡 ???????ev.stopPropagation(); ???????console.log("子点击") ???})</script></html>JQuery
原文地址：https://www.cnblogs.com/liuxiaolu/p/10320290.html