jQuery11(过滤器的3个练习)

来源：互联网发布：arduino摄像头编程编辑：程序博客网时间：2024/05/20 03:04

过滤器练习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