课后练习-jQuery选择器

原创 2019-03-01 08:44:15 309
摘要:<!DOCMENT TYPE> <head>     <title>课后练习-jQuery选择器</title>     <style type="text/css"> .clear{clear:both;}  
<!DOCMENT TYPE>
<head>
    <title>课后练习-jQuery选择器</title>
    <style type="text/css">
.clear{clear:both;}
        li{list-style:none;}
        li{width: 100px;height: 40px;line-height:40px;float:left;}
form{width:600px;margin:0 auto;border:1px solid #333;margin-top:20px;}
    </style>
    <script src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('li:first').css('color', '#f00');
            $('li:eq(12)').css('color', '#e50');
            $('li:odd').css('backgroundColor', '#eee');
            $('li:contains(成都)').css('fontSize', '20px');
            $('li:gt(17)').css('width', '200px');
            $('li:has(i)').css('fontWeight', '700');
            $('li:empty').css('background', '#ff0');
$('input,textarea,select').css('display', 'block');
$('input[type=text],input[type=password]').css('width', '200px');
$('input[type=text],input[type=password]').css('margin', '10px');
$('input[type=radio]').css('display', 'inline-block');
$(':selected').css('color', 'red');
        });
    </script>
</head>
<body>
    <div id="area">
        <div id="prov">
            <h3>四川</h3>
            <div class="city">
                <ul>
                    <li>成都</li>
                    <li>自贡</li>
                    <li>攀枝花</li>
                    <li>泸州</li>
                    <li>德阳</li>
                    <li>绵阳</li>
                    <li>广元</li>
                    <li>遂宁</li>
                    <li>内江</li>
                    <li>乐山</li>
                    <li><i>南充</i></li>
                    <li>眉山</li>
                    <li>宜宾</li>
                    <li>广安</li>
                    <li>达州</li>
                    <li>雅安</li>
                    <li>巴中</li>
                    <li>资阳</li>
                    <li>阿坝藏族羌族自治州</li>
                    <li>甘孜藏族自治州</li>
                    <li></li>
                    <li>凉山彝族自治州</li>
                </ul>
            </div>
        </div>
    </div>
<div class="clear"></div>
    <form>
        <input type="text" name="user" value="123" />
        <input type="password" name="pass" value="456" />
        <input type="radio" name="sex" value="男" checked="checked" />男
        <input type="radio" name="sex" value="女" />女
        <textarea></textarea>
        <select name="city">
            <option>1</option>
            <option selected>2</option>
            <option>3</option>
        </select>
        <button>提交</button>
    </form>
</body>
</html>


批改老师:韦小宝批改时间:2019-03-01 09:08:29
老师总结:写的很不错 jQuery中的选择器还是比较好理解的 和css中使用的几乎一样

发布手记

热门词条