• jQuery基本选择器


    <!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>
        <style type="text/css">
            .imgclass
            {
                200px;
                height: 200px;
            }
            .imgclass1
            {
                210px;
                height: 210px;
            }
            table tr td
            {
                300px;
                height: 300px;
            }
        </style>
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('#Button1').click(function () {
                    //获取的是所有类型(tagname)为img的元素
                    //$('img').hide(3000);
                    //$('img').show(3000);

                    //获取的是所有class属性的值为“imgclass”的元素
                    //$('.imgclass').hide(3000);
                    //$('.imgclass').show(3000);

                    //获取文档中的所有元素
                    //$('*').hide(2000);
                    //$('*').css('background-color', 'Blue');

                    //$('#img1,#img3,#Button2').hide(2000);
                    //$("#img1,#img3,#Button2").show(2000);//一定是将所有id用一对''括起来,而不能每个id分别用引号括起来

                    //多个选择器既可以是id,也可以是id,tagname和classname的混合体
                    //$('#img1,#img3,input').hide(2000);
                    //$("#img1,#img3,input").show(2000);
                })
                //改变图片样式
                $('#Button2').click(function () {
                    $('#img2').removeClass();
                    $('#img2').addClass('imgclass1');
                })
            })
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <img id="img1" src="images/1.jpg" class="imgclass" />
                </td>
                <td>
                    <img id="img2" src="images/2.jpg" class="imgclass" />
                </td>
            </tr>
            <tr>
                <td>
                    <img id="img3" src="images/3.jpg" class="imgclass" />
                </td>
                <td>
                    <img id="img4" src="images/4.jpg" class="imgclass" />
                </td>
            </tr>
        </table>
        <input id="Button1" type="button" value="玩儿" /><br />
        <input id="Button2" type="button" value="改变控件样式" /><br />
    </body>
    </html>

  • 相关阅读:
    2019.9.25 初级数据结构——树状数组
    2019.9.29 陪审团
    2019.9.27 硬币
    0070-星星阵
    0069-简单的回文数问题
    0068-简单的求和问题
    0067-水仙花数
    0066-若干个数求和问题
    0065-数方块
    0064-简单的平方和
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3027033.html
Copyright © 2020-2023  润新知