jQuery之选择器

jQuery简述

　　jQuery是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

　　js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。

　　官网：http://jquery.com/

　　汉化：http://www.css88.com/jqapi-1.9/

基本使用：

js和jquery对象互转
　　js--->jquery
　　　　$(js对象)
　　jquery--->js
　　　　jq对象[0]
　　　　jq对象.get(0)

CSS基本选择器

jQuery 的基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="box">
        <p id="a">大壮</p>
        <p>日</p>
        <p>天</p>
    </div>
    <p>热狗</p>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $('.box>p').css('color','red');
            //近邻下一个兄弟js对象
            console.log($('#a+p'));
        })
    </script>
</body>
</html>

层级选择器

基本过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>大壮</li>
        <li>爆音</li>
        <li>大傻</li>
        <li>糊涂</li>
    </ul>
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
       $('ul li:eq(0)').css('color','red');
       $('ul li:first').css('color','red');
       $('ul li:last').css('color','red');
    })
</script>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <input type="text" name="user" aaa="bbb">
        <input type="password" name="pwd">
        <input type="submit">
    </form>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            console.log($('input[type=text]'));
            console.log($('input[aaa=bbb]'));
        })
    </script>
</body>
</html>

筛选选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="father">
        <p>大壮</p>
        <a href="">日天</a>
        <span>大傻</span>
        <div class="g">
            <span>大泊</span>
        </div>
    </div>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            console.log($('.father').find('.g'));
            $('.g').click(function () {
                // this代表js对象
                console.log(this);
                $(this).css('color', 'red');

            });
            console.log($('.father').find('.g>span'));
            //亲儿子
            $('.father').children('span');
            console.log($('.g span').parent());

            console.log($('.father span').eq(1));

            $('ul li').click(function () {
                $(this).css('color', 'red').siblings('li').css('color', 'black');
            });

        })
    </script>
</body>
</html>