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>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <title>Hello query!!</title>
    <style type="text/css">
        #Button2
        {
            width: 359px;
        }
        .style2
        {
            width: 32px;
        }
        .style3
        {
            width: 28px;
        }
        .style4
        {
            width: 24px;
        }
    </style>
    <script type="text/javascript">
        var dom = document.getElementById("btnHide");
        jquery = $(dom);
        $("#btnShow").bind("click", function (event) { $("#divMsg").show(); });
        jquery.bind("click", function (event) { $("#divMsg").hide(); });
        $("#btnChange").bind("click", function (envent) { $("#divMsg").html("Hello World, too!"); });
        $("#Button3").click(function () { $("#divParent+input").css("background", "blue"); }); //下面的按钮可以控制上面的以下所有的按钮
        $("#alterColor").click(function () { $("#Button3~[id]").css("background", "red"); });
        $("#alterTableColor").click(function () { $(".tab tr:first td").css("background", "green"); });
        $("#testBT").click(function () { $("body input:odd").css("background", "red"); });
        $("#testCK").click(function () { $("input:checked").css("background", "red"); });
        $("#testCf").click(function () { $("div:contains('aa')").css("background", "red"); });
        $("#testCF").click(function () { $("td:parent").css("background", "red"); });

        $("#testAF").click(function () { $("div[id]").css("background", "red"); });
        $("#testAF1").click(function () { $("div[id='aadiv22']").css("background", "#EDE"); });
        $("#testAF2").click(function () { $("div[id='aadiv22']").css("background", "#EAE"); });
        $("#testAF3").click(function () { $("input[name$='bb']").css("background", "#EHE"); });
        $("#testAF4").click(function () { $("div[id$='11']").css("background", "#EUE"); });
    </script>
</head>
<body>
    <div id="divMsg">Hello world!</div>
    <input type="button" id="btnShow" value="显示" />
    <div id="divParent"><div id="divChild">ddddd</div><div id="div1">ddddd</div><input type="button" id="btnHide" value="隐藏" /></div>
    <input type="button" id="btnChange"  value="修改后的结果为hello world,too!" />
    <input type="button" id="alterColor"  value="改变红色颜色"/>
    <input type="button" id="Button3" value="改变为蓝色"/>
    <input type="button" id="alterTableColor" title="13" value="改变表格的颜色"/>
    <input type="button" id="testBT" value="测试基本过滤器"/>
    <input type="checkbox" id="ck" value="是"  checked="checked"/>
    <input type="button" id="testCK" value="测试ck" />
    <input type="button" id="Button2" title="13"  value="dddd"/>
    <table class="tab">
        <tr>
            <td class="style2">
                &nbsp;</td>
            <td class="style3">
                &nbsp;</td>
            <td class="style4">
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td class="style2">
                &nbsp;</td>
            <td class="style3">
               </td>
            <td class="style4">
                </td>
            <td>
                <div>djjjjjjjj</div></td>
        </tr>
        <tr>
            <td class="style2">
                &nbsp;</td>
            <td class="style3">
                &nbsp;</td>
            <td class="style4">
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td class="style2">
                &nbsp;</td>
            <td class="style3">
                &nbsp;</td>
            <td class="style4">
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
    </table>
    <div id="CF">aa内容过滤器的测试</div>
    <input id="testCf" type="button" value="内容过滤器测试"/>
    <input id="testCF" type="button" value="内容过滤器测试2"/>
    <div id="aadiv11">
        <div>dddddddddd
            <div>ddddddddd</div>
            <div>ddddddddd</div>
        </div>
    </div>
    <div  id="aadiv22">gfffffffffff
        <div>ddddddd
            <div>ddddddddd</div>
            <div>ddddd</div>
        </div>
    </div>
    <div  id="bbdiv22" class="divclass">gfffffffffff
    <div>ddddddd
        <div>ddddddddd</div>
        <div>ddddd</div>
    </div>
    </div>
    <input id="testAF" type="button" value="属性过滤器测试含有id的变色"/>
    <input id="testAF1" type="button" value="属性过滤器测试1id为aadiv22的变色"/>
    <input id="testAF2" type="button" value="属性过滤器测试2id不为aa的变色"/>
    <input id="testAF3" type="button" value="属性过滤器测试3含有以name结尾的input变色"/>
    <input id="testAF4" type="button" value="属性过滤器测试4"/>
    <input id="testAF5" type="button" value="属性过滤器测试5选择所有含有id为div的变色"/>
    <input id="testAF6" value="属性过滤器测试5选择所有含有id为div的变色" type="button"/>
    <input id="testButton" value="表单选择器" type="button"/>        
</body>
</html>
    <script type="text/javascript">
        var dom = document.getElementById("btnHide");
        jquery = $(dom);
        $("#btnShow").bind("click", function (event) { $("#divMsg").show(); });
        jquery.bind("click", function (event) { $("#divMsg").hide(); });
        $("#btnChange").bind("click", function (envent) { $("#divMsg").html("Hello World, too!"); });
        $("#Button3").click(function () { $("#divParent+input").css("background", "blue"); }); //下面的按钮可以控制上面的以下所有的按钮
        $("#alterColor").click(function () { $("#Button3~[id]").css("background", "red"); });
        $("#alterTableColor").click(function () { $(".tab tr:first td").css("background", "green"); });
        $("#testBT").click(function () { $("body input:odd").css("background", "red"); });
        $("#testCK").click(function () { $("input:checked").css("background", "red"); });
        $("#testCf").click(function () { $("div:contains('aa')").css("background", "red"); });
        $("#testCF").click(function () { $("td:parent").css("background", "red"); });

        $("#testAF").click(function () { $("div[id]").css("background", "red"); });
        $("#testAF1").click(function () { $("div[id='aadiv22']").css("background", "#EDE"); });
        $("#testAF2").click(function () { $("div[id!='aa']").css("background", "#EAE"); });
        $("#testAF3").click(function () { $("div[id^='aa']").css("background", "#aaaddd"); });
        $("#testAF4").click(function () { $("div[id$='22']").css("background", "#aaa111"); });
        $("#testAF5").click(function () { $("div[id*='div']").css("background", "#aaa111"); });
        $("#testAF6").click(function () { $("div[class][id^='bb']").css("background", "#aaa111"); });
        $("#testButton").click(function () { $("input").css("background", "red"); });
    </script>

posted @ 2012-02-26 23:24  haiziguo  阅读(239)  评论(0编辑  收藏  举报