工具函数(一)-程序员宅基地

技术标签: ViewUI  javascript  

   工具函数是指直接依附于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());

 

转载于:https://www.cnblogs.com/yerenyuan/p/5436835.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34191845/article/details/93614101

智能推荐

Jenkins+Docker+Harbor+SpringCloud微服务持续集成自动化部署(上)-程序员宅基地

4 Jenkins+Docker+SpringCloud微服务持续集成(上)4.1 Jenkins+Docker+SpringCloud持续集成流程说明大致流程说明:1)开发人员每天把代码提交到Gitlab代码仓库2)Jenkins从Gitlab中拉取项目源码,编译并打成jar包,然后构建成Docker镜像,将镜像上传到Harbor私有仓库。3)Jenkins发送SSH远程命令,让生产部署服务器到Harbor私有仓库拉取镜像到本地,然后创建容器。4)最后,用户可以访问到容器服务列表..

linux嵌入式远程代码执行漏洞,【漏洞预警】WordPress <4.7.1 远程代码执行漏洞(更新漏洞环境)...-程序员宅基地

【漏洞预警】WordPress <4.7.1 远程代码执行漏洞(更新漏洞环境)2017-05-06 14:42:18阅读:0次传送门关于WordPressWordPress是一个注重美学、易用性和网络标准的个人信息发布平台。WordPress虽为免费的开源软件,但其价值无法用金钱来衡量。使用WordPress可以搭建功能强大的网络信息发布平台,但更多的是应用于个性化的博客。针对博客的应用,W...

4.Spring依赖注入-程序员宅基地

依赖注入_4.spring依赖注入

jQuery提示通知插件jBox弹出iframe的方法总结_jbox.open弹窗位置-程序员宅基地

//父页面top.$.jBox.open("iframe:${ctx}/oa/management/businessChangeReturn?accountz="+ accountz + "&changge="+ changge + "", "标题内容",1400, $(top.document).height() - 130, { buttons : {"确定":"ok"_jbox.open弹窗位置

Python之MQTT客户端实现学习笔记_client = mqtt_client.client(client_id)-程序员宅基地

基于Apollo的MQTT协议服务器端搭建流程请参考我的文章:https://blog.csdn.net/zym326975/article/details/82081717为了实现基于Python的MQTT客户端,需要安装paho-mqtt:pip install paho-mqtt基于Python的MQTT客户端订阅者代码的实现import paho.mqtt.client as..._client = mqtt_client.client(client_id)

Terminating app due to uncaught exception ‘NSInternalInconsistencyException‘, reason: ‘<xxx: 0xxxx>_terminating app due to uncaught exception 'nsinter-程序员宅基地

今天一个新接手的项目出现了这样的错误:Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: '<xxx: 0xxxx> returned nil from -traitCollection, which is not allowed.'全局断点也不能找到正确的位置原因是尖括号里的类没有初始化,竟然只写了alloc没有init..._terminating app due to uncaught exception 'nsinternalinconsistencyexception

随便推点

Linux下打包运行MR程序-程序员宅基地

转载自 使用命令行编译打包运行MR程序网上的 MapReduce WordCount 教程对于如何编译 WordCount.java 几乎是一笔带过… 而有写到的,大多又是 0.20 等旧版本版本的做法,即 javac -classpath /usr/local/hadoop/hadoop-1.0.1/hadoop-core-1.0.1.jar WordCount.java

(二)Linux网络编程--初等网络函数介绍(TCP)-程序员宅基地

Linux系统是通过提供套接字(socket)来进行网络编程的.网络程序通过socket和其它几个函数的调用, 会返回一个 通讯的文件描述符,我们可以将这个描述符看成普通的文件的描述符来操作,这就是linux的设备无关性的好处. 我们可以通过向描述符读写操作实现网络之间的数据交流. (一)socket int socket(int domain, int t

在linux下创建启动脚本自动登录校园网-程序员宅基地

在linux下创建启动脚本自动登录校园网思想:原来实在浏览器上面输入用户名,密码,然后提交登录。其实浏览器只不过是一个代理,一个代理浏览网页的工具,或者说和服务器交流的工具。我们用curl模拟浏览器的校园网登录过程。 步骤如下。1. 查找校园网接口 2. 分析请求头的请求参数3.用curl 模拟浏览器的请求过程,如下#!

第十三周项目1——动物这样叫(3)-程序员宅基地

问题及代码;/**Copyright (c)2015,烟台大学计算机与控制工程学院*All rights reserved.*文件名称:animal.cpp*作 者:赵敏*完成日期:2015年6月3日*版 本 号:v1.0*问题描述:1、根据给出的main()函数和运行结果的提示,设计出相关的各个类,注意观察运行结果,提取出每个类中需要的数据成员,并匹配上

前驱图如下图所示,采用记录型信号量机制实现图中的前驱后继关系。要求:定义信号量并赋初值,用合适的PV操作实现前驱图。-程序员宅基地

前驱图如下图所示,采用记录型信号量机制实现图中的前驱后继关系。要求:定义信号量并赋初值,用合适的PV操作实现前驱图。具体的作答步骤如下:

牛客 SQL:查找所有员工的last_name和first_name以及对应的dept_name_代码last_name什么_圆滚滚的柴柴的博客-程序员宅基地

题目:查找所有员工的last_name和first_name以及对应的dept_name代码:SELECT e.last_name, e.first_name, dp.dept_nameFROM (employees AS eLEFT JOIN dept_emp AS deON e.emp_no = de.emp_no)LEFT JOIN departments AS dpON de.dept_no = dp.dept_noSELECT e.last_name, e.first_name,_代码last_name什么