第三章 jQuery中的动画 一、jQuery样式相关方法 宽度 = width + 2padding + 2border + 2margin //获取视口区的宽高： 1、$(window).height() 2、$(window).width() //获取内容区的宽高： $('div').width(); $('div').height(); //获取内容+padding区的宽高： 3、$('div').innerHeight() 4、$('div').innerWidth() //获取内容+padding+border区的宽高： 5、$('div').outerHeight() 6、$('div').outerWidth() //获取内容+padding+border+margin区的宽高： $('div').outerWidth(true); $('div').outerHeight(true); //获取相对于文档的偏移 7、.offset() //获取相对于定位父元素的偏移 8、.position() //横向滚动条左侧的偏移 9、.scrollLeft() //横向滚动条上侧的偏移 10、.scrollTop() //获取离它最近的父定位元素 11、.offsetParent() 二、效果 1.基本效果 1）隐藏 hide() 2）显示 show() 3）隐藏与显示 toggle() 2.淡入淡出效果 1）淡入 fadeIn() 2）淡出 fadeOut() 3）淡入到 fadeTo() 4）淡入与淡出 fadeToggle() 3.滑动效果 1）滑下 slideDown() 2）滑上 slideUp() 3）滑上与滑下 slideToggle() 4.自定义效果 animate()

JS前端响应劫持 const trackerXHR = () => {     // 拿到 XMLHttpRequest     let XMLHttpRequest = window.XMLHttpRequest     // 保存原有的open方法     let XMLOriginOpen = XMLHttpRequest.prototype.open     // 重写 open 方法 目的是为了保存 ethods, url 这个参数的值 用于埋点上报     // 不能用箭头函数     // 1. 箭头函数没有 arguments     // 2. 箭头函数会改变指向 我们需要将 this指向 XMLHttpRequest     // 3. 箭头函数this绑定的是上一层的this     XMLHttpRequest.prototype.open = function (methods, url, async) {         // 将值挂在XMLHttpRequest.logData 中         this.logData = {             methods,             url         }         // 执行原有的open方法         return XMLOriginOpen.apply(this, arguments)     }     // 保留原有的send方法     let XMLOriginSend = XMLHttpRequest.prototype.send     XMLHttpRequest.prototype.send = function (request) {         //  send 里 去监听         const startTime = new Date() // 计算接口的duration, send 时记录请求时刻         const handle = (eventType) => {             return () => {                 //延迟两秒后初始化，防止用户切换页面过快                setTimeout(()=>{                     window.pageChange.RefreshState()                },2000)             }         }         this.addEventListener('load', handle('load'), false)         this.addEventListener('error', handle('error'), false)         this.addEventListener('abort', handle('abort'), false)         return XMLOriginSend.apply(this, arguments)     } } trackerXHR()

JQuery 过滤器大全 1.基本过滤器： selector:first 获取所有已选择到的元素中的第一个元素 selector:last 获取所有已选择到的元素中的最后一个元素 selector:even 获取所有已选择到的元素中的索引为偶数的元素 selector:odd 获取所有已选择到的元素中的索引为奇数的元素 selector:eq(index) 获取所有已选择到的元素中的索引为index的元素 selector:lt(num) 获取所有已选择到的元素中的索引值小于num的元素 selector:gt(num) 获取所有已选择到的元素中的索引值大于num的元素 selector1:not(selector2) 获取所有已选择到的元素中的除了selector2的元素 selector:header 获取所有已选择到的元素中的标题元素(h1~h6) 2.内容过滤器： selector:contains(text) 获取所有已选择到的元素中文本包含text的元素 selector:empty 获取所有已选择到的元素中的空元素(没有子节点) selector:parent 获取所有已选择到的元素中的非空元素(有子节点)，如$("div:parent"); selector1:has(selector2) 获取所有已选择到的元素中包含selector2的元素，如$("div:has('span')"); 3.可见性过滤器： 隐藏类型分两种： 1）不占据屏幕空间 display:none; <input type="hidden"> 2）占据屏幕空间 visibility:hidden; opacity:0;//透明度为0 使用： :visible 选择所有占据屏幕空间的元素 :hidden 选择所有不占据屏幕空间的元素 4.属性过滤器： selector[attrKey] 获取所有已选择到的元素中具有属性attrKey的元素 selector[attrKey=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素 selector[attrKey^=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素 selector[attrKey$=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素 selector[attrKey*=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素 selector[attrKey!=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值不为以attrVal的元素或者没有属性attrVal的元素 5.后代选择器： selector:nth-child(index) 获取每个selector元素中索引为index的子元素。【注意】index从1开始 selector:first-child 获取每一个selector元素中的第一个子元素（每个父元素的第一个子元素） selector:last-child 获取每一个selector元素中的最后一个子元素（每个父元素的最后一个子元素） selector:only-child 获取每一个selector元素中的独生子子元素（每个父元素如果只有一个孩子元素，获取该元素） selector:first-of-type 获取每个selector元素中每种类型子元素中的第一个 selector:last-of-type 获取每个selector元素中每种类型子元素中的最后一个 6.表单过滤器： :checked 选取所有被选中的元素，用于复选框、单选框、下拉框 :selected 选取所有被选中的元素，该选择器只适用于<option> :focus 选取当前获取焦点的元素 :text 选取所有的单行文本框(<input type="text">) :password 选取所有的密码框 :input 选取所有的<input>,<textarea>,<select>,<button>元素。 *注意，$(":input")是选中可以让用户输入的标签元素；而$("input")是选择名字为input的标签元素。* :enable 选取所有可用元素，该选择器仅可用于支持disable属性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>) :disable 选取所有不可用元素，该选择器也仅可用于支持disable属性的html元素。 :radio 选取所有的单选框 :checkbox 选取所有的多选框 :submit 选取所有的提交按钮 :image 选取所有的input类型为image的表单元素 :reset 选取所有的input类型为reset的表单元素 :button 选取所有的input类型为button的表单元素 :file 选取所有的input类型为file的表单元素

监听窗口滚动是否到底部       //监听窗口滚动加载     $(window).scroll(function () {       var scrollTop = $(this).scrollTop(); //滚动条目前滚到的高度       var windowHeight = $(this).height(); //文档高度       var scrollHeight = $(document).height(); //滚动条高度+ 文档高度   判断滚动到底部:滚动条目前滚到的高度 + 文档高度  = （滚动条高度+ 文档高度）       //检测是否是接近底部       if ((scrollTop + windowHeight) / scrollHeight >= 0.9 && $this.loading) {       //业务       }     });

jQuery的事件和API 一、事件 on() 在选定的元素上绑定一个或多个事件处理函数。 off() 移除一个事件处理函数。 trigger() 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。 二、鼠标事件 click() 单击 dblclick() 双击 hover() 悬停 mousedown() 按下 mouseup() 抬起 mouseenter() 移入 不支持子元素 mouseleave() 离开 不支持子元素 mouseout() 离开 支持子元素 mouseover() 进入 支持子元素 mousemove() 移动 三、键盘事件 keypress() 按键按下 keyup() 按键抬起 keydown() 按键按下 四、表单事件 focus() 聚焦事件 blur() 失去焦点事件 change() 当元素的值发生改变时激发的事件 select() 当textarea或文本类型的input元素中的文本被选择时触发的事件 submit() 表单提交事件，绑定在form上