Jquery中next和children的区别

简介:

next找的是同级的节点,children找的是子节点

 

<div>
        <ul>
           <li class="first"><a href="#">这是一级菜单1</a>
               <ul>
                    <li class="second"><a href="#">这是二级菜单11</a></li>
                    <li class="second"><a href="#">这是二级菜单12</a></li>
               </ul>
            </li>
           <li class="first"><a href="#">这是一级菜单2</a>
                <ul>
                    <li class="second"><a href="#">这是二级菜单21</a></li>
                    <li class="second"><a href="#">这是二级菜单22</a></li>
               </ul>
            </li>
        </ul>
    </div>

 

 

jquery代码如下

$(document).ready(function(){
    $("li.first").hover(function(){
        $(this).children("ul").slideDown();   找到的是如图表示标黑的ul节点
    },
    function(){
        $(this).children("ul").slideUp();
    });
});

 

 

如果改成$(this).next("ul"),则找不到,因为没有和它同一级的ul节点!

目录
相关文章
|
8月前
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
45 0
|
21天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
14 0
|
1月前
|
JavaScript 前端开发
jQuery 和 Zepto 的区别? 各自的使用场景?
jQuery 和 Zepto 的区别? 各自的使用场景?
10 1
|
4月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
42 0
|
4月前
|
JavaScript 前端开发
|
5月前
|
JavaScript 前端开发 开发者
vue和jQuery有什么区别
vue和jQuery有什么区别
80 0
|
5月前
|
JavaScript 前端开发 API
Vue、jquery和angular之间区别
Vue、jquery和angular之间区别
38 2
|
5月前
|
JavaScript
jQuery学习(四)— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)— jQuery的ready事件和原生JS的load事件的区别
|
5月前
|
JavaScript
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
|
6月前
|
JavaScript
jQuery的empty、remove、detach区别
jQuery的empty、remove、detach区别