01.HTML级别的事件:
<button οnclick=fn()><button> 在html代码上 也就是button上面绑定了一个事件
on只是一个前缀 click是事件 点击事件
function （）{} function 是我们的声明函数的关键词 ()是我们的参数列表
fn()实际上就是我们定义的 事件处理程序 监听器
函数是fn fn() 这表示函数调用
当点击事件发生的时候，浏览器会帮我们调用外面的函数声明 位于函数体里面的函数fn就执行了
02.DOM0级别的事件绑定:
btn.οnclick=function(){} btn是事件源 click是事件 function(){}是我们的监听器
function 是btn对象上的一个方法
由于我们DOM0级别的事件是基于属性赋值的 所以我们的每一次重新的赋值 就会将其原本的值覆盖掉
03.DOMO2级别的事件绑定:
addEventListener("参数1","参数2"）在事件池里面 添加一个事件
参数1 是我们触发的事件 参数2是我们的回调函数 或者说 是我们的监听器
removeEventListener("参数1","参数2") 在事件池里移除一个事件
这里移除事件的参数2不能用function(){} 要使用外面定义好的函数 否则会出现问题 (就是将你解绑的事件 或者说 监听器 写一致)
04.client系列：
clientWidth 指的是 内部的宽 也就是我们设定的width+左右的内边距
clientHeight 得到的是 我们内部的高 也就是我们设定的height+上下内边距
clientTop指的是 我们上边框的粗细 当然没有单位 默认单位都是px
clientLeft指的是 我们左边边框的粗细
用于判断pc端还是移动端，上来先得到一屏得宽度 然后根据这个宽度来判断用户是通过手机端访问 还是移动端访问
注意：不能进行设置 只能获取到值 得到的是一个数值，没有单位
得到的一定是一个整数，不是小数 不管你的内容是否溢出 得到的是可视区的大小
05.offset系列：
offsetTop是我们得偏移量 就是我们这个元素 相对于参考点上面得距离
offsetLeft是我们得偏移量 就是我们这个元素 相对于参考点左面得距离
offsetParent得到是参考系 参考它的父级
offsetWidth就是内容width宽+左右两边得Padding+左右两边得border
06.scroll系列：
scrollHeight真正内容的高度 clientHeight可视区的高度
scollTop 卷上去的距离
只要有滑动条 并且你滚动 不论是朝上还是朝下 朝左还是朝右 只要滚动 就会触发的事件
上面卷起来的长度 就是我们的scollTop
07.定时器
setTimeout 一次性定时器 setInterval 循环定时器
clearTimeout() 关闭一次性定时器 括号里面填你的函数名 clearInterval() 关闭循环定时器
01-tab选项卡
先找到所需要的节点
通过循环给到每一个span添加指针悬浮事件
先取消所有的类，再给到鼠标指针所选中的
处理下面的ul li 还是先隐藏，再把所需要的显示出来
（onmouseover 鼠标指针移动到指定元素所发生的）
02-导航条吸顶
拿到需要用到的节点 要拿到导航条到顶部的距离offestTop
添加滚动事件 onscroll
定义一个变量表示对顶部的一个偏移量
当这个偏移量大于等于导航条到顶部的一个距离时，通过css的绝对定位将其固定，让它等于fixed的值
03-图片延时加载
data-src=""是我们的自定义属性 如果你要用自定义属性的话 需要使用data-开头 ，src表示的是二次请求的地址
拿到img, 卷上去的高度， 满屏可视区的高度 卷上去的高度+一屏的高度（ot）
通过for of 拿到图片上面的偏移量
当卷上去的高度+一屏的高度>=ot+100 时 这个100就是说你的图片已经出来100了
我们返回所需要的属性值data-src
04-滚动新闻列表
先拿到 div 和ul的节点 要获取ul的真实内容高度
对 ul进行定位
为了让我们的内容能够不断循环
我们通过ul.innerHTML+=ul.innerHTML;实现不停循环
添加定时器
setInterval(function(){
},50)
定义一个top
let top=Math.abs(parseInt(ul.style.top))
Math.abs为绝对值 parseInt返回一个整数 ul.style.top表示滚动上去的值
if top的值大于ul的真实的高度值 我们让top的值=0，也就是说让ul下来重新滚动
else 让top的值parseInt(ul.style.top)-2+"px" -2+“px”是向上移动的像素
05-弹幕效果
拿到按钮
添加按钮点击事件 先定义一个定时器timer为null
拿到输入框的值value
定义一个出来的弹幕标签span 把word内容写进去 innerHTML
给sapn一个绝对定位
定义冲出来的位置
将span挂载到dom树上
添加定时器 设置多少秒所移动的距离
同时要做一个判断，判断span是否移动到了屏幕外
if(parseInt(span.style.left)<-1*span.offsetLeft)
span.offsetLeft表示span到屏幕的距离
当冲出屏幕外会变成负值，让其*-1是负负得正，这样条件才能成立
当超出后移除span removeChild(span);
然后清空定时器避免影响到下一个弹幕
（Math.floor 就是去掉一个数字小数点后面）
06-拖拽
定义鼠标起始X轴坐标，鼠标起使Y轴坐标，新移动到的X，Y轴坐标，盒子起使X,Y轴坐标，盒子新移动到的X轴Y轴坐标，X轴和Y轴移动的距离
let mouseX,mouseY,newMouseX,newMouseY,divX,divY,newDivX,newDivY,disX,disY;
添加鼠標按下事件 onmousedown
定义鼠标按下时的坐标
mouseX=e.clientX;
mouseY=e.clientY;
（e.clientX 和 e.clientY 就是鼠标当前的坐标）
鼠标按下的时候 还要获取盒子左上角的坐标 offsetTop offsetLeft
divX=box.offsetLeft;
divY=box.offsetTop;
添加鼠标在目标元素中移动事件 onmousemove
newMouseX=e.clientX
newMouseY=e.clientY
（鼠标移动的距离 X轴移动的距离 就是我newMouseX-mouseX
鼠标移动的距离 Y轴移动的距离 就是我newMouseY-mouseY）
disX=newMouseX-mouseX;
disY=newMouseY-mouseY;
现在已经计算好距离了 下来只需要让我的盒子跟着动
newDivX=divX+disX;
newDivY=divY+disY;
box.style.left=newDivX+"px";
box.style.top=newDivY+"px";
定义弹起事件 onmouseup
当我们鼠标弹起的时候 需要清空 鼠标移动的事件
box.οnmοusemοve=null;
<BOM>
01-window
window.open 是打开一个页面 参数就是你要打开的地址
win.close就是关闭你刚才的打开的页面 win就是你拿到的返回值
setTimeout(要执行的代码, 等待的毫秒数) 在指定的毫秒数后调用函数或计算表达式
02-location
获取地址栏信息
console.log(window.location.href);
location是一个对象 对象是属性的无序集合
设置地址栏信息
window.location.href=""
刷新
reload就是普通刷新
window.location.reload(true) 强制刷新
替换地址栏信息
window.location.replace("")
03-navigator
console.log(window.navigator.userAgent);
我们使用这个值来判断网页是在哪个浏览器运行的
if(/chrome/i.test(agent）)
Chrome表示当前是谷歌浏览器
firefox 火狐浏览器
msie 低版本的IE浏览器
ActiveXObject 高版本的IE浏览器
04-history
console.log(window.history.length); 查看你这个选项卡 当前这个窗口 他的历史总共有几个页面
window.history.back(); 返回到上一个页面
window.history.forward();进入到历史中的下一个页面
window.location包含有关当前 URL 的信息 可通过href带往新地址
window.history.go(1);进入到历史中的下一个页面
（1）$(function(){})这就是入口函数
（2）基础选择器：
标签选择器：$("p")选中所有的p标签
id选择器： $("#demo1")选中id是demo1的标签
类选择器: $(".demo2")选中类名是demo2的标签
交集选择器: $("p.demo3")选中的就是类名为demo3的p标签
分组选择器: $("h1,h2,h3")选中的是我们所有的h1,h2,h3标签
后代选择器: $(".demo4 p")选中的是我们类名为demo4的内容中的p标签
通配符选择器:$("*")选中我们页面上所有标签
儿子选择器: $(".demo5>p")选中的是我们类名为demo5的儿子p标签
兄弟选择器: $(".demo5+h1")选中的是我们类名为test5的后面一个兄弟h1 如果后面的兄弟不是h1 那么他就不起作用
N兄弟选择器:$(".demo6~p")选中的是我们类名为demo6的后面的所有的p标签
jquery对象.css("你要修改的属性","属性值") ,jquery中的选择器和css里面的相似。
（3）子元素过滤选择器：
:root 选中根标签 也就是html标签
:nth-child(2) 选中元素的第二个节点
:first-child 选中元素下的第一个节点和:nth-child(1)一样
:last-child 选中每一元素的最后一个节点
:nth-last-child(2) 这表示选中倒数第二个节点
:only-child 选中每个元素中只有一个的节点
:nth-child(2n) 和 :nth-child(even) 一样 选中每个元素中偶数的节点 从1开始算
:nth-child(2n+1) 和 :nth-child(odd) 一样 选中每个元素中奇数的节点 从1开始算
:nth-of-type(2) 针对的是同类型的标签 选中每个元素中第二个节点
:last-of-type 选中某一个类型标签的最后一个
:nth-last-of-type(2)选中的就是某一类标签的倒数第二个
:only-of-type选中每个元素中唯一的一个元素
:nth-of-type(2n-1)和:nth-of-type(odd)是一样的 表示选中每个元素排行为奇数的节点， 索引从1开始
:nth-of-type(2n)和:nth-of-type(even)是一样的 表示选中每个元素排行为偶数的节点
（4）基础选择过滤器
li:eq(0) 表示选中第一个li eq里面加的是 索引 默认是0开始
li:first 表示选中第一个li
li:last 表示选中最后一个li
li:even 表示选中偶数个的li 注意:我们这里起使坐标是0
li:odd 表示选中奇数个的li
li:gt(2)表示索引大于2的
li:lt(2)表示索引小于2的
:header 表示选中所有的标题标题标签
li:not(:eq(1)) 选中除了第二个li(索引为1的li)之外的所有li
（5）属性选择器
[attribute] h1[title] 就是选中具有title这个属性的h1标签
[attribute=value] h1[title=world] 这就是选中title属性值为world的标签
[attribute!=value] h1[title!=world] 这就是选中title属性值不为world的标签
[attribute^=value] h1[title^=hello] 这就是选中title属性值以hello开头的
[attribute$=value] h1[title$=hello] 这就是选中title属性值以jq结尾的
[attribute*=value] h1[title*=wangcai]这就是选中title属性值有wangcai的属性
[attribute][id] h1[title][id]这表示选中既有title属性的 又有id属性的
（6）内容过滤器
:contains(text) $("li:contains(Jquery)")选中内容包含Jquery的li
li:has(a) 这表示 内容有a标签的
li:empty 这是选中内容为空的li标签
li:not(:empty) 这是选中内容不为空的li标签
li:parent 这是匹配子元素或者文本元素的
（7）可见性选择器
:visible 选中看得到得元素
:hidden 选中隐藏得元素
.hide()目标元素隐藏
.val()可以拿到Input中得value值
（8）动画
show()显示目标元素
hide()隐藏目标元素
slideDown()通过使用滑动效果 显示目标元素
slideToggle()通过使用滑动效果 在显示和隐藏状态之间进行切换
animate() 用来改变css里面的样式，其改变的过程是一个渐变的过程 ，所以看起来是动画效果
animate(),()里面第一个参数 是要改变的属性和属性值 第二个参数 是改变的时间
例如：$(this).parent().animate({right:0},500)
attr()是以前的setAttribute和getAttribute的结合体
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
