jQuery 标签选择器练习评分空间和li控制

最新推荐文章于 2023-09-11 17:31:39 发布

BowenXu11

最新推荐文章于 2023-09-11 17:31:39 发布

阅读量96

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/BowenXu11/article/details/105580821

版权

Jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

练习一

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        td {
        font-size:50px;
        color:green;
        cursor:pointer;
        font-family:SimHei;
        }
    </style>
    <script src="js/jquery-3.5.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $('td').mouseover(function () {
                $(this).text('★').css('color', 'red').prevAll('td').text('★').css('color', 'red').end().nextAll('td').text('☆').css('color', '');
            }).mouseout(function () {
                $('td').text('☆').css('color', '');
                $('td[isclicked]').text('★').css('color', 'red').prevAll('td').text('★').css('color', 'red')
            }).click(function () {
                $(this).attr('isclicked', 'isclicked').siblings('td').removeAttr('isclicked');
                alert($(this).attr('score'));
                //$('td').unbind();//锁定，注销所有事件
            }).attr('score', function (index) {//隐式迭代
                return (index + 1) * 10;
            });
        });


    </script>
</head>
<body>
    <table>
        <tr>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
        </tr>
    </table>
</body>
</html>

练习二

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.5.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $('li').mouseover(function () {
                $(this).css('background-color', 'red').siblings('li').css('background-color', '');
            }).click(function () {
                $(this).nextAll('li').css('background-color', 'blue').end().prevAll('li').css('background-color', 'yellow');//end()方法用于修复nextAll和prevAll破坏的链式编程
                $('li').unbind();//注销li标签的所有事件
            });
        });

    </script>

</head>
<body>
    <ul>
        <li>阿森纳</li>
        <li>巴塞罗那</li>
        <li>利物浦</li>
        <li>皇家马德里</li>
        <li>尤文图斯</li>
    </ul>
</body>
</html>

BowenXu11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 标签选择器练习评分空间和li控制

练习一<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style type="text/css">...
复制链接

扫一扫