首页
学习
活动
专区
圈层
工具
发布

前端开发JS——jQuery常用方法

鼠标事件之mousemove事件 mousemove方法用于监听用户鼠标指针移动的操作,只有鼠标指针移动就生效,只在绑定事件的元素的区域里。...handlerOut(eventObject):当鼠标指针离开元素时触发执行的事件函数 7、jQuery鼠标事件之focusin与focusout事件 focusin 方法用于监听用户元素聚焦操作(如...").on("click","p",fn) 注:事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。...快捷参数:fast默认200ms,slow默认600ms,duration时间,complete:function(){}等 5、jQuery中淡出/淡入动画之fadeOut和fadeIn方法(改变元素的透明度...快捷参数:fast默认200ms,slow默认600ms,duration时间,complete:function(){}等 7、jQuery中淡入效果之fadeTo方法(改变元素的透明度) fadeTo

6.3K20

JQuery 入门学习(二)

web前端 Jquery     时隔几天,天气依旧炎热,不过坐在空调房里的我一点也感觉不到~(笑)。我的事也在稳步进行着,这个下午继续我上一篇的Jquery。    ...事件详解     在很多Jquery代码中,我们总是能看到是这样的形式: $(document).ready(function(){ //Jquery代码 });     所有的代码被套在了最外层的...事件是什么概念,和很多编程一样,事件是由用户在执行相应的操作后自动触发的一个过程,我们可以给某事件绑定一个处理函数,当用户触发了这个事件后,就能执行我们绑定的函数。    ...我列举一些Jquery中常用的事件及其绑定函数:         click 鼠标点击事件 (最常用,当鼠标点击某对象时触发此函数)         change 对象被改变(如input框中写入...2000毫秒的时间显示id=main的div元素 remove() $("div#main").remove(); 移除id=main的div元素     通过这些方法,我们能动态地对html页面进行操作

1.7K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何编写一个 jQuery 插件

    重写了本文的初步功能实现,支持一个页面多个画图板。但为简单起见,本文保持不变。 ? 正文 简单的说一个 jQuery 插件只是我们拿来扩展 jQuery prototype 对象的一个方法。...基本的插件 从最简单开始,我们要做的第一件事是给选中的div加一个边框,好让用户能看到画板的区域。 创建 index.html 文件,引入 jQuery ,然后创建并引入我们的插件文件。...然后这个方法就可以在所有的 jQuery 对象上调用。 刷新页面,应该能够看到一个 200x200 的黑框 ? 支持链式调用 上面的代码能工作,但是还欠缺了很多必要的东西。...}; // 使用 $('.sketchpad').sketchpad().hide(); // 支持链式调用 保护 $ 化名并引入私有作用域 $作为一个简写化名确实非常方便,但是在实际使用中,总免不了会与其它...如果你想要对特定的某个元素做一些操作的话(比如获取数据属性,计算特定的位置),你就会需要使用each()来枚举这些元素。

    92440

    JavaScript动漫作品(闭幕)

    ,并为它在web上使用做好准备 介绍 如今,在我们的最后一部分中,我们将通过建立事件处理程序,而不是在点击button时机器人做出响应,我们的机器人将在屏幕上尾随着鼠标而移动。...在这个过程中。我们将讨论跨浏览器的代码,而且触摸屏也可用 假如你看一下我们 上一次的代码。...比如,不论什么时候,你能够让一个用户点击有 “my_div’ id的‘div’时, ‘my_function()’运行。 或者,当用户在‘my_other_div’上移动鼠标时。...在上面的几行代码中,我们说过,不管什么时候用户在舞台(stage)元素上移动鼠标。将触发一个叫做 stage_mousemove_listener()的函数(注意。在命令中。我们并没有包括參数)。...相似地,当用户在robot元素上移动鼠标。

    1.7K00

    【Ajax进阶】跨域和JSONP的学习

    了解同源策略和跨域   同源策略     什么是同源 如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源。...中JSONP的实现过程 jQuery中的JSONP,也是通过script标签的src属性实现跨域数据访问的,只不过,jquery采用的是动态创建和移除script标签的方式,来发起的JSONP的数据请求...在发起JSONP请求的时候,动态向header中append一个script标签 在JSONP 请求成功后,动态从header中移除刚才append进去的script标签 案例——淘宝搜索   效果 实现搜索框...防抖的应用场景 用户在输入框中连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源;   实现防抖   什么是节流 节流策略,顾名思义,可以减少一段时间内事件的触发频率...节流的应用场景 鼠标连续不断的触发事件(如点击),只在单位时间内触发一次; 懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算机的频率,而不必去浪费CPU资源。

    1.6K30

    jQuery Mobile的学习时间botton按钮的事件学习

    程序员都很懒,你懂的! 生命的绝唱来机只争朝夕,如诗的年华更需惜时如金。不要让今天的懈怠成为一生的痛。 每天都在进步。...事件 描述 hashchange 启用可标记 #hash 历史,哈希值会在一次独立的点击时发生时变化,比如一个用户点击后退按钮,会通过 hashchange事件进行处理。...pagecreate 在页面创建成功之后,触发的事件,但增强完成之前。 pagehide 在页面切换后老页面隐藏之后,触发的事件。 pageinit 在页面页面初始化时,触发的事件。...pageload 在页面完全加载成功后触发。 pageloadfailed 如果页面请求失败触发。 pageremove 在窗口视图从 DOM 中移除外部页面之前触发。...pageshow 在过渡动画完成后,在"到达"页面触发。 scrollstart 当用户开始滚动页面时触发。 scrollstop 当用户停止滚动页面时触发。

    2.2K20

    鼠标滑过显示图片大图效果

    描写叙述: 当用户将鼠标放到 图片上时。显示图片的大图。 效果图: 说明: 用到了mouseover、mouseout、mousemove三个事件。...分别表示鼠标滑过图片、鼠标移除图片、鼠标在图片上移动三个事件。 对于mouserover事件。做下面几件事: 获取原标题,并将标题置为空,防止title和提示框同一时候出现。...设置该提示框的位置并显示。 对于mouseout做下面几件事情: 将title还原,预备下次使用。 移除提示框 对于mousemove,我们须要动态的调整提示框的位置。...由于还没看到动画那一块,所以动画处理的不是太好,以后在优化吧。 完整代码: "+this.Mytitle+""; $("body").append($tooltip); //加入到页面中

    3.5K10

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    事件对象: 由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致在不同 浏览器中获取事件对象变得比较困难.针对这个问题,jquery进行了必要的扩 展和封装,从而使得在任何浏览器中能很好的轻松的访问获取事件对象以及事...停止事件冒泡 停止时间冒泡可以阻止事件中其他对象的事件处理函数被执行.在jquery中提供了stopPropagation()方法来阻止冒泡事件....可以用同样的方法解决 元素上的问题 阻止默认行为 网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为 在jquery中,提供了preventDefault...() 方法是在mouseover中相当于 IE浏览器的event.fromElement()方法,在mouse 中相当于IE浏览器的event.toElement方法. jquery对其进行了封装,使之能兼容各大浏览器...上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    10.2K20

    H5前端性能测试快速入门

    在浏览器组成部分中,渲染引擎是用户直接相关,呈现用户所需页面的部分。所以从渲染引擎入手,了解HTML解析与页面展示。 渲染引擎工作流 ?...并且在js中可能包括document.write等改变页面布局的操作,所以渲染引擎会等待js下载完成再开始渲染。所以用户侧页面加载时间会因为等待而变得更长。...解决因分布、带宽、服务器能力带来的访问延迟高问题,提供一系列加速解决方案。所以,如果H5的用户分散在全国各地,建议尽可能的将资源放到CDN,如腾讯云CDN。 时间相关: ?...首资源下载时间:从开始下载到第一个资源均下载完成的时间,不包括页面绘制时间。 总资源下载时间:从开始下载到所有资源均下载完成的时间,不包括页面绘制时间。...用户可操作时间:从页面开始加载到用户操作可响应的时间。 上述各种时间指标应根据当前H5的具体情况,选择合适的测试指标。

    3K83

    H5前端性能测试快速入门

    在浏览器组成部分中,渲染引擎是用户直接相关,呈现用户所需页面的部分。所以从渲染引擎入手,了解HTML解析与页面展示。 渲染引擎工作流 ?...并且在js中可能包括document.write等改变页面布局的操作,所以渲染引擎会等待js下载完成再开始渲染。所以用户侧页面加载时间会因为等待而变得更长。...解决因分布、带宽、服务器能力带来的访问延迟高问题,提供一系列加速解决方案。所以,如果H5的用户分散在全国各地,建议尽可能的将资源放到CDN,如腾讯云CDN。 时间相关: ?...首资源下载时间:从开始下载到第一个资源均下载完成的时间,不包括页面绘制时间。 总资源下载时间:从开始下载到所有资源均下载完成的时间,不包括页面绘制时间。...用户可操作时间:从页面开始加载到用户操作可响应的时间。

    2.2K60

    jQuery对象操作

    //2.定事件,确定在对象上面的操作 //3.匿名函数,在事件里面包含的匿名函数,jQuery或其他前端框架的特点 //三步:找对象(找...()当鼠标移动到对象上面的时候触发 $("img").mousemove(function(e){ // pageX() 属性是鼠标指针的位置,相对于文档的左边缘...console.log('我走了,哈哈,页面定位X:'+e.pageX+",y:"+e.pageY) }); //fuction test() {alert(...事件 事件 释义 mousedown() 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件 mousemove() 当鼠标指针在指定的元素中移动时,就会发生 mousemove...mouseout() 当鼠标指针从元素上移开时,发生 mouseout 事件,该事件大多数时候会与 mouseover 事件一起使用 mouseup() 当在元素上放松鼠标按钮时,会发生 mouseup

    1.8K31

    SSM框架版本的CRM项目实战教程【crm客户管理系统】

    客户关系管理(CRM)在当今企业运营中扮演着重要角色,公司为提高核心竞争力,利用相应的信息技术以及互联网技术来协调企业与顾客间在销售、营销和服务上的交互,从而提升其管理方式,向客户提供创新式的个性化的客户交互和服务的过程...分不同角色登录不同的页面实现不同的功能; 数据库只添加了几个用户其他数据为空自己导入; 本文主要是完成市场活动的相关操作。...就是在原来的jsp页面的,查询条件的文本框的内容是在form表单里面的,而且这个时候的type属性是submit,必须要把他改成button,不然点的时候,他最后都会提交一张没有任何参数的表单,而且是在你触发了你的按钮的...发现每次我遇到一个超级大坑,吃完饭回来之后找到原因的可能性最大。 4.前端的分页插件 1.首先引入外部文件,复制文件到jquery里面。 2.在jsp页面引入资源,记得pom文件刷一下。...5.隐藏域的使用 上面处理完之后,还处在一些问题: 问题1: 在查询框中输入内容,不点击查询按钮 点击分页按钮 结果为查询框中的内容生效了 问题2: 在查询框中输入内容,点击查询按钮 再在查询框中输入内容

    2.8K50

    jQuery中find&filter、live&bind对比介绍及图片懒加载

    在jQuery 1.4.1中,甚至也支持 focus 和 blue事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。...另外,在jQuery 1.4.1中,也能支持hover(映射到"mouseenter、mouseleave")。 2. live() 并不完全支持通过DOM遍历的方法找到的元素。...如果用户仅仅在首屏停留,还可以节省流量。如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载。...(每次取offset的值会引发页面的reflow),计算出可视区域,当图片的位置出现在可视区域中,将src的值替换成真实的地址,此时图片就开始加载了。...将整个窗口看成是一个大容器,那么也可以在页面中设置一个小容器,在小容器中也同样可以实现图片的延迟加载。 实例插件下载地址:http://pan.baidu.com/s/1c01sSaW

    1.1K31

    鼠标框选(上篇)

    1、应用描述   对于鼠标框选,网上已有粗糙的实现方案,这里也注重思路和方案,逐步对代码进行完善。   ...鼠标框选,其实是对传统选择的一个升级,想象这样一种场景,用户选择单选框/复选框,多行多列等,如果需要用户单击选择,数量越多,用户体验越差,对于用户来说,越简单的操作,体验越好,如果通关鼠标拖动,产生一个框选区域...,可以对框选区域内所有元素进行操作,也不失为批量操作的一个选择。...div作为选择框,创建四个div分表作为上、下、左、右四个mask   2、添加div到dom,同时添加mask到dom   3、监听mousemove事件,重绘div和mask 3、代码框架   今天作为上篇...); 说明:为了dom操作简单,这里假设以引入jquery,代码属于可以作为伪代码阅读,未经过测试,只是基本框架,下篇会进行完善,敬请期待。。。

    1.1K10
    领券