JavaScript的第十二天-优快云博客

id选择器	通过元素的ID来选择元素
元素选择器	通过元素标签名来选择元素
类名选择器	通过元素的class来选择元素
通配符选择器	通过通配符`*`来选择所有元素
并级选择器(多项选择器)	通过逗号`,`分隔多个选择器

        //id选择器
        $("#box")

        //通配符选择器
        $("*")

        //类名选择器
        $(".nav")

        //元素选择器
        $("li")

        //并集选择器
        $('ol,ul')

2、层级选择器

后代选择器	使用空格分隔两个选择器，选择第一个选择器的后代元素中所有符合第二个选择器的元素
子代选择器	使用`>`分隔两个选择器,选择第一个选择器的复合第二个选择器的直接子代元素

    // 选择ID为'parent'的元素内的所有<p>元素
    $('#parent p') 

    // 选择ID为'parent'的元素的直接子<p>元素
    $('#parent > p')

3、过滤选择器

：first	选取第一个元素
：last	选取最后一个元素
：eq（index）	精准获取元素，index值为元素的索引值（从0开始）
：odd	所有的索引值为奇数的元素
：even	所有的索引值为偶数的元素（包括索引 0 ）

        // :first  选取第一个元素
        $("ul li:first").css("fontSize", "30px")

        // :last  选取最后一个元素
        $("ul li:last").css("fontSize", "30px")

        // :eq(index)  精准获取元素  index值为元素的索引 从0 开始
        $("ul li:eq(3)").css("background", "#0f0")

        // :odd 奇数选择  所有的索引值为奇数的元素
        $("ul li:odd").css("background", "#0f0")

        // :even 偶数选择  所有的索引值为偶数的元素
        $("ul li:even").css("background", "#f00")

四、筛选方法

parent()	返回的是最近一级的父级元素
children()	选择符合的直接子代
siblings()	除了自身元素之外的所有兄弟元素
nextAll()	后面的兄弟元素
prevAll()	前面的兄弟元素
find('')	可以选所有符合的后代
.eq()	类似于索引值查询
hasClass( " " )	判断是否有某个类名

五、jquery的排他思想

通过在在同一父级下自己的修改，并对所有的兄弟元素进行修改即可完成排他思想

        $(function () {
            $("button").click(function () {
                $(this).css("background", "#0f0")
                $(this).siblings().css("background", "")
            })
        })

引申一个链式编程

可以在设置自身后继续设置兄弟元素的属性

        $(function () {
            $("button").click(function () {
                $(this).css("background", "#0f0").siblings().css("background", "")
            })
        })

六、jquery的操作样式之css方式

1、.css()方法写一个值的时候是获取属性值，写两个的时候是设置样式

第一个参数为属性名，第二个参数为属性值，需全部使用引号包裹，并用逗号隔开

        $("div").css("width");
        $("div").css("width", "500px")

2、写多个css属性：

        $("div").css({
            width: "500px",
            height: "500px",
            backgroundColor: "#fff"
        })

七、jquery的操作样式之类（class）的操作

1、jquery中的类操作

jquery中类的操作无法影响原先的类，而js中的方法会覆盖原先的类

addClass()	给选中的元素添加一个或多个类名
removeClass()	从选中的元素中移除一个或多个类名
toggleClass()	在选中的元素上切换一个或多个类名

2、具体使用方法

        $("button").eq(0).click(function () {
            $("div").addClass("current")
        })

        $("button").eq(1).click(function () {
            $("div").removeClass("current")
        })

        $("button").eq(2).click(function () {
            $("div").toggleClass("current")
        })

tab栏切换案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
    <script src="../../jquery.min.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        $("ul li").click(function () {
            $(this).addClass("current").siblings().removeClass("current")
            console.log($(this).index())
            $(".tab_con>div").eq($(this).index()).css("display", "block")
                .siblings().css("display", "none")
        })



    </script>
</body>

</html>

八、jquery的效果

.show()	显示匹配的元素，如果元素已经是可见的，则不会有任何效果。动画完成后会触发`shown`事件。
.hide()	隐藏匹配的元素，如果元素已经是隐藏的，则不会有任何效果。动画完成后会触发`hidden`事件。
.toggle()	切换匹配元素的可见状态。如果元素是可见的，则隐藏它；如果元素是隐藏的，则显示它。
.slideDown()	通过滑动的方式显示匹配的元素，从上到下滑动到可见位置。
.slideUp()	通过滑动的方式隐藏匹配的元素，从可见位置滑出到下方。
.slideToggle()	通过滑动的方式切换匹配元素的可见状态。
.fadeIn()	使匹配的元素淡入，从不透明到透明。
.fadeOut()	使匹配的元素淡出，从透明到不透明。
.fadeToggle()	通过淡入淡出的方式切换匹配元素的可见状态。
.stop()	停止当前正在运行的动画，可以清除动画队列并立即完成当前动画。
.finish()	立即结束所有匹配元素的所有动画，并清除动画队列。

stop（）的几种用法

    // stop()  停止动画
    $(".end").click(function () {
        // 停止当前动画  如果有其它动画开始执行
        // $("#box").stop()

        // 停止所有动画
        // $("#box").stop(true)

        // 立即执行完当前动画  停止其它所有动画
        // $("#box").stop(true, true)
    })

        使用jquery效果可以完成jquer简单动画

                animate({修改的样式},时间,动画效果,回调函数) （color background display 无法实现）

        通过使用上述函数，并引入动画库即可
    $(".start").click(function () {
        $("#box").animate({
            width: '500px'
        }, 1000, "linear", function () {
            console.log(1);
        }).animate({
            height: "600px"
        }, 1000, "easeBothStrong", function () {
            console.log(2);
        }).animate({
            marginTop: "300px"
        }, 1000, "elasticIn", function () {
            console.log(3);
        })
    })