前端开发之 jQuery 的常用方法

​

1、jQuery 鼠标事件之 click 与 dbclick 事件

click 方法用于监听用户单击操作，dbclick 方法用于监听用户双击操作，这两个方法用法及其类似，所以这只介绍 click 事件，只有单前端培训击释放后才生效，而且同一元素不能同时绑定 click 和 dbclick 事件

方法一：$ele.click()

click 无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

方法二：$ele.click(handler(eventObject))

click 的参数是函数（回调函数），单击会执行函数里的操作，如果里面含有 this，this 指向触发事件元素的对象

方法三：$ele.click([eventData], handler(eventObject))

click 增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即 eventObject.data = eventData

//不同函数传递数据

function data(e) {

$(this).find('p:last').html('数据:' + e.data)

}

function a() {

$(".right").click(1111, data)

}

a();

注：只有鼠标按钮键 which 值为 1（即鼠标左键）才会实现所绑定的事件

2、jQuery 鼠标事件之 mousedown 与 mouseup 事件

mousedown 方法用于监听用户鼠标按下操作，只有鼠标按下后才生效，mouseup 方法用于监听用户鼠标松开操作，只有鼠标松开后才生效，这两个方法用法及其类似，所以这只介绍 mousedown 事件。

方法一：$ele.mousedown()

mousedown 无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

方法二：$ele.mousedown(handler(eventObject))

mousedown 的参数是函数（回调函数），鼠标按下后会执行函数里的操作，如果里面含有 this，this 指向触发事件元素的对象

方法三：$ele.mousedown([eventData], handler(eventObject))

mousedown 增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即 eventObject.data = eventData

注：mousedown 强调按下，mouseup 强调松开；如北京前端培训果点击按住不放并离开元素，还是会实现所绑定的事件；任何鼠标按钮都会实现所绑定的事件；用 event 对象的 which 区别按键，敲击鼠标左键 which 的值是 1，敲击鼠标中键 which 的值是 2，敲击鼠标右键 which 的值是 3

3、jQuery 鼠标事件之 mousemove 事件

mousemove 方法用于监听用户鼠标指针移动的操作，只有鼠标指针移动就生效，只在绑定事件的元素的区域里。

方法一：$ele.mousemove()

mousemove 无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

方法二：$ele.mousemove(handler(eventObject))

mousemove 的参数是函数（回调函数），鼠标指针移动会执行函数里的操作，如果里面含有 this，this 指向触发事件元素的对象

//绑定一个 mousemove 事件

//触发后修改内容

$(".aaron1").mousemove(function(e) {

$(this).find('p:last').html('移动的 X 位置：' + e.pageX)

})

方法三：$ele.mousemove ([eventData], handler(eventObject))

mousemove 增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即 eventObject.data = eventData

注：mousemove 强调鼠标指针移动；如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题

4、jQuery 鼠标事件之 mouseover 与 mouseout 事件

mouseover 方法用于监听用户鼠标移入操作，只有鼠标移入区域内后才生效，mouseout 方法用于监听用户鼠标移出操作，只有鼠标移除区域后才生效，处理事件的过程中会有事件冒泡，这两个方法用法及其类似，所以这只介绍 mouseover 事件。

方法一：$ele.mouseover ()

mouseover 无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

方法二：$ele.mouseover (handler(eventObject))

mouseover 的参数是函数（回调函数），鼠标移入后会执行函数里的操作，如果里面含有 this，this 指向触发事件元素的对象

方法三：$ele.mouseover ([eventData], handler(eventObject))

mouseover 增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即 eventObject.data = eventData

注：mouseover 强调鼠标移入区域内，mouseover 强调鼠标移除区域；

5、jQuery 鼠标事件之 mouseenter 与 mouseleave 事件

这和第四点的基本功能，理论知识点是一模一样的，不加赘述。但是他们最主要的区别是第四点可能会处理冒泡事件，这第五点是不会处理冒泡事件

6、jQuery 鼠标事件之 hover 事件

这个事件是第五点的总结方法，所以他也不会处理冒泡事件，即悬停事件，在元素区域内悬停（移入），在元素外（移出）

方法：$ele.hover(handlerIn(eventObject) , handlerOut(eventObject))

handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数

handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

7、jQuery 鼠标事件之 focusin 与 focusout 事件

