js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事件 dblclick() 当双击元素时,会发生 dblclick 事件. mousedown()/mouseup() 鼠标的按下和松开事件 mouseover()/mouseout() 鼠标的移入和移出事件 mouseenter()/mouseleave() 鼠标的移入和移出事件 mouseout(…

js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这8个板块. 二.jquery的ajax有哪些函数和事件 JAX是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新.如果没有jQuery,AJAX编程还是有些难度的.通过jQuery AJAX方法,能够使用HTTP Get和HTTP Post 从远程服务器上请求文本.HTML…

js进阶 12-14 jquery的事件触发函数是哪两个 一.总结 一句话总结:trigger和triggerHandler 1.trigger传额外参数时候的注意事项是什么? 注意样例中是三个参数 1.传的参数写在trigger的第二个参数2.如果要传多个参数,用数组方式 31 //trigger的额外数据 32 //多条数据时候需要放到[]中 33 $('#btn1').on('click', 34 300,function(e,data1,data2){ 35 alert('trigger…

js进阶 12-5 jquery中表单事件如何使用 一.总结 一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样. 1.表单获取焦点和失去焦点事件有哪两组? 注意是blur/focus和focus in/out,并没有给blur加什么 blur() 当元素失去焦点时触发 blur 事件. blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的 focus() 当元素获得焦点时,触发 focus 事件. focusin()当元素获得焦…

js进阶 12-4 jquery键盘事件如何使用 一.总结 一句话总结:键盘和鼠标都是外设输入设备,所以函数很像,所以使用就像鼠标事件click一样 1.jquery键盘事件有哪三个? 1(up和down)+1(press) up和down是一组,press是另外一组 keydown() 当键盘或按钮被按下时,发生 keydown 事件. keyup() 在键盘的某个键被按下之后松开的一瞬间触发的事件.. keypress() 在键盘上的某个键被按下到松开“整个过程”中触发的事件. 2.jque…

js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove(1个) 1.页面载入事件有哪两种常见的写法? 30 $(document).ready(function(){ 31 32 }) 34 $(function(){ 2.click时间和mouseup和mousedown的联系和区别? 鼠标弹起了才能完成点击事件 click=mousedown&&am…

js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? event.stopPropagation()和return false 31 $("#btn").click(function(){ 32 // alert('#btn') 33 $('ul').show() 34 //event.stopPropagation() 35 return fa…

js进阶 14-9 ajax事件有哪些 一.总结 一句话总结:ajax开始时事件.发送时事件,请求完成时事件,请求成功时事件,请求结束时事件,请求错误时事件事件. 1.ajax事件的监听对象是谁? 都是document对象 21 $(document).ajaxStart(function(){ 22 alert('ajaxStart() AJAX 请求开始时执行函数') 23 }) 24 $(document).ajaxComplete(function(){ 25 alert('ajaxCo…

js进阶 12-18  jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位置上即可. 1.鼠标右击事件是什么事件? contextmenu事件 2.自己遇到功能要实现,而之前没学过怎么办(不可能把所有的功能都讲到都学到)? 先把功能分类,找到是哪一块 然后去查这一块的手册 3.要做自己的右键菜单,那么对于系统的右键菜单我们如何操作? 禁止掉,用e.preventDefau…

js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是pageX和pageY. 1.为什么直接给div加mousemove不行? 因为这样必须选中div才能移动,而且移动的快了鼠标就脱离div了,就移不动了 19 $(document).mousemove(function(e){ 20 $('#div1').offset({ 21 left:e.pa…

js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如何判断同时按下了ctrl键和回车键? 25 $('#txt1').keydown(function(e){ 26 if (e.which==13&&e.ctrlKey) { 2.实现组合按键提交留言时候的事件监听对象是谁? input 文本框 25 $('#txt1').keydown(fun…

js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包括事件委托了额外参数等 22 //one()函数绑定的事件处理函数都是一次性的 23 $('#btn1').one('click',function(){ 24 //alert('one') 25 $('<div></div>').appendTo($('body')) 26 }) 2…

js进阶 11-24 jquery如何实现选项卡的制作 一.总结 一句话总结:ul>li做选项卡的选项卡头,多个div做选项卡的内容,点到对应的li,就切换到对应的div,用index()获取li索引,与div联系. 1.如何获取一个元素所在父亲中同类孩子的索引? index()方法 53 $('#content div').eq($li.index(this)).show().siblings().hide() 2.如何选择除自己之外的所有同级? 没必要用not()方法,用siblings()…

js进阶 11-12  jquery如何实现节点的删除和复制 一.总结 一句话总结:remove().detach().empty()方法 1.jquery删除节点中的remove()方法和detach()方法的区别是什么? detach()方法删除节点后所有绑定的事件.附加的数据等都会保留下来 因为remove()方法和detach()方法删除的数据是可以保留下来的,remove()方法删除保留的数据没有了原来的事件,detach()方法有 35 $('#btn1').click(functi…

js进阶 10-3  jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document.ready直接加载完dom树即可加载,document.ready可加载多个 2.document.ready函数怎么写? $(document).ready(匿名函数) 3.window.onload函数怎么写? window.onload=function(){} 4.js中某个元素的某个方法比…

js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定要带啊,又不是变量,怎么可以直接放在括号里面 3.jquery中$符号完全等同于jQuery 4.jquery改变css样式:.css然后接键值对,都有单引号,长链的模式 5.$(this)表示选中的那个元素,多个中,点击的那个,选中的元素 6.括号里面只能装变量,不是变量的直接放在括号里面是错的,…

js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化 一.总结 一句话总结:如果用ajax传递表单的数据,如果不进行表单的序列化,要一个参数一个参数的写,太麻烦,序列化的话,一句代码搞定.data:$('form').serialize(),这样一句话解决复杂的表单ajax的post传值过程. 1.表单序列化函数是什么? $(selector).serialize()和serializeArray() 24 <script> 25 $(function(){ 26 $('f…

js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函数的必选参数是什么(根据功能想)? 必选参数就是要加载页面的url,也可以选择加载文件的哪一个部分 下面的代码时直接加载test.html 的 .p2部分 20 $('#test').load('test.html .p2') 2.ajax如何加载别的页面(.html)? 直接用load方法即可 l…

js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简单几句代码,即可轻松实现各种动画效果.之前我们讲过使用CSS3实现动画,它比使用jQuery实现动画效果更加简单,不过jQuery实现动画会更加的灵活,可以实现更加复杂的动画效果. 显示和隐藏 控制元素的的显示和隐藏是最基本的动画技术. show()显示被选的元素 语法:$(selector).sh…

js进阶 13-8 jquery如何实现侧边栏 一.总结 一句话总结:先是把侧边栏设置为left为-100px,隐藏起来,jquery自定义动画animate里面的改变元素的距左边的宽度left,slide系列动画是改变元素的高:$(this).animate({left:'0px'}):$(this).animate({left:'-100px'}): 二.如何实现侧边栏 1.相关知识 侧边栏 案例描述:具有滑动隐藏显示效果的侧边栏. 2.代码 <!DOCTYPE html> <htm…

js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(stop()当然也可以停止所有的)? 终止当前动画,但是同元素后面的动画会接着执行,比如在队列动画中,终止的话只终止了当前的动画. 30 $('#btn2').click(function(){ 31 //$('#div1').stop() 32 //$('#div1').stop(true) 33 $(…

js进阶 13-5 jquery队列动画如何实现 一.总结 一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现队列动画? a.可以考虑用animate的动画结束函数来实现,但是这样的话太麻烦,一则嵌套容易出错,二则不适合多重队列动画animate(params,[speed],[easing],[fn]) 25 $('#btn2').click(function(){ 26 $('#div1').anima…

js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为动画属性和终值的样式属性和及其值的. 1.animate中的样式设置的时候的注意事项是什么? 样式名必须以驼峰式方式,不然会出错,和在css中的不一样 集合注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left 2.jquery库的animate方法的缺陷是什么?…

js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fadeIn()和fadeOut():可以使用fadeIn()方法来实现元素的淡入效果,使用fadeOut()方法来实现元素的淡出效果. 语法:fadeIn([speed],[easing],[fn])/fadeOut([speed],[easing],[fn]) fadeToggle()通过不透明度的变化…

js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区别是什么)? swing默认和linear,和css里面默认的效果相比少一点linear,是匀速运动swing是先慢后快 2.jquery动画如果想使用更多的切换效果,需要怎么办? 需要用插件 3.滑动效果的三个函数和显示隐藏的三个函数有什么异同? 都是三个,参数都是一样,这里是up,down,to…

js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()hide()toggle() 2.显示隐藏效果三个函数中参数中的函数参数怎么使用? 其实是动画完成执行的函数 语法:$(selector).show([speed,[easing],[fn]]) fn:在动画完成执行的函数,每个元素执行一次. 29 $('div').hide(500,function…

js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素 一.总结 一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.offsetParent()获得用于定位的第一个父元素. 1.closest()和parents()的主要区别是什么? 1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找:2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选…

js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jquery对象加到add()方法之前选择器之中 43 $("p").css("background","#ccc").add('li').css("color","red") 2.addBack()方法是干嘛的,举…

js进阶 11-16 jquery如何查找元素的父亲.祖先和子代.后代 一.总结 一句话总结:过滤或者查找的方法里面可以带参数进行进一步的选择. 1.parent()和parents()方法的区别是什么(父亲和祖先)? parent()找父亲,parents()找祖先 父亲只有一个,所以是单数,祖先就有很多个了,所以是复数 parent() 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选). parents() 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选). 34…

js进阶 11-15  jquery过滤方法有哪些 一.总结 一句话总结:jquery方法中的参数一般是什么:选择器.元素或 jQuery 对象. 1.jquery方法中的参数一般是什么? 选择器.元素或 jQuery 对象 2.has()如何使用(如何选取有em元素的对象)? 36 // $('li').has('em').css("background-color", "pink") 3.is()方法如何使用(选择某个元素是不是有pink1类或者pink2类)?…