JQuery基本修炼-款式篇

2019年8月30日 189次阅读 来源: Sonnet

jQuery对象转化成DOM对象

    jQuery库实质上照样JavaScript代码，它只是对JavaScript言语举行包装处置惩罚，为了是供应更好更轻易快速的DOM处置惩罚与开辟罕见中经常运用的功用。我们能够用jQuery的同时也能夹杂JavaScript原生代码一同运用。经由过程jQuery天生的对象是一个做了包装处置惩罚的对象，如果要用jQuery对象自身的要领，就须要满足这个对象是经由过程jQuery天生的。 在许多场景中，我们须要jQuery与DOM能够互相的转换，它们都是操纵的DOM元素，jQuery是一个类数组对象，DOM对象就是一个零丁的DOM元素。

怎样把jQuery对象转成DOM对象？

应用数组下标的体式格局读取到jQuery中的DOM对象

HTML代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操纵dom对象的属性

用jQuery找到一切的div元素（3个），由于jQuery 对象也是一个数组构造，能够经由过程数组下标索引找到第一个div元素，经由过程返回的div对象然后挪用它style属性然修正第一个div元素的色彩。这里须要注重的一点是，数组的索引是从0最先的，也就是第一个元素下标是0

经由过程jQuery自带的get()要领

jQuery对象自身供应一个.get() 要领许可我们直接接见jQuery对象中相干的DOM节点，get要领中供应一个元素的索引：

var $div = $('div') //jQuery对象
var div = $div.get(0) //经由过程get要领，转化成DOM对象
div.style.color = 'red' //操纵dom对象的属性

实在我们掀开源码，看看就晓得了，get要领就是应用的第一种体式格局处置惩罚的，只是包装成一个get让开辟者更直接轻易的运用。

DOM对象转化成jQuery对象

相比较jQuery转化成DOM，开辟中更多的状况是把一个dom对象加工成jQuery对象。$(参数)是一个多功用的要领，经由过程通报差别的参数而发生差别的作用。

如果通报给$(DOM)函数的参数是一个DOM对象，jQuery要领会把这个DOM对象给包装成一个新的jQuery对象

经由过程$(dom)要领将平常的dom对象加工成jQuery对象以后，我们就能够挪用jQuery的要领了

HTML代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置色彩

经由过程getElementsByTagName猎取到一切div节点的元素，结果是一个dom合集对象，不过这个对象是一个数组合集(3个div元素)。经由过程$(div)要领转化成jQuery对象，经由过程挪用jQuery对象中的first与css要领查找第一个元素而且转变其色彩。

抛开jQuery，如果要猎取文档中一切的元素，经由过程document.getElementsByTagName()中通报”*”一样能够猎取到

不难发明，id、class、tag都能够经由过程原生的要领猎取到对应的节点，然则我们还须要斟酌一个兼容性的题目，我这里趁便说起一下，比方:

  1. IE会将解释节点完成为元素，所以在IE中挪用getElementsByTagName内里会包含解释节点，这个通常是不应该的

  2. getElementById的参数在IE8及较低的版本不辨别大小写

  3. IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名而且A在B之前，那末getElementById会选中A

  4. IE8及较低的版本，浏览器不支撑getElementsByClassName

看到了吧，作为一位及格的前端不是那末简朴的，就一个基础的挑选器上面都须要做这么多兼容，幸好有jQuery的涌现，让我们省了许多工夫.

Q&A

  1. id是唯一的，每一个id值在一个页面中只能运用一次。如果多个元素分配了雷同的id，将只婚配该id挑选鸠合的第一个DOM元素

  2. $( “parent > child” ) 子挑选器：挑选一切指定“parent”元素中指定的”child”的直接子元素。 $(“ancestor descendant”) 子女挑选器：挑选给定的先人元素的一切子女元素, 一个元素的子女多是该元素的一个孩子，孙子，曾孙等 $(“prev + next”) 相邻兄弟挑选器：挑选一切紧接在“prev”元素后的“next”元素 $(“prev ~ siblings”) 平常兄弟挑选器：婚配“prev”元素以后的一切 兄弟元素。具有雷同的父元素，并婚配过滤“siblings”挑选器 $( “parent > child” ) 子挑选器：挑选一切指定“parent”元素中指定的”child”的直接子元素。 $(“ancestor descendant”) 子女挑选器：挑选给定的先人元素的一切子女元素, 一个元素的子女多是该元素的一个孩子，孙子，曾孙等 $(“prev + next”) 相邻兄弟挑选器：挑选一切紧接在“prev”元素后的“next”元素 $(“prev ~ siblings”) 平常兄弟挑选器：婚配“prev”元素以后的一切 兄弟元素。具有雷同的父元素，并婚配过滤“siblings”挑选器 

