jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件处理能力。 ...一、jQuery中的事件 1、加载DOM: 执行时机:在常规的JavaScript中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法...要解决这个问题,可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。...第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。第三个参数则是用来绑定的处理函数。举个实际的例子,下面网页中,单击“标题”链接将显示内容。 ...明天继续完成jQuery事件的下半部分,包括的内容有合成事件、事件冒泡、移除事件等内容。
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。 ...接上篇jQuery:详解jQuery中的事件(一) 3、合成事件 jQuery有两个合成事件——hover()方法和toggle()方法,同ready()方法一样,这些都是jQuery自定义的方法... 上面代码中,当单击element元素时,事件对象就被创建了。...这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。 停止事件冒泡:停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。...方法来阻止元素的默认行为。
Jquery事件 1、 绑定事件示例代码: 绑定事件 display:none;”> 什么是绑定事件?...: 这里是合成事件测试代码 display:none;”>这里的内容默认是隐藏的 //JQuery中目前有两个合成事件hover(),toggle();你可以这样理解:合成事件就是可以触发两个函数的事件 //鼠标停留显示隐藏内容,离开触发第二个函数隐藏内容 /*$(function...mybut”>Joyous 博客–Jquery教程 多个事件 display:none;”>多个事件隐藏...(); }) }); 6、 基本动画示例代码: 基本动画 display:none;”> 这里隐藏很多内容,慢慢的出来
e.target == $("#id/.class")[0]) { //函数体 } }); }); target 属性规定哪个 DOM 元素触发了该事件
否定式伪类: $(‘#myid li:not(.myClass)’)选择id为myid的元素中不属于myClass类的所有列表项(li)....func1和func2 toggleClass(“someclass”): 单击时轮流添加或删除someclass....事件捕获和事件冒泡:事件捕获是从父节点开始将事件传递给子节点,而事件冒泡则正好相反。JQuery采取事件冒泡的策略。 事件对象:事件发生时执行的函数可以把事件对象作为参数。...event.target属性:保存发生事件的目标元素 event.stopPropagation(): 阻止事件继续冒泡 event.preventDefault(): 阻止事件的默认操作 $(...”}),修改JQuery对象的css .hide(): 将JQuery对象的内联css属性”display”设置为”none” .show(): 将JQuery对象的内联css属性”display”
Jquery 的初体验 需求:使用Jquery和javascript给一个按钮绑定单击事件 注意:使用Jquery之前要将第三方jar包导入 Jquery给一个按钮绑定单击事件,Jquery中的$()代替window.onload // alert($); // 测试jquery引入是否成功!...:none;" class="none">style的display为"none"的div class为"hide"的div...){ $trObj.remove(); } // 在事件的function函数中,有一个this对象,这个this对象是当前正在响应事件的dom对象...而jquery的页面加载完成之后,会把所有注册了函数都按照注册的顺序,依次全部执行。 事件 **click()** 绑定单击事件。触发单击事件 **mouseover()** 绑定鼠标移入事件。
:block;display:none; } jquery.js" type="text/javascript"> jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。...() 阻止事件的默认行为 event.relatedTarget 返回当鼠标移动时哪个元素进入或退出 event.result 包含由被指定事件触发的事件处理程序返回的最后一个值 event.stopImmediatePropagation...() 阻止其他事件处理程序被调用 event.stopPropagation() 阻止事件向上冒泡到 DOM 树,阻止任何父处理程序被事件通知 event.target 返回哪个 DOM 元素触发事件...常用jQuery事件的范例代码 <!
' id='"+maxcount+"'>"+nn[0]+"display:none >"+nn[1]+"";...jQuery("#autoTxt li:eq(0)").css("background", "#A8A5A5");//初始化默认选择第一个数据 //当单击某个LI时反映...); //=====================自动补全公共部分开始================================= //当单击BODY时则隐藏搜索值 jQuery...=0; }); } //键盘选择 jQuery(function(){ //键盘按键移动事件上键38,下键40,确定键13 jQuery("body").keyup( function(even...-- 显示的div --> display:none; background:#FFFFFF; position:
事件传播(事件冒泡) 1.4.1. 传播:小---->中---->大 1.4.2....阻止传播:事件后面加上 return false 1.5....(事件冒泡) //给p标签添加点击事件现在点击p标签的内容 就可以触发事件,点击页面的其它位置不会触发。...$("p").click(function(){ console.info("p被点击了"); //阻止传播:事件后面加上 return false return false...; }) //给div添加点击事件,点击了p标签就会触发到两个事件,p属于div的一部分。
2. jQuery事件机制 JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。...jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件的处理能力。...2.1. jQuery事件发展历程(了解) 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐) 简单事件注册 click(handler) 单击事件...: -197px; padding-bottom: 20px; background: #fff; display: none; } .form-add-title...,也能阻止浏览器的默认行为。
事件冒泡可能会引起预料之外的效果,上例中,本来只想触发元素 的click事件,然而 元素和元素的click事件也同时被触 发了.因此有必要对事件的作用范围进行限制.当单击元素时,只 触发元素的click...停止事件冒泡 停止时间冒泡可以阻止事件中其他对象的事件处理函数被执行.在jquery中提供了stopPropagation()方法来阻止冒泡事件....可以用同样的方法解决 元素上的问题 阻止默认行为 网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为 在jquery中,提供了preventDefault...jquery对其进行了封装,使之能兼容各大浏览器 (3)event.stopPropagation()方法 阻止事件的冒泡.js真符合W3C规范的stopPropagation()方法在IE浏览器中无效...}); (7)event.which()方法 该方法的作用是在鼠标单击事件中获取到鼠标左中右键,在键盘事件中获取键盘的按键.
//以下内容是jQuery中的一部分(仅供参考) 事件 加载Dom两种方式 加载事件我们有两种方式,一种就是javascript直接写:window.onload来加载。...还有一种就是我们的jQuery中的加载方式$(function(){}) window.onload方式 window.onload:在整个月面中所有内容加载完成后,才会执行事件。...); }) 在理论上面jQuery方式的加载事件要比window.onload方式的加载事件先执行。...在jQuery类库的不同版本中效果可能不太一样(1.0、2.0、3.0),和浏览器也有关系 案例1:测试两种方式的区别【个数+顺序】 区别1:顺序,上面我们已经测试了,理论上先执行jQuery方式...这种情况就属于是事件的传播,从小往大传播 阻止传播:事件后面加上 return false 可是如果,我们想要这三个事件单独执行呢?
1、jQuery鼠标事件之click与dbclick事件 click方法用于监听用户单击操作,dbclick方法用于监听用户双击操作,这两个方法用法及其类似,所以这只介绍click事件,只有单击释放后才生效...13、jQuery键盘事件之keypress()事件 keydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中的文本得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成...自定义事件对象,是jQuery模拟原生实现的 自定义事件可以传递参数 ---- jQuery基础(四)---动画篇 1、jQuery中元素的隐藏和显示之hide和show方法 (改变样式display...important重写样式 2、jQuery中显示与隐藏切换toggle方法(改变样式display:none/block) toggle方法是上述两个方法的切换 $ele.toggle()...以及fadeToggle的比较 操作元素的显示与隐藏可以有 改变样式display:none/block/inline/inline-block ======>toggle 横向动作 (显示从左到右
使用jQuery处理事件 事件处理 一个栗子,单击p时背景变成灰色 由于es6的箭头函数不支持this的绑定,所以无法使用箭头函数,只能使用匿名函数 html jquery.com/category/events/event-object/ 自定义事件 一个栗子,实现发布订阅模型,先全体元素广播一个事件,在单击一个按钮的时候 $('#...:none; } span { display:none; } 当运行的时候会,自动将display设置为可见。...如果没有参数,将会直接设置display的值为none,如果有任意一个参数,将会设置高度和不透明度,将其变为0,并且display也将会变为none,确保不会影响页面的布局。...dataFileter 过滤或者预处理服务器返回的数据 ajax事件 ajax还会在请求的时候,触发相应的事件 这个用于在请求某些图片的时候,在图片仍旧继续下载的时候,使用相应的时间,提示出图片正在加载中
Web前端JQuery面试题(三) Web前端JQuery面试题(三) 1.怎么阻止冒泡过程?...document.getElementById("p").style.display = "block"; document.getElementById("p").style.display = "none..."; $("p").css("display":"block"); $("p").css("display":"none"); show()和hide()方法进行显示和隐藏 show(speed,[callback...stop([clearQueue],[gotoEnd]) 停止正在执行的动画,clearQueue是布尔值,是否停止正在执行的动画,gotoEnd是布尔值,是否完成正在执行的动画。...jquery中的load()方法,进行获取异步数据。
jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。...jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。...$(selector).position(); jQuery事件机制 JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。...jQuery事件发展历程(了解) 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐) 简单事件注册 click(handler) //单击事件.../return false:既能阻止事件冒泡,又能阻止浏览器默认行为。
通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生:阻止页面滚动MSPointerUp——当手指离开屏幕时触发 移动端click屏幕产生...设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。...,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。...》 如何阻止windows Phone的默认触摸事件 winphone下默认触摸事件事件使用e.preventDefault是无效的 目前解决方法是使用样式来禁用 html{-ms-touch-action...: none;}/* 禁止winphone默认触摸事件 */ 参考 《Windows phone 8 touch support》 常用的移动端框架 zepto.js 语法与jquery几乎一样,会jquery
DOCTYPE html> jquery/jquery-1.11.1.min.js"> let enter;...leave(event){ $("#itemClose").css("display","none"); return false; } function atr (){...本来以为是 事件冒泡的原因,但是阻止了事件的冒泡还是一直闪动,后来发现其实是应为i标签和input标签的层级原因应为是平级所以鼠标悬浮到i上会认为是离开了 修改代码,将事件放入到外层的div即可 jquery/jquery-1.11.1.min.js"> let enter;...leave(event){ $("#itemClose").css("display","none"); return false; } function atr (){
可见性筛选器 需求描述:让隐藏的段落显示出来 display: block">我是显示段落 display: none">我是隐藏段落 $('p...: none">我是隐藏段落 $('p:visible').css('display', 'none'); # 5....需求描述:为按钮添加单击事件,当按钮单击的时候,向控制台输出 “按钮被单击了” 按钮 $('button').on('click',function () {...需求描述:为 ul 下的所有 li 添加单击事件,要求将该单击事件委托给 ul,当单击 li 时,所对应的 li 背景变为红色 1111 2222阻止事件默认行为。 event.stopPropagation() 防止事件向外冒泡。
回到顶部 13.事件冒泡 什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回...阻止事件冒泡 事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止 $(function(){ var $box1 = $('.father'... 阻止表单提交 $('#form1').submit(function(event){ event.preventDefault(); }) 合并阻止操作 实际开发中,一般把阻止冒泡和阻止默认行为合并起来写...jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jquery的滚轮事件插件jquery.mousewheel.js。...,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件,在短事件内多处触发执行绑定的函数,可以巧妙地使用定时器来减少触发的次数