诶,和上一章一样呢!
并不是哦~
这是一个补充的部分,我不知道怎么去归类,但是确实用得到。就放在这里说一下吧。
是我们对 js 的了解,也渐渐发现了数据的重要性。而数据一旦复杂起来,我们就需要对它们进行归纳和整理,最常见的就是数组和对象。但是数组呢,就是一种特殊的对象,可以看做属性名是一系列数字的对象。而我们用的非常多的函数,也是一种特殊的对象……啊,不由得感叹,一切皆对象。所以我们会说面向对象编程。
这是顺路给大家浅显的解释一下什么是面向对象编程,不理解也没有关系,随着代码写的越来越多,自然会从心底对它有一个深刻的认识。
如果只是编程,我们当然要按照编程的思路循规蹈矩。但是在写网页的时候,有一些小操作,会让我们觉得仿佛跳出了这些条条框框,虽然本质上依然遵循着那些规则,但因为我们是小白啊,只能看到最表面的现象啊,反倒会觉得很神奇很有趣。
比如现在我有一个数据,需要临时的储存一下,对,我可以设置一个变量。或者呢?我也可以把它当做一个内容,放置到某个网页元素之中,在需要的时候再把它读取出来。这种做法的性能很低,但也要看你在什么时候去使用它。如果数据不多,而恰巧我们又被数组和对象搞得凌乱,这种方法不失为一种取巧的选择。
有时候我们需要给某个元素,设置一个特定的数据,并不是用来显示,也不是常规的属性。就是我们程序中要用到,但这个数据又仅仅针对于这一个元素。我们当然可以设置一个变量,然后暗暗的记住这个变量和某个元素是对应的。或者设置一个对象,来写清楚这种对应的关系……但无论怎样,面对庞大的页面元素数量的时候,这些方法都不够直观。倒不如我们把数据直接写在对应的元素里面。
对于元素,数据当然只能放在属性里面,而为了与普通的属性区分,这些用来储存数据的属性统一加上 data-
前缀。也因为这只是页面元素的属性,所以这些数据只能储存字符串(想想 JSON)。而且不建议储存过于大量的数据。
我们使用操作元素属性的方法,就可以进行这些设置,不过,jQuery 也提供了专用的方法:
$( "#miao" ).data( "key", 123 );
这将为 #miao
这个元素增加一个属性 data-key=123
。这很容易理解,也很容易学会使用。如果后面小括号中只给一个参数,则是用来获取对应属性的值;如果完全不给参数,则是获取这个元素中所有的数据属性,以一个对象的形式返回。
我们可以使用 removeData
方法删除元素的数据:
$( "#miao" ).removeData("key");
如果后面小括号中不给参数,则是删除其中所有的数据。
当然我们也可以在书写 HTML 的时候就给出某些数据属性,像这样:
<a href="https://dmnydn.com/" data-tip="小老鼠希望你们能喜欢他写的东西呀~">代码能有多难?</a>
最后还有一个点需要注意,通过 data
方法添加的数据,在我们检查元素时并不能够从元素的 html 代码中看到。但它确实是存在的,也可以被重新读取出来。
暂无评论内容