一.  each()

$(' ').each(function (){...})

　　jQuery.each(collection, callback(indexInArray, valueOfElement))：

　　　　描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]

$.each(li,function(i, v){

  console.log(i, v);//function里面可以接受两个参数，i是索引，v是每次循环的具体元素。

})

.each(function(index, Element))：

　　　描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

　　　.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo

$("li").each(function(){

  $(this).addClass("c1");

});

　　　注意:

　　　　 jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法,也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

　　　注意：

　　　　在遍历过程中可以使用 return false提前结束each循环。

　　　　而直接使用return;后面什么都不加，不写false，就是跳过本次循环的意思

　　终止each循环 :return false；

二 .data()

　　可以保存标签

　　任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量 ,在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value): 设置值

　　　描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key): 取值，没有的话返回undefined

　　    描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

　　　描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

三.插件

jQuery.extend(object)

　　　　　jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

实例:

<script>

jQuery.extend({ //$.extend({})

  min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function

  max:function(a, b){return a > b ? a : b;}

});

jQuery.min(2,3);// => 2

jQuery.max(4,5);// => 5

</script>

jQuery.fn.extend(object)

　　　　　　一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

<script>

  jQuery.fn.extend({  //给任意的jQuery标签对象添加一个方法

    check:function(){

      return this.each(function(){this.checked =true;});

    },

    uncheck:function(){

      return this.each(function(){this.checked =false;});

    }

  });

// jQuery对象可以使用新添加的check()方法了。

$("input[type='checkbox']").check();

</script>

　　单独写在文件中的扩展：

(function(jq){

  jq.extend({

    funcName:function(){

    ...

    },

  });

})(jQuery);

　　自定义的jquery登陆验证插件

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>登录校验示例</title>

  <style>

    .login-form {

      margin: 100px auto 0;

      max-width: 330px;

    }

    .login-form > div {

      margin: 15px 0;

    }

    .error {

      color: red;

    }

  </style>

</head>

<body>

<div>

  <form action="" class="login-form" novalidate>

    <div>

      <label for="username">姓名</label>

      <input id="username" type="text" name="name" required autocomplete="off">

      <span class="error"></span>

    </div>

    <div>

      <label for="passwd">密码</label>

      <input id="passwd" type="password" name="password" required autocomplete="off">

      <span class="error"></span>

    </div>

    <div>

      <label for="mobile">手机</label>

      <input id="mobile" type="text" name="mobile" required autocomplete="off">

      <span class="error"></span>

    </div>

    <div>

      <label for="where">来自</label>

      <input id="where" type="text" name="where" autocomplete="off">

      <span class="error"></span>

    </div>

    <div>

      <input type="submit" value="登录">

    </div>

  </form>

</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script src="validate.js"></script>

<script>

  $.validate();

</script>

</body>

</html>

html文件

"use strict";

(function ($) {

  function check() {

    // 定义一个标志位，表示验证通过还是验证不通过

    var flag = true;

    var errMsg;

    // 校验规则

    $("form input[type!=':submit']").each(function () {

      var labelName = $(this).prev().text();

      var inputName = $(this).attr("name");

      var inputValue = $(this).val();

      if ($(this).attr("required")) {

        // 如果是必填项

        if (inputValue.length === 0) {

          // 值为空

          errMsg = labelName + "不能为空";

          $(this).next().text(errMsg);

          flag = false;

          return false;

        }

        // 如果是密码类型，我们就要判断密码的长度是否大于6位

        if (inputName === "password") {

          // 除了上面判断为不为空还要判断密码长度是否大于6位

          if (inputValue.length <) {

            errMsg = labelName + "必须大于6位";

            $(this).next().text(errMsg);

            flag = false;

            return false;

          }

        }

        // 如果是手机类型，我们需要判断手机的格式是否正确

        if (inputName === "mobile") {

          // 使用正则表达式校验inputValue是否为正确的手机号码

          if (!/^1[345678]\d{9}$/.test(inputValue)) {

            // 不是有效的手机号码格式

            errMsg = labelName + "格式不正确";

            $(this).next().text(errMsg);

            flag = false;

            return false;

          }

        }

      }

    });

    return flag;

  }

  function clearError(arg) {

    // 清空之前的错误提示

    $(arg).next().text("");

  }

  // 上面都是我定义的工具函数

  $.extend({

    validate: function () {

      $("form :submit").on("click", function () {

      return check();

    });

    $("form :input[type!='submit']").on("focus", function () {

      clearError(this);

    });

    }

  });

})(jQuery);

