jQuery选择器（重点）

最新推荐文章于 2024-11-14 10:56:19 发布

Eli-sun

最新推荐文章于 2024-11-14 10:56:19 发布

阅读量279

点赞数

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/vfjcgg/article/details/105603080

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

重点记住：parent(),children(),find(),siblings(),eq(),
这张图片的语法里面的prevAll那里字母有一点错误，多了一个 t

栗子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
</head>

<body>
    <div class="grandfather">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>

    <div class="nav">
        <p>你是屁</p>
        <div>
            <p>你是p</p>
        </div>
    </div>
    <script>
        //注意一下都是方法 要带括号
        $(function() {
            //1.父  parent()    返回的是最近一级的父级元素  亲爸爸
            console.log($('.son').parent());

            //2.子
            //(1)只选亲儿子     children()  类似子代选择器      ul>li
            $('.nav').children('p').css('color', 'red')
                //(2)可以选里面所有的孩子，可以是儿子和孙子     find（）    类似于后代选择器
            $('.nav').find('p').css('color', 'red');

            //3.兄
            
        })
    </script>
</body>

</html>

栗子：选出兄弟元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
</head>

<body>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
    </ul>
    <div class="current">俺有current</div>
    <div>俺木有current</div>
    <script>
        //注意一下都是方法 要带括号
        $(function() {
            //1.兄弟元素siblings 除了自身元素之外的所有亲兄弟
            $('ol .item').siblings('li').css('color', 'red')

            //2.第n个元素
            var index = 3;
            //（1）我们可以利用选择器的方式选择
            $('ul li:eq(2)').css('color', 'blue');
            //(2)我们可以利用选择方法的方式选择    更推荐这种方法因为eq里面的数字没有在引号之内这样方便我们可以修改
            $('ul li').eq(index).css('color', 'blue');

            //3.判断是否有某个类名
            // $('div:first').hasClass('current');
            console.log($('div:first').hasClass('current'));
            console.log($('div:last').hasClass('current'));
        })
    </script>
</body>

</html>

栗子：新浪下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="jquery-mini.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
    </ul>

    <script>
        $(function() {
            //鼠标经过
            $('.nav>li').mouseover(function() {
                    //$(this) jquery 当前元素 this不要加引号
                    //show() 显示元素 hide() 隐藏元素
                    $(this).children('ul').show();
                })
                //鼠标离开
            $('.nav>li').mouseout(function() {
                $(this).children('ul').hide();
            })
        })
    </script>
</body>
</html>

jquery里面的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式

栗子：给按钮添加背景颜色，当选中其中一个按钮，当前按钮变色，其他按钮自动清除背景颜色效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
</head>

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            //1.隐式迭代    给所有的按钮绑定了点击事件
            $('button').click(function() {
                //2.当前的元素变化背景颜色
                $(this).css('background', 'pink');
                //3.其余的兄弟去掉背景颜色  隐式迭代
                $(this).siblings('button').css('background', '');
            })
        })
    </script>
</body>

</html>