zoukankan      html  css  js  c++  java
  • jQuery基础笔记 each和data(7)

    day56

    参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-11-0

    each

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

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

    li =[10,20,30,40]
    $.each(li,function(i, v){
      console.log(i, v);//index是索引,ele是每次循环的具体元素。
    })

    输出:

    010
    120
    230
    340

    示例:

    11each循环示例.html

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>each循环示例</title>
    </head>
    <body>
    
    <div>111</div>
    <div>222</div>
    <div>333</div>
    <div>444</div>
    <div>555</div>
    <script src="jquery-3.2.1.min.js"></script>
    </body>
    </html>

    实践:

    each遍历数组:

    不能用break退出:

    .data()

    在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

    .data(key, value):

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

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

    .data(key):

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

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

    插件(了解即可)

    jQuery.extend(object)

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

    示例:

    复制代码
    <script>
    jQuery.extend({
      min:function(a, b){return a < b ? a : b;},
      max:function(a, b){return a > b ? a : b;}
    });
    jQuery.min(2,3);// => 2
    jQuery.max(4,5);// => 5
    </script>
    复制代码

    实践:

    以上为给jQuery添加的方法。

    以下为给jQuery对象添加的方法。

    jQuery.fn.extend(object)

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

    复制代码
    <script>
      jQuery.fn.extend({
        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);
    复制代码
  • 相关阅读:
    日本最大的汽车品牌:丰田【仅供自己参考】
    读书笔记1
    读书笔记1
    计算机网络笔记1
    ZY凉凉经
    HK凉凉经
    访问一个网站,发生了什么?
    正向代理VS反向代理
    mac下打开hosts文件
    国际手机区号
  • 原文地址:https://www.cnblogs.com/112358nizhipeng/p/10246387.html
Copyright © 2011-2022 走看看