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节点!

目录
相关文章
|
7月前
|
JavaScript 前端开发 API
vue和jQuery有什么区别
vue和jQuery有什么区别
51 0
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
76 0
|
4月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
35 0
|
7月前
|
JavaScript 前端开发 API
js和jquery的区别
js和jquery的区别
62 8
|
7月前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
7月前
|
JavaScript 前端开发
jQuery 和 Zepto 的区别? 各自的使用场景?
jQuery 和 Zepto 的区别? 各自的使用场景?
49 1
|
7月前
|
JavaScript 前端开发 API
JavaScript和jQuery的区别
JavaScript和jQuery的区别
|
7月前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
62 0
|
7月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
92 0
|
JavaScript 前端开发 API
Vue、jquery和angular之间区别
Vue、jquery和angular之间区别
80 2