focusin 方法用于监听用户元素聚焦操作（如 input 元素），只有元素聚焦后才生效。focusout 方法用于监听用户元素失焦操作（如 input 元素），只有元素失焦后才生效。两者是很相似的，所以这只介绍 focusin 事件

方法一：$ele.focusin ()

focusin 无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

方法二：$ele.focusin (handler(eventObject))

focusin 的参数是函数（回调函数），鼠标移入后会执行函数里的操作，如果里面含有 this，this 指向触发事件元素的对象

方法三：$ele.focusin ([eventData], handler(eventObject))

focusin 增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即 eventObject.data = eventData

//不同函数传递数据

function fn(e) {

$(this).val(e.data) //给 input 元素赋值有 val()方法，不是 value()

}

function a() {

$("input:last").focusin('呱唧_T_呱唧', fn)

}

a();

注：focusin 强调元素聚焦；focusout 强调元素失焦，无论是不是自身调用聚焦/失焦方法，都会执行函数里面有部分操作，

8、jQuery 表单事件之 focus 与 blur 事件

focus 方法用于监听用户元素聚焦操作（如 input 元素），只有元素聚焦后才生效。blur 方法用于监听用户元素失焦操作（如 input 元素），只有元素失焦后才生效。两者是很相似的，所以这只介绍 focus 事件

方法一：$ele.focus ()

focusin 无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

方法二：$ele.focus (handler(eventObject))

focusin 的参数是函数（回调函数），鼠标移入后会执行函数里的操作，如果里面含有 this，this 指向触发事件元素的对象

方法三：$ele.focus ([eventData], handler(eventObject))

focus 增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即 eventObject.data = eventData

注：focus 强调元素聚焦；blur 强调元素失焦，只有自身调用聚焦/失焦方法，并且聚焦成功，才会执行函数里面有部分操作，

9、jQuery 表单事件之 change 事件

只有当表单元素（input 元素、textarea 元素、select 元素）值发生改变之后并且失焦（针对输入文本的元素，其他立即触发），会触发表单绑定的 change 事件

方法：$ele.change(handler(eventObject))

change 的参数是函数（回调函数），表单元素值发生改变再失焦，就会执行函数里的操作，如果里面含有 this，this 指向触发事件元素的对象

10、jQuery 表单事件之 select 事件

select 事件只能用于<input>元素与<textarea>元素。当这两元素的文本被选中时会触发 select 事件

方法一：$ele.select ()

focusin 无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

方法二：$ele.select (handler(eventObject))

select 的参数是函数（回调函数），文本被选中后会执行函数里的操作，如果里面含有 this，this 指向触发事件元素的对象

方法三：$ele.select ([eventData], handler(eventObject))

select 增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即 eventObject.data = eventData

11、jQuery 表单事件之 submit 事件

submit 事件可以过滤一些数据做一些必要的操作阻止一些浏览器的默认行为。

有四种方式能触发 submit 事件：

<input type="submit">、

<input type="image">、

<button type="submit">、

当某些表单元素获取焦点时，敲击 enter 键

方法一：$ele.submit()

submit 无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

方法二：$ele.submit (handler(eventObject))

submit 的参数是函数（回调函数），文本被选中后会执行函数里的操作，如果里面含有 this，this 指向触发事件元素的对象

//回车键或者点击提交表单,禁止浏览器默认跳转：

$('#target2').submit(function() {

alert('捕获提交表达动作,阻止页面跳转')

return false; //阻止浏览器的默认跳转行为

});

方法三：$ele.submit ([eventData], handler(eventObject))

submit 增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即 eventObject.data = eventData

注：如果要阻止浏览器的某些默认行为，可以传统的调用事件对象 e.preventDefault()来处理；也可以在函数上返回 false

12、jQuery 键盘事件之 keydown 与 keyup 事件

keydown 方法用于监听用户键盘按下操作，只有键盘按下后才生效，keyup 方法用于监听用户键盘松开操作，只有键盘松开后才生效，这两个方法用法及其类似，所以这只介绍 keydown 事件。

方法一：$ele.keydown ()

keydown 无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

方法二：$ele.keydown (handler(eventObject))

keydown 的参数是函数（回调函数），键盘按下后会执行函数里的操作，如果里面含有 this，this 指向触发事件元素的对象

方法三：$ele.keydown ([eventData], handler(eventObject))

keydown 增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即 eventObject.data = eventData；e.key 或者 e.which 是键盘输入的值（整型值）

