jQuery(四)

一、隔断事件

  1、隔断后续事件:

    ①专门用于隔断默认的后续事件的执行:

      jQ_obj.on('click', function (e) {

        /*执行代码*/

        e.preventDefault()

      })

    ②可以隔断所有后续事件的执行:

      jQ_obj.on('click', function () {

        /*执行代码*/

        return false

      })

  2、隔断重叠事件:

    ①专门用于隔断重叠事件的执行:

      dad_jQ_obj.on('click', function () {

        /*执行代码*/

      })

      jQ_obj.on('click', function (e) {

        /*执行代码*/

        e.stopPropagation()

      })

    ②可以隔断所有后续事件的执行:

      dad_jQ_obj.on('click', function () {

        /*执行代码*/

      })

      jQ_obj.on('click', function () {

        /*执行代码*/

        return false

      })

二、委托事件:HTML文件中的JS代码绑定的事件无法作用于页面动态产生的标签,若想给这些动态标签绑定事件,可以预先给一个区域事先绑定事件委托关系,声明好该区域内某些特定的标签,然后这些标签无论是原本静态存在的还是后续页面中动态产生的,都会通过委托事件的机制绑定上事件的响应效果。

  1、语法书写:

    jQ_obj.on('click', 'button', function () {

      /*执行代码*/

    })

三、页面预加载:声明的JS代码会在页面加载完毕再执行。

  1、通过窗口对象声明:

    window.onload = function () {

      /*执行代码*/

    }

  2、通过DOM声明:

    $(document).ready(function () {

      /*执行代码*/

    })

  3、通过jQuery语法声明:

    $(function () {

      /*执行代码*/

    })

  4、直接在body的末端书写,或者在末端书写引用语句。

四、动画效果

  1、jQ_obj.show(5000):渐大渐显。

  2、jQ_obj.hide(5000):渐小渐隐,上条的反向效果。

  3、jQ_obj.slideDown(5000):放卷。

  4、jQ_obj.slideUp(5000):收卷,上条的反向效果。

  5、jQ_obj.fadeOut(5000):渐显。

  6、jQ_obj.fadeIn(5000):渐隐,上条的反向效果。

  7、jQ_obj.fadeTo(5000, 0.4):渐隐或渐显至指定透明度。

五、each方法:

  1、用途:通过each方法可以将jQ_obj的每个元素的索引及标签对象遍历出来放入函数体代码中执行。

  2、两种表达式:

    ①通过jQ_obj调用each方法:

      jQ_obj.each(function (index, obj) {

        /*执行代码*/

      })

    ②将jQ_obj作为参数传入each方法中:

      $.each(jQ_obj, function (index, obj) {

        /*执行代码*/

      })

六、data方法:用data方法存入的属性不会在页面的代码中显示。

  1、jQ_obj.data('other_info'):查看隐藏属性,后面填入值则是设置。

  2、jQ_obj.removeData('other_info'):移除隐藏属性。

   

原文地址:https://www.cnblogs.com/caoyu080202201/p/12934890.html