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

最新推荐文章于 2021-05-20 09:16:55 发布

天赋进行时

最新推荐文章于 2021-05-20 09:16:55 发布

阅读量471

点赞数

分类专栏： JS-Dom-Jquery

本文链接：https://blog.csdn.net/xbc1213/article/details/50639443

版权

JS-Dom-Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

常见的方法

关键字: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

收藏

觉得还不错? 一键收藏
0
评论
jQuery8(常见方法next.prev等,常见方法练习)

常见的方法关键字:nextAll() 语法示例:$('div').nextAll().css('backgroundColor','red'); 意义:层后面的所有的元素关键字:next() 语法实例:$('div').next().css('backgroundColor','red'); 意义:层后面的第一个元素关键字:prev() 语法实例:$('div').prev().css(
复制链接

扫一扫