基础挑选挑选器

许多时刻我们不能直接经由过程基础挑选器与层级挑选器找到我们想要的元素，为此jQuery供应了一系列的挑选挑选器用来更快速的找到所需的DOM元素。挑选挑选器许多都不是CSS的范例，而是jQuery自身为了开辟者的方便延展出来的挑选器

挑选挑选器的用法与CSS中的伪元素相似，挑选器用冒号“：”开首，经由过程一个列表，看看基础挑选器的形貌：

《JQuery基本修炼-款式篇》

注重事项：

  1. :eq(), :lt(), :gt(), :even, :odd 用来挑选他们前面的婚配表达式的鸠合元素，依据之前婚配的元素在进一步挑选，注重jQuery合集都是从0最先索引

  2. gt是一个段落挑选，从指定索引的下一个最先，gt(1) 现实从2最先

内容挑选挑选器

基础挑选挑选器针对的都是元素DOM节点，如果我们要经由过程内容来过滤，jQuery也供应了一组内容挑选挑选器，固然其划定规矩也会体现在它所包含的子元素或许文本内容上

内容过滤器形貌以下表：

《JQuery基本修炼-款式篇》

注重事项：

  1. :contains与:has都有查找的意义，然则contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

  2. 如果:contains婚配的文本包含在元素的子元素中，一样认为是相符前提的。

  3. :parent与:empty是相反的，二者所触及的子元素，包含文本节点

可见性挑选挑选器

元素有显现状况与隐蔽状况，jQuery依据元素的状况扩大了可见性挑选挑选器:visible与:hidden

形貌以下：

《JQuery基本修炼-款式篇》

这2个挑选器都是 jQuery 延长出来的，看起来比较简朴，然则元素可见性依赖于有用的款式

:hidden挑选器，不单单议包含款式是display="none"的元素，还包含隐蔽表单、visibility等等

我们有几种体式格局能够隐蔽一个元素：

  1. CSS display的值是none。

  2. type=”hidden”的表单元素。

  3. 宽度和高度都显式设置为0。

  4. 一个先人元素是隐蔽的，该元素是不会在页面上显现

  5. CSS visibility的值是hidden

  6. CSS opacity的指是0

如果元素中占有文档中肯定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，由于他们依然占用空间规划。

不在文档中的元素是被认为是不可见的，如果当他们被插进去到文档中，jQuery没有办法晓得他们是不是是可见的，由于元素可见性依赖于有用的款式

属性挑选挑选器

属性挑选器让你能够基于属性来定位一个元素。能够只指定该元素的某个属性，如许一切运用该属性而不管它的值，这个元素都将被定位，也能够越发明白并定位在这些属性上运用特定值的元素，这就是属性挑选器展现它们的威力的处所。

形貌以下：

《JQuery基本修炼-款式篇》

