zoukankan      html  css  js  c++  java
  • jQuery实用函数用法总结

    1.修剪字符串

    1
    $('#id').val($.trim($('#someid').val()))
     

    2.遍历集合

    可能这样写:

    1
    2
    3
    4
    var anArray = ['one','two'];
    for(var n = 0; n < anArray.length; n++){
       
    }

    还有可能这样写:

    1
    2
    3
    4
    var anObject = {one: 1, two: 2};
    for(var p in anObject){
       
    }

    但有了$.each函数后,就可以这样写了:

    1
    2
    3
    4
    5
    6
    7
    8
    var anArray = ['one','two'];
    $.each(anArray, funtion(n, value){
       
    })
    var anObject = {one: 1, two: 2};
    $.each(anObjct, function(name,value){
       
    })

    3.筛选数组

    使用$.grep()方法能筛选数组。先来看grep方法的定义:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    grep: function(elems, callback, inv){
      var ret = [], retVal;
      inv = !!inv;
      for(var i = 0; length = elems.length; i < length; i++){
        retVal = !!callback(elems[i],i)
        if(inv !== retVal){
          ret.push(elems[i]);
        }
      }
      return ret;
    }

    以上示例中:
    ① grep方法的第二个参数是回调函数,该回调函数接收2个参数,一个是数组的元素,一个是数组的索引。
    ② grep方法的第三个参数inv,默认情况下是undefined,所以!!inv为false,即inv的默认值是false

    举例1:int类型数组

    1
    2
    3
    4
    5
    var arr = [1, 2, 3, 4, 5, 6];
    arr = $.grep(arr, function(val, index){
      return val > 3;
    })
    console.log(arr);//结果是:4 5 6

    如果把grep的第三个参数显式地设置为true,结果怎样呢?

    1
    2
    3
    4
    5
    var arr = [1, 2, 3, 4, 5, 6];
    arr = $.grep(arr, function(val, index){
      return val > 3;
    }, true)
    console.log(arr);//结果是:1 2 3

    可见,当把grep方法的第三个参数设置为true后,会把不符合回调函数的数组元素过滤出来。

    举例2:object类型数组

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var arr = [
      {
        first: "Jeffrey",
        last: 'Way'
      },{
        first: 'Allison',
        last: 'Way'
      },{
        first: 'John',
        last: 'Doe'
      },{
        first: 'Thomas',
        last: 'Way'
      };
      arr = $.grep(arr, function(obj, index){
        return obj.last === 'Way';
      });
      console.log(arr);
    ];

    4.转换数组

    使用$.map(arr, callback)为数组的每一个元素调用回调函数,并返回一个新的数组

    给数组的每一个元素加1:

    1
    var oneBased = $.map([0, 1, 2, 3, 4], function(value){return value +1;})

    把字符串数组转换成整型数字数组,判断数组元素是否是数字:

    1
    2
    3
    4
    5
    var strings = ['1', '2', '3','4','S','6'];
    var values = $.map(strings, function(value){
      var result = new Number(value);
      return isNaN(result) ? null : result;
    })

    把转换后的数组合并到原先的数组中:

    1
    var chars = $.map(['this','that'], function(value){return value.split(' ')});

    5.返回数组元素的索引

    使用$.inArray(value, array)返回传入的值第一次出现的下标,即索引。

    1
    var index = $.inArray(2, [1, 2, 3]);

    6.将对象转换成数组

    $.makeArray(object)将传入类似数组的对象转换成Javascript数组。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
    <div>Fourth</div>
    <script>
      var elems = document.getElementsByTagName("div");
      var arr = jQuery.makeArray(elems);
      arr.reverse();
      $(arr).appendTo(document.body);
    </script>

    7.得到不含重复元素的数组

    使用$.unique(array)返回由原始数组中不重复的元素组成的数组。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div>There are 6 divs in this document.</div>
    <div></div>
    <div class="dup"></div>
    <div class="dup"></div>
    <div class="dup"></div>
    <div></div>
    //把到所有div,get方法转换成javascript数组,总共6个div
    var divs = $("div").get();
    //再把3个class名为dup的div合并到前面的6个div
    divs = divs.concat($(".dup").get());
    alert(divs.length); //9个div
    //过滤去掉重复
    divs = jQuery.unqiue(divs);
    alert(divs.length);//6个div

    8.合并2个数组

    $.merge(array1, array2)把第二个数组合并到第一个数组中,并返回第一个数组。

    1
    2
    3
    4
    var a1 = [1, 2];
    var a2 = [2, 3];
    $.merge(a1, a2);
    console.log(a1);//[1, 2, 2, 3]

    9.把对象序列化成查询字符串

    $.param(params)把传入的jquery对象或javascript对象转换成字符串形式。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $(document).ready(function(){
     personObj=new Object();
     personObj.firstname="John";
     personObj.lastname="Doe";
     personObj.age=50;
     personObj.eyecolor="blue";
     $("button").click(function(){
      $("div").text($.param(personObj));
     });
    });

    结果:firstname=John&lastname=Doe&age=50&eyecolor=blue

    10.一些判断函数

    $.isArray(o) 如果o是javascript数组,则返回true,如果是类似数组的jquery对象数组,返回false
    $.isEmptyObject(o) 如果o是不包含属性的javascript对象,则返回true
    $.isFunction(o) 如果o是javascript函数就返回true
    $.isPlainObject(o) 如果o是通过{}或new Object()创建的对象,则返回true
    $.isXMLDoc(node) 如果node是XML文档或者是XML文档中的节点,则返回true

    11.判断一个元素是否包含在另外一个元素中

    $.contains(container, containee)第二个参数是被包含

    1
    2
    $.contains( document.documentElement, document.body ); // true
    $.contains( document.body, document.documentElement ); // false

    12.把值存储到某元素上

    $.data(element, key, value)第一个是javascript对象,第二、第三个是键值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //得到一个div的javascript对象
    var div = $("div")[0];
    //把键值存储到div上
    jQuery.data(div, "test",{
      first: 16,
      last: 'pizza'
    })
    //根据键读出值
    jQuery.data(div, "test").first
    jQuey.data(div, "test").last

    13.移除存储到某元素上的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div>value1 before creation: <span></span></div>
    <div>value1 after creation: <span></span></div>
    <div>value1 after removal: <span></span></div>
    <div>value2 after removal: <span></span></div>
    var div = $( "div" )[ 0 ];
    //存储值
    jQuery.data( div, "test1", "VALUE-1" );
    //移除值
    jQuery.removeData( div, "test1" );
  • 相关阅读:
    python冲刺(5)列表声称式
    python冲刺(4)切片 等
    python冲刺(3)函数 等
    python冲刺(2)
    python冲刺(1)
    redis初步(1)
    php连接Oracle的时候遇到的编码集问题
    redis初步
    php 命名空间
    指向字符数组的指针与指向整型数组的指针
  • 原文地址:https://www.cnblogs.com/zhengteng/p/5390278.html
Copyright © 2011-2022 走看看