定义和用法

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.find() 方法允许我们在 DOM 树中搜索这些元素的后代，并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历单一层级。

.find() 方法第一个明显特征是，其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。

接下来写一个简单的二级菜单导航，鼠标划过展示子菜单

<div class="menu">
          <ul class="menu_ul">
              <li class="on01">
                  <h3><a href="/" target="_blank">首页</a></h3>
              </li>
              <li class="">
                  <h3><a href="/win7/" target="_blank">Win7系统</a></h3>
                  <ul class="yc">
                      <li>
                          
                           <a href='/plus/list.php?tid=15' target="_blank">其它Win7系统</a>
                          
                           | <a href='/win7/sd/' target="_blank">深度技术Win7系统</a>
                          
                           | <a href='/win7/ylmf/' target="_blank">雨林木风Win7系统</a>
                          
                           | <a href='/win7/dngs/' target="_blank">电脑公司Win7系统</a>
                          
                           | <a href='/win7/lbjy/' target="_blank">萝卜家园Win7系统</a>
                          
                           | <a href='/win7/jslm/' target="_blank">技术联盟Win7系统</a>
                          
                           | <a href='/win7/fqhy/' target="_blank">番茄花园Win7系统</a>
                          
                      </li>
                  </ul>
              </li>
              <li class="">
                  <h3><a href="/win8/" target="_blank">Win8系统</a></h3>
              </li>
              <li class="">
                  <h3><a href="/win10/" target="_blank">Win10系统</a></h3>
              </li>
              <li class="">
                  <h3><a href="/linux/" target="_blank">Linux系统</a></h3>
              </li>
              <li class="">
                  <h3><a href="/xp/" target="_blank">XP系统</a></h3>
                  <ul class="yc">
                      <li>
                          
                           <a href='/xp/dngs/' >电脑公司xp系统</a>
                          
                           | <a href='/xp/ylmf/' >雨林木风xp系统</a>
                          
                           | <a href='/xp/lbjy/' >萝卜家园xp系统</a>
                          
                           | <a href='/xp/fqhy/' >番茄花园xp系统</a>
                          
                      </li>
                  </ul>
              </li>
              <li class="">
                  <h3><a href="/soft/" target="_blank">软件下载</a></h3>
                  <ul class="yc">
                      <li>
                          
                           <a href='/soft/win7jihuo/' target="_blank">Win7激活工具</a>
                          
                           | <a href='/soft/win8jihuo/' target="_blank">Win8.1激活工具</a>
                          
                           | <a href='/soft/win10jihuo/' target="_blank">Win10激活工具</a>
                          
                           | <a href='/soft/zhuangji/' target="_blank">装机工具</a>
                          
                           | <a href='/soft/kelu/' target="_blank">刻录软件</a>
                          
                           | <a href='/soft/upan/' target="_blank">U盘工具</a>
                          
                           | <a href='/soft/buding/' target="_blank">系统补丁</a>
                          
                           | <a href='/soft/anquan/' target="_blank">系统安全</a>
                          
                           | <a href='/soft/youhua/' target="_blank">系统优化</a>
                          
                      </li>
                  </ul>
              </li>
              <li class="">
                  <h3><a href="/news/" target="_blank">系统资讯</a></h3>
              </li>
              <li class="">
                  <h3><a href="/xtjc/" target="_blank">系统教程</a></h3>
                  <ul class="yc">
                      <li>
                          
                           <a href='/xtjc/win7/' target="_blank">Win7教程</a>
                          
                           | <a href='/xtjc/win8/' target="_blank">Win8教程</a>
                          
                           | <a href='/xtjc/win10/' target="_blank">Win10教程</a>
                          
                           | <a href='/help/' target="_blank">帮助</a>
                          
                      </li>
                  </ul>
              </li>
          </ul>
</div>

代码直接随便淘的一个案例代码

接下来是js代码：

$(".menu_ul li").hover(function(){
    $(this).find("ul").removeClass("yc");
},function(){
    $(this).find("ul").addClass("yc");
});

CSS样式：

.yc {
display: none;
}

这算是一个写的比较简单的代码，我这人就喜欢简化代码，太长的代码都懒得看！

通过jq选择器使用find方法先回收当前ul下的class=yc的样式，因为默认都是都带class=yc，yc的属性是隐藏，所有回收的那个ul下的yc回收后，子菜单就显示出来了。