Jquery中的has、find、filter方法区别

find方法

find返回的是匹配结果集,作用于后代$(‘li’).find(‘.a’).css(‘background-color’, ‘red’);在li下面查找元素是否有class=a的元素,返回class=a的元素的集合。比如如下例子:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
  <p><span>Hello</span>, how are you?</p>
  <p>Me? I'm <span>good</span>.</p>
<script>
  $("p").find("span").css('color','red');
</script>
</body>
</html>

Hello, how are you?
Me? I’m good.
find方法返回的结果集是后面的结果集。即结果集。

has方法

has返回的是赛选结果集,作用于后代 has判断是否有,如果有则选中
$(‘li’).has(‘span’).css(‘background-color’, ‘red’);在li下面查找元素是否有has下面的元素,如果有,则返回赛选的集合。即返回所有满足条件的li(li下面有span的li),例子:

<!DOCTYPE html>
<html>
<head>
  <style>
    .full { border: 1px solid red; }
  </style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul><li>Does the UL contain an LI?</li></ul>
<script>
  $("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>");
  $("ul").has("li").addClass("full");
</script>
</body>
</html>

这里写图片描述
上面的效果就是查找ul下面是否有li,如果li则在赛选的ul中append一个li
标签。

filter方法

$('li'). filter('.a').css('background-color' , 'red');
不同的是filter()方法,条件作用于自身;has()方法条件是作用于它的后代元素中。
has和filter的作用范围不同而已,$("li").has(".topLine"), $("li").filter(".topLine");相同的是has返回的是后代满足class=topLine的自身li对象,filter则返回的是自身li 为class=topLine的元素。

filter对自身的过滤。相当于$(‘li.a’)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值