HTML中JQuery选择器的实例

作者: 阿猫阿狗py | 来源:发表于2018-09-13 17:48 被阅读6次

原型
HTML中JQuery选择器的实例
2018-04-11 jquery 选择器
jQuery选择器
jQuery 选择器
jquery选择器
jQuery 选择器
【47】jQuery选择器总结
jquery从零开始-2.2 结构选择器(一)
jQuery部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <script src="./js/lib/jquery-2.2.4/jquery-2.2.4.min.js"></script>
    <style>
        #img-group div{
            float:left;
            margin: 10px;
        }
        #img-group div img{
            width:200px;
        }
    </style>
</head>
<body>
<button id="btn1">ID选择器</button>
<button id="btn2">CLASS选择器</button>
<button id="btn3">标签选择器</button>
<button id="btn4">子类选择器</button>
<button id="btn5">包含选择器</button>
<button id="btn6">序号选择器</button>
<button id="btn7">群组选择器</button>
<button id="btn8">伪类选择器1</button>
<button id="btn9">伪类选择器2</button>
<button id="btn10">属性选择器1</button>
<button id="btn11">属性选择器2</button>
<button id="btn12">属性选择器3</button>
<div id="container">
    <ul id="list-group">
        <li class="list-group-item"><a href="">导航栏菜单</a></li>
        <li class="list-group-item" id="name"><a href="">导航栏菜单</a></li>
        <li class="list-group-item" id="name1"><a href="">导航栏菜单</a>
        <ul>
            <li><a href="">二级菜单</a></li>
            <li><a href="">二级菜单</a></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></li>
            <li><a href="">二级菜单</a></li>
        </ul>
        <li class="list-group-item"><a href="">导航栏菜单</a></li>
        <li class="list-group-item"><a href="">导航栏菜单</a></li>
        <li class="list-group-item"><a href="">导航栏菜单</a></li>
        <li class="list-group-item"><a href="">导航栏菜单</a></li>
        <li class="list-group-item"><a href="">导航栏菜单</a></li>
    </ul>
    <div id="img-group">
        <div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
        <div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
        <div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
        <div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
        <div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
        <div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
        <div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
        <div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
        <div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
        <div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
    </div>
</div>
<script>
    $(function(){
        $("#btn1").click(function(){
            //id选择器
            $("#list-group").css({"border":"solid 5px red"});
        });

        $("#btn2").click(function(){
            //class选择器
            $(".img-group-item").css({
                "border":"solid 2px #888",
                "border-radius":"5px"
            })
        });

        $("#btn3").click(function () {
            //标签选择器
            $("li").css({"border-bottom":"solid 2px orange"})
        });

        $("#btn4").click(function () {
            //子类选择器
            $("#list-group>li").css({
                "border":"#069 solid 2px",
                "margin-top":"5px",
                "color":"white"
            })
        });

        $("#btn5").click(function () {
            //包含选择器
            $("#list-group li").css({
                "border":"#069 solid 2px",
                "margin-top":"5px",
                "color":"white"
            })
        });

        $("#btn6").click(function () {
            //序号选择器
            $("li:nth-of-type(1)").css({
                "background":'orange',
                "margin-top":'5px',
                "color":'white'
            })
        });

        $("#btn7").click(function () {
            //群组选择器
            $("#list-group,#img-group").css({
                "border":"dashed 2px red",
                "margin-top":"5px"
            })
        });

        $('#btn8').click(function(){
            //伪类选择器
            $("#list-group>li:first").css({
                "border": "#069 solid 2px",
                "margin-top": "5px",
                "color": "white"
            })
        });

        $('#btn9').click(function(){
            //属性包含选择器
            $("#list-group>li[id]").css({
                "border": "#069 solid 2px",
                "margin-top": "5px",
                "color": "white"
            })
        });

        $('#btn10').click(function(){
            //属性指定选择器
            $("#list-group>li[id='name']").css({
                "border": "#069 solid 2px",
                "margin-top": "5px",
                "color": "white"
            })
        });

        $('#btn11').click(function(){
            //属性正则选择器
            $("#list-group>li[id^='name']").css({
                "border": "#069 solid 2px",
                "margin-top": "5px",
                "color": "white"
            })
        })
    })
</script>

</body>
</html>