jQuery练习-用jQuery选择器实现播放器按钮

作者: 讲武德的年轻人 | 来源:发表于2019-12-14 15:11 被阅读0次

jQuery练习-用jQuery选择器实现播放器按钮
JQUERY一
jQuser有选择器
jquery选择器书目录
选择器
jQuery 基础
jQuery
jQuery选择器
jQuery选择器
Jquery

<!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>
    <script src="js/jquery-1.12.4.js"></script>
    <style type="text/css">
        #controlGroup{
            list-style: none;
        }
        #controlGroup li{
            float: left;
            display: inline-block;
            width: 30px;
            height:30px;
            border:3px solid #000;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <ul id="controlGroup">
        <li>&lt;&lt;</li>
        <li>&gt;</li>
        <li>□</li>
        <li>&gt;&gt;</li>
    </ul>
    <script type="text/javascript">
        $(function(){
            // 第一个li的左上和左下设定为圆角
            // （四个边的方向顺序：上右下左）
            // （四角：四边的坐标向左偏移45度，顺序：左上 右上 右下 左下）
            $('#controlGroup>li:first').css('border-radius','6px 0 0 6px');
            // 最后一个的li右上和右下设定为圆角
            $('#controlGroup>li:last').css('border-radius','0 6px 6px 0');
            // 调整重合边框的宽度（把除最后一个li的右边框去掉，即宽度为0）
            // $('#controlGroup>li:not(:last-child)').css('border-right','0');
            // $('#controlGroup>li:not(:last)').css('border-right','0');
            $('#controlGroup>li:lt(3)').css('border-right','0');

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

结果展示：