① $(this).next()；        获取的是当前元素的下一个兄弟元素

②$(this).nextAll();       获取的是当前元素的后面的所有的兄弟元素

③$(this).prev();           获取的是当前元素的前一个兄弟元素

④$(this).prevAll();       获取的是当前元素的前面的所有的兄弟元素

⑤$(this).siblings();      获取的是当前元素的所有的兄弟元素(自己除外)

案例练习：

需求分析：鼠标进入文字，当前文字背景变红色，当点击时候，当前文字前面文字背景颜色变为黄色，后面文字背景颜色变为蓝色，当鼠标移出时，所有背景颜色取消

效果：

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         ul {

             list-style-type: none;

             width: 200px;

             margin: 100px auto;

         }

         ul li {

             margin-top: 10px;

             cursor: pointer;

             text-align: center;

             font-size: 20px;

         }

     </style>

     <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

     <script>

         //获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件

 //         $(function () {

 //             //获取ul->li

 //             $("ul>li").mouseenter(function () {

 //                 $(this).css("backgroundColor","red").siblings().css("backgroundColor","");

 //             }).mouseleave(function () {

 //                 $(this).css("backgroundColor","").siblings().css("backgroundColor","");

 //             }).click(function () {

 //                 //当前元素前面的所有兄弟元素背景颜色为黄色

 //                 //$(this).prevAll().css("backgroundColor","yellow");

 //                 //当前元素后面的所有兄弟元素背景颜色为蓝色

 //                 //$(this).nextAll().css("backgroundColor","blue");

 //

 //                 //链式编程代码

 //                 //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,

 //                 //解决断链--->恢复到断链之前的一个效果--修复断链

 //                 //.end()方法恢复到断链之前的效果

 //                 $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");

 //             });

 //         });

             $(function(){

                 //链式编程  鼠标进入--鼠标点击--鼠标移出

                 //$("ul>li").mouseover().click().mouseout();

                 $("ul>li").mouseover(function(){

                     $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");

                 }).click(function(){

                     $(this).prevAll().css("backgroundColor","yellow");

                     $(this).nextAll().css("backgroundColor","blue");

                 }).mouseout(function(){

                     $("ul>li").css("backgroundColor","");

                 });

             });

     </script>

 </head>

 <body>

 <ul>

     <li>青岛啤酒（TsingTao）</li>

     <li>瓦伦丁（Wurenbacher）</li>

     <li>雪花（SNOW）</li>

     <li>奥丁格教士（Franziskaner）</li>

     <li>科罗娜喜力柏龙（Paulaner）</li>

     <li>嘉士伯Kaiserdom</li>

     <li>罗斯福（Rochefort）</li>

     <li>粉象（Delirium）</li>

     <li>爱士堡（Eichbaum）</li>

     <li>哈尔滨牌蓝带</li>

 </ul>

 </body>

 </html>

注意： 上述代码第49、50行可以压缩成一行，这样就引入了一个新的方法

end()；作用是恢复短链。

原来两行代码：

$(this).prevAll().css("backgroundColor","yellow");

$(this).nextAll().css("backgroundColor","blue");

修改后代码：

$(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");

jQuery----获取兄弟元素的方法的更多相关文章

  1. jquery获取兄弟元素

    按照w3c school的指引,jquery中,要获得一个元素的兄弟,可以用 prev().next()两种方法.顾名思义,prev()获得前一个,next()获得后面一个. 问题是,如果存在前后兄弟 ...

  2. JQuery获取Dom元素的方法

    (function (window) { var arr = []; var VP = function (selector, context) { return new VP.fn.init(sel ...

  3. jquery获取子元素

    Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...

  4. JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法

    $(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; ; i & ...

  5. 使用jquery获取父元素或父节点的方法

    今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...

  6. jquery获取父元素或父节点的方法

    jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子: <ul class=" ...

  7. jquery获取当前元素的坐标

    jquery获取当前元素的坐标 1,获取对象 var obj = $("#id号"); 或  var obj = $(this); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗 ...

  8. jquery获取html元素的绝对位置和相对位置

    jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法:绝对位置坐标:$("#elem").offset().top$("#elem").offs ...

  9. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  10. 使用jquery获取父元素或父节点

    使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点   jquery获取父元素方法比较多,比如parent(),parents(),c ...

随机推荐

  1. 非J2EE部署解决方案

     根据交银施罗德真实环境已测试通过,此过程可以作为非J2EE部署的典型案例,主要是针对某些对安全性要求较高的解决方案: 基本的实现原理和部分代码如下: 1.客户端访问交银.net系统,由该系统发送 ...

  2. 润乾报表与DERBY数据库的创建连接详解

     1. 问题概述 1.Derby数据库的创建过程 2.润乾报表连接Derby数据库展现数据 概述: Derby是Apache Software Foundation (ASF)的一个的孵化器项目. ...

  3. 前端模块化方案全解(CommonJS/AMD/CMD/ES6)

    模块化的开发方式可以提高代码复用率,方便进行代码的管理.通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块 ...

  4. linux 用户管理修改用户信息、密码状态、删除用户、退出登陆、切换用户

    修改用户信息usermoduseradd支持的选项usermod都支持passwd有两个选项-l(在密码串前面加了两个叹号),-u,usermod有两个选项:-L 临时锁定用户(Lock)(在密码串前 ...

  5. oracle profile 概要文件

    Profile文件概述: Profile是Oracle安全策略的一个组成部分,当Oracle建立数据库时,会自动建立名称为Default的Profile文件. 创建用户的时候,如果没有指定profil ...

  6. responsebody和requestbody的使用

    Controller的方法上加了一个@ResponseBody,那么他的作用是什么呢?/** * 新增或修改一条对象. */ @RequestMapping("/save_field&quo ...

  7. 传递命令行参数示例代码 (C 和 Python)

    C语言 在 C 语言中, 使用 main 函数的输入参数 argc 和 argv 传入命令行参数. argc 为 int 类型, 表示传入命令行参数的个数 (argument count); argv ...

  8. oracle 闪回功能详解

    Oracle的闪回技术提供了一组功能,可以访问过去某一时间的数据并从人为错误中恢复.闪回技术是Oracle 数据库独有的,支持任何级别的恢复,包括行.事务.表和数据库范围.使用闪回特性,您可以查询以前 ...

  9. [WinCE] Win CE 屏幕截图

    VS2005自带了这个工具,这个工具的名称为:“远程放大”,其路径为:"C:\Program Files\CE Remote Tools\5.01\bin\cczoom.exe" ...

  10. UITableView中cell里的UITextField不被弹出键盘挡住

    UITableView中cell里的UITextField不被弹出键盘挡住 本人视频教程系类   iOS中CALayer的使用 效果如下: 源码: EditCell.h 与 EditCell.m // ...