jQuery学习-基本选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>基本选择器</title>
        <script src="js/jquery.js"></script>
            <style>
             .astyle{
                 font-size: 28px;
                 color: red;
             }
             .bstyle{
                 font-size: 40px;
                 color: orangered;
                 text-decoration: none;
             }
        </style>
        <script type="text/javascript">
            $(function(){
                
                //页面加载完成执行里面的函数
                //所有元素选择器
                //$("*").css("border","1px solid red");
                //类选择器
                //$(".astyle").css("border","1px solid red");
                //元素选择器
                //$("div").css("border","1px solid red");
                //id选择器
                $("#li3").css("border","1px solid red");
                //组合选择器 方法 $("selector1","selector2",.......)
                $("#li4","#a7",".astyle").css("border", "1px solid red");
            });
        </script>
    </head>
    <body>
        <div>
            <li><a herf="#">超链接1</a></li>
                <li><a herf="#">超链接2</a></li>
                    <li id="li3"><a herf="#">超链接3</a></li>
                        <li id ="li4"><a herf="#" class="astyle">超链接4</a></li>
                            <li><a herf="#">超链接5</a></li>
                                <li><a herf="#">超链接6</a></li>
                                    <li><a id="a7" herf="#" class="bstyle">超链接7</a></li>
        </div>
    </body>
</html>

 

posted @ 2016-11-14 17:40  whzym111  阅读(211)  评论(0编辑  收藏  举报