zoukankan      html  css  js  c++  java
  • JQuery 事件

    一、向.ready()回调函数中传入参数

    jQuery提供了一个jQuery.noConflict()方法,调用该方法可以把对$标识符的控制权让渡还给其他库。一般模式如下:

    <script src='prototype.js'></script>
    <script src='jquery.js'></script>
    <script>
        jQuery.noConflict();
    </script>
    <script src='myscript.js'></script>

     首先,包含其他库(这里是Prototype)。然后包含jQuery库,取得对$的使用权。接着调用.noConflict()方法让出$,以便将控制权交还给最先包含的库。

    在使用jQuery方法时,必须记住要用jQuery而不是$来调用。在这种情况下,还有一个在.ready()方法中使用$的技巧。我们传递给他的回调函数可以接受一个参数——jQuery对象本身。利用这个参数,可以重新命名jQuery为$,而不必担心造成冲突

    jQuery(document).ready(function($){
       //在这里,可以正常使用$ 
    })
    
    或者
    
    jQuery(function($){
       //使用$代码 
    })

    2.绑定事件 on

    btn.on('click',function(){})

    多次调用.on()也没有问题,既可以按需为同一个事件追加更多行为。

    如果给.on()传入第二个参数是一个选择符表达式

    $('.box').on('click','button',function(){

      alert('点击了button,$(this)表示button');

    });

    jQuery会把click事件处理程序绑定到box对象,同时比较event.target和选择符表达式(这里是button)。如果匹配,jQuery会把this关键字映射到匹配元素,否则不会执行事件处理程序。

    3. .off()

    移除事件处理程序

    4. .trigger()模拟事件操作

    .trigger('click')  或   click()

    5.简写的事件

    简写事件方法的原理与对应的.on()调用相同,可以减少一定的代码输入量。

    $(document).ready(function(){
      $('button').click(function(){  
        alert('clicked');
      }); });

    6.操作类

    addClass()   removeClass()都接受一个参数即要添加或移除的类名。removeClass()当不传入参数时,移除所有类

    toggleClass(类名),添加该类或移除该类

    7..hover()方法

    接受两个函数参数,第一个函数会在鼠标指针进入被选择的元素时执行,第二个参数会在鼠标指针离开该元素时触发

    $(document).ready(function(){
        $('#switcher h3').hover(function(){
             $(this).addClass('change');
        },function(){
             $(this).removeClass('change');
        });
    })

    8.鼠标移入移出

    mouseover和mouseout事件都会冒泡

    mouseenter和mouseleave事件无论是单独绑定,还是在.hover()方法中组合绑定,都可以避免这些冒泡问题

    9..is()

    接收一个选择符表达式,用选择符来测试当前的jQuery对象。如果集合中至少有一个元素与选择符匹配,.is()返回true。

    10..hasClass()

    测试某个元素是否包含某个类

    11. 响应键盘事件

    事件对象的.which属性包含着被按下的那个键的标识符,对于字母键而言,这个标识符是相应的大写字母的ASCII值。

    event.keyCode返回数字代码

    fromCharCode(event.keyCode); 返回实际字母

    var key=String.fromCharCode(event.keyCode);

  • 相关阅读:
    abap程序之间调用
    java-response-乱码解决
    java-servlet:response/request
    同平台不允许同时登陆的方案(不同平台可同时登陆)
    @Async 异步http请求,汇总数据处理
    ABAP-VOFM FOR MM-PO PRICE
    ABAP-CDS
    PI-Custom adapter module
    Vue中在移动端如何判断设备是安卓还是ios
    v-show在select中选择bug
  • 原文地址:https://www.cnblogs.com/YangqinCao/p/5528761.html
Copyright © 2011-2022 走看看