zoukankan      html  css  js  c++  java
  • jq动画,遍历,事件处理与插件

    一、jquery的动画  
    基本动画 : 
    show()  没有参数   等价   css:display:block
            可以有三个参数
            第一个参数 :动画执行的时间 
            第二个参数 : 动画执行方式  linear  swing
            第三个参数 :动画完成后的回调函数
    hide()    隐藏
    toggle()  切换 显示 / 隐藏
    上拉/下拉 :
        slideDown()  通过高度的改变 显示 某个元素
        slideUp()   通过高度的改变 隐藏 某个元素
            slideToggle() 切换
     
    透明度 :
    fadeIn(1000,function() {   })  淡入  通过透明度的改变  显示 某个元素
    fadeOut()     隐藏
    fadeToggle()    切换
     
    fadeTo()    调整某个元素的透明度
    第一个参数 : 时间  (不能省略)  时间为0  也要写出来
    第二个参数 : 透明度值
     
    自定义动画 :animate 
    对象.animate( {  } , 时间 , 回调函数 )
     
    stop()  停止当前正在运行的动画  其余动画继续执行    (多个相同的元素含有多个同样的事件时  )
    delay() 动画延时
     
    二、jquery遍历
    $().each( function(){
     
    } ) 
    或  
    $.each( $() , function(){
     
    } )
     
    jquery中阻止冒泡方式 :return false
     
    size()方法  length属性  获取jq元素的个数
     
    jquery中的事件处理 
     
    jquery的页面加载 :
    $(document).ready(function(){
     
    })  简写成  
    $(function(){
     
    })
     
    jquery的页面加载中的代码  不需要等页面所有内容全部加载完成后执行    dom元素准备就绪即可执行   
    jquery的页面加载函数可以存在多个
    $(document).ready( callback )
    或简写成
    jQuery(callback)   
    $( callback )
     
     
    三、事件处理 : 
    事件绑定 :
    bind()
    用法 :
        对象.bind("事件",function(){  })
        对象.bind({
            事件 : function(){},
            事件 : function(){},
            .....
        })
        unbind() 解除绑定   unbind 也可以用来关闭on绑定的事件
     
    事件委托 delegate: 
    对象.delegate("事件源",事件,function(){
     
    })
    取消委托 : undelegate   
     
    事件绑定+事件委托 :  on    ----  off  off可以用来关闭bind绑定的事件
    事件绑定 用法 和bind()
    事件委托 用法 : 
        对象.on(事件 , "事件源" , function(){
     
        })
     
    one() 只触发一次事件的事件处理方法
     
    事件切换  hover  
    用法:
        对象.hover(function(){
            mouseenter
        },function(){
            mouseleave
        })
     
     
     
    四、 jquery插件
    自定义插件 :
    方式一: 
    $.extend({       自定义工具方法  全局函数
        方法名 : function(){},
        ....
    })
    调用 :全局调用  $.方法名()  
     
    方式二 : 
    $.fn.extend({    自定义对象的方法   不是全局方法
        方法名 : function(){
     
        },
        ...
    })
    调用 : 局部方法  使用 jq选择器.方法名()
    注意 :  $.fn是jQuery原型对象
     
    扩展 : 
    $.函数名 = function(){  ... }   $.调用
    $.fn.函数名 = function(){  ... }    jq对象调用
  • 相关阅读:
    jquery validate使用总结
    javascript 学习笔记
    jquery easyui 学习总结
    javascript模式及javascript学习终极篇
    javascript学习笔记基础
    javascript学习笔记常见问题及技巧
    一道ITAT的题(C语言实现)
    JAVA实现约瑟夫算法
    JAXWS例子
    practical java笔记(实践1~5)
  • 原文地址:https://www.cnblogs.com/cqdd/p/10389101.html
Copyright © 2011-2022 走看看