首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery (二)

使用jQuery处理事件 事件处理 一个栗子,单击p背景变成灰色 由于es6箭头函数不支持this绑定,所以无法使用箭头函数,只能使用匿名函数 html <!...'gray'); }); 效果 [20180821_175532.gif] 或者使用第二个参数,添加相关属性,完成事件相关触发 // 单击任意p,使其背景变成灰色 $('', { src...; // 触发没有命名空间单击处理程序 或者如下 // 单击一将会触发二上事件 $('#button1').click((e) => {$('#button2').trigger('button2'...https://api.jquery.com/category/events/event-object/ 自定义事件 一个栗子,实现发布订阅模型,先全体元素广播一个事件,单击一个按钮时候 $('#...实时事件 实时事件为,如果先前将所有a元素绑定了一个事件,接着创建一个新a节点,如果此时触发事件,则新创建a元素不会被触发事件,因为绑定不是实时事件

9.3K30
您找到你想要的搜索结果了吗?
是的
没有找到

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

one 绑定一次事件  绑定和解绑 文档装载完成以后,如果打算为元素绑定事件来处理完成某些操作,则可以使用 bind()方法来匹配元素进行特定事件绑定,bind()方法调用格式如下: bind...事件冒泡可能会引起预料之外效果,上例中,本来只想触发元素 click事件,然而 元素和元素click事件也同时被触 发了.因此有必要对事件作用范围进行限制.当单击元素,只 触发元素click...事件,而不触发 和元素上 click事件.当单击 元素,只触发 元素上click事件, 而不触发元素上click事件....; event.stopPropagation();//停止冒泡事件 }) 当单击span元素,只会触发span元素上click事件,而不会触发 div元素和body元素click事件.....jquery 其进行了封装,使之能兼容各大浏览器 (4) event.target()方法 event.target()方法作用是获取到触发事件元素.jquery其封装后,避免了 W3C,IE

8.2K20

JQuery最全常用方法指南

每个 象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。 trigger(type, [data]) 每一个匹配元素上触发某类事件。...page ” + settings.url + “”); }); ajaxSend(callback) 一个AJAX请求发送,执行一个函数。...(fn); //为id为msg元素单击事件添加函数 同样blur, focus, select, submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery返回集合内容无需我们自己循环遍历并每个对象分别做处理...与$(fn)等价 (3)toggle(evenFn, oddFn): 每次点击切换要调用函数。如果点击了一个匹配元素,则触发指定第一个函数,当再次点击同一元素,则触发指定第二个函数。...随后每次点击都重复这两个函数轮番调用。 //每次点击轮换添加和删除名为selectedclass。

10.9K20

jquery对象和dom对象相互转换

$("#msg").click(fn);   //为id为msg元素单击事件添加函数 同样blur,focus,select,submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery...,我们无需html元素上直接写事件,而可以直接为通过jquery获取对象添加事件。...当鼠标移动到一个匹配元素上面,会触发指定第一个函数。当鼠标移出这个元素,会触发指定第二个函数。 //当鼠标放在表格某行上将class置为over,离开置为out。...与$(fn)等价 (3)toggle(evenFn,oddFn): 每次点击切换要调用函数。如果点击了一个匹配元素, 则触发指定第一个函数,当再次点击同一元素,则触发指定第二个函数。...随后每次点击都重复这两个函数轮番调用。 //每次点击轮换添加和删除名为selectedclass。

3.3K40

jQuery:详解jQuery事件(二)

当鼠标移动到元素上,会触发指定第一个函数(enter);当鼠标移出这个元素,会触发指定第二个函数(leave)。   ...只有鼠标指针穿过被选元素,才会触发 mouseenter 事件。   mouseout与mouseleave   不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。   ...只有鼠标指针离开被选元素,才会触发 mouseleave 事件。   ...每次单击元素,依次触发指定相应函数,直到最后一个。随后每次单击都重复这几个函数轮番调用。   ...那么单击子元素A时候,会依次触发三个click事件单击元素B时候,会依次触发两个click事件

2.2K30

第79天:jQuery事件总结(二)

当鼠标移动到元素上,会触发指定第一个函数(enter);当鼠标移出这个元素,会触发指定第二个函数(leave)。   ...只有鼠标指针穿过被选元素,才会触发 mouseenter 事件。   mouseout与mouseleave   不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。   ...只有鼠标指针离开被选元素,才会触发 mouseleave 事件。   ...每次单击元素,依次触发指定相应函数,直到最后一个。随后每次单击都重复这几个函数轮番调用。   ...那么单击子元素A时候,会依次触发三个click事件单击元素B时候,会依次触发两个click事件

1.6K20

事件对象使用、属性和方法

