说在前面: 在日常工作中难免会遇到一些滚动事件的应用,页面滚动到一定位置显示 返回顶部 按钮,header 头部 fixed 固定等,这时候就可以使用 scroll() 方法来实现我们的需求。...scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。
[需求] 滚动页面到顶部,实现某元素固定到顶部效果 点击某个按钮,页面滚动到相应的位置 滚动页面,当到达某个位置时,高亮对应的相关按钮 [元素吸顶实现方式] 关于元素吸顶效果,通过查阅相关资料和相关测试...,有三种方式(还有一种是jquery的方法,这里就不介绍了) [一、使用position:sticky] [1....sticky元素效果完全受限于父级元素,使用条件: sticky元素的父元素的overflow只能设置为visible,否则会导致没有粘滞效果 sticky元素的父元素不能设置固定的高度,否则会导致没有粘滞效果...obj.offsetTop; obj = obj.offsetParent; } return offsetTop; } 通过在vue的mounted生命周期函数中添加监听事件滚动的事件...,相对于offsetTop,该方法不用考虑到吸顶元素的父级元素和页面滚动条的高度,直接对该元素进行处理即可,实现如下: /**滚动事件 */ handleScroll() {
,点击页面的其它位置不会触发。...,如果点击了p标签就会触发到两个事件,一个是p自己的点击事件,一个是div的点击事件。...移除事件 元素.unbind(“事件名”); 移出事件,直接对元素使用unbind 或 off 来移出指定的事件 例如在某些情况下,按钮只能点击一次,点击一次后再点击就无效 案例:按钮只能点击一次...之后再点击就无效 注意:一般情况,不会使用unbind,推荐使用变量控制事件 案例:点击按钮偶数次可以,奇数次则失效 var i=0; $("#myBtn").click(function(){ i++... 移动(本元素),距离 通过用top=”+=” top=”-=” 来直接对元素本身的属性赋值,我们用一个按钮来演示效果 <input type="button" name="" id="topBtn
1 筛选[掌握] 筛选与之前“选择器”雷同,筛选提供函数 1.1 过滤 eq(index|-index),获取第N个元素 •index:一个整数,指示元素基于0的位置...jquery对其进行了封装,使之能兼容各大浏览器 (3)event.stopPropagation()方法 阻止事件的冒泡.js真符合W3C规范的stopPropagation()方法在IE浏览器中无效....jquery 对其进行了封装,使之能兼容各大浏览器 (4) event.target()方法 event.target()方法的作用是获取到触发事件的元素.jquery对其封装后,避免了 W3C,IE...必须在jQuery对象上触发函数,发送ajax请求 load(url, [data], [callback])载入远程 HTML 文件代码并插入至 DOM 中 •url:待装入 HTML 网页网址...在jQuery 1.3中也可以接受一个字符串了。 •callback:载入成功时回调函数。
jQuery 学习了jQuery感觉是真的很好用,感谢那些参与代码编写的大佬们 1.1 初认识 1.1.1 入口函数 作用相当于onload事件,等dom结构渲染完毕即可执行 但又有所不同 onload...中指操作指定类名,不影响原先的类名 3.2 jQuery效果 注意: 动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。....5, hight: 300 }) }) }) 注意设置top,left的时候要给div加定位,否则无效...3.2.5 事件切换 jQuery中有hover()事件,功能类似于css中的hover hover(function,function) 传入2个参数,第一个参数是鼠标移入是触发的函数,第二个是鼠标移出时触发的函数...位置操作 offset()设置获取元素偏移 获取的位置是相对于文档的偏移坐标,与父级没有关系 传入的参数是一个对象 //获取偏移量 $('div').offset() //更改位置 $('div')
validationEngine ·jQuery v1.4.4+ 注意事项: 1.演示版本为 v2.2.4; 2.v2.0 以下的版本参数并不完全通用; 对 validationEngine.jquery.css...对 jquery.validationEngine.js 文件进行修改,修改如下: 1.将 312 行的 field.focus(); 注释掉,当有输入控件在 Table 内部时,验证会导致回到顶部的现象...; 对 jquery.validationEngine-zh_CN.js 文件进行修改,修改如下: 1.修改部分提示文字; 2.增加两个对中文字符的验证规则:minSizeCN 和 maxSizeCN;...blur” 触发验证的事件,支持事件可参考 jQuery 的事件说明。...} funcCall validate[funcCall[functionName]] 调用外部函数 【API 方法】 名称 示例 说明 attach $(“#form_id”).validationEngine
学习jQuery的时候,很快过了一遍,发现好多知识点不清晰。看来还是要写出来加深印象,平时多练习! jQuery是一个Javascript函数库,轻量级,“写得少,做的多!”...第二部分:jQuery语法: 1.jQuery语法是通过选取HTML元素,然后对选取的元素进行某些操作。...元素 $("tr :odd"):选取所有奇数位置的元素 第四部分:jQuery事件: 1.事件:页面对不同访问者作出的响应。...当鼠标指针移动到元素上时,会触发第一个函数(mouseenter);当鼠标指针移出这个元素时,会触发第二个函数(mouseleave)。...3.jQuery 删除元素: remove():删除被选元素及子元素。ps:remove()可接受一个参数,对被删元素进行过滤。参数是jQuery选择器的语法。
当按下鼠标左键时记录鼠标位置作为起始位置;当鼠标移动时一直记录鼠标的当前位置;当松开鼠标左键时记录鼠标位置作为结束位置。...参数 e 是传递过来的事件对象,相当于 DOM 中的 event 对象, jQuery 对该对象进行了进一步封装, pageX 和 pageY 用了获取事件发生的位置, jQuery...jQuery在遵循W3C规范的情况下,对event对象做了进一步封装,使得该对象在各大浏览器下都可以正常运行。...图5.1.10 hover事件 5.3.2 toggle事件 该事件用于模拟鼠标的连续单击事件,第1次单击时触发第1个函数的执行;第2次单击时触发第2个函数的执行;第n次单击时触发第n个函数的执行...假设给所有的文本框通过bind绑定了鼠标单击事件,然后再动态创建一个文本框,此时绑定的鼠标单击事件对这个新创建的文本框无效;但是如果使用live进行绑定,那么新创建的文本框也会绑定鼠标单击事件。
作者从指针的基本概念讲起,逐步深入到指针的用法、指针与数组、指针与函数等高级应用,条理清晰,通俗易懂。代码示例也非常实用,让我在实际编程中能够更好地运用指针。...用户可设置光标为自由模式、粘滞模式或锁定模式。在自由模式下,光标可无障碍移动;粘滞模式下,光标在屏幕间移动会有阻力;锁定模式则将光标固定在单一屏幕上。...工具还允许设置主工作区,光标在此区域内可自由移动,不受粘滞/锁定模式影响。对于非矩形屏幕布局,DMT Cursor可设置穿越无效区域,使光标能跳转至相邻显示器。...2.3 Launcher - 启动器 Launcher是一款通过快捷键快速启动应用程序并将其定位在多显示器预设位置的实用工具。用户可为每个应用设置“魔法词”并定义多达四个启动位置。...启动位置可通过拖拽调整,并支持同时启动多个应用或同一应用的不同实例。对于难以定位的应用,如Chrome,可通过命令行参数指定启动位置。
当按下鼠标左键时记录鼠标位置作为起始位置;当鼠标移动时一直记录鼠标的当前位置;当松开鼠标左键时记录鼠标位置作为结束位置。...参数 e 是传递过来的事件对象,相当于 DOM 中的 event 对象, jQuery 对该对象进行了进一步封装, pageX 和 pageY 用了获取事件发生的位置, jQuery 事件对象会在下面进行详细介绍...jQuery在遵循W3C规范的情况下,对event对象做了进一步封装,使得该对象在各大浏览器下都可以正常运行。...图5.1.10 hover事件 5.3.2 toggle事件 该事件用于模拟鼠标的连续单击事件,第1次单击时触发第1个函数的执行;第2次单击时触发第2个函数的执行;第n次单击时触发第n个函数的执行。...假设给所有的文本框通过bind绑定了鼠标单击事件,然后再动态创建一个文本框,此时绑定的鼠标单击事件对这个新创建的文本框无效;但是如果使用live进行绑定,那么新创建的文本框也会绑定鼠标单击事件。
1.事件绑定的几种常见方式(以click事件为例) jquery: $(selector).click(function(){...})...将事件绑定在document上,所有事件触发冒泡到根节点document的时候,判断是否为click事件、并且是否为selector元素都符合则执行事件函数 delegate方法 原理上delegate...事件的元素加上样式:cursor: pointer; 然后再用live绑定事件 $('selector').live('click', function() {alert('你点我了'); }) 如果方法一对你无效... 可能有时候的需求需要触发某个特定事件,这时我们会想当然使用trigger触发事件,但是却没有考虑到带来的隐患。...; } 1、直接在元素上绑定回调函数 click me 2、JS获取DOM元素对象后,对onclick属性赋值
filter 和 find 的区别 结论 submit a form in ajax success callback-AJAX 成功时回调函数中提交 Form API JQuery-Error...可以对单个 Elem 进行滚动,或者对 window 进行滚动 可以滚动到对应 y 轴位置,数字作为参数,也可以滚动到对应 elem $('#BoxModalContent').scrollTop(...直接用 form.serialize() 对于文件选择的 input 无效。...规定当请求成功时运行的函数。...规定传递到函数的额外数据。 function 必需。规定当事件发生时运行的函数。
插件的特色: 封装强悍、例子充足(基本都验证类型都被囊括)、调用轻便 注意事项: 1.演示版本为 v2.2.4; 2.v2.0 以下的版本参数并不完全通用; 对 validationEngine.jquery.css...对 jquery.validationEngine.js 文件进行修改,修改如下: 1.将 312 行的 field.focus(); 注释掉,当有输入控件在 Table 内部时,验证会导致回到顶部的现象...; 对 jquery.validationEngine-zh_CN.js 文件进行修改,修改如下: 1.修改部分提示文字; 2.增加两个对中文字符的验证规则:minSizeCN 和 maxSizeCN;...alertText”:”* 请输入 HELLO”}, 将以上两个JS文件进行合并 【options 参数说明】(可选) 名称 默认值 说明 validationEventTrigger “blur” 触发验证的事件...,支持事件可参考 jQuery 的事件说明。
鉴于网站模板的灵活性和强大的功能,现在广大设计师和开发者对html5网站的实际需求日益增长。为了造福大众,Mockplus的小伙伴整理了2018年最好的免费响应式HTML5网页模板供大家学习。...TravelAir - 旅游观光HTML网站模板 开发技术:HTML 5, CSS 3, JS, jQuery 网站特色: l Bootstrap 4 l HTML5和CSS3 l 粘滞标题 l 跨浏览器兼容性...Asentus - 免费的响应式引导页HTML5模板 开发技术:HTML 5, CSS 3, Bootstrap 3, JS, jQuery 网页特色: l 粘滞菜单栏 l 滑动标题背景 l 幽灵按钮...艺术作品和创意项目在模板正面和中心位置展示,非常吸引人。引人注目的黑白媒体以及视差滚动为丰富多彩的独特风格提供了完美的背景。 ...总结: 这些免费的HTML网站模板对网页设计师和开发甚至初学者都很有用,他们不需要花费过多的精力就可以自己创建的个人网站。
>Button 或者对复杂些的处理,绑定全局函数: Button函数,且不能取消绑定不够灵活;二是全局函数容易混淆,项目到达一定规模后容易失控,导致意外。...常用 jQuery API 选择元素和创建元素使用 $(), find, filter 处理事件使用 on, off, trigger 操作元素内容使用 text, html 操作元素位置和尺寸使用 offset...事件对象 e 由于原生 DOM API 写起来太过繁琐,以及兼容性的处理太过复杂,这里推荐使用 jQuery 等现成框架,业余时间再对常见的兼容性进行了解,以便遇到意外时知道问题出在何处。...比如用户点击按键 #btn_update 后,触发了点击事件 click,事件的监听函数接收到的事件对象 e 就会包含这次点击的相关信息,如点击坐标、发起元素、传递路径等等。
鉴于网站模板的灵活性和强大的功能,现在广大设计师和开发者对html5网站的实际需求日益增长。为了造福大众,Mockplus的小伙伴整理了2018年最好的免费响应式HTML5网页模板供大家学习。...开发技术:HTML 5, CSS 3, JS, jQuery 网站特色: l Bootstrap 4 l HTML5和CSS3 l 粘滞标题 l 跨浏览器兼容性 l Google字体 TravelAir...开发技术:HTML 5, CSS 3, Bootstrap 3, JS, jQuery 网页特色: l 粘滞菜单栏 l 滑动标题背景 l 幽灵按钮 l HTML5 / CSS3 如果你想要轻量级,灵活且易于定制...艺术作品和创意项目在模板正面和中心位置展示,非常吸引人。引人注目的黑白媒体以及视差滚动为丰富多彩的独特风格提供了完美的背景。 ...总结: 这些免费的HTML网站模板对网页设计师和开发甚至初学者都很有用,他们不需要花费过多的精力就可以自己创建的个人网站。
; } }); Jquery版本在1.5之前,返回的是XHR对象;当版本高于1.5之后,返回的是deferred对象,可以使用 done 和 fail。...; },5000); }; 在未改装前使用无效:(原因在于$.when()的参数只能是deferred对象) $.when(wait()) .done(function(){ alert("哈哈...; }); 对wait()函数进行改装: var wait = function(){ let df = $.Deferred(); // 新建一个deferred对象 setTimeout...; df.resolve(); // 将df对象的执行状态从"未完成"改为"已完成",从而触发done()方法。...// df.reject(); // 将df对象的执行状态从"未完成"改为"已失败",从而触发fail()方法。
发送给服务器的字符串后键值对 success() 当请求成功时回调的函数 dataType 从服务器返回的预期数据。 ... success() 当请求成功时回调的函数 jQuery.getScript() 使用一个HTTP GET请求从服务器加载并执行一个JavaScript文件。 ...jQuery.getScript(url[success(script,textStatus,jqXHR)]) url 一个包含发送请求的URL data 发送给服务器的字符串后键值对...发送给服务器的字符串后键值对 success() 当请求成功时回调的函数 用法: $.post("test.php", { name: "John", time: "...global 类型:Boolean 是否触发全局AJAX事件。默认为(true) 设置为false 将不会触发全局ajax 事件,可用于控制不同的AJAX事件。
某人需要在时间控件给文本框赋值时,触发事件函数。实现的效果: 1、文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件。...onpropertychange触发事件,在trigger之前判断当前焦点位置。...这样onpropertychange就对手工输入无效; 3、实现手工输入结束后要触发事件,使用onchange事件 1、其他浏览器中也可以使用onchange模拟输入结束后触发事件,但是没法使用...http-equiv="Content-Type"; content="text/html; charset=utf-8"> jquery...:-D 或者是Jquery的锅?
return基本数据类型时无效, return引用类型,返回值是return的内容 3.构造函数中的this指什么?...Object.assign(obj1,obj2) 将后面的对象像前面合并,相同的属性会被覆盖,返回值是第一个参数 17.对Object.create(obj)的理解?...(function(){}) window.onload是在页面所有的元素都加载完成后才触发 (function(){})是在页面的dom结构加载完毕后就触发 dom里的内容不一定都已经加载完成 28...jQuery.noConflict() jQuery 使用 noConflict 方法来放弃 调用时的命名,之后由 jQuery 代替 进行编写 54、如何用jQuery获取元素在文档中的位置?...(“dom”).offset().top无定位的位置 (“dom”).position().top有定位的位置 55、瀑布流的实现原理 先将图片绝对定位,通过计算出一排能够容纳几列元素,然后寻找各列之中所有元素高度之和的最小者
领取专属 10元无门槛券
手把手带您无忧上云