标签:article button 连接 head style min 作用 class line
近期在我们的hybrid app项目开发中定位出了一个问题。通过这个问题了解下JQuery选择器find()和children()的差别。问题是这种:我们的混合app是一个单页面应用(main.html),逻辑上的页面是通过项目自己定义的.mspl文件(事实上就是html文件)来呈现的。
比方a.mspl、b.mspl、c.mspl载入的时候,都会插入到main.html中。可是每次仅仅显示1个mspl文件,当b.mspl显示的时候,a.mspl和c.mspl就会被隐藏。在a、b、c这3 个页面上都会显示当前手机网络是否可用。
当用户打开或者关闭手机网络的时候。会通过android广播调用webview里面的方法,刷新a、b、c这3个页面上显示的网络状态。
main.html结构例如以下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery-1.11.1.min.js"></script> </head> <body> <div page="a.mspl"> <div spl-id="net_status"> <span>a</span> <span>1</span> </div> </div> <div page="b.mspl"> <div spl-id="net_status"> <span>b</span> <span>2</span> </div> </div> <div page="c.mspl"> <div spl-id="net_status"> <span>c</span> <span>3</span> </div> </div> </body> </html>
当网络状态发生变化的时候,android会通过webview调用以下的JS方法,刷新页面显示的网络状态:
//online offline function refreshNetworkStatus(status) { // 选中每个mspl下网络状态显示栏 var selector = $("div[spl-id=‘net_status‘]"); // 网络状态显示栏以下有2个span,第一个是用来显示网络状态的 $(selector).children("span:eq(0)").text(offlineTip); }问题是:当我们打开或者关闭网络连接,a.mspl可以正确显示网络状态,可是b.mspl和c.mspl中的网络状态显示栏不能刷新。
项目模拟代码例如以下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("button").click(function(){ var selector = $("div[spl-id=‘net_status‘]"); var text = $(this).text(); //刷新网络状态显示 $(selector).children("span:eq(0)").text(text); }); }); </script> </head> <body> <div page="a.mspl"> <div spl-id="net_status"> <span>a</span> <span>1</span> </div> <button>online</button> <button>offline</button> </div> <div page="b.mspl"> <div spl-id="net_status"> <span>b</span> <span>2</span> </div> <button>online</button> <button>offline</button> </div> <div page="c.mspl"> <div spl-id="net_status"> <span>c</span> <span>3</span> </div> <button>online</button> <button>offline</button> </div> </body> </html>能够看到我们点击online或者offline按钮。仅仅有a.mspl下的网络状态显示栏能正常。假设不使用children(),而是使用find()就能够满足要求了。当点击online或者offline按钮时候,3个页面的网络状态显示都是正常的。
$(selector).find("span:eq(0)").text(text);
children()和find()的区别在于:
1.children方法获得的不过元素一下级的子元素,即:immediate children
2.find方法获得全部下级元素,即:all descendants
3.children方法的參数selector是可选的。用来过滤子元素;但find方法的參数selector方法是必选的。
$(selector).children("span:eq(0)")的作用相当于$(selector).children().eq(0)
1.获取selector下的全部直接span,即结果是<span>a</span>。<span>1</span>,<span>b</span>,<span>2</span>,<span>c</span>。<span>3</span>
2.eq(0)选中的是第一个元素。所以改变的是<span>a</span>
$(selector).find("span:eq(0)").text(id); 的作用相当于 $(selector).each(function(){ $(this).children("span:eq(0)").text(id); });1.对于selector选中的每个元素,都再用"span:eq(0)"筛选一次。即结果是<span>a</span>。<span>b</span>,<span>c</span>
更直观的样例,能够參考这篇文章“jQuery笔记-jQuery筛选器children()具体解释”。
一个样例看清楚JQuery子元素选择器children()和find()的差别
标签:article button 连接 head style min 作用 class line
原文地址:http://www.cnblogs.com/llguanli/p/6918910.html