注：keydown 强调按下，keyup 强调松开；如果点击按住不放并离开元素，还是会实现所绑定的事件；理论上可以绑定所有元素，一般用于表单元素。keydown 事件：每次获取的内容都是之前输入的，当前输入的获取不到，这就由下一知识点解决。

13、jQuery 键盘事件之 keypress()事件

keydown 事件触发在文字还没敲进文本框，这时如果在 keydown 事件中输出文本框中的文本得到的是触发键盘事件前的文本，而 keyup 事件触发时整个键盘事件的操作已经完成，获得的是键盘触发事件后的文本。他和 keydown 是一样的。

keypress 与 keydown、keyup 的主要区别：

只能获取单个字符，不能捕获组合键

无法响应系统功能键如（delete，backspace）

不区分小键盘和主键盘的数字字符

14、on()的多事件绑定

上述提及的所有时间他们的底层的处理都是通过一个”on“方法来实现的。（on 和 bind 是一样的， 推荐使用 on）

基本用法：.on(event, [selector] , [data]) 如：$ele.on("click", function(){})

和上述提到的事件最大的不同点是

可以自定义事件名

多个事件绑定同一个函数：$ele.on("mouseover mouseout", function(){}) //多个事件用空格隔开

多个事件绑定不同函数：$ele.on({

mouseover: function(){},

mouseout:function(){}

})

将数据传递到处理程序

function greet( event ) {

alert( "Hello " + event.data.name ); //Hello 慕课网

}

$( "button" ).on( "click", {

name: "慕课网"

}, greet );

15、on()的高级用法

委托机制：.on( event, [selector], [data], handler(eventObject))

在 on 的第二参数中提供了一个 selector 选择器，简单的来描述下

参考下面 3 层结构

<div class="left">

<p class="aaron">

<a>目标节点</a> //点击在这个元素上

</p>

</div>

给出如下代码：

$("div").on("click","p",fn)

注：事件绑定在最上层 div 元素上，当用户触发在 a 元素上，事件将往上冒泡，一直会冒泡在 div 元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

就是说向上冒泡匹配到的元素，由该元素执行回调函数的范围

16、卸载事件 off()方法

通过 on()绑定的事件处理程序

通过 off()方法移除绑定（off 和 unbind 也是一样的， 推荐使用 off）

绑定两个事件

$ele.on("mouseover mouseout", function(){})

解除其中一个事件

$ele.off("mouseover")

解除所有事件

$ele.off()

17、jQuery 事件对象的作用

可以借用对象的 target 属性与冒泡机制实现事件委托-------多个事件绑定同一个函数

我们经常见到的 this 就是对象的 currentTarget 属性，event.target 是触发事件的对象

18、jQuery 自定义事件之 trigger 事件

例子：

在 jQuery 通过 on 方法绑定一个原生事件

$ele.on('click', function(){

alert("触发系统事件")

});

必须用户点击这个元素才能触发这个事件

$ele.trigger("click");

只要写出这行代码，就相当于执行了上面的点击事件

trigger 除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数

$('#elem').on('Aaron', function(event,arg1,arg2) {

alert("自触自定义时间")

});

$('#elem').trigger('Aaron',['参数 1','参数 2'])

trigger 触发浏览器事件与自定义事件区别？

• 自定义事件对象，是 jQuery 模拟原生实现的

  自定义事件可以传递参数

jQuery 基础---动画篇

1、jQuery 中元素的隐藏和显示之 hide 和 show 方法 （改变样式 display:none/block)

元素隐藏方法 hide() 元素显示方法 show()两者用法很相似，这里以 hide 为例

$ele.hide() 直接隐藏

$ele.hide(options) 动画隐藏会慢慢改变宽高，致使页面布局发生改变

options 可以传递多个参数，可以字典的形式传递，具体属性及属性值可查阅官方文档。快捷参数：fast 默认 200ms，slow 默认 600ms，duration 时间，complete:function(){}等

注：.hide()方法是会保存元素的原始属性和属性值即再次显示的时候还是原来的属性。

show 和 hide 方法是修改 display 属性，通过 visibility 属性布局需要通过 css 方法单独设置

如果使用!important 在你的样式中，你就需要通过 css 方法修改属性，并在属性之后添加!important 重写样式

2、jQuery 中显示与隐藏切换 toggle 方法（改变样式 display:none/block)

toggle 方法是上述两个方法的切换

$ele.toggle()

无参数 若元素隐藏，则会显示；若显示，则隐藏

