jQuery8(常见方法next.prev等,常见方法练习)

来源：互联网发布：校园网络系统集成方案编辑：程序博客网时间：2024/06/08 09:26

常见的方法

关键字:nextAll()
语法示例:$('div').nextAll().css('backgroundColor','red');
意义:层后面的所有的元素

关键字:next()
语法实例:$('div').next().css('backgroundColor','red');
意义:层后面的第一个元素

关键字:prev()
语法实例:$('div').prev().css('backgroundColor','red');
意义:层前面的第一个元素

关键字:prevAll()
语法实例:$('div').prevAll().css('backgroundColor','red');
意义:层前面的所有元素

关键字:siblings
翻译:兄弟姐妹
语法实例:$('#p1').siblings().css('backgroundColor','red');
意义:除了该元素的其他兄弟元素

注意:所有的都可以在括号内写上具体的标签等.要小写断链~

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script src="jquery-1.8.3.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $('#btn').click(function () {                //层后面所有的                //$('div').nextAll().css('color', 'blue');                //层后面的第一个                // $('div').next().css('color', 'red');                //层前面的所有的                //$('div').prevAll().css('color', 'blue');                //兄弟元素                $('#p1').siblings('p').css('color', 'blue');            });        });    </script></head><body>    <input type="button" name="name" value="显示效果" id='btn' />    <p id='p1'>        这是p    </p>    <p>        这是p    </p>    <div style='width: 300px; height: 200px; background-color: Green;'>        <p>            这是层里的p</p>        <p>            这是成立的p2        </p>        <p>            这是层里的p3        </p>    </div>    <p>        这是层外的p</p>    <p>        这是曾外的p2    </p>    <p>        这是层外的p3    </p></body></html>

常见方法的练习-球队练习

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script src="jquery-1.8.3.js" type="text/javascript"></script>    <script type="text/javascript">        //题目:页面上有一个UL球队列表当鼠标移动到某个li上的时候改行背景颜色变红,当点击某个li的时候,让该li之前的所有li背景色变黄,之后的所有li背景色变蓝.自己不变色        //        $(function () {        //            $('#l1').mouseover(function () {        //                $('#l1').css('backgroundColor', 'red').mouseout(function () {        //                    $('#l1').css('backgroundColor', '');        //                });        //                $('#l2').click(function () {        //                    $('#l2').prevAll('li').css('backgroundColor', 'yellow');        //                    $('#l2').nextAll('li').css('backgroundColor', 'blue');        //                });        //            });        //        });        //老师的方法        $(function () {            $('#uu li').mouseover(function () {                $(this).css('backgroundColor', 'red');            }).click(function () {                // $('#l2').prevAll('li').css('backgroundColor', 'yellow');                // $('#l2').nextAll('li').css('backgroundColor', 'blue');                //第二种高端方法                //在这里使用end() 修复断练                $(this).prevAll('li').css('backgroundColor', 'yellow').end().nextAll('li').css('backgroundColor', 'blue');                $(this).css('backgroundColor', '');            });        });         </script></head><body>    <ul id='uu'>        <li id='l1'>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li id='l2'>5</li>        <li>6</li>        <li>7</li>        <li>8</li>        <li>9</li>    </ul></body></html>

知识点:该实例中使用prevAll方法使用后,造成断链.使用end()修复断链. 且,代码中this出现频率较高.推荐使用this降低代码量

0 0