jQuery11(过滤器的3个练习)

最新推荐文章于 2021-09-20 11:39:53 发布

天赋进行时

最新推荐文章于 2021-09-20 11:39:53 发布

阅读量405

点赞数

分类专栏： JS-Dom-Jquery

本文链接：https://blog.csdn.net/xbc1213/article/details/50639662

版权

JS-Dom-Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

过滤器练习1

题目:点击按钮变色,改变字体大小.

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //因为采用链式编程,可以直接在后面继续点 .last
                $('table tr:first').css('fontSize', '30px');
                $('table tr:last').css('color', 'red');
                $('table tr:gt(0):lt(3)').css('fontSize', '28px');
                //在这里fontSize 是大写的,需要注意
                //table中th标签中的字体居中加粗
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="改变" id='btn' />
    <table border="1px">
        <tr>
            <td>
                姓名
            </td>
            <td>
                成绩
            </td>
        </tr>
        <tr>
            <td>
                tom
            </td>
            <td>
                100
            </td>
        </tr>
        <tr>
            <td>
                jim
            </td>
            <td>
                99
            </td>
        </tr>
        <tr>
            <td>
                john
            </td>
            <td>
                98
            </td>
        </tr>
        <tr>
            <td>
                jason
            </td>
            <td>
                97
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                97
            </td>
        </tr>
        <tr>
            <td>
                平均分
            </td>
            <td>
                98
            </td>
        </tr>
    </table>
</body>
</html>

知识点:table中th标签中的字体居中并且加粗.fontSize中s为大写,注意.

过滤器练习2

题目:前三名粗体
实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('ul li:lt(3)').css('fontWeight', 'bolder');
        });
    </script>
</head>
<body>
    <p id='p1'>
        前三名变成粗体</p>
    <ul>
        <li>乔峰</li>
        <li>郭晶</li>
        <li>卡西</li>
        <li>梅西</li>
        <li>喜洋洋</li>
        <li>熊大</li>
        <li>西瓜</li>
    </ul>
</body>
</html>

知识点:改变字体粗细:fontWeight 粗体:bolder.

过滤器练习3

题目:点谁谁变黄
实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#tb tr').click(function () {
                //注意,这里链式编程 sibling('标签').css
                $(this).css('backgroundColor', 'yellow').siblings('tr').css('backgroundColor', '');
            });
        });
    </script>
</head>
<body>
    <table id='tb' border="1">
        <tr>
            <td>
                芙蓉姐姐
            </td>
            <td>
                凤姐
            </td>
        </tr>
        <tr>
            <td>
                芙蓉姐姐
            </td>
            <td>
                凤姐
            </td>
        </tr>
        <tr>
            <td>
                芙蓉姐姐
            </td>
            <td>
                凤姐
            </td>
        </tr>
        <tr>
            <td>
                芙蓉姐姐
            </td>
            <td>
                凤姐
            </td>
        </tr>
        <tr>
            <td>
                芙蓉姐姐
            </td>
            <td>
                凤姐
            </td>
        </tr>
    </table>
</body>
</html>

知识点:siblings括号内可以写元素.除了点击的tr不改变,其他的tr都恢复默认颜色

天赋进行时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery11(过滤器的3个练习)

过滤器练习1题目:点击按钮变色,改变字体大小.实例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
复制链接

扫一扫

专栏目录