首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

最后的犀利jQuery笔记

2012-10-08 
最后的锋利jQuery笔记第四章jQuery事件和动画4.1 jQuery中的事件4.1.1加载DOM在常规的JavaScript代码中,通

最后的锋利jQuery笔记
第四章  jQuery事件和动画
       4.1 jQuery中的事件
       4.1.1加载DOM
         在常规的JavaScript代码中,通常使用wiondow.onload方法,而在jQuery中,使用的是
           $(document).ready()方法。
       
      $(document).ready(function(){
         //
       })
     简写:
         $(fuuction(){
           //
         })

       4.1.2事件绑定
         bind(type [,data],fn);
         bind()方法有3个参数
         第1个参数是事件类型
         第2个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象。
         第3个参数则是用来绑定的处理函数。
        
       
       4.1.3合成事件
           jQuery有两个合成事件--hover()和toggle()方法。属于jQuery自定义的方法。
            hover()方法准确来说是替代jQuery中的bind("mouseenter")和bind("mouseleave")
             而不是替代bind("mouseover")和bind("mouseout");因此当需要触发hover()方法的第2个函数时,
             需要用trigger("mouseleave")来触发,而不是trigger("mouseout");

          toggle()方法:toggle(fn1,fn2,...fnN):用于模拟鼠标连续单击事件。
           还有另外一个作用:切换元素的可见状态。
    
        4.1.4事件冒泡
          停止冒泡事件:stopPropagation();
          阻止默认行为:preventDefault()
           事件捕获:和事件冒泡刚好相反,从最顶端往下开始触发。
           并非所有主流浏览器都支持事件捕获,jQuery不支持事件捕获,请直接使用原生的javascript
       
        4.1.5事件对象的属性
          event.type()方法:可以获取事件的类型。
          event.preventDefault():
          event.stopPropagation():
          event.target():获取到触发事件的元素。
          event.relatedTarget():
          event.pageX()/event.pageY()方法:获取到光标相对于页面的x坐标和y坐标。
          event.which():鼠标单击事件中获取到鼠标的左,中,右键;在键盘事件中获取键盘的按键。
            $(function(){
                  $("body").mousedown(function(e){
                            alert(e.which)  //1=鼠标左键left;2=鼠标中键;3=鼠标右键
                   })
             })
         event.metaKey():方法
             event.metaKey():为键盘事件中获取<ctrl>按键。
          event.originalEvent():指向原始的事件对象。
        
       4.1.6移除事件
         1. $("#delAll").click(function(){
                 $("#btn").unbind("click");
          })
         2.移除<button>元素的其中一个事件

      4.1.7模拟操作
        1.常用模拟
          使用trigger()来完成模拟。
        2.触发自定义事件
          $('#btn').bind("myClick",function(){
              $('#test').append("<p>我的自定义事件.</p>");
          });
          
          //触发
           $('#btn').trigger("myClick");
       3.传递数据
         trigger(type,[data]):
       4.执行默认操作。


  4.2  jQuery中的动画
      
  4.2.1 show()方法和hide()方法
  4.2.2 fadeln()方法和fadeOut()方法:改变元素的不透明度。
  4.2.3 slideUp()方法和slideDown()方法:只会改变元素的高度。
  4.2.4 自定义动画方法animate():
        语法结构 :animate(params,speed,callback);
         params:一个包含样式属性及值的映射,比如 {property1 :"value1",property2:"value2"}
         speed:速度参数,
         callback:在动画完成时执行的函数。可选
       1.自定义简单动画
       2.累加,累减动画
       3.多重动画
       4.综合动画
  4.2.5动画回调函数
  4.2.6停止动画和判断是否处于动画状态

      1.停止元素的动画
         stop([clearQueue][,gotoEnd]);
        参数clearQueue和gotoEnd都是可选参数,为Boolean值。
        clearQueue代表是否要清空未执行完的动画队列,
        gotoEnd代表是否直接将正在执行的动画跳转到末状态。
      2.判断元素是否处于动画状态
      
      3.期货动画方法
         toggle(speed,[callback])
         slideToggle(speed,[callback])
         fadeTo(speed,opacity,[callback])
 
  第5章  jQuery对表单,表格的操作及更多应用.
   5.1表单应用
     一个表单有3个基本组成部分。
     (1)表单标签
     (2)表单域:
     (3)表单按钮:
   5.1.1单行文本框应用。
   5.1.2多行文本框应用.
   5.1.3复选框
   5.1.4下拉列表
   5.1.5表单验证

  5.2表格应用

   5.2.1表格变色
      1.普通的隔行变色
      2.单选框控制表格行高亮
      3.复选框控制表格行高亮
  
   5.2.2表格展开关闭
   5.2.3表格内容筛选

第6章jQuery与Ajax的应用
  
6.5 jQuery中的Ajax
6.5.1 load()方法
  1.载入HTML文档
    load(url[,data][,callback])
    url  String 请求HTML页面的url地址
    data Object   发送至服务器的key/value数据
    callback   Function  请求完成时的回调函数,无论请求成功或失败
   

热点排行