$ele.toggle(options) 动画隐藏或显示会慢慢改变宽高，致使页面布局发生改变

options 可以传递多个参数，可以字典的形式传递，具体属性及属性值可查阅官方文档。快捷参数：fast 默认 200ms，slow 默认 600ms，duration 时间，complete:function(){}等

$ele.toggle(display) 直接定位

直接提供一个参数，指定要改变原色最终效果 如果为 true 则是显示，如果为 false 则是隐藏

3、jQuery 中下拉/上卷动画之 slideDown 和 slideUp 方法（改变元素的高度)

元素下拉显示方法 slideDown()和上述的 show()很相似；元素下拉显示方法 slideUp()和上述的 hide()很相似，slideDown 和 slideUp 方法使用很相似，以 slideDown 为例

$ele.slideDown() 直接用滑动动画显示一个匹配元素

$ele.slideDown(options) 只会改变元素的高度，即页面布局会向上移动

options 可以传递多个参数，可以字典的形式传递，具体属性及属性值可查阅官方文档。快捷参数：fast 默认 200ms，slow 默认 600ms，duration 时间，complete:function(){}等

注：.slideDown()方法是从无到有的一开始元素的就是隐藏的 .slideUp()方法是从有到无的，一开始元素的就是显示的 。因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面

4、jQuery 中上卷下拉切换 slideToggle 方法（改变元素的高度)

slideToggle 方法是上述两个方法的切换

$ele.slideToggle ()

无参数 若元素隐藏，则会下拉；若显示，则上卷

$ele.slideToggle (options) 动画上卷或下拉会慢慢改变高度，致使页面布局发生改变

options 可以传递多个参数，可以字典的形式传递，具体属性及属性值可查阅官方文档。

快捷参数：fast 默认 200ms，slow 默认 600ms，duration 时间，complete:function(){}等

5、jQuery 中淡出/淡入动画之 fadeOut 和 fadeIn 方法（改变元素的透明度)

元素淡出隐藏方法 fadeOut ()和上述的.hide()很相似；元素淡入显示方法 fadeIn()和上述的 show()很相似，fadeOut 和 fadeIn 方法使用很相似，以 slideDown 为例

$ele.fadeOut () 直接用淡出隐藏所有匹配元素

$ele.fadeOut (options) 只会改变元素的透明度 opacity，即页面布局刚开始不会变化，在透明度为 0 时，页面布局才发生改变；如果时 fadeIn(options)时一开始布局变化，然后逐渐改变透明度

options 可以传递多个参数，可以字典的形式传递，具体属性及属性值可查阅官方文档。快捷参数：fast 默认 200ms，slow 默认 600ms，duration 时间，complete:function(){}等

注：.slideDown()方法是从无到有的一开始元素的就是隐藏的 .slideUp()方法是从有到无的，一开始元素的就是显示的 。因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面

6、jQuery 中淡出淡入切换 fadeToggle 方法（改变元素的透明度)

fadeToggle 方法是上述两个方法的切换

$ele.fadeToggle ()

无参数 若元素隐藏，则会下拉；若显示，则上卷

$ele.fadeToggle (options) 动画淡入淡出会慢慢改变元素透明度 opacity 在 01 之间，致使页面布局发生改变

options 可以传递多个参数，可以字典的形式传递，具体属性及属性值可查阅官方文档。快捷参数：fast 默认 200ms，slow 默认 600ms，duration 时间，complete:function(){}等

7、jQuery 中淡入效果之 fadeTo 方法（改变元素的透明度)

fadeTo 方法是上述 fadeIn 方法的扩展，即可以指定元素的透明度

$ele.fadeTo (options) 动画淡入淡出会慢慢改变并指定元素透明度 opacity 在 01 之间的某个值，致使页面布局发生改变

options 可以传递多个参数，可以字典的形式传递，具体属性及属性值可查阅官方文档。

快捷参数：fast 默认 200ms，slow 默认 600ms，必需参数（duration 时间、opacity 透明度值），complete:function(){}等

8、jQuery 中 toggle 与 slideToggle 以及 fadeToggle 的比较

操作元素的显示与隐藏可以有

改变样式 display:none/block/inline/inline-block ======>toggle 横向动作 （显示从左到右，隐藏从右到左）

设置位置高度 ======>slideToggle 纵向动作（显示从上往下，隐藏从下往上）

设置透明度 ======>fadeToggle

​