jQuery备忘

js

  函数内部声明变量时一定要使用var命令；否则实际上声明了一个全局变量。
  闭包就是能够读取其他函数内部变量的函数。可以把闭包简单理解为定义在一个函数内部的函数。所以在本质上，闭包是连接函数内部和外部的一座桥梁。
  闭包的最大好处有两个：一是：读取函数内部的变量；二是：让这些变量的值始终保存在内存中，实现数据共享。
 
  作为高级的javaScript编程方法，在编写库或框架时会用到闭包和ProtoType对象
 
  with语句为 一个或一组语句指定默认对象。 当使用with语句时，代码变得更短且更易读。
  with(Math){
     x=cos(3*PI)+sin(LN10);
     y=tan(14*E) 
  }
 
  this对象  该对象返回当前对象，在不同处this代表不同的对象。如果在JavaScript的主程序，而不在任何function和事件处理程序中，则代表window对象；
  如果在with语句块使用this,则代表with所指定的对象；如果在事件处理程序中使用this,则代表发生事件的对象。
 
  Ajax (Asynchronous JavaScript and XML)
    最关键一点：使用XMLHttpRequest对象与Web服务器执行异步数据交换。
  Ajax是通过在JavaScript中使用浏览器中包含的HTTP通信功能来实现不用跳转页面即可实现页面局部内容更新的技术。
   
   
 jQuery与其他程序库，特别是prototype.js库同时使用时，不能使用$方法。因为prototype.js中也有改方法，可以如此写：
  jQuery(function($){//脚本});
 
 在jQuery中使用CSS匹配（CSS like）来进行元素指定，比其他的JavaScript库都简单
 取标签   $('标签名')
 按照id取出元素     $('#id_name')
 按照class取出元素   $('.class_name')
 获取多个元素   $('p,#id_name, .class_name')
 获取所有元素    $('*')
 指定层次关系获取元素
   $('祖先，子孙')   $('祖先 子孙')
   $('父>子')
   $('前+后')
   $('兄~弟')
 根据元素的属性值获取元素
    [attribute]                $("p[id]").css("color","red");
    [attribute=value]           $("div[id=div_test]").css("color","red");
    [attribute!=value]            $("div[id!=div_test]").css("color","red");
 
 通过过滤器（filter）获取元素  ：主要用于操作集合性的标签，尤其适用于需要操作列表标签或表标签的情况下。通过"元素名：过滤器名"的形式来使用这种方法。
    所有过滤器：
      :fisrt                  获取第1个元素
      :last                   获取最后一个元素
      :not(filter)            获取除了指定元素外的元素
      :even                   获取偶数序号的元素
      :odd                    获取奇数序号的元素
      :eq(index)              获取指定序号的元素
      :gt(index)              获取指定序号后的元素
      :lt(index)              获取指定序号前的元素
      :header                 获取标题元素
      :animated               获取动画元素
      :contains(text)         获取包含指定字符串的元素
      :empty                  获取空元素
      :has(selector)          获取拥有子孙元素的元素
      :parent                 获取非空元素
     
 获取表单元素：
   :input  获取所有表单元素
   :text
   :password
   :radio
   :checkbox
   :submit
   :image
   :reset
   :button  获取button属性的元素或button标签
   :file     获取file属性的元素
   使用 :hidden 可以获取HTML/xHTML文档中的所有隐藏元素，要获取表单中hidden属性的元素，应使用"input:hidden".
      $("#msg").html()
  通过过滤器获取表单元素
    :enabled
    :disabled
    :checked
    :selected
 
  元素控制
     在元素的内部追加新的字符串可以使用append方法
     append(content)
     $(div).append('<p>追加p标签</p>');
    
     在元素中的不同位置追加内容
     appendTo(content)

根据属性名获取属性值
 attr(name)
 attr(properties)
 attr(key,value)
 attr(key,fn)    
    
  获取class属性值
  attr("class")  
  修改class属性值
  $("p#two").addClass("redbox");
  删除class值
  $('p').remove('A B');
  根据条件设置/删除class值
  toggleClass(class)
  toggleClass(class,switch)
  在class中设置类名，如果指定的类名存在，则删除；否则追加。条件表达式switch为真，则追加；为假，则删除。
  $('p').toggle("redbox");
 
  未指定参数，获取值；否则设置值。
  $("p#one").html();  获取p标签id为one的html内容
  $("p#one").html(val); 设置p标签id为one的html内容
  $("p#one").text();   获取p标签id为one的文本
  $("p#one").text(val);  设置p标签id为one的文本
  $("p#one").val();    获取p标签的value
  $("p#one").val(val);   设置p标签的value
 
  css控制  css(name) name为获取的style属性名
    $("p#one").css("color");    
    $("p#one").css("backgroundColor"); //jQuery中css属性名的书写方式采用Camel style.
    $("p#one").css('color','red');  
   
     $("p#one").offset();   //获取元素的显示位置 距离上边缘和左边缘
     $("p#one").height();   //获取元素的高度
     $("p#one").width();    //获取元素的宽度
    
  事件控制
         在元素事件中绑定函数
         bind(type,[data],fn)   type为要绑定的事件的名称，在JavaScript中使用"onclick"来指定事件名，而在jQuery中使用'click',去掉on
         hover(over,out) over中定义鼠标放置时的动作，out定义鼠标离开时的动作
         toggle(fn1,fn2,fn3,...) 使用toggle函数来实现在元素被单击之后按顺序切换执行定义的函数，最后的函数执行后返回第一个函数，循环
         click([fn])  单击事件
         mouseover(fn) 鼠标放上事件          
         mouseout(fn)  鼠标离开
        
  设定效果   jQuery提供了丰富多彩的动画效果
  show([speed],[callback])
     speed:指定show normal fast 或者以微秒为单位指定动画结束的时间
     callback:指定动画结束时执行的函数。如果指定了callback函数，那么必须指定speed
  hide([speed],[callback])
     speed:指定show normal fast 或者以微秒为单位指定动画结束的时间
     callback:指定动画结束时执行的函数。如果指定了callback函数，那么必须指定speed  
  toggle()  toggle(switch)  toggle(speed,[callback])
    switch为真，显示；为假，隐藏
    speed:指定show normal fast 或者以微秒为单位指定动画结束的时间
    callback:指定动画结束时执行的函数。如果指定了callback函数，那么必须指定speed
  slideUp([speed],[callback]) 从下到上渐进隐藏指定元素
     $("p#one").show().slideUp();
   slideDown([speed],[callback]) 从上到下逐渐显示隐藏元素
      $("p#one").hide().slideDown();
   slideToggle([spedd],[callback]) 交替显示元素的slideUp及slideDown效果
   fadeIn([speed],[callback])  通过透明度赋予元素的渐入效果，即逐渐清晰的显示隐藏元素
   fadeOut([speed],[callback])  通过透明度赋予元素的渐出效果，即逐渐隐藏元素
  
   animate(params,[duration],[easing],[callback])
   animate(params,options)        运行自定义动画
  
   Web服务  利用HTTP交换消息  信息的类型通常是XML(eXtensible Markup language)或者JSON(JavaScript Object Notation)
  
   Ajax的控制
    在jQuery中通过HTTP通信不必执行reload的动作即可读入页面。
     jQuery.ajax(options)
     $.ajax(options)
     根据jQuery的规则，jQuery与$可以互换。
     必须以属性系列的形式指定，并使用大括号括起选项名与值对。
       $( function(){
              $.ajax( {
                  url:'test.html',
                  success:function(  ){
                 
                     $('p#ajax').                                                                                                                                                                                                                                                                                                                                                                                         (data);
                 
                  }
             
             
             } );
      
         }     
             
       );
    load方法多用于简单地读入HTML文件并插入到特定的元素中
     load(url,data,callback)
      url:指定含有HTML的网页，可利用选择器选取其中部分HTML内容
      data:指定query字符串，以属性数据的形式组织，设置的情况下以POST形式传送
      callback:通信结束时调用的函数，可以带三个参数，依次为responseText获取的数据、显示发送结果的字符串和XMLHttpRequest对象。
   
    ajaxComplete方法以全局句柄形式设置Ajax通信完成后执行的函数，ajax和load方法是触发器。
          ajaxComplete(callback)
          参数callback指定ajax通信完成时调用的方法。
          callback方法可以接受3个参数，即event事件、XMLHttpRequest对象和ajaxOptions的ajax通信选项。
          function（event,XMLHttpRequest,ajaxOptions）{
             //code
          }  
         
       ajaxError方法以全局句柄形式设置Ajax通信失败时执行的函数。
          ajaxError(callback)
          参数callback指定ajax通信失败时调用的方法。
          callback方法可以接受4个参数，即event事件、XMLHttpRequest(ajax通信对象)、thrownError(例外对象）和ajaxOptions（ajax通信选项）的ajax通信选项。
          function（event,XMLHttpRequest,ajaxOptions，thrownError）{
             //code
          }       
         
          ajaxSuccess方法以全局句柄形式设置Ajax通信成功后执行的函数。
          ajaxSuccess(callback)
          参数callback指定ajax通信成功后调用的方法。
          callback方法可以接受4个参数，即event事件、XMLHttpRequest(ajax通信对象)和ajaxOptions（ajax通信选项）的ajax通信选项。
          function（event,XMLHttpRequest,ajaxOptions）{
             //code
          }  
    
        系列化获取元素的值
         使用serialize方法将form元素等输入的数据系列化，系列化后的字符串可使用encodeURIComponent(JavaScript)方法执行encode
         serialize（）
         在需要使用GET方法执行Ajax通信的场合下使用该方法，事先将获取的字符串变为query字符串
         系列化form标签中所有的数据使用如下代码：
         $('form').serialize();
        
         $( function (){
              (function serializeValues(){
                  $('div#result').text($('form').serialize());
                  $(':checkbox').click(serializeValues);
                  $(':select').change(serializeValues);
                  $(':text').keyup(serializeValues);            
             
              }) ();    
               
           }               
               
        
         );