Day 11/20/2017 前端基础之jQuery(四)
data()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
向被选元素附加数据,或者从被选元素获取数据 从被选元素中返回附加的数据。 $(selector).data(name) name--规定要取回的数据的名称,如果没有规定名称,则该方法将以对象的形式从元素中返回所有存储的数据。 向被选元素附加数据。 $(selector).data(name,value) name 必需。规定要设置的数据的名称。 value 必需。规定要设置的数据的值。 使用带有名称/值对的对象向被选元素添加数据。 $(selector).data(object) object 必需。规定包含名称/值对的对象。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ $("div").data("greeting", "Hello World"); }); $("#btn2").click(function(){ alert($("div").data("greeting")); }); }); </script> </head> <body> <button id="btn1">把数据添加到 div 元素</button><br /> <button id="btn2">获取已添加到 div 元素的数据</button> <div></div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ testObj=new Object(); testObj.greetingMorn="Good Morning!"; testObj.greetingEve="Good Evening!"; $("#btn1").click(function(){ $("div").data(testObj); }); $("#btn2").click(function(){ alert($("div").data("greetingEve")); }); }); </script> </head> <body> <button id="btn1">把数据添加到 div 元素</button><br /> <button id="btn2">获取已添加到 div 元素的数据</button> <div></div> </body> </html>
removeData()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
删除之前通过 data() 方法设置的数据
$(selector).removeData(name)
name
可选。规定要删除的数据的名称。
如果没有规定名称,该方法将从被选元素中删除所有已存储的数据。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ $("div").data("greeting", "Hello World"); alert("Greeting is: " + $("div").data("greeting")); }); $("#btn2").click(function(){ $("div").removeData("greeting"); alert("Greeting is: " + $("div").data("greeting")); }); }); </script> </head> <body> <button id="btn1">向 div 元素添加数据</button><br /> <button id="btn2">从 div 元素删除数据</button> <div></div> </body> </html>
each()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
为每个匹配元素规定运行的函数。 提示:return false 可用于及早停止循环。 ex1: $(selector).each(function(index,element)) function(index,element) 必需。为每个匹配元素规定运行的函数。 index - 选择器的 index 位置 element - 当前的元素(也可使用 "this" 选择器) ex2: $.each($(selector),function(index,element))
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); }); </script> </head> <body> <button>输出每个列表项的值</button> <ul> <li>Coffee</li> <li>Milk</li> <li>Soda</li> </ul> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <script src="jquery-3.2.1.min.js"></script> </head> <body> <ul> <li id="1">111</li> <li id="2">222</li> <li id="3">333</li> <li id="4">444</li> </ul> <script> $("li").each(function () { if(this.innerText==="222"){ console.log("跳过一个文本为222的li标签"); return } else { console.log(this); } }) </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <script src="jquery-3.2.1.min.js"></script> </head> <body> <ul> <li id="1">111</li> <li id="2">222</li> <li id="3">333</li> <li id="4">444</li> </ul> <script> $("li").each(function () { if(this.innerText==="222"){ console.log("遇到一个文本为222的标签就退出循环"); return false } else { console.log(this); } }) </script> </body> </html>