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

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