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

时间: 2024-12-28 01:26:12

Jquery中next和children的区别的相关文章

jQuery中contents()与children()的区别

1.基本概念 首先呢,这两个方法是有区别的. ontents() 方法返回所有直接子元素,包括被选元素的文本和注释节点. 文本节点是由元素显示的实际文本. 该方法与 children() 方法类似,不同的是它返回的是文本和注释节点.如果在相同的域中,contents() 方法也能访问 iframe 的 HTML children() .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. 因此呢

jquery中attr和prop的区别分析

 这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下     在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了.

jQuery中serializeArray()与serialize()的区别实例分析_jquery

本文实例讲述了jQuery中serializeArray()与serialize()的区别.分享给大家供大家参考,具体如下: serialize()序列化表单元素为字符串,用于 Ajax 请求. serializeArray()序列化表单元素为JSON数据. 具体实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

jQuery中parents()和parent()的区别分析_jquery

本文实例分析了jQuery中parents()和parent()的区别,分享给大家供大家参考.具体分析如下: 其实在jQuery中,函数或者选择器的概念都是很容易理解的,只要对API手册有足够的熟练就能够很容易分辨,标题中的函数其实也是如此,不过咱们这里还是做一些简单的介绍,毕竟这样可能更为方便一些. 一.parents()函数: 此函数能够获取匹配元素的所有父元素,代码示例: 复制代码 代码如下: $(".mayi").parents().css("color",

ajax的异步请求-Jquery中$.post和$.ajax的区别在哪里呢

问题描述 Jquery中$.post和$.ajax的区别在哪里呢 一直搞不懂这两种请求到底区别在哪呢,求大神指教,两种我接收数据的时候都是用的eval去解析的. 解决方案 $.post就是post请求,$.ajax可以通过配置type为get/post(及其他可用的http方法,如get,delete)指定提交方法,返回数据jquery一般会通过响应头来判断类型自动生成对应的数据,如响应头为application/json会自动转为json对象,其他当做text/html处理 $.post最终使

实例讲解jquery中mouseleave和mouseout的区别_jquery

本文详细的介绍了关于jQuery中mouseleave和mouseout的区别,分享给大家供大家参考,具体内容如下 很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p>先看下使用mouseout的效果:</p> <div id="container" style="width: 300px;">

Jquery中offset()和position()的区别分析_jquery

本文实例分析了Jquery中offset()和position()的区别.分享给大家供大家参考.具体分析如下: 一.Jquery中offset() 获取匹配元素在当前视口的相对偏移. 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效.   例如: <!DOCTYPE html> <html> <head> <style> p { margin-left

浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别_jquery

hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样? 很多朋友在学习jQuery的时候 会遇到这个问题 ,hide和 fadeOut都可以带有参数: $(selector).hide(speed,callback); $(selector).fadeOut(speed,callback); 首先我们从名字上就可以看出 hide是隐藏而fadeOut是淡出,当然名字不能看出具体的区别,只能体现他们是不同的而已.但是当我们把参数 speed 设置稍微长一些就可以看出

jQuery中closest和parents的区别分析

  本文给大家介绍jquery中parents()和closest()用法与区别介绍,在jquery中parents()查找父级元素删除的时候,发现它不包含根元素,于是用了closest(),效果不错,下面我来给大家具体的介绍一下 jQuery中closest和parents从表现上来看都是说查找上线元素的一些内容了,但如果说仔细可能各位不懂,下面我们一起来看看closest和parents区别. 1.父级 parent()--唯一父级元素,可能是0个或1个元素. 2.祖先 parents(se