• 工具函数(一)


       工具函数是指直接依附于jQuery对象,针对jQuery对象本身定义的方法,即全局性的函数。它的作用主要是提供比如字符串、数组、对象等操作方面的遍历。

       字符串操作

       在jQuery中,字符串的工具函数只有一个,就是去除字符串左右空格的工具函数:$.trim()。如:

    var str = "        jQuery      ";
    alert(str);
    alert($.trim(str));

       数组和对象操作

       jQuery为处理数组和对象提供了一些工具函数, 这些函数可以便利的给数组或对象进行遍历、筛选、搜索等操作。

       工具函数.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>工具函数</title>
        <script type="text/javascript" src="jquery-1.12.3.js"></script>
        <script type="text/javascript" src="demo.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="box"></div>
    </body>
    </html>

       $.each()遍历数组:

    var arr = ["张三","李四","王五","赵六"];
    $.each(arr,function(index, value) {
        $("#box").html($("#box").html() + (index+1) + ":" + value + "<br/>");
    });

       $.each()遍历对象:

    $.each($.ajax(),function(name, fn) {
        $("#box").html($("#box").html() + fn + "<br/><br/>");
    });

       注意:$.each()中index表示数组元素的编号,默认从0开始。

       $.grep()数据筛选:

    var arr = [4,2,6,9,11,25,38,59];
    var arrGrep = $.grep(arr,function(element,index) {
        return index < 5 && element < 6; //这里按道理是一个boolean值,但整体返回一个数组
    });
    alert(arrGrep); //4,2

       注意:$.grep()方法的index是从0开始计算的。

       $.map()修改数据:

    var arr = [4,2,6,9,11,25,38,59];
    var arrMap = $.map(arr,function(element,index) {
        //return index < 5 && element < 6; //这里就是按布尔值返回的
        //return element + 1; //所有元素均+1
        if(index < 5 && element < 6) {
            return element + 1;
        }
    });
    alert(arrMap); //5,3

       $.inArray()获取查找到元素的下标:

    var arr = [4,2,6,9,11,25,38,59];
    alert($.inArray(11,arr)); //4

       注意:$.inArray()的下标从0开始计算。

       $.merge()合并两个数组:

    var arr = [4,2,6,9,11,25,38,59];
    var arr2 = [200,300];
    alert($.merge(arr,arr2)); //4,2,6,9,11,25,38,59,200,300

       $.unique()删除重复的DOM元素:

       工具函数.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>工具函数</title>
        <script type="text/javascript" src="jquery-1.12.3.js"></script>
        <script type="text/javascript" src="demo.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    
        <div></div>
        <div></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div></div>
    
    </body>
    </html>
    var divs = $("div").get();
    //concat()函数相当于在原有的6个<div>后接上3个<div class="box"></div>
    divs = divs.concat($(".box").get()); //divs为原生的,非jQuery对象
    //alert(divs.length); //原生对象才有length的属性,而jQuery对象没有,它有size()函数
    alert($(divs).size()); //9
    $.unique(divs); 
    alert($(divs).size()); //6

       注意:$.unique()对数组无效:

    var arr = [5,2,9,4,11,57,89,1,23,8];
    var arr2 = [2,9,4];
    var arr3 = $.merge(arr,arr2);
    alert($.unique(arr3)); //无效

       .toArray()合并多个DOM元素组成数组

       工具函数.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>工具函数</title>
        <script type="text/javascript" src="jquery-1.12.3.js"></script>
        <script type="text/javascript" src="demo.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    
    </body>
    </html>
    alert($("li").toArray());
    alert($($("li").toArray()).size());
  • 相关阅读:
    Maven教程
    Logback文件这么配置,TPS提高至少10倍
    查看ElasticSearch服务状态和结果的URL
    no main manifest attribute, in demo-1.0.jar
    Rocketmq原理&最佳实践
    【ORACLE】Oracle提高篇之DECODE
    ZooKeeper架构原理你学会了吗?
    01:kubernetes概述
    08:图形页面管理监控
    07:企业级镜像仓库Harbor
  • 原文地址:https://www.cnblogs.com/yerenyuan/p/5436835.html
Copyright © 2020-2023  润新知