浏览器支撑：

  • [att=val]、[att]、[att|=val]、[att~=val]  属于CSS 2.1范例

  • [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3范例

  • [name!=”value”]  属于jQuery 扩大的挑选器

CSS挑选器不管CSS2.1版本照样CSS3版本，IE7和IE8都支撑，webkit、Gecko中心及Opera也都支撑，只需IE6以下浏览器才不支撑

在这么多属性挑选器中[attr=”value”]和[attr*=”value”]是最有用的

[attr="value"]能帮我们定位差别范例的元素，迥殊是表单form元素的操纵，比方说input[type="text"],input[type="checkbox"]等
[attr*="value"]能在网站中协助我们婚配差别范例的文件

子元素挑选挑选器

子元素挑选挑选器不常运用，其挑选划定规矩比起别的的挑选器轻微要复杂点

子元素挑选挑选器形貌表：

《JQuery基本修炼-款式篇》

注重事项：

  1. :first只婚配一个零丁的元素，然则:first-child挑选器能够婚配多个：即为每一个父级元素婚配第一个子元素。这相当于:nth-child(1)

  2. :last 只婚配一个零丁的元素， :last-child 挑选器能够婚配多个元素：即，为每一个父级元素婚配末了一个子元素

  3. 如果子元素只需一个的话，:first-child与:last-child是一致个

  4.  :only-child婚配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则婚配

  5. jQuery完成:nth-child(n)是严厉来自CSS范例，所以n值是“索引”，也就是说，从1最先计数，:nth-child(index)从1最先的，而eq(index)是从0最先的

  6. nth-child(n) 与 :nth-last-child(n) 的区分前者是夙昔今后盘算，后者从后往前盘算

表单元素挑选器

不管是提交照样通报数据，表单元素在动态交互页面的作用是异常主要的。jQuery中特地加入了表单挑选器，从而能够极为轻易地猎取到某个范例的表单元素

表单挑选器的详细要领形貌：

《JQuery基本修炼-款式篇》

注重事项：

除了input挑选挑选器，险些每一个表单种别挑选器都对应一个input元素的type值。大部份表单种别挑选器能够运用属性挑选器替代。比方 $(‘:password’) == $(‘[type=password]’)

表单对象属性挑选挑选器

除了表单元素挑选器外，表单对象属性挑选挑选器也是特地针对表单元素的挑选器，能够附加在其他挑选器的背面，主要功用是对所挑选的表单元素举行挑选

表单挑选挑选器的形貌：

《JQuery基本修炼-款式篇》

注重事项：

  1. 挑选器有用于复选框和单选框，关于下拉框元素, 运用 :selected 挑选器

  2. 在某些浏览器中，挑选器:checked可能会毛病拔取到<option>元素，所以保险起见换用挑选器input:checked，确保只会拔取<input>元素

迥殊挑选器this

置信许多刚打仗jQuery的人，许多都会对$(this)和this的区分模糊不清，那末这二者有什么区分呢？

this是JavaScript中的关键字，指的是当前的上下文对象，简朴的说就是要领/属性的一切者

下面例子中，imooc是一个对象，具有name属性与getName要领,在getName中this指向了所属的对象imooc

var imooc = {
    name:"慕课网",
    getName:function(){
        //this,就是imooc对象
        return this.name;
    }
}
imooc.getName(); //慕课网

固然在JavaScript中this是动态的，也就是说这个上下文对象都是能够被动态转变的(能够经由过程call,apply等要领)，详细的人人能够查阅相干材料

一样的在DOM中this就是指向了这个html元素对象，由于this就是DOM元素自身的一个援用

如果给页面一个P元素绑定一个事宜:

p.addEventListener('click',function(){
    //this === p
    //以下二者的修正都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);

经由过程addEventListener绑定的事宜回调中，this指向的是当前的dom对象，所以再次修正如许对象的款式，只须要经由过程this猎取到援用即可

 this.style.color = "red"

然则如许的操纵实在照样很不轻易的，这内里就要触及一大堆的款式兼容，如果经由过程jQuery处置惩罚就会简朴多了，我们只须要把this加工成jQuery对象

换成jQuery的做法：

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

经由过程把$()要领传入当前的元素对象的援用this，把这个this加工成jQuery对象，我们就能够用jQuery供应的快速要领直接处置惩罚款式了

整体：

this，示意当前的上下文对象是一个html对象，能够挪用html对象所具有的属性和要领。
$(this),代表的上下文对象是一个jquery的上下文对象，能够挪用jQuery的要领和属性值。

.attr()与.removeAttr()

每一个元素都有一个或许多个特征，这些特征的用处就是给出相应元素或许其内容的附加信息。如：在img元素中，src就是元素的特征，用来标记图片的地点。

操纵特征的DOM要领主要有3个，getAttribute要领、setAttribute要领和removeAttribute要领，就算云云在现实操纵中照样会存在许多题目，这里先不说。而在jQuery顶用一个attr()与removeAttr()就能够悉数搞定了，包含兼容题目

jQuery顶用attr()要领来猎取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操纵中会常经常使用到attr()

attr()有4个表达式

  1. attr(传入属性名)：猎取属性的值

  2. attr(属性名, 属性值)：设置属性的值

  3. attr(属性名,函数值)：设置属性的函数值

  4. attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

removeAttr()删除要领

.removeAttr( attributeName ) : 为婚配的元素鸠合中的每一个元素中移除一个属性（attribute）

长处：

attr、removeAttr都是jQuery为了属性操纵封装的，直接在一个 jQuery 对象上挪用该要领，很轻易对属性举行操纵，也不须要去特地的明白浏览器的属性名差别的题目

注重的题目：

dom中有个观点的辨别：Attribute和Property翻译出来都是“属性”，《js高等程序设计》书中翻译为“特征”和“属性”。简朴明白，Attribute就是dom节点自带的属性

比方：html中经常使用的id、class、title、align等：

<div id="immooc" title="慕课网"></div>

而Property是这个DOM元素作为对象，其附加的内容，比方,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 运用.prop()要领举行取值或赋值等

猎取Attribute就须要用attr，猎取Property就须要用prop

html()及.text()

读取、修正元素的html构造或许元素的文本内容是罕见的DOM操纵，jQuery针对如许的处置惩罚供应了2个便利的要领.html()与.text()

.html()要领 

猎取鸠合中第一个婚配元素的HTML内容 或 设置每一个婚配元素的html内容，详细有3种用法：

  1. .html() 不传入值，就是猎取鸠合中第一个婚配元素的HTML内容

  2. .html( htmlString )  设置每一个婚配元素的html内容

  3. .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

注重事项：

.htm()要领内部运用的是DOM的innerHTML属性来处置惩罚的，所以在设置与猎取上须要注重的一个最主要的题目，这个操纵是针对全部HTML内容（不单单议只是文本内容）

.text()要领

获得婚配元素鸠合中每一个元素的文本内容连系，包含他们的子女，或设置婚配元素鸠合中每一个元素的文本内容为指定的文本内容。，详细有3种用法：

  1. .text() 获得婚配元素鸠合中每一个元素的兼并文本，包含他们的子女

  2. .text( textString ) 用于设置婚配元素内容的文本

  3. .text( function(index, text) ) 用来返回设置文本内容的一个函数

注重事项：

.text()结果返回一个字符串，包含一切婚配元素的兼并文本

.html与.text的异同:

  1. .html与.text的要领操纵是一样，只是在详细针对处置惩罚对象差别

  2. .html处置惩罚的是元素内容，.text处置惩罚的是文本内容

  3. .html只能运用在HTML文档中，.text 在XML 和 HTML 文档中都能运用

  4. 如果处置惩罚的对象只需一个子文本节点，那末html处置惩罚的结果与text是一样的

  5. 火狐不支撑innerText属性，用了相似的textContent属性，.text()要领综合了2个属性的支撑，所以能够兼容一切浏览器

.val()

jQuery中有一个.val()要领主如果用于处置惩罚表单元素的值，比方 input, select 和 textarea。

.val()要领

  1. .val()无参数，猎取婚配的元素鸠合中第一个元素的当前值

  2. .val( value )，设置婚配的元素鸠合中每一个元素的值

  3. .val( function ) ，一个用来返回设置值的函数

 注重事项：

  1. 经由过程.val()处置惩罚select元素， 当没有挑选项被选中，它返回null

  2. .val()要领多用来设置表单的字段的值

  3. 如果select元素有multiple（多选）属性，而且最少一个挑选项被选中， .val()要领返回一个数组，这个数组包含每一个选中挑选项的值

 

.html(),.text()和.val()的差别总结：  

  1. .html(),.text(),.val()三种要领都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包含html标签），.text()用来读取元素的纯文本内容，包含其子女元素，.val()是用来读取表单元素的”value”值。个中.html()和.text()要领不能运用在表单元素上,而.val()只能运用在表单元素上；别的.html()要领运用在多个元素上时，只读取第一个元素；.val()要领和.html()雷同，如果其应用在多个元素上时，只能读取第一个表单元素的”value”值，然则.text()和他们不一样，如果.text()应用在多个元素上时，将会读取一切选中元素的文本内容。

  2. .html(htmlString),.text(textString)和.val(value)三种要领都是用来替代选中元素的内容，如果三个要领同时运用在多个元素上时，那末将会替代一切选中元素的内容。

  3. .html(),.text(),.val()都能够运用回调函数的返回值来动态的转变多个元素的内容。

增添款式.addClass()

经由过程动态转变类名（class），能够让其修正元素呈现出差别的结果。在HTML构造中里，多个class以空格分开，当一个节点（或称为一个标签）含有多个class时，DOM元素相应的className属性猎取的不是class称号的数组，而是一个含有空格的字符串，这就使很多class操纵变得很贫苦。一样的jQuery开辟者也斟酌到这类状况，增添了一个.addClass()要领，用于动态增添class类名

.addClass( className )要领

  1. .addClass( className ) : 为每一个婚配元素所要增添的一个或多个款式名

  2. .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格离隔的要增添的款式名

注重事项：

.addClass()要领不会替代一个款式类名。它只是简朴的增加一个款式类名到元素上

简朴的形貌下：在p元素增添一个newClass的款式

<p class="orgClass">
$("p").addClass("newClass")

那末p元素的class现实上是 class=”orgClass newClass”款式只会在底本的类上继承增添，经由过程空格分开

删除款式.removeClass()

jQuery经由过程.addClass()要领能够很便利的增添款式。如果须要款式之间的切换，一样jQuery供应了一个很轻易的.removeClass()，它的作用是从婚配的元素中删除悉数或许指定的class

.removeClass( )要领

  1. .removeClass( [className ] )：每一个婚配元素移除的一个或多个用空格离隔的款式名

  2. .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的款式名

注重事项

如果一个款式类名作为一个参数,只需这款式类会被从婚配的元素鸠合中删除 。 如果没有款式名作为参数，那末一切的款式类将被移除

切换款式.toggleClass()

在做某些结果的时刻，可能会针对一致节点的某一个款式不停的切换，也就是addClass与removeClass的互斥切换，比方隔行换色结果

jQuery供应一个toggleClass要领用于简化这类互斥的逻辑，经由过程toggleClass要领动态增加删除Class，一次实行相当于addClass，再次实行相当于removeClass

.toggleClass( )要领：在婚配的元素鸠合中的每一个元素上增加或删除一个或多个款式类,取决于这个款式类是不是存在或值切换属性。即：如果存在（不存在）就删除（增加）一个类

  1. .toggleClass( className )：在婚配的元素鸠合中的每一个元素上用来切换的一个或多个（用空格离隔）款式类名

  2. .toggleClass( className, switch )：一个布尔值，用于推断款式是不是应该被增加或移除

  3. .toggleClass( [switch ] )：一个用来推断款式类增加照样移除的 布尔值

  4. .toggleClass( function(index, class, switch) [, switch ] )：用来返回在婚配的元素鸠合中的每一个元素上用来切换的款式类名的一个函数。吸收元素的索引位置和元素旧的款式类作为参数

注重事项：

  1. toggleClass是一个互斥的逻辑，也就是经由过程推断对应的元素上是不是存在指定的Class名，如果有就删除，如果没有就增添

  2. toggleClass会保存原有的Class名后新增，经由过程空格离隔

款式操纵.css()

经由过程JavaScript猎取dom元素上的style属性，我们能够动态的给元素给予款式属性。在jQuery中我们要动态的修正style属性我们只需运用css()要领就能够完成了

.css() 要领：猎取元素款式属性的盘算值或许设置元素的CSS属性

猎取：

  1. .css( propertyName ) ：猎取婚配元素鸠合中的第一个元素的款式属性的盘算值

  2. .css( propertyNames )：通报一组数组，返回一个对象结果

设置：

  1.  .css(propertyName, value )：设置CSS

  2. .css( propertyName, function )：能够传入一个回调函数，返回取到对应的值举行处置惩罚

  3. .css( properties )：能够传一个对象，同时设置多个款式

注重事项：

  1. 浏览器属性猎取体式格局差别，在猎取某些值的时刻都jQuery采纳一致的处置惩罚，比方色彩采纳RBG，尺寸采纳px

  2. .css()要领支撑驼峰写法与大小写混搭的写法，内部做了容错的处置惩罚

  3. 当一个数只被作为值（value）的时刻， jQuery会将其转换为一个字符串，并添在字符串的结尾处增加px，比方 .css(“width”,50}) 与 .css(“width”,”50px”})一样

.css()与.addClass()设置款式的区分

关于款式的设置，我们学了addClass与css要领，那末二者之间有什么区分？

可保护性：

.addClass()的实质是经由过程定义个class类的款式划定规矩，给元素增加一个或多个类。css要领是经由过程JavaScript大批代码举行转变元素的款式

经由过程.addClass()我们能够批量的给雷同的元素设置一致划定规矩，更改起来比较轻易，能够一致修正删除。如果经由过程.css()要领就须要指定每一个元素是逐一的修正，往后保护也要逐一的修正，比较贫苦

天真性：

经由过程.css()体式格局能够很轻易动态的去转变一个款式的属性，不须要在去烦琐的定义个class类的划定规矩。平常来说在不肯定最先规划划定规矩，经由过程动态天生的HTML代码构造中，都是经由过程.css()要领处置惩罚的

款式值：

.addClass()实质只是针对class的类的增添删除，不能猎取到指定款式的属性的值，.css()能够猎取到指定的款式值。

款式的优先级：

css的款式是有优先级的，当外部款式、内部款式和内联款式一致款式划定规矩同时应用于一致个元素的时刻，优先级以下

外部款式 < 内部款式 < 内联款式

  1. .addClass()要领是经由过程增添class名的体式格局，那末这个款式是在外部文件或许内部款式中先定义好的，比及须要的时刻在附加到元素上

  2. 经由过程.css()要领处置惩罚的是内联款式，直接经由过程元素的style属性附加到元素上的

经由过程.css要领设置的款式属性优先级要高于.addClass要领

总结：

.addClass与.css要领各有利弊，平常是静态的构造，都肯定了规划的划定规矩，能够用addClass的要领，增添一致的类划定规矩
如果是动态的HTML构造，在不肯定划定规矩，或许经常变化的状况下，平常多斟酌.css()体式格局

元素的数据存储

html5 dataset是新的HTML5规范，许可你在平常的元素标签里嵌入相似data-*的属性，来完成一些简朴数据的存取。它的数目不受限定，而且也能由JavaScript动态修正，也支撑CSS挑选器举行款式设置。这使得data属性迥殊天真，也异常壮大。有了如许的属性我们能够越发有序直观的举行数据预设或存储。那末在不支撑HTML5规范的浏览器中，我们怎样完成数据存取?  jQuery就供应了一个.data()的要领来处置惩罚这个题目

运用jQuery初学者平常不是很体贴data体式格局，这个要领是jquery内部预用的，能够用来做机能优化，比方sizzle挑选中能够用来缓存部份结果集等等。固然这个也是异常主要的一个API了，常经常使用于我们寄存暂时的一些数据，由于它是直接跟DOM元素对象绑定在一同的

jQuery供应的存储接口

jQuery.data( element, key, value )   //静态接口,存数据
jQuery.data( element, key )  //静态接口,取数据   
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据

2个要领在运用上存取都是通一个接口，通报元素，键值数据。在jQuery的官方文档中，发起用.data()要领来替代。

我们把DOM能够看做一个对象，那末我们往对象上是能够存在基础范例，援用范例的数据的，然则这里会激发一个题目，可能会存在轮回援用的内存走漏风险

经由过程jQuery供应的数据接口，就很好的处置惩罚了这个题目了，我们不须要体贴它底层是怎样完成，只须要根据对应的data要领运用就好了

一样的也供应2个对应的删除接口，运用上与data要领现实上是一致的，只不过是一个是增添一个是删除罢了

jQuery.removeData( element [, name ] )
.removeData( [name ] )

延续关注中…

    原文作者：Sonnet
    原文地址: https://segmentfault.com/a/1190000005337602
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