和this来确定是不是由于冒泡而触发,经常用于事件冒泡处理事件委托 3 事件对象是用来记录一些事件发生相关信息对象。...事件对象只有事件发生才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁 4 jQuery事件对象作用 li都有一个共同父元素,而且所有的事件都是一致...,如果点击一个链接(a标签),浏览器不会跳转到新 URL 去,可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了 8 event.stopPropagation...()阻止事件冒泡,为防止事件冒泡到DOM树上,也就是不触发任何前辈元素上事件处理函数 9 event.which获取鼠标单击单击是鼠标的哪个键 10 event.which...3 11 event.currentTarget : 事件冒泡过程中的当前DOM元素,冒泡前的当前触发事件DOM对象, 等同于this 12 this和event.target区别

1.5K30

Jquery 使用技巧总结

value值设为test $("#msg").click(); //触发id为msg元素单击事件 $("#msg").click(fn); //为id为msg元素单击事件添加函数...Jquery已经为我们提供了各种事件处理方法,我们无需html元素上直接写事件,而可以直接为通过jquery获取对象添加事件。...当鼠标移动到一个匹配元素上面,会触发指定第一个函数。当鼠标移出这个元素,会触发指定第二个函数。 //当鼠标放在表格某行上将class置为over,离开置为out。...与$(fn)等价 (3)toggle(evenFn,oddFn): 每次点击切换要调用函数。如果点击了一个匹配元素,则触发指定第一个函数,当再次点击同一元素,则触发指定第二个函数。...随后每次点击都重复这两个函数轮番调用。 //每次点击轮换添加和删除名为selectedclass。

2.8K20

jQuery中on()、bind()、live()、delegate()之间区别

事件冒泡 当我们点击一个链接,其触发了链接元素单击事件,该事件则引发任何我们已绑定到该元素单击事件函数执行。...; }); 因此一个单击操作会触发alert函数执行。 ?...click事件接着会向树根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它某个后代元素上单击事件触发事件就会传给它。 ? 操纵DOM语境中,document是根节点。...,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况; 大括号替代方式:绑定较为灵活,可以给事件单独绑定函数; data 可选;需要传递参数; function 必需项;当绑定事件发生,需要执行函数...; }); 当我们a 上面点击时候,首先会触发它本身所绑定click事件,然后会一路往上,触发父元素,祖先元素上所有绑定click事件

1.2K30

js事件防止冒泡

jQuery这个事件对象进行了必要扩展,从而在不论什么浏览器中都能够使用这个属性。通过.target,能够确定DOM中首先接收到事件元素(即实际被单击元素)。...这样行为与我们讨论事件处理程序不是同一个概念,它是单击锚元素默认操作。类似地,当用户在编辑完表单后按下回车键。会触发表单submit事件,在此事件发生后,表单提交才会真正发生。...假设我们不希望运行这样默认操作。那么事件对象上调用.stopPropagation()方法也无济于事,由于默认操作不是正常事件传播流中发生。...事件传播和默认操作是相互独立两套机制,二者不论什么一方发生,都能够终止还有一方。假设想要同一候停止事件传播和默认操作,能够事件处理程序中返回false。...这是事件对象上同一调用.stopPropagation()和.preventDefault()一种简写方式。

2.5K40

jQuery 事件(三) 事件绑定和解绑、对象使用、自定义事件