JS文件

jQuery中的each, data, 插件的更多相关文章

  1. Jquery中.attr()和.data()的区别

    $.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别. 一个简单的例子 <!DOCTYPE html> <html> <head> & ...

  2. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  3. jQuery中的supersized的插件的功能描述

    Supersized特性: 自动等比例调整图片并填充整浏览器个屏幕. 循环展示图片,支持滑动和淡入淡出等多种图片切换效果. 导航按钮,支持键盘方向键导航. XHTML <div id=" ...

  4. jQuery中的工具和插件

    jQuery的工具属性 jQuery类数组操作 length属性 表示获取类数组中元素的个数 get()方法 表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...

  5. JQuery中的DataTables表格插件

    一.DataTables表格插件的简介 DataTables是一个jQuery的表格插件.它具有以下特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定 ...

  6. Jquery中ajax方法data参数的用法

    $.ajax({   type: "POST",   url: "some.php",   data: "name=John&location ...

  7. 【转】关于Jquery中ajax方法data参数用法的总结

    $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Bosto ...

  8. 关于JQuery中$.data绑定数据原理或逻辑

    问题: JQuery中,对于.data([key],[value])函数,当使用其进行数据绑定时,假设要绑定的数据是“引用数据类型”,也就是对象:那么.data函数绑定的是该对象的副本还是该对象的一个 ...

  9. 总结Jquery中获取自定义属性使用.attr()和.data()以及.prop()的区别

    一..attr()和.data()的区别: .attr()和.data()本质上属于DOM属性和Jquery对象属性的区别. 看一个例子: <!DOCTYPE html> <html ...

随机推荐

  1. typedef用法和与define的区别

    typedef用来声明一个别名,typedef后面的语法,是一个声明.本来笔者以为这里不会产生什么误解的,但结果却出乎意料,产生误解的人不在少数.罪魁祸首又是那些害人的教材.在这些教材中介绍typed ...

  2. 数据库 alert.log 日志中出现 "[Oracle][ODBC SQL Server Wire Protocol driver][SQL Server] 'RECOVER'"报错信息

    现象描述: (1).数据库通过调用透明网络实现分布式事务,但透明网关停用后,失败的分布式事务并未清理. (2).数据库 alert 日志 Thu Sep 06 06:53:00 2018 Errors ...

  3. 01d-1: 算法分析

  4. 基于Dcoker的ZooKeeper集群的搭建

    背景 原来学习 ZK 时, 我是在本地搭建的伪集群, 虽然说使用起来没有什么问题, 但是总感觉部署起来有点麻烦. 刚好我发现了 ZK 已经有了 Docker 的镜像了, 于是就尝试了一下, 发现真是爽 ...

  5. Photoshop中的高斯模糊、高反差保留和Halcon中的rft频域分析研究

    在Halcon的rft变换中,我们经常可以看到这样的算子组合: rft_generic (Image, ImageFFT2, 'to_freq', 'none', 'complex', Width) ...

  6. vue elementui form表单验证

    最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...

  7. [转].NET 4.5+项目迁移.NET Core的问题记录 HTTP Error 502.5

    本文转自:http://www.cnblogs.com/ronli/p/5900001.html 这几天试着把目前的开发框架迁移到新的.net core平台,中间遇到的问题在这里简单记录一下. 迁移过 ...

  8. 关于eclipse创建java项目时产生的.settings文件：

    在用eclipse创建一个java项目,在项目目录下面往往会发现.settings文件夹并包含一个org.eclipse.core.resources.prefs文件条目. 这个条目是配置项目的编码方 ...

  9. windows下使用redis

    一.下载windows版本的Redis 官网只提供linux版本的下载 官网下载地址:http://redis.io/download Redis 没有官方的Windows版本,但是微软开源技术团队( ...

  10. 信息增益(Information Gain)（转）

    当我们需要对一个随机事件的概率分布进行预测时,我们的预测应当满足全部已知的条件,而对未知的情况不要做任何主观假设.在这种情况下,概率分布最均匀,预测的风险最小.因为这时概率分布的信息熵最大,所以称之为 ...