jk138 发表于 2013-1-29 11:22:55

最后的锋利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,):
       4.执行默认操作。


4.2jQuery中的动画
      
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([,gotoEnd]);
      参数clearQueue和gotoEnd都是可选参数,为Boolean值。
      clearQueue代表是否要清空未执行完的动画队列,
      gotoEnd代表是否直接将正在执行的动画跳转到末状态。
      2.判断元素是否处于动画状态
      
      3.期货动画方法
         toggle(speed,)
         slideToggle(speed,)
         fadeTo(speed,opacity,)

第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])
    urlString 请求HTML页面的url地址
    data Object   发送至服务器的key/value数据
    callback   Function请求完成时的回调函数,无论请求成功或失败
页: [1]
查看完整版本: 最后的锋利jQuery笔记