由于浏览器事件冒泡特性,可以触发li把这个事件往上冒泡到ul上,因为ul上绑定事件响应,所以能触发这个动作。 事件对象 怎么才知道触发li元素是哪个一个?...,即是以页面为参考点,不随滑动条移动而变化 event.preventDefault() 方法:阻止默认行为 这个用特别多,执行这个方法后,如果点击一个链接(a标签),浏览器不会跳转到新 URL...为防止事件冒泡到DOM树上,也就是不触发任何前辈元素上事件处理函数 event.which:获取鼠标单击单击是鼠标的哪个键 event.which 将 event.keyCode 和 event.charCode...,通俗叫原生事件,这类型事件是需要有交互行为才能被触发 jQuery通过on方法绑定一个原生事件 $('#elem').on('click', function() { alert("触发系统事件...正常来说是不可以,但是jQuery解决了这个问题,提供了一个trigger方法来触发浏览器事件 $('#elem').trigger('click'); //绑定on事件元素上,通过trigger

4K30

jQuery进阶前言

前言: jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。...一、鼠标事件: 1、点击事件click()和dbclick(): 点击事件,就是当用户点击鼠标该响应动作,click是单击,dbclick是双击。...区域按下去,就触发了mousedown事件,松开触发了mouseup事件。...4、$.get(): 使用get()方法,采用GET方式向服务器请求数据,并通过方法中回调函数参数返回请求数据,它调用格式如下: $.get(url,function(data){...})...它调用格式如下: $.ajax([settings]) 其中参数settings为发送ajax请求配置对象,该对象中,url表示服务器请求路径,data为请求传递数据,dataType

2.4K20

JQuery基础

使用大公司CDN好处: 许多用户访问其它站点,已经从百度、新浪、谷歌和微软加载过jQuery。当用户访问我站点,会从缓存中加载jQuery,这样可以有效减少加载时间!...事件处理程序:当HTML中发生某些事件调用方法。...(提交表单),change(元素值(适用于表单字段)发生改变),focus(元素获得焦点),blur(元素失去焦点)事件; 文档/窗口事件:load(元素已加载触发jQuery1.8中废除。...当鼠标指针移动到元素上,会触发第一个函数(mouseenter);当鼠标指针移出这个元素,会触发第二个函数(mouseleave)。...$(selector).load(url,data,callback);   url:必须,希望加载URL;ps:可以将url选择器添加到url中;   data:可选参数,与请求一起发送字符串键值集合

4.6K51

FullCalendar 日历插件中文说明文档

查看演示 false buttonIcons 设置header中使用prev, next等变量对应按钮样式,只有当theme为true才有效,如果你调用jQuery ui样式但又不想使用它图标样式..."W" 鼠标单击和滑过 以下列出是当鼠标单击或者滑过日历中某个元素,回调函数callback。...属性 描述 dayClick 当单击日历中某一天触发callback,用法:$('#calendar').fullCalendar({dayClick: function(date, allDay...true startParam 使用URL方式获取events数据源时候, 自动插入到URL参数, 表示当前需要抓取日程事件起始时间。...日程事件拖动和缩放 拖动和缩放功能依赖于jQuery uidraggable和resizable,所以使用时要提前加载jQuery ui相关插件。

30.7K90

什么是jQuery

这里写图片描述 JqueryJavaScript封装,那么Jquery得到HTML标签后,也有对应方法来获取标签内容,动态创建、删除、修改标签。...JqueryJavaScript事件进行了封装,我们看一下以下API: window.onload:浏览器加载web页面触发,可以写多次onload事件,但后者覆盖前者 ready:浏览器加载...web页面触发,可以写多次ready事件,不会后者覆盖前者,依次从上向下执行,我们常用$(函数)简化 ready和onload同时存在,二者都会触发执行,ready快于onload change:当内容改变触发...mouseover:鼠标移入时触发 mouseout:鼠标移出触发 submit:提交表单触发,true表示提交到后台,false表示不提交到后台 click:单击触发 dblclick:双击触发...这里写图片描述 ---- Jqueryajax常用API 我们开始使用JavaScript学习AJAX时候,创建异步对象,需要根据不同浏览器来创建不同对象….装载XML文件时候,也有兼容性问题

3K70

学习jQuery这一篇就够了

需求描述:为 ul 下所有 li 添加单击事件,要求将该单击事件委托给 ul,当单击 li ,所对应 li 背景变为红色 1111 2222</...# 3.4.5 表单事件 # 1. focus() 方法描述:当失去焦点触发所绑定函数。...() { alert('表单提交了'); }); # 3.4.6 鼠标事件 # 1. click() 方法描述:当鼠标单击调用所绑定函数。...注意: mouseenter 事件和 mouseover 不同之处是事件冒泡方式。 mouseenter 事件只会在绑定它元素上被调用,而不会在后代节点上被触发。...注意: mouseleave 事件和 mouseout 不同之处是事件冒泡方式。 mouseleave 事件只会在绑定它元素上被调用,而不会在后代节点上被触发

81050

jQuery 事件

什么是事件 页面对不同访问者响应叫做事件事件处理程序指的是当 HTML 中发生某些事件调用方法。...该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。 注意:如需移除指定事件处理程序,当事件处理程序被添加,选择器字符串必须匹配 on() 方法传递参数。...() event.namespace 返回当事件触发指定命名空间 event.pageX 返回相对于文档左边缘鼠标位置 event.pageY 返回相对于文档上边缘鼠标位置 event.preventDefault...() 阻止事件默认行为 event.relatedTarget 返回当鼠标移动哪个元素进入或退出 event.result 包含由被指定事件触发事件处理程序返回最后一个值 event.stopImmediatePropagation...event.timeStamp 返回从 1970 年 1 月 1 日到事件触发毫秒数 event.type 返回哪种事件类型被触发 event.which 返回指定事件上哪个键盘键或鼠标按钮被按下

2.8K70

JS DOM学习笔记

元素onload事件是元素自己加载完毕触发,body onload才是全部加载完成。...();  //刷新当前页 10、window.event是IE下非常重要属性,用来获得发生事件信息,事件不局限于window对象事件,所有元素事件都可以通过event属性取得相关信息。        ...支持方法不一样 获取网页中那个元素触发事件IE中使用srcElement; FireFox里使用target 使用Dom获取和更改网页标签元素内文本,IE中使用innerText; FireFox...里使用textContent 动态为网页或元素绑定事件IE中绑定事件方法是attachEvent; FireFox中绑定事件方法是addEventListener jQuery之类框架进行了封装...,解决了不同浏览器上Dom不同 14、jQueryready和Domonload区别:window.onload只能注册一次,是在所有的Dom元素创建完毕、图片、CSS都加载完毕后才被触发;而jQuery

4K40

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券