jquery中filter(fn)的使用研究

jquery中filter(fn)给出的官方说明是：

筛选出与指定函数返回值匹配的元素集合

这个函数内部将对每个对象计算一次 (正如 ‘$.each‘). 如果调用的函数返回false则这个元素被删除，否则就会保留。

这个说明没有问题，可是给出的例子却有问题。例子是

HTML 代码:

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

jQuery 代码:

$("p").filter(function(index) {   return $("ol", this).length == 0; });

结果:

[ <p>How are you?</p> ]

可是大家在试的时候会发现，<p>中是不让放<ol>的，在一些浏览器会报错。

我在自己的一个程序中，用到了filter(fn)这个方法。我就把我使用的例子放出来。

我要做的功能其实很简单，就是要把一个页面中所有的<div>内容显示出来。这里面有些<div>的内容是动态加载的。

[c-sharp] view plaincopy

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqeryClick.aspx.cs" Inherits="AJAXEnabledWebApplication1.JqeryClick" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5. <title>无标题页</title>
  6. <mce:script src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js" type="text/javascript"></mce:script>
  7. <mce:script type="text/javascript"><!--
  8. $(function(){
  9. $("#btn").click(function(){
  10. //在ViewDiv中显示二种下拉列表当前被选中的内容。显示出来的是value值。
  11. $("#ViewDiv").html($("#ddlSel").val() + "-----" + $("#Select1").val());
  12. //这里有一点我要说明的事，我使用的.aspx文件，这种文件会在<form>内自己生成自己的几个<div>，它不是我要取的
  13. //所以在这里我加了一个大的div来取我们所要的。
  14. //这里用filter(fn)来过滤掉里面包含ol的项
  15. $("#all").children("div").filter(function(index) {
  16. return $("ol", this).size() == 0;
  17. }).each(function(index){
  18. //这里显示出这些div的内容。请注意，在这里我们用
  19. //$("div",this).html()这种方法
  20. alert($("#"+this.id+"").html());
  21. });
  22. })
  23. })
  24. // --></mce:script>
  25. </head>
  26. <body>
  27. <form id="form1" runat="server">
  28. <div id="all">
  29. <div id="one">
  30. <asp:DropDownList ID="ddlSel" runat="server">
  31. <asp:ListItem Value="1">第一项</asp:ListItem>
  32. <asp:ListItem Value="2">第二项</asp:ListItem>
  33. </asp:DropDownList>
  34. <select id="Select1">
  35. <option value="3">第三项</option>
  36. <option value="4">第四项</option>
  37. </select>
  38. <input id="btn" type="button" value="显示信息" /></div>
  39. <div id="ViewDiv"></div>
  40. <div id="2"><ol><li>Hello</li></ol></div><div id="1">How are you?</div>
  41. </div>
  42. </form>
  43. </body>
  44. </html>
时间： 2024-10-27 11:17:47

jquery中filter(fn)的使用研究的相关文章

Jquery中$与$.fn的差别

当今web开发往往离不开Jquery的使用,Jquery以其简洁的使用方式.良好的浏览器兼容性赢得了软件研发同行的青睐,作为当中的一员,自然也不例外,虽然刚開始时非常排斥Jquery,今天我谈一下对Jquery中$与$.fn的认识和理解,不正确地方深望指正: 1.什么是$? 答:jquery的还有一种表现形式: 2.看以下的样例: 样例01: <html> <head> <meta http-equiv="Content-Type" content=&qu

Jquery中$与$.fn的区别

Jquery中$与$.fn的区别 当今web开发往往离不开Jquery的使用,Jquery以其简洁的使用方式.良好的浏览器兼容性赢得了软件研发同行的青睐,作为其中的一员,自然也不例外,尽管刚开始时很排斥Jquery,今天我谈一下对Jquery中$与$.fn的认识和理解,不对地方深望指正: 1.什么是$? 答:jquery的另一种表现形式: 2.看下面的例子: 例子01: 1 <html> 2 <head> 3 <meta http-equiv="Content-Ty

jquery中filter的用法

一.filter的参数类型可分为两种 1.传递选择器 $('a').filter('.external') 2.传递过滤函数 $('a').filter(function(index) {        return $(this).hasClass('external');    }) 二.Jquery中find与filter区别 1.find()会在div元素内 寻找 class为classname的元素.2.filter()则是筛选div的class为classname的元素.3.基本是f

jQuery中filter(),not(),split()的用法

filter(),not(): <script type="text/javascript"> $(document).ready(function() { //输出 hello alert($("p").filter(".selected").html()); //输出 How are you? alert($("p").not(".selected").html()); }); </s

jquery中的 $.fn $.fx

$.fn是指 jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 常使用extend方法扩展,详细请看API. $.fx是指 jquery的特效. 如果使用显示.滑动.淡入淡出.动画等.$.fx.off可以关闭动画,其实是直接显示结果.jquery的extend和fn.extendjQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object);

jQuery中的$.fn.data数据缓存

$.fn.data.$.fn.attr.$.fn.prop区别 $.fn.data.$.fn.attr.$.fn.prop的使用方法都差不多,但是他们的用法不一样. 1 <script src="jQuery.js"></script> 2 <div id="div"></div> 3 <script> 4 $(function(){ 5 var $div = $('#div'), 6 oDiv = doc

jquery中filter、find、children、contents、contains区别

虽然大多数前端都用jquery,可是对jquery这几个选择器在使用上的异同,大家应该平时不会太在意,或者也是一知半解吧! 下面简单总结了下: 1.filter: .filter( selector ) .filter( function(index) ) .filter( element ) .filter( jQuery object ) 和find区别是,find是对它的子集的操作,而filter是对自身集合元素的操作 2.find: .find( selector ) .find( jQ

jQuery中$.fn的用法

原文:http://www.jb51.net/article/42816.htm $.fn是指jquery的命名空间,$.fn=$.prototype. 1.$.fn.extend 为jquery添加静态方法,与$.support,$.each类似 $.extend({ add:function(a,b){returna+b;} }); function nPlugin(){ } $.extend(nPlugin.prototype,{ add:function(a,b){returna+b;}

JQuery中的事件委托机制：delegate和undelegate

考虑下面这种场景:如果1个div下面有3个button,点击每个按钮的时候,需要打印出当前按钮的ID. <div id="parent"> <input type="button" id="a" value="1"></input> <input type="button" id="b" value="2"></i