day57---前端之jQuery框架四

1. jQuery中的data方法

  • 描述：在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值(为匹配的标签元素或数组集合中的第一个标签元素添加存储数据

  • .data(key,value)：在匹配的元素上存储任意相关数据(为标签元素添加存储数据，如果指定的key不存在则为添加，如果key已存在则为修改)

    • 添加一个键值对：$("").data(key,value)
    • 添加多个键值对：$("").data({k1:v1,k2:v2})

  • .data(key)：返回匹配的元素集合中的第一个元素的给定名称的数据存储的值(获取标签元素或数组集合中第一个标签元素所存储键对应的值)

  • .removeData(key)：移除存放在元素上的数据，不加key参数表示移除所有保存的数据(指定key时删除对应的键值对，不指定key时清空所有存储的数据)

  • .data()：获取标签元素添加的所有的存储数据

  • 示例：

<!DOCTYPE html>
<html lang="zh-CN">
    <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>day57</title>
    </head>
    <body>
        <div class="c1"></div>
        <div class="c1"></div>
        <script src="./jquery-3.2.1.min.js"></script>
    </body>
</html>

$(".c1").data();
// {}
//
$(".c1").data('name','yy');
$(".c1").data();
// {name: "yy"}
//
$(".c1").data({"sex":"girl","age":18});
$(".c1").data();
// {name: "yy", sex: "girl", age: 18}
//
$(".c1").data("sex");
// "girl"
//
$(".c1").removeData("age");
$(".c1").data();
// {name: "yy", sex: "girl"}
//
$(".c1").removeData();
$(".c1").data();
// {}

2. jQuery插件

  • 自定义jQuery插件：$.extend({funcName1:function(){...},funcName2:function(){...}})

  • 自定义jQuery对象插件：$.fn.extend({funcName1:function(){...},funcName2:function(){...}})

  • 把插件单独写在文件中：使用自执行函数，防止不同插件之间的函数名冲突

posted @ 2018-01-05 20:07  _岩哥  阅读(124)  评论(0)    收藏  举报