jquery中find查找

来源：互联网发布：淘宝衣神编辑：程序博客网时间：2024/09/21 09:24

find(expr)
　　搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
　　所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

案例：查找P标记下的span

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script language="javascript" type="text/javascript" src="../jquery-1.6.js"></script><script language="javascript" type="text/javascript">//使用jquery加载事件$(document).ready(function (){$("#btn0").click(function (){//alert($("#d2").children().length);$("p").find("span").css("background","red");});});</script></head><body> <p> aaaaaaaaaaaaaaaaa<span>p-span</span><span>p-span2</span></p><p>bbbbbbbbbbbbbbbbbbbbb<span>p2-span</span><span>p2-span2</span></p> </div><input id="btn0" type="button"    value="使用find方法查找所有的段落标记中的span 并且设置背景颜色为红色"></body></html>

效果图如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script language="javascript" type="text/javascript" src="../jquery-1.6.js"></script><script language="javascript" type="text/javascript">//使用jquery加载事件$(document).ready(function (){  $("span").click(function (){$(this).next().toggle("slow");});//初始化是隐藏状态  $(".menu").each(function (index,domEle){    $(domEle).toggle("1000");      });});</script></head><body><div>  <span>数码产品</span>  <div class="menu">  <a href="#">照相机</a>  <a href="#">照相机</a>  <a href="#">照相机</a>  <a href="#">照相机</a>      </div>    <span>家用电器</span>  <div class="menu">  <a href="#">手电筒</a>  <a href="#">手电筒2</a>  <a href="#">手电筒3</a>  <a href="#">手电筒4</a>      </div>     <span>衣帽服装</span>  <div class="menu">  <a href="#">大衣</a>  <a href="#">大衣2</a>  <a href="#">大衣3</a>  <a href="#">大衣4</a>      </div>  </div></body></html>

效果图如下