JQuery常用方法

作者: 韩宝亿 | 来源:发表于2016-05-31 14:37 被阅读425次

    一、$.extend 的作用和用法?

    • $.extend( target [, object1 ] [, objectN ] )
      **描述: **将两个或更多对象的内容合并到第一个对象。
    • $.extend( object1, object2 );
      **描述: **合并两个对象,并修改第一个对象。
      <script>
      var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97};
      var object2 = { banana: { price: 200 }, durian: 100};
      // Merge object2 into object1
      $.extend( object1, object2 );
      // Assuming JSON.stringify - not available in IE<8
      $( "#log" ).append( JSON.stringify( object1 ) );
      {"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
      </script>
    • $.extend( true, object1, object2 );
      **描述: **采用递归方式合并两个对象,并修改第一个对象。
      <script>
      var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97};
      var object2 = { banana: { price: 200 }, durian: 100};
      // Merge object2 into object1, recursively
      $.extend( true, object1, object2 );
      // Assuming JSON.stringify - not available in IE<8
      $( "#log" ).append( JSON.stringify( object1 ) );
      {"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
      </script>
    • $.extend( {}, defaults, options );
      **描述: **合并 defaults 和 options 对象,并且不修改 defaults 对象。这是常用的插件开发模式。
      <script>
      var defaults = { validate: false, limit: 5, name: "foo" };
      var options = { validate: true, name: "bar" };
      // Merge defaults and options, without modifying defaultsvar
      settings = $.extend( {}, defaults, options );
      // Assuming JSON.stringify - not available in IE<8$
      ( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
      $( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
      $( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
      **defaults -- **{"validate":false,"limit":5,"name":"foo"}
      **options -- **{"validate":true,"name":"bar"}
      **settings -- **{"validate":true,"limit":5,"name":"bar"}
      </script>

    二、jQuery.fn.extend()

    • **描述: **一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法。
    • jQuery.fn.extend()方法继承了jQuery原型($.fn)对象,以提供jQuery原型新的方法,可以链式调用jQuery()函数
      <script>
      jQuery.fn.extend({
      check: function() {
      return this.each(function() {
      this.checked = true;
      });
      },
      uncheck: function() {
      return this.each(function() {
      this.checked = false;
      });
      }
      });
      // Use the newly created .check() method
      $( "input[type='checkbox']" ).check();
      </script>

    三、JQuery ajax 中缓存怎样控制?

    • 使用get请求资源的时候,如果url始终保存不变,那么浏览器会将get方式请求的资源保存在缓存中,当url一样的时候,就不发送请求,直接采用缓存,这样带来一个不便就是当数据发生变化的时候,相同的url无法的到实时的数据。
    • 在url增加随机内容Math.random或者new Date()时间戳,其原理是类似在请求中加时间戳,这样浏览器以为两次请求是不同的而不会去调用缓存,但时间戳并不影响数据的获取。
    • $.ajax() 的参数里有一个cashe参数,默认是true 。设置为false 浏览器将不缓存此页面。

    四、JQuery 中 data 函数的作用

    • **描述: **存储任意数据到指定的元素,返回设置的值。
    • jQuery.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时,jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值,并获取这些值:

    设置语法:jQuery.data( element, key, value );

         jQuery.data(document.body, 'foo', 52);
         jQuery.data(document.body, 'bar', 'test');
    

    获取语法:jQuery.data( element, key )

         alert(jQuery.data( document.body, 'foo' )); //52
         alert(jQuery.data( document.body,'bar' )); //'text'

    相关文章

      网友评论

      本文标题:JQuery常用方法

      本文链接:https://www.haomeiwen.com/subject/vwvcdttx.html